1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},s=(new e.Error).stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="732837dd-b360-4baa-a146-51125642bd11",e._sentryDebugIdIdentifier="sentry-dbid-732837dd-b360-4baa-a146-51125642bd11")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3748],{20413:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styleguide/menu-compact-primary-actions",function(){return t(61154)}])},17171:function(e,s,t){"use strict";t.d(s,{Z:function(){return o}});var r=t(85893),n=t(67294),a=t(41664),l=t.n(a),i=t(17627);function o(e){let{title:s,description:t,filePath:a,bgClass:o,showEditor:d=!1,defaultData:c,linkTo:x,children:u}=e,[m,g]=(0,n.useState)(c?JSON.stringify(c,null,2):""),[h,b]=(0,n.useState)(c),[y,p]=(0,n.useState)(null);return(0,n.useEffect)(()=>{if(d&&m)try{let e=JSON.parse(m);b(e),p(null)}catch(e){p(e.message)}},[m,d]),(0,r.jsxs)("div",{className:"mb-6",children:[(0,r.jsxs)("div",{className:"mb-3 flex items-start justify-between",children:[(0,r.jsxs)("div",{className:"min-w-0",children:[(0,r.jsx)("h3",{className:"text-lg font-semibold text-gray-900",children:s}),t&&(0,r.jsx)("p",{className:"mt-0.5 text-sm text-gray-500",children:t}),a&&(0,r.jsx)("code",{className:"mt-1 block font-mono text-xs break-all text-gray-400",children:a})]}),x&&(0,r.jsxs)(l(),{href:x,className:"flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200",children:["View details",(0,r.jsx)("svg",{className:"h-3 w-3",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,r.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})]})]}),(0,r.jsxs)("div",{className:"rounded-lg border border-gray-300 shadow-lg",children:[(0,r.jsx)("div",{className:"rounded-t-lg bg-gray-800 px-3 py-2 text-xs text-gray-300",children:"Preview"}),(0,r.jsx)("div",{className:"relative min-h-[100px] ".concat(o||""),children:u(d?h:void 0)})]}),d&&c&&(0,r.jsx)(i.Z,{data:h,defaultData:c,onChange:(e,s)=>{b(e),g(s)},error:y})]})}},17627:function(e,s,t){"use strict";t.d(s,{Z:function(){return l}});var r=t(85893),n=t(67294),a=t(13464);function l(e){let{data:s,defaultData:t,onChange:l,error:i}=e,[o,d]=(0,n.useState)("tree"),[c,x]=(0,n.useState)(1),[u,m]=(0,n.useState)(s?JSON.stringify(s,null,2):JSON.stringify(t,null,2)),[g,h]=(0,n.useState)(null),b=(0,n.useRef)(JSON.parse(JSON.stringify(s||t)));(0,n.useEffect)(()=>{s&&(m(JSON.stringify(s,null,2)),b.current=JSON.parse(JSON.stringify(s)))},[s]);let y=e=>{m(e);try{let s=JSON.parse(e);h(null),b.current=JSON.parse(JSON.stringify(s)),l(s,e)}catch(e){h(e.message)}},p=()=>{let e=JSON.stringify(t,null,2);m(e),h(null),b.current=JSON.parse(JSON.stringify(t)),l(t,e)},f=i||g;return(0,r.jsxs)("div",{className:"mt-4 rounded-lg border border-gray-200 bg-white",children:[(0,r.jsxs)("div",{className:"grid gap-3 border-b border-gray-200 px-4 py-3 sm:flex sm:items-center sm:justify-between",children:[(0,r.jsx)("h4",{className:"text-sm font-medium text-gray-700",children:"Component Data"}),(0,r.jsxs)("div",{className:"flex flex-wrap items-center gap-2 sm:gap-4",children:[(0,r.jsxs)("div",{className:"flex rounded-md border border-gray-300 text-xs",children:[(0,r.jsx)("button",{onClick:()=>d("tree"),className:"px-3 py-1.5 transition-colors ".concat("tree"===o?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-l-md"),children:"Tree"}),(0,r.jsx)("button",{onClick:()=>d("raw"),className:"px-3 py-1.5 transition-colors ".concat("raw"===o?"bg-gray-800 text-white":"bg-white text-gray-600 hover:bg-gray-50"," rounded-r-md border-l border-gray-300"),children:"Edit"})]}),"tree"===o?(0,r.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,r.jsx)("button",{onClick:()=>x(!1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Expand All"}),(0,r.jsx)("button",{onClick:()=>x(1),className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Collapse All"}),(0,r.jsx)("button",{onClick:p,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"})]}):(0,r.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,r.jsx)("button",{onClick:p,className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Reset"}),(0,r.jsx)("button",{onClick:()=>{try{let e=JSON.parse(u),s=JSON.stringify(e,null,2);m(s),h(null)}catch(e){}},className:"rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 hover:bg-gray-200",children:"Format"})]})]})]}),f&&(0,r.jsx)("div",{className:"border-b border-red-200 bg-red-50 px-4 py-2 text-sm text-red-600",children:f}),(0,r.jsx)("div",{className:"p-4",children:"tree"===o?(0,r.jsx)("div",{className:"max-h-96 overflow-auto rounded bg-gray-50 p-3",children:(0,r.jsx)(a.Z,{value:b.current,collapsed:c,displayDataTypes:!1,onEdit:e=>(setTimeout(()=>{let e=JSON.stringify(b.current,null,2);m(e),l(JSON.parse(JSON.stringify(b.current)),e)},0),!0),style:{backgroundColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontSize:"12px"}})}):(0,r.jsx)("textarea",{value:u,onChange:e=>y(e.target.value),className:"h-64 w-full rounded border p-3 font-mono text-xs ".concat(f?"border-red-300 focus:border-red-500 focus:ring-red-500":"border-gray-300 focus:border-blue-500 focus:ring-blue-500"," focus:outline-none focus:ring-1"),spellCheck:!1})})]})}},61154:function(e,s,t){"use strict";t.r(s),t.d(s,{default:function(){return o}});
1var r=t(85893),n=t(1340),a=t(17171),l=t(86887);let i={items:[{id:"1",label:"Apply",url:"/apply"},{id:"2",label:"Visit",url:"/visit"},{id:"3",label:"Give",url:"/give"}]};function o(){return(0,r.jsxs)(n.ZP,{children:[(0,r.jsxs)("div",{className:"mb-8 max-w-3xl",children:[(0,r.jsx)("h1",{className:"mb-2 text-2xl font-bold",children:"MenuCompactPrimaryActions"}),(0,r.jsx)("p",{className:"text-gray-600",children:"Mobile CTA buttons with chartreuse styling. The first button uses a filled chartreuse background, while subsequent buttons use a transparent style with chartreuse text."})]}),(0,r.jsx)(a.Z,{title:"Mobile CTA Buttons",description:"Call-to-action buttons for the mobile menu (Apply, Visit, Give)",filePath:"components/ui/next/Menu/Compact/PrimaryActions.tsx",showEditor:!0,defaultData:i,bgClass:"bg-brand-blue p-6",children:e=>(0,r.jsx)(l.Z,{items:e.items,close:()=>{}})}),(0,r.jsxs)("div",{className:"mt-8 max-w-3xl rounded-lg bg-gray-50 p-4",children:[(0,r.jsx)("h3",{className:"mb-2 font-semibold",children:"Props"}),(0,r.jsxs)("table",{className:"w-full text-sm",children:[(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{className:"border-b",children:[(0,r.jsx)("th",{className:"py-2 text-left",children:"Prop"}),(0,r.jsx)("th",{className:"py-2 text-left",children:"Type"}),(0,r.jsx)("th",{className:"py-2 text-left",children:"Description"})]})}),(0,r.jsxs)("tbody",{className:"text-gray-600",children:[(0,r.jsxs)("tr",{className:"border-b",children:[(0,r.jsx)("td",{className:"py-2 font-mono text-xs",children:"items"}),(0,r.jsx)("td",{className:"py-2 font-mono text-xs",children:"ActionItem[]"}),(0,r.jsx)("td",{className:"py-2",children:"CTA button items with id, label, and url"})]}),(0,r.jsxs)("tr",{className:"border-b",children:[(0,r.jsx)("td",{className:"py-2 font-mono text-xs",children:"close"}),(0,r.jsx)("td",{className:"py-2 font-mono text-xs",children:"() => void"}),(0,r.jsx)("td",{className:"py-2",children:"Callback to close the mobile menu panel"})]})]})]})]}),(0,r.jsxs)("div",{className:"mt-4 rounded-lg bg-gray-50 p-4",children:[(0,r.jsx)("h3",{className:"mb-2 font-semibold",children:"Styling"}),(0,r.jsxs)("ul",{className:"list-inside list-disc space-y-1 text-sm text-gray-600",children:[(0,r.jsx)("li",{children:"First button: Filled chartreuse background with dark text (bg-next-chartreuse-light)"}),(0,r.jsx)("li",{children:"Subsequent buttons: Transparent with chartreuse text (bg-white/10)"}),(0,r.jsx)("li",{children:"All buttons use next-serif font with bold italic styling"}),(0,r.jsx)("li",{children:"Hover effect includes subtle scale animation (1.02x)"})]})]}),(0,r.jsxs)("div",{className:"mt-8 max-w-3xl rounded-lg bg-gray-50 p-4",children:[(0,r.jsx)("h3",{className:"mb-2 font-semibold",children:"Files"}),(0,r.jsxs)("ul",{className:"space-y-1 text-sm text-gray-600",children:[(0,r.jsxs)("li",{children:[(0,r.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"components/ui/types/menu.ts"})," â Type definitions"]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"components/ui/next/Menu/Compact/PrimaryActions.tsx"})," ","â UI component"]}),(0,r.jsxs)("li",{children:[(0,r.jsx)("code",{className:"rounded bg-gray-100 px-1",children:"components/composed/Menu/Compact/PrimaryActions.tsx"})," ","â Composed wrapper with feature flag"]})]})]})]})}}},function(e){e.O(0,[3464,1340,2888,9774,179],function(){return e(e.s=20413)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.