sonahang-ui 1.0.0 → 1.0.2

package/README.md

@@ -52,6 +52,28 @@ tree-shakeable, so unused components are dropped by your bundler.
 > The stylesheet loads Inter from Google Fonts via `@import`. If you'd rather
 > self-host the font or use your own, override `--font-family-sans`.
 
+### Overriding styles with `className`
+
+Every component forwards `className` to its root element, and the stylesheet is
+wrapped in a single `@layer sonahang-ui` cascade layer. Unlayered CSS always
+beats layered CSS regardless of specificity, so unlayered styles of your own —
+a plain class, a CSS module — override a component without `!important` or
+specificity hacks:
+
+```tsx
+<Button className="checkout-cta">Save</Button>
+```
+
+The one case that needs care is CSS you write inside a layer of your own,
+since layers are ranked by the order they are first declared, not by
+specificity. Tailwind v4 is the common example — it puts every utility in
+`@layer utilities`. Declare the order explicitly, once, at the top of your
+global stylesheet, and it no longer depends on which file imports first:
+
+```css
+@layer sonahang-ui, theme, base, components, utilities;
+```
+
 ## Components
 
 Layout and content: `Text`, `Logo`, `CodeBlock`, `EmptyState`, `Skeleton`

package/dist/sonahang-ui.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};let n=require("react/jsx-runtime"),r=require("react"),i=require("react-dom");var a=[`display`,`heading-1`,`heading-2`,`heading-3`,`heading-4`,`body-lg`,`body`,`body-sm`,`caption`],o=[`default`,`subtle`,`inverse`,`accent`],s=[`regular`,`medium`,`semibold`,`bold`],c={display:`h1`,"heading-1":`h1`,"heading-2":`h2`,"heading-3":`h3`,"heading-4":`h4`,"body-lg":`p`,body:`p`,"body-sm":`p`,caption:`span`};function l({as:e,variant:t=`body`,color:r=`default`,weight:i,align:a,className:o,style:s,children:l,...u}){let d=e??c[t],f=[`sh-text`,`sh-text--${t}`,`sh-text--color-${r}`,o].filter(Boolean).join(` `);return(0,n.jsx)(d,{className:f,style:{...i?{fontWeight:`var(--font-weight-${i})`}:void 0,...a?{textAlign:a}:void 0,...s},...u,children:l})}function u({variant:e=`primary`,size:t=`md`,fullWidth:n=!1,loading:r=!1,className:i}={}){return[`sh-button`,`sh-button--${e}`,`sh-button--${t}`,n&&`sh-button--full-width`,r&&`sh-button--loading`,i].filter(Boolean).join(` `)}function d({variant:e=`primary`,size:t=`md`,fullWidth:r=!1,icon:i,iconPosition:a=`left`,loading:o=!1,disabled:s,className:c,children:l,...d}){let f=e===`icon`,p=u({variant:e,size:t,fullWidth:r,loading:o,className:c});return(0,n.jsx)(`button`,{className:p,disabled:s||o,"aria-busy":o||void 0,...d,children:(0,n.jsxs)(`span`,{className:`sh-button__content`,children:[o&&(0,n.jsx)(`span`,{className:`sh-button__spinner`,"aria-hidden":`true`}),f?!o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i}):(0,n.jsxs)(n.Fragment,{children:[i&&a===`left`&&!o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i}),l,i&&a===`right`&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i})]})]})})}var f=[`primary`,`secondary`,`outline`,`ghost`,`icon`],p=[`sm`,`md`,`lg`],m=()=>(0,n.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:1.5,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 13.5h4l1.5 2.5h7l1.5-2.5h4M3 13.5 5.8 6.2A1.5 1.5 0 0 1 7.2 5.2h9.6a1.5 1.5 0 0 1 1.4 1L21 13.5v3.3a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.8Z`,strokeLinecap:`round`,strokeLinejoin:`round`})});function h({title:e,description:t,icon:i,action:a,secondaryAction:o,headingLevel:s=3,size:c=`md`,children:l,className:f,...p}){let h=i===void 0?(0,n.jsx)(m,{}):i,g=h!==!1&&h!==null,_=(e,t)=>{let{label:r,href:i,onClick:a,icon:o,variant:s,target:l,rel:f}=e,p=s??t;return i===void 0?(0,n.jsx)(d,{variant:p,size:c===`sm`?`sm`:`md`,icon:o,onClick:a,children:r}):(0,n.jsx)(`a`,{href:i,target:l,rel:f??(l===`_blank`?`noopener noreferrer`:void 0),onClick:a,className:u({variant:p,size:c===`sm`?`sm`:`md`}),children:(0,n.jsxs)(`span`,{className:`sh-button__content`,children:[o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:o}),r]})})};return(0,n.jsxs)(`div`,{className:[`sh-empty-state`,`sh-empty-state--${c}`,f].filter(Boolean).join(` `),...p,children:[g&&(0,n.jsx)(`span`,{className:`sh-empty-state__icon`,children:h}),(0,r.createElement)(`h${s}`,{className:`sh-empty-state__title`},e),t&&(0,n.jsx)(`p`,{className:`sh-empty-state__description`,children:t}),(a||o)&&(0,n.jsxs)(`div`,{className:`sh-empty-state__actions`,children:[a&&_(a,`primary`),o&&_(o,`secondary`)]}),l&&(0,n.jsx)(`div`,{className:`sh-empty-state__extra`,children:l})]})}function g({variant:e=`primary`,className:t,children:r,...i}){let a=[`sh-tag`,`sh-tag--${e}`,t].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{className:a,...i,children:r})}var _=[`primary`,`secondary`,`outline`],v={add:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3.5v9M3.5 8h9`,strokeLinecap:`round`})}),remove:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M4.5 4.5l7 7M11.5 4.5l-7 7`,strokeLinecap:`round`})})},y={add:`Add`,remove:`Remove`};function b({variant:e=`primary`,action:t,onAction:r,actionLabel:i,disabled:a=!1,className:o,children:s,...c}){let l=[`sh-chip`,`sh-chip--${e}`,t&&`sh-chip--with-action`,a&&`sh-chip--disabled`,o].filter(Boolean).join(` `),u=i??(t?typeof s==`string`?`${y[t]} ${s}`:y[t]:void 0);return(0,n.jsxs)(`span`,{className:l,...c,children:[(0,n.jsx)(`span`,{className:`sh-chip__label`,children:s}),t&&(0,n.jsx)(`button`,{type:`button`,className:`sh-chip__action`,onClick:r,disabled:a,"aria-label":u,children:v[t]})]})}var x=[`primary`,`secondary`,`outline`],S=[`add`,`remove`],C=(0,r.createContext)(void 0);function w(e,t=2){let n=e.trim().split(/\s+/).filter(Boolean);return n.length===0?``:(n.length>t?[n[0],n[n.length-1]]:n).slice(0,t).map(e=>e.charAt(0).toUpperCase()).join(``)}var T=()=>(0,n.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,className:`sh-avatar__icon`,children:(0,n.jsx)(`path`,{d:`M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 1.8c-3.6 0-7.2 1.8-7.2 4.05V21h14.4v-3.15c0-2.25-3.6-4.05-7.2-4.05Z`})});function E({src:e,name:t,alt:i,size:a,className:o,children:s,...c}){let[l,u]=(0,r.useState)(void 0),d=(0,r.useContext)(C),f=a??d??`md`,p=!!e&&l!==e,m=t?w(t):``,h=i??t,g=[`sh-avatar`,`sh-avatar--${f}`,o].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{className:g,...!p&&h?{role:`img`,"aria-label":h}:void 0,...c,children:p?(0,n.jsx)(`img`,{className:`sh-avatar__image`,src:e,alt:h??``,onError:()=>u(e)}):s??(0,n.jsx)(`span`,{className:`sh-avatar__fallback`,"aria-hidden":`true`,children:m||(0,n.jsx)(T,{})})})}function D({max:e,size:t=`md`,className:i,children:a,...o}){let s=r.Children.toArray(a).filter(r.isValidElement),c=typeof e==`number`&&e>=0?e:s.length,l=s.slice(0,c),u=s.length-l.length,d=[`sh-avatar-group`,i].filter(Boolean).join(` `);return(0,n.jsx)(C.Provider,{value:t,children:(0,n.jsxs)(`div`,{className:d,...o,children:[l,u>0&&(0,n.jsx)(`span`,{className:`sh-avatar sh-avatar--${t} sh-avatar--overflow`,role:`img`,"aria-label":`${u} more`,children:(0,n.jsxs)(`span`,{className:`sh-avatar__fallback`,"aria-hidden":`true`,children:[`+`,u]})})]})})}var O=[`sm`,`md`,`lg`];function k({label:e,helperText:t,error:i,icon:a,iconPosition:o=`left`,className:s,inputClassName:c,id:l,required:u,disabled:d,"aria-describedby":f,...p}){let m=(0,r.useId)(),h=l??m,g=`${h}-message`,_=!!i,v=i??t,y=[f,v?g:void 0].filter(Boolean).join(` `)||void 0,b=[`sh-input`,_&&`sh-input--invalid`,d&&`sh-input--disabled`,a&&`sh-input--with-icon-${o}`,s].filter(Boolean).join(` `);return(0,n.jsxs)(`div`,{className:b,children:[e&&(0,n.jsxs)(`label`,{className:`sh-input__label`,htmlFor:h,children:[e,u&&(0,n.jsx)(`span`,{className:`sh-input__required`,"aria-hidden":`true`,children:`*`})]}),(0,n.jsxs)(`span`,{className:`sh-input__field`,children:[a&&(0,n.jsx)(`span`,{className:`sh-input__icon`,"aria-hidden":`true`,children:a}),(0,n.jsx)(`input`,{id:h,className:[`sh-input__control`,c].filter(Boolean).join(` `),required:u,disabled:d,"aria-invalid":_||void 0,"aria-describedby":y,...p})]}),v&&(0,n.jsx)(`span`,{id:g,className:`sh-input__message`,children:v})]})}var A=[`numeric`,`alphanumeric`],j={numeric:/[0-9]/,alphanumeric:/[a-zA-Z0-9]/};function M(e,{length:t,type:n=`numeric`}){let r=j[n],i=``;for(let n of e){if(i.length>=t)break;r.test(n)&&(i+=n)}return i}function N({length:e=6,value:t,defaultValue:i=``,onChange:a,onComplete:o,type:s=`numeric`,mask:c=!1,groupSize:l,label:u,helperText:d,error:f,className:p,id:m,required:h,disabled:g,"aria-describedby":_,onFocus:v,onBlur:y,onSelect:b,onClick:x,...S}){let C=(0,r.useId)(),w=m??C,T=`${w}-message`,E=(0,r.useRef)(null),[D,O]=(0,r.useState)(!1),[k,A]=(0,r.useState)(0),[j,N]=(0,r.useState)(()=>M(i,{length:e,type:s})),P=t!==void 0,F=P?M(t,{length:e,type:s}):j,I=!!f,L=f??d,R=[_,L?T:void 0].filter(Boolean).join(` `)||void 0,z=()=>{let e=E.current;if(!e)return;let t=e.value.length;e.setSelectionRange(t,t),A(t)},ee=Array.from({length:e},(e,t)=>F[t]??``),B=D&&!g?Math.min(k,e-1):-1;return(0,n.jsxs)(`div`,{className:[`sh-input-otp`,I&&`sh-input-otp--invalid`,g&&`sh-input-otp--disabled`,p].filter(Boolean).join(` `),children:[u&&(0,n.jsxs)(`label`,{className:`sh-input-otp__label`,htmlFor:w,children:[u,h&&(0,n.jsx)(`span`,{className:`sh-input-otp__required`,"aria-hidden":`true`,children:`*`})]}),(0,n.jsxs)(`div`,{className:`sh-input-otp__field`,children:[(0,n.jsx)(`input`,{ref:E,id:w,className:`sh-input-otp__control`,value:F,required:h,disabled:g,inputMode:s===`numeric`?`numeric`:`text`,autoComplete:`one-time-code`,autoCorrect:`off`,autoCapitalize:`off`,spellCheck:!1,"aria-invalid":I||void 0,"aria-describedby":R,onChange:t=>{let n=M(t.target.value,{length:e,type:s});n!==F&&(P||N(n),a?.(n),n.length===e&&o?.(n))},onFocus:e=>{v?.(e),O(!0),z()},onBlur:e=>{y?.(e),O(!1)},onClick:e=>{x?.(e),z()},onSelect:e=>{b?.(e),A(e.currentTarget.selectionStart??F.length)},...S}),(0,n.jsx)(`div`,{className:`sh-input-otp__boxes`,"aria-hidden":`true`,children:ee.map((e,t)=>(0,n.jsxs)(r.Fragment,{children:[l!==void 0&&t>0&&t%l===0&&(0,n.jsx)(`span`,{className:`sh-input-otp__separator`}),(0,n.jsx)(`span`,{className:[`sh-input-otp__slot`,e&&`sh-input-otp__slot--filled`,t===B&&`sh-input-otp__slot--active`].filter(Boolean).join(` `),children:e&&c?`•`:e})]},t))})]}),L&&(0,n.jsx)(`span`,{id:T,className:`sh-input-otp__message`,children:L})]})}var P=(0,r.createContext)(void 0);function F(e){let t=(0,r.useContext)(P);if(!t)throw Error(`<${e}> must be rendered inside <Dropdown>.`);return t}function I({children:e,open:t,defaultOpen:i=!1,onOpenChange:a,placement:o=`bottom`,align:s=`start`,className:c,...l}){let u=(0,r.useId)(),d=(0,r.useRef)(null),f=(0,r.useRef)(null),[p,m]=(0,r.useState)(i),h=t!==void 0,g=h?t:p,[_,v]=(0,r.useState)(null),y=(0,r.useCallback)((e=null)=>{v(e),h||m(!0),a?.(!0)},[h,a]),b=(0,r.useCallback)(({restoreFocus:e=!0}={})=>{v(null),h||m(!1),a?.(!1),e&&d.current?.focus()},[h,a]);return(0,r.useEffect)(()=>{if(!g)return;let e=e=>{f.current?.contains(e.target)||b({restoreFocus:!1})};return document.addEventListener(`pointerdown`,e),()=>document.removeEventListener(`pointerdown`,e)},[g,b]),(0,r.useEffect)(()=>{if(!g)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),b())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[g,b]),(0,n.jsx)(P.Provider,{value:{isOpen:g,open:y,close:b,focusOnOpen:_,triggerId:`${u}-trigger`,menuId:`${u}-menu`,triggerRef:d,placement:o,align:s},children:(0,n.jsx)(`div`,{ref:f,className:[`sh-dropdown`,c].filter(Boolean).join(` `),...l,children:e})})}function L({children:e,className:t,onClick:r,onKeyDown:i,...a}){let{isOpen:o,open:s,close:c,triggerId:l,menuId:u,triggerRef:d}=F(`DropdownTrigger`);return(0,n.jsx)(`button`,{ref:d,type:`button`,id:l,className:[`sh-dropdown__trigger`,t].filter(Boolean).join(` `),"aria-haspopup":`menu`,"aria-expanded":o,"aria-controls":o?u:void 0,onClick:e=>{r?.(e),!e.defaultPrevented&&(o?c({restoreFocus:!1}):s(`first`))},onKeyDown:e=>{i?.(e),!(e.defaultPrevented||o)&&(e.key===`ArrowDown`?(e.preventDefault(),s(`first`)):e.key===`ArrowUp`&&(e.preventDefault(),s(`last`)))},...a,children:e})}function R({children:e,className:t,onKeyDown:i,...a}){let{isOpen:o,close:s,focusOnOpen:c,triggerId:l,menuId:u,placement:d,align:f}=F(`DropdownMenu`),p=(0,r.useRef)(null),m=()=>Array.from(p.current?.querySelectorAll(`[role="menuitem"]:not([disabled])`)??[]);return(0,r.useEffect)(()=>{if(!o||!c)return;let e=m();(c===`last`?e[e.length-1]:e[0])?.focus()},[o,c]),o?(0,n.jsx)(`div`,{ref:p,id:u,className:[`sh-dropdown__menu`,`sh-dropdown__menu--${d}`,`sh-dropdown__menu--${f}`,t].filter(Boolean).join(` `),role:`menu`,"aria-labelledby":l,onKeyDown:e=>{if(i?.(e),e.defaultPrevented)return;if(e.key===`Tab`){s({restoreFocus:!1});return}if(![`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key))return;let t=m();if(t.length===0)return;let n=t.indexOf(document.activeElement),r;r=e.key===`Home`?0:e.key===`End`?t.length-1:n===-1?0:e.key===`ArrowDown`?(n+1)%t.length:(n-1+t.length)%t.length,e.preventDefault(),t[r]?.focus()},...a,children:e}):null}function z({children:e,onSelect:t,closeOnSelect:r=!0,icon:i,destructive:a=!1,className:o,onClick:s,...c}){let{close:l}=F(`DropdownItem`);return(0,n.jsxs)(`button`,{type:`button`,role:`menuitem`,className:[`sh-dropdown__item`,a&&`sh-dropdown__item--destructive`,o].filter(Boolean).join(` `),tabIndex:-1,onClick:e=>{s?.(e),!e.defaultPrevented&&(t?.(),r&&l())},...c,children:[i&&(0,n.jsx)(`span`,{className:`sh-dropdown__item-icon`,"aria-hidden":`true`,children:i}),(0,n.jsx)(`span`,{className:`sh-dropdown__item-label`,children:e})]})}function ee({className:e,...t}){return(0,n.jsx)(`div`,{className:[`sh-dropdown__separator`,e].filter(Boolean).join(` `),role:`separator`,...t})}function B(e){let t=e.replace(/\r\n/g,`
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};let n=require("react/jsx-runtime"),r=require("react"),i=require("react-dom");var a=[`display`,`heading-1`,`heading-2`,`heading-3`,`heading-4`,`body-lg`,`body`,`body-sm`,`caption`],o=[`default`,`subtle`,`inverse`,`accent`],s=[`regular`,`medium`,`semibold`,`bold`],c={display:`h1`,"heading-1":`h1`,"heading-2":`h2`,"heading-3":`h3`,"heading-4":`h4`,"body-lg":`p`,body:`p`,"body-sm":`p`,caption:`span`};function l({as:e,variant:t=`body`,color:r=`default`,weight:i,align:a,className:o,style:s,children:l,...u}){let d=e??c[t],f=[`sh-text`,`sh-text--${t}`,`sh-text--color-${r}`,o].filter(Boolean).join(` `);return(0,n.jsx)(d,{className:f,style:{...i?{fontWeight:`var(--font-weight-${i})`}:void 0,...a?{textAlign:a}:void 0,...s},...u,children:l})}function u({variant:e=`primary`,size:t=`md`,fullWidth:n=!1,loading:r=!1,className:i}={}){return[`sh-button`,`sh-button--${e}`,`sh-button--${t}`,n&&`sh-button--full-width`,r&&`sh-button--loading`,i].filter(Boolean).join(` `)}function d({variant:e=`primary`,size:t=`md`,fullWidth:r=!1,icon:i,iconPosition:a=`left`,loading:o=!1,disabled:s,className:c,children:l,...d}){let f=e===`icon`,p=u({variant:e,size:t,fullWidth:r,loading:o,className:c});return(0,n.jsx)(`button`,{className:p,disabled:s||o,"aria-busy":o||void 0,...d,children:(0,n.jsxs)(`span`,{className:`sh-button__content`,children:[o&&(0,n.jsx)(`span`,{className:`sh-button__spinner`,"aria-hidden":`true`}),f?!o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i}):(0,n.jsxs)(n.Fragment,{children:[i&&a===`left`&&!o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i}),l,i&&a===`right`&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:i})]})]})})}var f=[`primary`,`secondary`,`outline`,`ghost`,`icon`],p=[`sm`,`md`,`lg`],m=()=>(0,n.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:1.5,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 13.5h4l1.5 2.5h7l1.5-2.5h4M3 13.5 5.8 6.2A1.5 1.5 0 0 1 7.2 5.2h9.6a1.5 1.5 0 0 1 1.4 1L21 13.5v3.3a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.8Z`,strokeLinecap:`round`,strokeLinejoin:`round`})});function h({title:e,description:t,icon:i,action:a,secondaryAction:o,headingLevel:s=3,size:c=`md`,children:l,className:f,...p}){let h=i===void 0?(0,n.jsx)(m,{}):i,g=h!==!1&&h!==null,_=(e,t)=>{let{label:r,href:i,onClick:a,icon:o,variant:s,target:l,rel:f}=e,p=s??t;return i===void 0?(0,n.jsx)(d,{variant:p,size:c===`sm`?`sm`:`md`,icon:o,onClick:a,children:r}):(0,n.jsx)(`a`,{href:i,target:l,rel:f??(l===`_blank`?`noopener noreferrer`:void 0),onClick:a,className:u({variant:p,size:c===`sm`?`sm`:`md`}),children:(0,n.jsxs)(`span`,{className:`sh-button__content`,children:[o&&(0,n.jsx)(`span`,{className:`sh-button__icon`,children:o}),r]})})};return(0,n.jsxs)(`div`,{className:[`sh-empty-state`,`sh-empty-state--${c}`,f].filter(Boolean).join(` `),...p,children:[g&&(0,n.jsx)(`span`,{className:`sh-empty-state__icon`,children:h}),(0,r.createElement)(`h${s}`,{className:`sh-empty-state__title`},e),t&&(0,n.jsx)(`p`,{className:`sh-empty-state__description`,children:t}),(a||o)&&(0,n.jsxs)(`div`,{className:`sh-empty-state__actions`,children:[a&&_(a,`primary`),o&&_(o,`secondary`)]}),l&&(0,n.jsx)(`div`,{className:`sh-empty-state__extra`,children:l})]})}function g({variant:e=`primary`,className:t,children:r,...i}){let a=[`sh-tag`,`sh-tag--${e}`,t].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{className:a,...i,children:r})}var _=[`primary`,`secondary`,`outline`],v={add:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3.5v9M3.5 8h9`,strokeLinecap:`round`})}),remove:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M4.5 4.5l7 7M11.5 4.5l-7 7`,strokeLinecap:`round`})})},y={add:`Add`,remove:`Remove`};function b({variant:e=`primary`,action:t,onAction:r,actionLabel:i,disabled:a=!1,className:o,children:s,...c}){let l=[`sh-chip`,`sh-chip--${e}`,t&&`sh-chip--with-action`,a&&`sh-chip--disabled`,o].filter(Boolean).join(` `),u=i??(t?typeof s==`string`?`${y[t]} ${s}`:y[t]:void 0);return(0,n.jsxs)(`span`,{className:l,...c,children:[(0,n.jsx)(`span`,{className:`sh-chip__label`,children:s}),t&&(0,n.jsx)(`button`,{type:`button`,className:`sh-chip__action`,onClick:r,disabled:a,"aria-label":u,children:v[t]})]})}var x=[`primary`,`secondary`,`outline`],S=[`add`,`remove`],C=(0,r.createContext)(void 0);function w(e,t=2){let n=e.trim().split(/\s+/).filter(Boolean);return n.length===0?``:(n.length>t?[n[0],n[n.length-1]]:n).slice(0,t).map(e=>e.charAt(0).toUpperCase()).join(``)}var T=()=>(0,n.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,className:`sh-avatar__icon`,children:(0,n.jsx)(`path`,{d:`M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 1.8c-3.6 0-7.2 1.8-7.2 4.05V21h14.4v-3.15c0-2.25-3.6-4.05-7.2-4.05Z`})});function E({src:e,name:t,alt:i,size:a,className:o,children:s,...c}){let[l,u]=(0,r.useState)(void 0),d=(0,r.useContext)(C),f=a??d??`md`,p=!!e&&l!==e,m=t?w(t):``,h=i??t,g=[`sh-avatar`,`sh-avatar--${f}`,o].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{className:g,...!p&&h?{role:`img`,"aria-label":h}:void 0,...c,children:p?(0,n.jsx)(`img`,{className:`sh-avatar__image`,src:e,alt:h??``,onError:()=>u(e)}):s??(0,n.jsx)(`span`,{className:`sh-avatar__fallback`,"aria-hidden":`true`,children:m||(0,n.jsx)(T,{})})})}function D({max:e,size:t=`md`,className:i,children:a,...o}){let s=r.Children.toArray(a).filter(r.isValidElement),c=typeof e==`number`&&e>=0?e:s.length,l=s.slice(0,c),u=s.length-l.length,d=[`sh-avatar-group`,i].filter(Boolean).join(` `);return(0,n.jsx)(C.Provider,{value:t,children:(0,n.jsxs)(`div`,{className:d,...o,children:[l,u>0&&(0,n.jsx)(`span`,{className:`sh-avatar sh-avatar--${t} sh-avatar--overflow`,role:`img`,"aria-label":`${u} more`,children:(0,n.jsxs)(`span`,{className:`sh-avatar__fallback`,"aria-hidden":`true`,children:[`+`,u]})})]})})}var O=[`sm`,`md`,`lg`];function k({label:e,helperText:t,error:i,icon:a,iconPosition:o=`left`,className:s,inputClassName:c,id:l,required:u,disabled:d,"aria-describedby":f,...p}){let m=(0,r.useId)(),h=l??m,g=`${h}-message`,_=!!i,v=i??t,y=[f,v?g:void 0].filter(Boolean).join(` `)||void 0,b=[`sh-input`,_&&`sh-input--invalid`,d&&`sh-input--disabled`,a&&`sh-input--with-icon-${o}`,s].filter(Boolean).join(` `);return(0,n.jsxs)(`div`,{className:b,children:[e&&(0,n.jsxs)(`label`,{className:`sh-input__label`,htmlFor:h,children:[e,u&&(0,n.jsx)(`span`,{className:`sh-input__required`,"aria-hidden":`true`,children:`*`})]}),(0,n.jsxs)(`span`,{className:`sh-input__field`,children:[a&&(0,n.jsx)(`span`,{className:`sh-input__icon`,"aria-hidden":`true`,children:a}),(0,n.jsx)(`input`,{id:h,className:[`sh-input__control`,c].filter(Boolean).join(` `),required:u,disabled:d,"aria-invalid":_||void 0,"aria-describedby":y,...p})]}),v&&(0,n.jsx)(`span`,{id:g,className:`sh-input__message`,children:v})]})}var A=[`numeric`,`alphanumeric`],j={numeric:/[0-9]/,alphanumeric:/[a-zA-Z0-9]/};function M(e,{length:t,type:n=`numeric`}){let r=j[n],i=``;for(let n of e){if(i.length>=t)break;r.test(n)&&(i+=n)}return i}function N({length:e=6,value:t,defaultValue:i=``,onChange:a,onComplete:o,type:s=`numeric`,mask:c=!1,groupSize:l,label:u,helperText:d,error:f,className:p,id:m,required:h,disabled:g,"aria-describedby":_,onFocus:v,onBlur:y,onSelect:b,onClick:x,...S}){let C=(0,r.useId)(),w=m??C,T=`${w}-message`,E=(0,r.useRef)(null),[D,O]=(0,r.useState)(!1),[k,A]=(0,r.useState)(0),[j,N]=(0,r.useState)(()=>M(i,{length:e,type:s})),P=t!==void 0,F=P?M(t,{length:e,type:s}):j,I=!!f,L=f??d,R=[_,L?T:void 0].filter(Boolean).join(` `)||void 0,z=()=>{let e=E.current;if(!e)return;let t=e.value.length;e.setSelectionRange(t,t),A(t)},ee=Array.from({length:e},(e,t)=>F[t]??``),B=D&&!g?Math.min(k,e-1):-1;return(0,n.jsxs)(`div`,{className:[`sh-input-otp`,I&&`sh-input-otp--invalid`,g&&`sh-input-otp--disabled`,p].filter(Boolean).join(` `),children:[u&&(0,n.jsxs)(`label`,{className:`sh-input-otp__label`,htmlFor:w,children:[u,h&&(0,n.jsx)(`span`,{className:`sh-input-otp__required`,"aria-hidden":`true`,children:`*`})]}),(0,n.jsxs)(`div`,{className:`sh-input-otp__field`,children:[(0,n.jsx)(`input`,{ref:E,id:w,className:`sh-input-otp__control`,value:F,required:h,disabled:g,inputMode:s===`numeric`?`numeric`:`text`,autoComplete:`one-time-code`,autoCorrect:`off`,autoCapitalize:`off`,spellCheck:!1,"aria-invalid":I||void 0,"aria-describedby":R,onChange:t=>{let n=M(t.target.value,{length:e,type:s});n!==F&&(P||N(n),a?.(n),n.length===e&&o?.(n))},onFocus:e=>{v?.(e),O(!0),z()},onBlur:e=>{y?.(e),O(!1)},onClick:e=>{x?.(e),z()},onSelect:e=>{b?.(e),A(e.currentTarget.selectionStart??F.length)},...S}),(0,n.jsx)(`div`,{className:`sh-input-otp__boxes`,"aria-hidden":`true`,children:ee.map((e,t)=>(0,n.jsxs)(r.Fragment,{children:[l!==void 0&&t>0&&t%l===0&&(0,n.jsx)(`span`,{className:`sh-input-otp__separator`}),(0,n.jsx)(`span`,{className:[`sh-input-otp__slot`,e&&`sh-input-otp__slot--filled`,t===B&&`sh-input-otp__slot--active`].filter(Boolean).join(` `),children:e&&c?`•`:e})]},t))})]}),L&&(0,n.jsx)(`span`,{id:T,className:`sh-input-otp__message`,children:L})]})}var P=(0,r.createContext)(void 0);function F(e){let t=(0,r.useContext)(P);if(!t)throw Error(`<${e}> must be rendered inside <Dropdown>.`);return t}function I({children:e,open:t,defaultOpen:i=!1,onOpenChange:a,placement:o=`bottom`,align:s=`start`,className:c,...l}){let u=(0,r.useId)(),d=(0,r.useRef)(null),f=(0,r.useRef)(null),[p,m]=(0,r.useState)(i),h=t!==void 0,g=h?t:p,[_,v]=(0,r.useState)(null),y=(0,r.useCallback)((e=null)=>{v(e),h||m(!0),a?.(!0)},[h,a]),b=(0,r.useCallback)(({restoreFocus:e=!0}={})=>{v(null),h||m(!1),a?.(!1),e&&d.current?.focus()},[h,a]);return(0,r.useEffect)(()=>{if(!g)return;let e=e=>{f.current?.contains(e.target)||b({restoreFocus:!1})};return document.addEventListener(`pointerdown`,e),()=>document.removeEventListener(`pointerdown`,e)},[g,b]),(0,r.useEffect)(()=>{if(!g)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),b())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[g,b]),(0,n.jsx)(P.Provider,{value:{isOpen:g,open:y,close:b,focusOnOpen:_,triggerId:`${u}-trigger`,menuId:`${u}-menu`,triggerRef:d,placement:o,align:s},children:(0,n.jsx)(`div`,{ref:f,className:[`sh-dropdown`,c].filter(Boolean).join(` `),...l,children:e})})}function L({children:e,className:t,onClick:r,onKeyDown:i,...a}){let{isOpen:o,open:s,close:c,triggerId:l,menuId:u,triggerRef:d}=F(`DropdownTrigger`);return(0,n.jsx)(`button`,{ref:d,type:`button`,id:l,className:[`sh-dropdown__trigger`,t].filter(Boolean).join(` `),"aria-haspopup":`menu`,"aria-expanded":o,"aria-controls":o?u:void 0,onClick:e=>{r?.(e),!e.defaultPrevented&&(o?c({restoreFocus:!1}):s(`first`))},onKeyDown:e=>{i?.(e),!(e.defaultPrevented||o)&&(e.key===`ArrowDown`?(e.preventDefault(),s(`first`)):e.key===`ArrowUp`&&(e.preventDefault(),s(`last`)))},...a,children:e})}function R({children:e,className:t,onKeyDown:i,...a}){let{isOpen:o,close:s,focusOnOpen:c,triggerId:l,menuId:u,placement:d,align:f}=F(`DropdownMenu`),p=(0,r.useRef)(null),m=()=>Array.from(p.current?.querySelectorAll(`[role="menuitem"]:not([disabled])`)??[]);return(0,r.useEffect)(()=>{if(!o||!c)return;let e=m();(c===`last`?e[e.length-1]:e[0])?.focus()},[o,c]),o?(0,n.jsx)(`div`,{ref:p,id:u,className:[`sh-dropdown__menu`,`sh-dropdown__menu--${d}`,`sh-dropdown__menu--${f}`,t].filter(Boolean).join(` `),role:`menu`,"aria-labelledby":l,onKeyDown:e=>{if(i?.(e),e.defaultPrevented)return;if(e.key===`Tab`){s({restoreFocus:!1});return}if(![`ArrowDown`,`ArrowUp`,`Home`,`End`].includes(e.key))return;let t=m();if(t.length===0)return;let n=t.indexOf(document.activeElement),r;r=e.key===`Home`?0:e.key===`End`?t.length-1:n===-1?0:e.key===`ArrowDown`?(n+1)%t.length:(n-1+t.length)%t.length,e.preventDefault(),t[r]?.focus()},...a,children:e}):null}function z({children:e,onSelect:t,closeOnSelect:r=!0,icon:i,destructive:a=!1,className:o,onClick:s,...c}){let{close:l}=F(`DropdownItem`);return(0,n.jsxs)(`button`,{type:`button`,role:`menuitem`,className:[`sh-dropdown__item`,a&&`sh-dropdown__item--destructive`,o].filter(Boolean).join(` `),tabIndex:-1,onClick:e=>{s?.(e),!e.defaultPrevented&&(t?.(),r&&l())},...c,children:[i&&(0,n.jsx)(`span`,{className:`sh-dropdown__item-icon`,"aria-hidden":`true`,children:i}),(0,n.jsx)(`span`,{className:`sh-dropdown__item-label`,children:e})]})}function ee({className:e,...t}){return(0,n.jsx)(`div`,{className:[`sh-dropdown__separator`,e].filter(Boolean).join(` `),role:`separator`,...t})}function B(e){let t=e.replace(/\r\n/g,`
 `).split(`
 `);for(;t.length>0&&t[0].trim()===``;)t.shift();for(;t.length>0&&t[t.length-1].trim()===``;)t.pop();if(t.length===0)return``;let n=t.filter(e=>e.trim()!==``).map(e=>e.length-e.trimStart().length),r=Math.min(...n);return t.map(e=>e.slice(r)).join(`
 `)}var te=()=>(0,n.jsxs)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.5,"aria-hidden":`true`,children:[(0,n.jsx)(`rect`,{x:`5.75`,y:`5.75`,width:`8`,height:`8`,rx:`1.5`}),(0,n.jsx)(`path`,{d:`M10.5 3.5A1.5 1.5 0 0 0 9 2H3.5A1.5 1.5 0 0 0 2 3.5V9a1.5 1.5 0 0 0 1.5 1.5`})]}),ne=()=>(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,strokeWidth:1.75,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3.5 8.5l3 3 6-6.5`,strokeLinecap:`round`,strokeLinejoin:`round`})}),re=2e3;function ie({children:e,filename:t,language:i,showLineNumbers:a=!1,wrap:o=!1,copyable:s=!0,copyLabel:c=`Copy code`,maxHeight:l,className:u,...d}){let f=B(e),p=(0,r.useId)(),[m,h]=(0,r.useState)(`idle`),g=(0,r.useRef)(void 0);(0,r.useEffect)(()=>()=>window.clearTimeout(g.current),[]);let _=async()=>{window.clearTimeout(g.current);try{await navigator.clipboard.writeText(f),h(`copied`)}catch{h(`error`)}g.current=window.setTimeout(()=>h(`idle`),re)},v=t??i,y=v!==void 0||s;return(0,n.jsxs)(`div`,{className:[`sh-code-block`,o&&`sh-code-block--wrap`,a&&`sh-code-block--numbered`,u].filter(Boolean).join(` `),...d,children:[y&&(0,n.jsxs)(`div`,{className:`sh-code-block__header`,children:[v!==void 0&&(0,n.jsx)(`span`,{id:p,className:`sh-code-block__filename`,children:v}),s&&(0,n.jsx)(`button`,{type:`button`,className:`sh-code-block__copy`,"aria-label":c,onClick:_,children:m===`copied`?(0,n.jsx)(ne,{}):(0,n.jsx)(te,{})})]}),(0,n.jsx)(`pre`,{className:`sh-code-block__pre`,tabIndex:0,role:v===void 0?void 0:`group`,"aria-labelledby":v===void 0?void 0:p,style:l===void 0?void 0:{maxHeight:l},children:(0,n.jsx)(`code`,{className:[`sh-code-block__code`,i&&`language-${i}`].filter(Boolean).join(` `),children:a?f.split(`