@magiclabs/ui-components 1.18.5 → 1.19.1

package/dist/cjs/components/primitives/button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("../feedback/callout.js");var H=require("../feedback/loading-spinner.js");require("@styled/tokens"),require("./checkbox.js"),require("./dropdown-selector.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js"),require("./portal.js");var o=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var l=require("@styled/jsx");require("../feedback/tooltip.js");var I=require("../../recipes/button.js"),F=require("@styled/css"),v=require("create-slots"),d=require("react-aria");const f=v.createSlot(({children:r,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),y=v.createSlot(({children:r,...t})=>i.jsx(l.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),R=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",c=r==="neutral"||r==="tertiary";return i.jsx(H.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:c})},w=o.forwardRef((r,t)=>{const{label:e,variant:c="primary",size:p="md",disabled:m,expand:q,validating:h,iconSize:S,onHover:g}=r,u=S||(p==="sm"?16:24),s=I.button({variant:c,expand:q,size:p,validating:h,iconOnly:!e}),z=o.useRef(null),x=t||z,{buttonProps:C}=d.useButton({...r,isDisabled:m??!1},x),{hoverProps:N}=d.useHover({isDisabled:m??!1}),{isFocusVisible:P,focusProps:B}=d.useFocusRing();return v.createHost(r.children,j=>{const n=j.get(f),a=j.get(y),b=u/4;return i.jsx("button",{className:F.cx(s.button,"group",!e&&s.iconContainer,P&&s.focus),ref:x,...d.mergeProps(C,N,B),"aria-disabled":m,onMouseEnter:g,onTouchStart:g,children:h?i.jsx(R,{variant:c,size:p}):i.jsxs(l.HStack,{w:"full",gap:2,justify:e&&(n||a)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:s.icon,width:u,height:u}},a&&e&&q&&i.jsx(l.Box,{w:b}),e&&i.jsx("span",{className:s.label,children:e}),n&&e&&q&&i.jsx(l.Box,{w:b}),a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:u,height:u}}]})})})}),E=Object.assign(w,{LeadingIcon:f,TrailingIcon:y});w.displayName="Button",exports.default=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("../feedback/callout.js");var I=require("../feedback/loading-spinner.js");require("@styled/tokens"),require("./checkbox.js"),require("./dropdown-selector.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js"),require("./portal.js");var o=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var u=require("@styled/jsx");require("../feedback/tooltip.js");var R=require("../../recipes/button.js"),F=require("@styled/css"),q=require("create-slots"),d=require("react-aria");const f=q.createSlot(({children:r,...t})=>i.jsx(u.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),y=q.createSlot(({children:r,...t})=>i.jsx(u.Flex,{alignItems:"center",justifyContent:"center",children:o.Children.map(r,e=>o.cloneElement(e,t))})),E=({variant:r="primary",size:t="md"})=>{const e=r==="primary"||r==="negative",c=r==="neutral"||r==="tertiary";return i.jsx(I.LoadingSpinner,{size:{sm:20,md:24,lg:28}[t],strokeWidth:2.5,inverted:e,neutral:c})},S=o.forwardRef((r,t)=>{const{label:e,variant:c="primary",textStyle:w,size:p="md",disabled:m,expand:v,validating:g,iconSize:z,onHover:x}=r,l=z||(p==="sm"?16:24),s=R.button({variant:c,textStyle:w,expand:v,size:p,validating:g,iconOnly:!e}),C=o.useRef(null),h=t||C,{buttonProps:N}=d.useButton({...r,isDisabled:m??!1},h),{hoverProps:P}=d.useHover({isDisabled:m??!1}),{isFocusVisible:B,focusProps:H}=d.useFocusRing();return q.createHost(r.children,j=>{const n=j.get(f),a=j.get(y),b=l/4;return i.jsx("button",{className:F.cx(s.button,"group",!e&&s.iconContainer,B&&s.focus),ref:h,...d.mergeProps(N,P,H),"aria-disabled":m,onMouseEnter:x,onTouchStart:x,children:g?i.jsx(E,{variant:c,size:p}):i.jsxs(u.HStack,{w:"full",gap:2,justify:e&&(n||a)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:s.icon,width:l,height:l}},a&&e&&v&&i.jsx(u.Box,{w:b}),e&&i.jsx("span",{className:s.label,children:e}),n&&e&&v&&i.jsx(u.Box,{w:b}),a&&{...a,props:{...a.props,className:a.props.color?void 0:s.icon,width:l,height:l}}]})})})}),O=Object.assign(S,{LeadingIcon:f,TrailingIcon:y});S.displayName="Button",exports.default=O;
 //# sourceMappingURL=button.js.map

package/dist/cjs/components/primitives/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  textStyle?: 'negative' | 'neutral' | 'subtle';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    textStyle,\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}

package/dist/cjs/components/primitives/dropdown-selector.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var S=require("@styled/css"),c=require("@styled/jsx"),b=require("@styled/tokens"),B=require("../icons/ico-caret-down.js"),I=require("../icons/ico-caret-up.js"),L=require("../icons/ico-checkmark.js"),V=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var g=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var _=require("../feedback/tooltip.js"),w=require("react-aria");const D=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),O=({value:l,label:i,isFocused:v})=>{const{selectedOption:u,setSelectedOption:d}=r.useContext(D),s=u?.value===l,y=r.useCallback(()=>{d({value:l,label:i})},[d,l,i]);return t.jsxs(c.HStack,{px:4,py:1.5,gap:2,bg:s?"brand.base":v?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:y,children:[t.jsx(c.Box,{w:4,children:s&&t.jsx(L.default,{width:16,height:16,color:b.token("colors.surface.primary")})}),t.jsx(g.default,{size:"lg",styles:{fontWeight:500,color:b.token(`colors.${s?"surface":"text"}.primary`)},children:i})]})},E=({children:l,onSelect:i,label:v,selectedValue:u,tooltipContent:d,disabled:s,viewMax:y=5,...P})=>{const[p,f]=r.useState(!1),[o,h]=r.useState(null),x=r.useRef(null),k=r.useRef(null),A=y*2.5+1,z=r.useCallback(()=>{f(e=>!e),p||(h(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[p]),F=r.useCallback(e=>{i(e.value),f(!1)},[i]),q=r.useMemo(()=>{const e=r.Children.toArray(l).find(n=>n.props.value===u);return e?e.props.label:"Select one"},[u,l]),{buttonProps:H}=w.useButton({...P,isDisabled:s,onPress:z},x),{focusProps:N,isFocusVisible:R}=w.useFocusRing(),{keyboardProps:W}=w.useKeyboard({onKeyDown:e=>{var n,a;if(!p)return;let m=o;const C=r.Children.toArray(l);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?h(r.Children.count(l)-1):(m=o>0?o-1:r.Children.count(l)-1,h(m));break;case"ArrowDown":e.preventDefault(),o===null?h(0):(m=o<r.Children.count(l)-1?o+1:0,h(m));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),o===null)return;if(o>=0&&o<C.length){const j=C[o];j&&i(j.props.value)}break;case"Escape":f(!1),(a=x.current)===null||a===void 0||a.focus();break}}});return r.useEffect(()=>{const e=n=>{var a;!((a=k.current)===null||a===void 0)&&a.contains(n.target)||f(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(D.Provider,{value:{selectedOption:{value:u??"",label:q},setSelectedOption:F},children:t.jsxs(c.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[t.jsxs(c.HStack,{gap:2,opacity:s?.3:"",transition:"all linear 120ms",children:[v&&t.jsx(g.default,{size:"sm",styles:{fontWeight:500},children:v}),d&&t.jsx(_.default,{isDisabled:s,content:d,children:t.jsx(V.default,{className:S.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:S.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:R?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(H,N,W),children:[t.jsxs(c.HStack,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t.jsx(g.default,{size:"lg",styles:{color:b.token(`colors.text.${u?"primary":"tertiary"}`)},children:q}),p?t.jsx(I.default,{width:18,height:18,color:b.token("colors.brand.base")}):t.jsx(B.default,{width:18,height:18,color:b.token("colors.brand.base")})]}),p&&t.jsx(c.Box,{ref:k,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${A}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(l,(e,n)=>r.cloneElement(e,{isFocused:n===o}))})]})]})})};O.displayName="DropdownOption",E.displayName="DropdownSelector",exports.DropdownOption=O,exports.DropdownSelector=E;
+"use strict";var t=require("react/jsx-runtime");require("../feedback/callout.js");var S=require("@styled/css"),c=require("@styled/jsx"),v=require("@styled/tokens"),I=require("../icons/ico-caret-down.js"),L=require("../icons/ico-caret-up.js"),V=require("../icons/ico-checkmark.js"),_=require("../icons/ico-question-circle-fill.js");require("./button.js"),require("./checkbox.js"),require("./popover.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js");var g=require("./text.js");require("./portal.js");var r=require("react");require("../../hooks/useToast.js"),require("../../recipes/toast.js");var $=require("../feedback/tooltip.js"),w=require("react-aria");const D=r.createContext({selectedOption:null,setSelectedOption:()=>{}}),O=({value:l,label:s,isFocused:b})=>{const{selectedOption:y,setSelectedOption:i}=r.useContext(D),a=y?.value===l,d=r.useCallback(()=>{i({value:l,label:s})},[i,l,s]);return t.jsxs(c.HStack,{px:4,py:1.5,gap:2,bg:a?"brand.base":b?"brand.lightest":"",_hover:a?{}:{bg:"brand.lightest"},onClick:d,children:[t.jsx(c.Box,{w:4,children:a&&t.jsx(V.default,{width:16,height:16,color:v.token("colors.surface.primary")})}),t.jsx(g.default,{size:"lg",styles:{fontWeight:500,color:v.token(`colors.${a?"surface":"text"}.primary`)},children:s})]})},E=({children:l,onSelect:s,label:b,placeholder:y="Select one",selectedValue:i,tooltipContent:a,disabled:d,viewMax:P=5,...z})=>{const[p,f]=r.useState(!1),[o,h]=r.useState(null),x=r.useRef(null),k=r.useRef(null),A=P*2.5+1,F=r.useCallback(()=>{f(e=>!e),p||(h(null),setTimeout(()=>{var e;return(e=k.current)===null||e===void 0?void 0:e.focus()}))},[p]),H=r.useCallback(e=>{s(e.value),f(!1)},[s]),q=r.useMemo(()=>{const e=r.Children.toArray(l).find(n=>n.props.value===i);return e?e.props.label:y},[i,l]),{buttonProps:N}=w.useButton({...z,isDisabled:d,onPress:F},x),{focusProps:R,isFocusVisible:W}=w.useFocusRing(),{keyboardProps:B}=w.useKeyboard({onKeyDown:e=>{var n,u;if(!p)return;let m=o;const C=r.Children.toArray(l);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?h(r.Children.count(l)-1):(m=o>0?o-1:r.Children.count(l)-1,h(m));break;case"ArrowDown":e.preventDefault(),o===null?h(0):(m=o<r.Children.count(l)-1?o+1:0,h(m));break;case"Enter":if(e.preventDefault(),(n=x.current)===null||n===void 0||n.focus(),o===null)return;if(o>=0&&o<C.length){const j=C[o];j&&s(j.props.value)}break;case"Escape":f(!1),(u=x.current)===null||u===void 0||u.focus();break}}});return r.useEffect(()=>{const e=n=>{var u;!((u=k.current)===null||u===void 0)&&u.contains(n.target)||f(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t.jsx(D.Provider,{value:{selectedOption:{value:i??"",label:q},setSelectedOption:H},children:t.jsxs(c.VStack,{gap:2,w:"full",alignItems:"flex-start",children:[t.jsxs(c.HStack,{gap:2,opacity:d?.3:"",transition:"all linear 120ms",children:[b&&t.jsx(g.default,{size:"sm",styles:{fontWeight:500},children:b}),a&&t.jsx($.default,{isDisabled:d,content:a,children:t.jsx(_.default,{className:S.css({w:4,h:4,color:"neutral.primary"})})})]}),t.jsxs("button",{className:S.css({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:W?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:x,...w.mergeProps(N,R,B),children:[t.jsxs(c.HStack,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t.jsx(g.default,{size:"lg",styles:{color:v.token(`colors.text.${i?"primary":"tertiary"}`)},children:q}),p?t.jsx(L.default,{width:18,height:18,color:v.token("colors.brand.base")}):t.jsx(I.default,{width:18,height:18,color:v.token("colors.brand.base")})]}),p&&t.jsx(c.Box,{ref:k,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${A}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:r.Children.map(l,(e,n)=>r.cloneElement(e,{isFocused:n===o}))})]})]})})};O.displayName="DropdownOption",E.displayName="DropdownSelector",exports.DropdownOption=O,exports.DropdownSelector=E;
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/cjs/components/primitives/dropdown-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  selectedValue?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  selectedValue,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : 'Select one';\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/cjs/components/primitives/popover.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),C=require("./button.js");require("./checkbox.js"),require("./dropdown-selector.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var U=require("../../hooks/useToggleState.js"),B=require("@styled/css"),T=require("@styled/jsx"),W=require("@styled/patterns"),K=require("@styled/tokens"),f=require("create-slots"),n=require("react"),d=require("react-aria");const S="bottom left",F=8,P=f.createSlot(({children:i})=>t.jsx(t.Fragment,{children:i})),L=f.createSlot(({children:i,...r})=>t.jsx(T.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),A=f.createSlot(({children:i,...r})=>t.jsx(T.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),I=({children:i,...r})=>f.createHost(i,o=>{var b;const{isSelected:k,setSelected:q}=U.useToggleState({isOpen:r.isOpen,defaultSelected:r.defaultOpen,onChange:r.onOpenChange,...r}),p=r.isOpen!==void 0?r.isOpen:k,s=24,l=n.useMemo(()=>({isOpen:p,open:()=>{q(!0)},close:()=>{q(!1)},setOpen(e){q(e)},toggle(){}}),[p]),O=o.getProps(P),g=n.useRef(null),{triggerProps:D,overlayProps:N}=d.useOverlayTrigger({type:"dialog"},l,g),a=n.useRef(null),{popoverProps:_,underlayProps:z}=d.usePopover({placement:S,offset:F,popoverRef:a,triggerRef:g,...O},l),v=d.mergeProps(O,_);!((b=v?.style)===null||b===void 0)&&b.zIndex&&(v.style.zIndex=K.token("zIndex.max"));const H=n.useCallback(()=>{l.open()},[l]),y=n.useCallback(e=>{var E,j;const c=(E=g.current)===null||E===void 0?void 0:E.getBoundingClientRect(),u=(j=a.current)===null||j===void 0?void 0:j.getBoundingClientRect();if(c&&u){const Y=e.clientX>=c.left-s&&e.clientX<=c.right+s&&e.clientY>=c.top-s&&e.clientY<=c.bottom+s,w=e.clientX>=u.left-s&&e.clientX<=u.right+s&&e.clientY>=u.top-s&&e.clientY<=u.bottom+s;!Y&&!w&&l.close()}},[l]),M=()=>{if(a.current){const e=a.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},X=e=>{e.key==="Enter"&&(e.preventDefault(),p?l.close():(l.open(),setTimeout(M,0)))};n.useEffect(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const m=r.size==="sm"?16:24,h=o.get(L),x=o.get(A);return t.jsxs(t.Fragment,{children:[t.jsxs(C.default,{ref:g,...d.mergeProps(D,r),onHover:H,onKeyDown:X,children:[h&&t.jsx(C.default.LeadingIcon,{children:h&&{...h,props:{...h.props,width:m,height:m}}}),x&&t.jsx(C.default.TrailingIcon,{children:x&&{...x,props:{...x.props,width:m,height:m}}})]}),p&&t.jsxs(d.Overlay,{...N,children:[t.jsx("div",{...z,className:"underlay"}),t.jsx("div",{ref:a,...v,className:B.cx(W.vstack({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),v.className),children:o.get(P)})]})]})}),R=Object.assign(I,{LeadingIcon:L,TrailingIcon:A,Content:P});exports.DEFAULT_OFFSET=F,exports.DEFAULT_PLACEMENT=S,exports.Popover=R,exports.PopoverHost=I,exports.default=R;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),C=require("./button.js");require("./checkbox.js"),require("./dropdown-selector.js"),require("./radio.js"),require("./segmented-control.js"),require("./switch.js"),require("./text.js");var B=require("../../hooks/useToggleState.js"),W=require("@styled/css"),F=require("@styled/jsx"),K=require("@styled/patterns"),Z=require("@styled/tokens"),f=require("create-slots"),n=require("react"),d=require("react-aria");const L="bottom left",A=8,G="hover",T=f.createSlot(({children:i})=>t.jsx(t.Fragment,{children:i})),I=f.createSlot(({children:i,...r})=>t.jsx(F.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),R=f.createSlot(({children:i,...r})=>t.jsx(F.Center,{children:n.Children.map(i,o=>n.cloneElement(o,r))})),k=({children:i,...r})=>f.createHost(i,o=>{var b;const{isSelected:N,setSelected:q}=B.useToggleState({isOpen:r.isOpen,defaultSelected:r.defaultOpen,onChange:r.onOpenChange,...r}),p=r.isOpen!==void 0?r.isOpen:N,s=24,j=r.trigger||G,l=n.useMemo(()=>({isOpen:p,open:()=>{q(!0)},close:()=>{q(!1)},setOpen(e){q(e)},toggle(){}}),[p]),O=o.getProps(T),g=n.useRef(null),{triggerProps:_,overlayProps:z}=d.useOverlayTrigger({type:"dialog"},l,g),a=n.useRef(null),{popoverProps:H,underlayProps:M}=d.usePopover({placement:L,offset:A,popoverRef:a,triggerRef:g,...O},l),v=d.mergeProps(O,H);!((b=v?.style)===null||b===void 0)&&b.zIndex&&(v.style.zIndex=Z.token("zIndex.max"));const S=n.useCallback(()=>{l.open()},[l]),y=n.useCallback(e=>{var E,P;const c=(E=g.current)===null||E===void 0?void 0:E.getBoundingClientRect(),u=(P=a.current)===null||P===void 0?void 0:P.getBoundingClientRect();if(c&&u){const Y=e.clientX>=c.left-s&&e.clientX<=c.right+s&&e.clientY>=c.top-s&&e.clientY<=c.bottom+s,w=e.clientX>=u.left-s&&e.clientX<=u.right+s&&e.clientY>=u.top-s&&e.clientY<=u.bottom+s;!Y&&!w&&l.close()}},[l]),U=()=>{if(a.current){const e=a.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},X=e=>{e.key==="Enter"&&(e.preventDefault(),p?l.close():(l.open(),setTimeout(U,0)))};n.useEffect(()=>(document.addEventListener("mousemove",y),()=>{document.removeEventListener("mousemove",y)}),[y]);const h=r.size==="sm"?16:24,m=o.get(I),x=o.get(R);return t.jsxs(t.Fragment,{children:[t.jsxs(C.default,{ref:g,...d.mergeProps(_,r),onKeyDown:X,onHover:()=>j==="hover"&&S(),onPress:()=>j==="click"&&S(),children:[m&&t.jsx(C.default.LeadingIcon,{children:m&&{...m,props:{...m.props,width:h,height:h}}}),x&&t.jsx(C.default.TrailingIcon,{children:x&&{...x,props:{...x.props,width:h,height:h}}})]}),p&&t.jsxs(d.Overlay,{...z,children:[t.jsx("div",{...M,className:"underlay"}),t.jsx("div",{ref:a,...v,className:W.cx(K.vstack({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),v.className),children:o.get(T)})]})]})}),D=Object.assign(k,{LeadingIcon:I,TrailingIcon:R,Content:T});exports.DEFAULT_OFFSET=A,exports.DEFAULT_PLACEMENT=L,exports.Popover=D,exports.PopoverHost=k,exports.default=D;
 //# sourceMappingURL=popover.js.map

package/dist/cjs/components/primitives/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleMouseEnter = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onHover={handleMouseEnter}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  trigger?: 'click' | 'hover';\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n    const trigger = props.trigger || DEFAULT_TRIGGER;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleTrigger = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onKeyDown={handleKeyDown}\n          onHover={() => trigger === 'hover' && handleTrigger()}\n          onPress={() => trigger === 'click' && handleTrigger()}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","trigger","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}

package/dist/cjs/components/primitives/text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),x=require("../../recipes/text.js"),l=require("@styled/css"),c=require("react");const d={color:"text.primary"},f=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h1",{ref:a,className:l.css({textStyle:t?"h1-scaled":"h1",...d}),style:s,children:e})),o=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h2",{ref:a,className:l.css({textStyle:t?"h2-scaled":"h2",...d}),style:s,children:e})),m=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h3",{ref:a,className:l.css({textStyle:t?"h3-scaled":"h3",...d}),style:s,children:e})),N=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h4",{ref:a,className:l.css({textStyle:t?"h4-scaled":"h4",...d}),style:s,children:e})),u=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h5",{ref:a,className:l.css({textStyle:t?"h5-scaled":"h5",...d}),style:s,children:e})),j=c.forwardRef(({children:e,styles:s={},scale:t},a)=>r.jsx("h6",{ref:a,className:l.css({textStyle:t?"h6-scaled":"h6",color:"text.secondary"}),style:s,children:e})),p=c.forwardRef(({children:e,styles:s={},variant:t="text",size:a="md",truncate:i=!1},n)=>{const h=x.text({mono:!0,variant:t,size:a});return r.jsx("span",{ref:n,className:`${h} ${l.css({truncate:i})}`,style:s,children:e})}),H=c.forwardRef(({children:e,styles:s={},scale:t,inline:a=!1,variant:i="text",size:n="md",truncate:h=!1},v)=>{const R=x.text({variant:i,size:n,scale:t}),y={ref:v,className:`${R} ${l.css({truncate:h})}`,style:s};return a?r.jsx("span",{...y,children:e}):r.jsx("p",{...y,children:e})}),T=Object.assign(H,{H1:f,H2:o,H3:m,H4:N,H5:u,H6:j,Mono:p});H.displayName="Text",f.displayName="Text.H1",o.displayName="Text.H2",m.displayName="Text.H3",N.displayName="Text.H4",u.displayName="Text.H5",j.displayName="Text.H6",p.displayName="Text.Mono";var w=T;exports.default=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),h=require("../../recipes/text.js"),l=require("@styled/css"),c=require("react");const d={color:"text.primary"},f=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h1",{ref:r,className:l.css({textStyle:s?"h1-scaled":"h1",textWrap:"pretty",...d}),style:t,children:e})),o=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h2",{ref:r,className:l.css({textStyle:s?"h2-scaled":"h2",textWrap:"pretty",...d}),style:t,children:e})),p=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h3",{ref:r,className:l.css({textStyle:s?"h3-scaled":"h3",textWrap:"pretty",...d}),style:t,children:e})),m=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h4",{ref:r,className:l.css({textStyle:s?"h4-scaled":"h4",textWrap:"pretty",...d}),style:t,children:e})),N=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h5",{ref:r,className:l.css({textStyle:s?"h5-scaled":"h5",textWrap:"pretty",...d}),style:t,children:e})),u=c.forwardRef(({children:e,styles:t={},scale:s},r)=>a.jsx("h6",{ref:r,className:l.css({textStyle:s?"h6-scaled":"h6",textWrap:"pretty",color:"text.secondary"}),style:t,children:e})),j=c.forwardRef(({children:e,styles:t={},variant:s="text",size:r="md",truncate:i=!1},n)=>{const y=h.text({mono:!0,variant:s,size:r});return a.jsx("span",{ref:n,className:`${y} ${l.css({truncate:i})}`,style:t,children:e})}),H=c.forwardRef(({children:e,styles:t={},scale:s,inline:r=!1,variant:i="text",size:n="md",truncate:y=!1},v)=>{const R=h.text({variant:i,size:n,scale:s}),x={ref:v,className:`${R} ${l.css({truncate:y})}`,style:t};return r?a.jsx("span",{...x,children:e}):a.jsx("p",{...x,children:e})}),T=Object.assign(H,{H1:f,H2:o,H3:p,H4:m,H5:N,H6:u,Mono:j});H.displayName="Text",f.displayName="Text.H1",o.displayName="Text.H2",p.displayName="Text.H3",m.displayName="Text.H4",N.displayName="Text.H5",u.displayName="Text.H6",j.displayName="Text.Mono";var w=T;exports.default=w;
 //# sourceMappingURL=text.js.map

package/dist/cjs/components/primitives/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', ...defaultColor })} style={styles}>\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', ...defaultColor })} style={styles}>\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', ...defaultColor })} style={styles}>\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', ...defaultColor })} style={styles}>\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', ...defaultColor })} style={styles}>\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color: 'text.secondary' })} style={styles}>\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1\n    ref={ref}\n    className={css({ textStyle: scale ? 'h1-scaled' : 'h1', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2\n    ref={ref}\n    className={css({ textStyle: scale ? 'h2-scaled' : 'h2', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3\n    ref={ref}\n    className={css({ textStyle: scale ? 'h3-scaled' : 'h3', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4\n    ref={ref}\n    className={css({ textStyle: scale ? 'h4-scaled' : 'h4', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5\n    ref={ref}\n    className={css({ textStyle: scale ? 'h5-scaled' : 'h5', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6\n    ref={ref}\n    className={css({ textStyle: scale ? 'h6-scaled' : 'h6', textWrap: 'pretty', color: 'text.secondary' })}\n    style={styles}\n  >\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}

package/dist/cjs/recipes/button.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("@styled/css");const e=r.sva({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.2s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.2s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.2s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.2s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.quaternary"},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.base"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.base"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}}},defaultVariants:{size:"md",variant:"primary"}});exports.button=e;
+"use strict";var r=require("@styled/css");const e=r.sva({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.1s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.1s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.1s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.quaternary"},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}},textStyle:{negative:{},neutral:{},subtle:{}}},compoundVariants:[{variant:"text",textStyle:"negative",css:{label:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}},icon:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}}}},{variant:"text",textStyle:"neutral",css:{label:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",textStyle:"subtle",css:{label:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}}],defaultVariants:{size:"md",variant:"primary"}});exports.button=e;
 //# sourceMappingURL=button.js.map

package/dist/cjs/recipes/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.2s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.2s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.2s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.2s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.quaternary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.base',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.base',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.quaternary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: {\n              color: 'ruby.70',\n            },\n          },\n        },\n        icon: {\n          color: 'negative.darker',\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: {\n              color: 'ruby.70',\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          color: 'text.primary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          color: 'text.tertiary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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"}

package/dist/cjs/recipes/text.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@styled/css");const t=e.cva({base:{},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker",fontWeight:"medium"},info:{color:"brand.base",fontWeight:"medium"},success:{color:"positive.base",fontWeight:"medium"},warning:{color:"warning.base",fontWeight:"medium"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});exports.text=t;
+"use strict";var e=require("@styled/css");const t=e.cva({base:{textWrap:"pretty"},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker",fontWeight:"medium"},info:{color:"brand.base",fontWeight:"medium"},success:{color:"positive.base",fontWeight:"medium"},warning:{color:"warning.base",fontWeight:"medium"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});exports.text=t;
 //# sourceMappingURL=text.js.map

package/dist/cjs/recipes/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {},\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n        fontWeight: 'medium',\n      },\n      info: {\n        color: 'brand.base',\n        fontWeight: 'medium',\n      },\n      success: {\n        color: 'positive.base',\n        fontWeight: 'medium',\n      },\n      warning: {\n        color: 'warning.base',\n        fontWeight: 'medium',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"0CAEa,MAAAA,EAAOC,MAAI,CACtB,KAAM,CAAA,EACN,SAAU,CACR,KAAM,CACJ,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,MAAO,CACL,MAAO,CACP,EAAA,KAAM,CACP,CAAA,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,kBACP,WAAY,QACb,EACD,KAAM,CACJ,MAAO,aACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,gBACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,eACP,WAAY,QACb,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}
+{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {\n    textWrap: 'pretty',\n  },\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n        fontWeight: 'medium',\n      },\n      info: {\n        color: 'brand.base',\n        fontWeight: 'medium',\n      },\n      success: {\n        color: 'positive.base',\n        fontWeight: 'medium',\n      },\n      warning: {\n        color: 'warning.base',\n        fontWeight: 'medium',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"0CAEa,MAAAA,EAAOC,MAAI,CACtB,KAAM,CACJ,SAAU,QACX,EACD,SAAU,CACR,KAAM,CACJ,MAAO,CAAE,EACT,KAAM,CACP,CAAA,EACD,MAAO,CACL,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,kBACP,WAAY,QACb,EACD,KAAM,CACJ,MAAO,aACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,gBACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,eACP,WAAY,QACb,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}

package/dist/es/components/inputs/text-input.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as T}from"react/jsx-runtime";import{Children as z,cloneElement as D,isValidElement as _,forwardRef as E,useRef as S}from"react";import{useTextField as k,useFocusRing as w,useHover as A,mergeProps as H}from"react-aria";import M from"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{textInput as R}from"../../recipes/text-input.js";import{cx as V}from"@styled/css";import{Flex as N,VStack as ee,HStack as re}from"@styled/jsx";import{token as u}from"@styled/tokens";import{createSlot as m,createHost as te}from"create-slots";const B=m(({children:o,...n})=>t(N,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return D(e,{...n,color:(r=e.props.color)!==null&&r!==void 0?r:u("colors.neutral.primary")})})})),O=m(({children:o,...n})=>t(N,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return _(e)?D(e,{...n,color:(r=e.props.color)!==null&&r!==void 0?r:u("colors.brand.base")}):null})})),W=m(M),q=m(p),G=m(p),J=E((o,n)=>{const{label:e,disabled:r,size:a="md",alignText:h="left",attr:f,description:l,autoFocus:g,className:x="",errorMessage:d}=o,s=a==="sm"?16:20,L=S(null),P=n||L,{labelProps:Q,inputProps:U,descriptionProps:X,errorMessageProps:Y,isInvalid:y,validationErrors:I}=k({...o,isDisabled:r??!1,isInvalid:!!d},P),{focusProps:Z}=w({autoFocus:g??!1}),{hoverProps:$}=A({isDisabled:r??!1});return te(o.children,c=>{const b=c.get(B),v=c.get(O),j=c.getProps(W),C=c.getProps(q),F=c.getProps(G),i=R({size:a,alignText:h,disabled:r,isError:y});return T(ee,{className:V(i.container,x),children:[e&&t("label",{className:i.label,...Q,children:e}),T(re,{className:i.inputContainer,children:[b&&{...b,props:{...b.props,className:i.typeIcon,width:s,height:s}},C&&t(p,{...C,styles:{color:u("colors.text.tertiary")}}),t("input",{ref:P,className:i.input,...H(U,Z,$),...f}),F&&t(p,{...F,styles:{color:u("colors.text.tertiary")}}),v&&{...v,props:{...v.props,className:i.actionIcon,width:s,height:s}},j&&t(N,{alignItems:"center",justifyContent:"center",className:i.actionButton,children:t(M,{...j,variant:"text",size:a})})]}),l&&t("div",{className:i.description,...X,children:l}),y&&t(p,{variant:"error",...Y,size:"sm",styles:{fontWeight:"400"},children:I.length>0?I.join(" "):d})]})})}),K=E((o,n)=>{const{disabled:e,autoFocus:r,className:a="",attr:h}=o,f=S(null),l=n||f,{inputProps:g}=k({...o,isDisabled:e??!1},l),{focusProps:x}=w({autoFocus:r??!1}),{hoverProps:d}=A({isDisabled:e??!1}),s=R({char:!0,disabled:e});return t("div",{className:V(s.container,s.inputContainer,a),children:t("input",{ref:l,className:s.input,...H(g,x,d),size:1,...h})})}),oe=Object.assign(J,{TypeIcon:B,ActionIcon:O,ActionButton:W,Char:K,Prefix:q,Suffix:G});J.displayName="TextInput",K.displayName="TextInputChar";export{oe as TextInput};
+import{jsx as t,jsxs as T}from"react/jsx-runtime";import{Children as z,cloneElement as D,isValidElement as _,forwardRef as E,useRef as S}from"react";import{useTextField as k,useFocusRing as w,useHover as H,mergeProps as M}from"react-aria";import R from"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{textInput as V}from"../../recipes/text-input.js";import{cx as A}from"@styled/css";import{Flex as N,VStack as ee,HStack as re}from"@styled/jsx";import{token as u}from"@styled/tokens";import{createSlot as m,createHost as te}from"create-slots";const B=m(({children:o,...n})=>t(N,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return D(e,{...n,color:(r=e.props.color)!==null&&r!==void 0?r:u("colors.neutral.primary")})})})),G=m(({children:o,...n})=>t(N,{alignItems:"center",justifyContent:"center",children:z.map(o,e=>{var r;return _(e)?D(e,{...n,color:(r=e.props.color)!==null&&r!==void 0?r:u("colors.brand.base")}):null})})),O=m(R),W=m(p),$=m(p),q=E((o,n)=>{const{label:e,disabled:r,size:a="md",alignText:h="left",attr:f,description:l,autoFocus:g,className:x="",errorMessage:d}=o,s=a==="sm"?16:20,K=S(null),P=n||K,{labelProps:L,inputProps:Q,descriptionProps:U,errorMessageProps:X,isInvalid:y,validationErrors:I}=k({...o,isDisabled:r??!1,isInvalid:!!d},P),{focusProps:Y}=w({autoFocus:g??!1}),{hoverProps:Z}=H({isDisabled:r??!1});return te(o.children,c=>{const b=c.get(B),v=c.get(G),j=c.getProps(O),C=c.getProps(W),F=c.getProps($),i=V({size:a,alignText:h,disabled:r,isError:y});return T(ee,{className:A(i.container,x),children:[e&&t("label",{className:i.label,...L,children:e}),T(re,{className:i.inputContainer,children:[b&&{...b,props:{...b.props,className:i.typeIcon,width:s,height:s}},C&&t(p,{...C,styles:{color:u("colors.text.tertiary")}}),t("input",{ref:P,className:i.input,...M(Q,Y,Z),...f}),F&&t(p,{...F,styles:{color:u("colors.text.tertiary")}}),v&&{...v,props:{...v.props,className:i.actionIcon,width:s,height:s}},j&&t(N,{alignItems:"center",justifyContent:"center",className:i.actionButton,children:t(R,{...j,variant:"text",size:a})})]}),l&&t("div",{className:i.description,...U,children:l}),y&&t(p,{variant:"error",...X,size:"sm",styles:{fontWeight:"400"},children:I.length>0?I.join(" "):d})]})})}),J=E((o,n)=>{const{disabled:e,autoFocus:r,className:a="",attr:h}=o,f=S(null),l=n||f,{inputProps:g}=k({...o,isDisabled:e??!1},l),{focusProps:x}=w({autoFocus:r??!1}),{hoverProps:d}=H({isDisabled:e??!1}),s=V({char:!0,disabled:e});return t("div",{className:A(s.container,s.inputContainer,a),children:t("input",{ref:l,className:s.input,...M(g,x,d),size:1,...h})})}),oe=Object.assign(q,{TypeIcon:B,ActionIcon:G,ActionButton:O,Char:J,Prefix:W,Suffix:$});q.displayName="TextInput",J.displayName="TextInputChar";export{oe as TextInput};
 //# sourceMappingURL=text-input.js.map

package/dist/es/components/primitives/button.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as F}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as R}from"../feedback/loading-spinner.js";import"@styled/tokens";import"./checkbox.js";import"./dropdown-selector.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import"./portal.js";import{Children as b,cloneElement as v,forwardRef as k,useRef as D}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{Flex as y,HStack as E,Box as w}from"@styled/jsx";import"../feedback/tooltip.js";import{button as L}from"../../recipes/button.js";import{cx as O}from"@styled/css";import{createSlot as x,createHost as T}from"create-slots";import{useButton as q,useHover as A,useFocusRing as M,mergeProps as V}from"react-aria";const j=x(({children:e,...i})=>t(y,{alignItems:"center",justifyContent:"center",children:b.map(e,r=>v(r,i))})),z=x(({children:e,...i})=>t(y,{alignItems:"center",justifyContent:"center",children:b.map(e,r=>v(r,i))})),W=({variant:e="primary",size:i="md"})=>{const r=e==="primary"||e==="negative",p=e==="neutral"||e==="tertiary";return t(R,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:r,neutral:p})},N=k((e,i)=>{const{label:r,variant:p="primary",size:m="md",disabled:l,expand:c,validating:d,iconSize:C,onHover:u}=e,a=C||(m==="sm"?16:24),o=L({variant:p,expand:c,size:m,validating:d,iconOnly:!r}),H=D(null),f=i||H,{buttonProps:I}=q({...e,isDisabled:l??!1},f),{hoverProps:P}=A({isDisabled:l??!1}),{isFocusVisible:S,focusProps:B}=M();return T(e.children,h=>{const n=h.get(j),s=h.get(z),g=a/4;return t("button",{className:O(o.button,"group",!r&&o.iconContainer,S&&o.focus),ref:f,...V(I,P,B),"aria-disabled":l,onMouseEnter:u,onTouchStart:u,children:d?t(W,{variant:p,size:m}):F(E,{w:"full",gap:2,justify:r&&(n||s)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:o.icon,width:a,height:a}},s&&r&&c&&t(w,{w:g}),r&&t("span",{className:o.label,children:r}),n&&r&&c&&t(w,{w:g}),s&&{...s,props:{...s.props,className:s.props.color?void 0:o.icon,width:a,height:a}}]})})})}),G=Object.assign(N,{LeadingIcon:j,TrailingIcon:z});N.displayName="Button";export{G as default};
+import{jsx as t,jsxs as F}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as k}from"../feedback/loading-spinner.js";import"@styled/tokens";import"./checkbox.js";import"./dropdown-selector.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import"./portal.js";import{Children as b,cloneElement as v,forwardRef as D,useRef as E}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{Flex as y,HStack as L,Box as x}from"@styled/jsx";import"../feedback/tooltip.js";import{button as O}from"../../recipes/button.js";import{cx as T}from"@styled/css";import{createSlot as w,createHost as A}from"create-slots";import{useButton as G,useHover as M,useFocusRing as V,mergeProps as W}from"react-aria";const j=w(({children:r,...i})=>t(y,{alignItems:"center",justifyContent:"center",children:b.map(r,e=>v(e,i))})),S=w(({children:r,...i})=>t(y,{alignItems:"center",justifyContent:"center",children:b.map(r,e=>v(e,i))})),q=({variant:r="primary",size:i="md"})=>{const e=r==="primary"||r==="negative",p=r==="neutral"||r==="tertiary";return t(k,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:e,neutral:p})},z=D((r,i)=>{const{label:e,variant:p="primary",textStyle:N,size:m="md",disabled:l,expand:c,validating:d,iconSize:C,onHover:u}=r,a=C||(m==="sm"?16:24),o=O({variant:p,textStyle:N,expand:c,size:m,validating:d,iconOnly:!e}),H=E(null),f=i||H,{buttonProps:I}=G({...r,isDisabled:l??!1},f),{hoverProps:P}=M({isDisabled:l??!1}),{isFocusVisible:B,focusProps:R}=V();return A(r.children,g=>{const n=g.get(j),s=g.get(S),h=a/4;return t("button",{className:T(o.button,"group",!e&&o.iconContainer,B&&o.focus),ref:f,...W(I,P,R),"aria-disabled":l,onMouseEnter:u,onTouchStart:u,children:d?t(q,{variant:p,size:m}):F(L,{w:"full",gap:2,justify:e&&(n||s)?"space-between":"center",children:[n&&{...n,props:{...n.props,className:n.props.color?void 0:o.icon,width:a,height:a}},s&&e&&c&&t(x,{w:h}),e&&t("span",{className:o.label,children:e}),n&&e&&c&&t(x,{w:h}),s&&{...s,props:{...s.props,className:s.props.color?void 0:o.icon,width:a,height:a}}]})})})}),J=Object.assign(z,{LeadingIcon:j,TrailingIcon:S});z.displayName="Button";export{J as default};
 //# sourceMappingURL=button.js.map

package/dist/es/components/primitives/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n  label?: string;\n  size?: 'sm' | 'md' | 'lg';\n  variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n  textStyle?: 'negative' | 'neutral' | 'subtle';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Flex>\n  );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n  const spinnerInverted = variant === 'primary' || variant === 'negative';\n  const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n  const spinnerSizes = {\n    sm: 20,\n    md: 24,\n    lg: 28,\n  };\n\n  return (\n    <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n  );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n  const {\n    label,\n    variant = 'primary',\n    textStyle,\n    size = 'md',\n    disabled,\n    expand,\n    validating,\n    iconSize: iconSizeOverride,\n    onHover,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n  const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n  const internalRef = useRef(null);\n  const ref = forwardedRef || internalRef;\n\n  const { buttonProps } = useButton(\n    { ...props, isDisabled: disabled ?? false },\n    ref as React.RefObject<HTMLButtonElement>,\n  );\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  return createHost(props.children, slots => {\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n    const containerSize = iconSize / 4;\n\n    return (\n      <button\n        className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n        ref={ref}\n        {...mergeProps(buttonProps, hoverProps, focusProps)}\n        aria-disabled={disabled}\n        onMouseEnter={onHover as MouseEventHandler}\n        onTouchStart={onHover as TouchEventHandler}\n      >\n        {validating ? (\n          <Validation variant={variant} size={size} />\n        ) : (\n          <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                ...leadingIcon.props,\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n            {trailingIcon && label && expand && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && label && expand && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                ...trailingIcon.props,\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n              },\n            }}\n          </HStack>\n        )}\n      </button>\n    );\n  });\n});\n\nconst Button = Object.assign(Component, {\n  LeadingIcon,\n  TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}

package/dist/es/components/primitives/dropdown-selector.js

@@ -1,2 +1,2 @@
-import{jsxs as m,jsx as t}from"react/jsx-runtime";import"../feedback/callout.js";import{css as E}from"@styled/css";import{HStack as x,Box as P,VStack as K}from"@styled/jsx";import{token as f}from"@styled/tokens";import M from"../icons/ico-caret-down.js";import T from"../icons/ico-caret-up.js";import U from"../icons/ico-checkmark.js";import Y from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import S from"./text.js";import"./portal.js";import{createContext as q,useContext as G,useCallback as k,useState as z,useRef as A,useMemo as J,Children as c,useEffect as Q,cloneElement as X}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import Z from"../feedback/tooltip.js";import{useButton as $,useFocusRing as ee,useKeyboard as oe,mergeProps as re}from"react-aria";const N=q({selectedOption:null,setSelectedOption:()=>{}}),W=({value:r,label:i,isFocused:b})=>{const{selectedOption:a,setSelectedOption:u}=G(N),n=a?.value===r,w=k(()=>{u({value:r,label:i})},[u,r,i]);return m(x,{px:4,py:1.5,gap:2,bg:n?"brand.base":b?"brand.lightest":"",_hover:n?{}:{bg:"brand.lightest"},onClick:w,children:[t(P,{w:4,children:n&&t(U,{width:16,height:16,color:f("colors.surface.primary")})}),t(S,{size:"lg",styles:{fontWeight:500,color:f(`colors.${n?"surface":"text"}.primary`)},children:i})]})},j=({children:r,onSelect:i,label:b,selectedValue:a,tooltipContent:u,disabled:n,viewMax:w=5,...F})=>{const[p,h]=z(!1),[o,d]=z(null),v=A(null),g=A(null),H=w*2.5+1,I=k(()=>{h(e=>!e),p||(d(null),setTimeout(()=>{var e;return(e=g.current)===null||e===void 0?void 0:e.focus()}))},[p]),L=k(e=>{i(e.value),h(!1)},[i]),D=J(()=>{const e=c.toArray(r).find(l=>l.props.value===a);return e?e.props.label:"Select one"},[a,r]),{buttonProps:R}=$({...F,isDisabled:n,onPress:I},v),{focusProps:V,isFocusVisible:_}=ee(),{keyboardProps:B}=oe({onKeyDown:e=>{var l,s;if(!p)return;let y=o;const C=c.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?d(c.count(r)-1):(y=o>0?o-1:c.count(r)-1,d(y));break;case"ArrowDown":e.preventDefault(),o===null?d(0):(y=o<c.count(r)-1?o+1:0,d(y));break;case"Enter":if(e.preventDefault(),(l=v.current)===null||l===void 0||l.focus(),o===null)return;if(o>=0&&o<C.length){const O=C[o];O&&i(O.props.value)}break;case"Escape":h(!1),(s=v.current)===null||s===void 0||s.focus();break}}});return Q(()=>{const e=l=>{var s;!((s=g.current)===null||s===void 0)&&s.contains(l.target)||h(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t(N.Provider,{value:{selectedOption:{value:a??"",label:D},setSelectedOption:L},children:m(K,{gap:2,w:"full",alignItems:"flex-start",children:[m(x,{gap:2,opacity:n?.3:"",transition:"all linear 120ms",children:[b&&t(S,{size:"sm",styles:{fontWeight:500},children:b}),u&&t(Z,{isDisabled:n,content:u,children:t(Y,{className:E({w:4,h:4,color:"neutral.primary"})})})]}),m("button",{className:E({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:v,...re(R,V,B),children:[m(x,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t(S,{size:"lg",styles:{color:f(`colors.text.${a?"primary":"tertiary"}`)},children:D}),p?t(T,{width:18,height:18,color:f("colors.brand.base")}):t(M,{width:18,height:18,color:f("colors.brand.base")})]}),p&&t(P,{ref:g,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:c.map(r,(e,l)=>X(e,{isFocused:l===o}))})]})]})})};W.displayName="DropdownOption",j.displayName="DropdownSelector";export{W as DropdownOption,j as DropdownSelector};
+import{jsxs as m,jsx as t}from"react/jsx-runtime";import"../feedback/callout.js";import{css as E}from"@styled/css";import{HStack as x,Box as P,VStack as K}from"@styled/jsx";import{token as f}from"@styled/tokens";import M from"../icons/ico-caret-down.js";import T from"../icons/ico-caret-up.js";import U from"../icons/ico-checkmark.js";import Y from"../icons/ico-question-circle-fill.js";import"./button.js";import"./checkbox.js";import"./popover.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import S from"./text.js";import"./portal.js";import{createContext as q,useContext as G,useCallback as k,useState as $,useRef as z,useMemo as J,Children as c,useEffect as Q,cloneElement as X}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import Z from"../feedback/tooltip.js";import{useButton as ee,useFocusRing as oe,useKeyboard as re,mergeProps as te}from"react-aria";const N=q({selectedOption:null,setSelectedOption:()=>{}}),W=({value:r,label:l,isFocused:h})=>{const{selectedOption:w,setSelectedOption:i}=G(N),s=w?.value===r,u=k(()=>{i({value:r,label:l})},[i,r,l]);return m(x,{px:4,py:1.5,gap:2,bg:s?"brand.base":h?"brand.lightest":"",_hover:s?{}:{bg:"brand.lightest"},onClick:u,children:[t(P,{w:4,children:s&&t(U,{width:16,height:16,color:f("colors.surface.primary")})}),t(S,{size:"lg",styles:{fontWeight:500,color:f(`colors.${s?"surface":"text"}.primary`)},children:l})]})},j=({children:r,onSelect:l,label:h,placeholder:w="Select one",selectedValue:i,tooltipContent:s,disabled:u,viewMax:A=5,...F})=>{const[p,b]=$(!1),[o,d]=$(null),v=z(null),g=z(null),H=A*2.5+1,I=k(()=>{b(e=>!e),p||(d(null),setTimeout(()=>{var e;return(e=g.current)===null||e===void 0?void 0:e.focus()}))},[p]),L=k(e=>{l(e.value),b(!1)},[l]),D=J(()=>{const e=c.toArray(r).find(n=>n.props.value===i);return e?e.props.label:w},[i,r]),{buttonProps:R}=ee({...F,isDisabled:u,onPress:I},v),{focusProps:V,isFocusVisible:_}=oe(),{keyboardProps:B}=re({onKeyDown:e=>{var n,a;if(!p)return;let y=o;const C=c.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?d(c.count(r)-1):(y=o>0?o-1:c.count(r)-1,d(y));break;case"ArrowDown":e.preventDefault(),o===null?d(0):(y=o<c.count(r)-1?o+1:0,d(y));break;case"Enter":if(e.preventDefault(),(n=v.current)===null||n===void 0||n.focus(),o===null)return;if(o>=0&&o<C.length){const O=C[o];O&&l(O.props.value)}break;case"Escape":b(!1),(a=v.current)===null||a===void 0||a.focus();break}}});return Q(()=>{const e=n=>{var a;!((a=g.current)===null||a===void 0)&&a.contains(n.target)||b(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t(N.Provider,{value:{selectedOption:{value:i??"",label:D},setSelectedOption:L},children:m(K,{gap:2,w:"full",alignItems:"flex-start",children:[m(x,{gap:2,opacity:u?.3:"",transition:"all linear 120ms",children:[h&&t(S,{size:"sm",styles:{fontWeight:500},children:h}),s&&t(Z,{isDisabled:u,content:s,children:t(Y,{className:E({w:4,h:4,color:"neutral.primary"})})})]}),m("button",{className:E({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:v,...te(R,V,B),children:[m(x,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t(S,{size:"lg",styles:{color:f(`colors.text.${i?"primary":"tertiary"}`)},children:D}),p?t(T,{width:18,height:18,color:f("colors.brand.base")}):t(M,{width:18,height:18,color:f("colors.brand.base")})]}),p&&t(P,{ref:g,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${H}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:c.map(r,(e,n)=>X(e,{isFocused:n===o}))})]})]})})};W.displayName="DropdownOption",j.displayName="DropdownSelector";export{W as DropdownOption,j as DropdownSelector};
 //# sourceMappingURL=dropdown-selector.js.map

package/dist/es/components/primitives/dropdown-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  selectedValue?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  selectedValue,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : 'Select one';\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}
+{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  placeholder?: string;\n  selectedValue?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  label: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, label, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label });\n  }, [setSelectedOption, value, label]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {label}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  placeholder = 'Select one',\n  selectedValue,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [onSelect],\n  );\n\n  const selectedLabel = useMemo(() => {\n    const childElements = Children.toArray(children) as ReactElement<DropdownOptionProps>[];\n    const matchedChild = childElements.find(child => child.props.value === selectedValue);\n    return matchedChild ? matchedChild.props.label : placeholder;\n  }, [selectedValue, children]);\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider\n      value={{ selectedOption: { value: selectedValue ?? '', label: selectedLabel }, setSelectedOption: handleSelect }}\n    >\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedValue ? 'primary' : 'tertiary'}`) }}>\n              {selectedLabel}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownOption.displayName = 'DropdownOption';\nDropdownSelector.displayName = 'DropdownSelector';\n"],"names":["DropdownContext","createContext","DropdownOption","value","label","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","children","onSelect","placeholder","selectedValue","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","selectedLabel","useMemo","matchedChild","Children","child","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","index","cloneElement"],"mappings":"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"}

package/dist/es/components/primitives/popover.js

@@ -1,2 +1,2 @@
-import{jsx as l,Fragment as T,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as $}from"../../hooks/useToggleState.js";import{cx as G}from"@styled/css";import{Center as S}from"@styled/jsx";import{vstack as J}from"@styled/patterns";import{token as Q}from"@styled/tokens";import{createSlot as E,createHost as V}from"create-slots";import{Children as L,cloneElement as A,useMemo as ee,useRef as R,useCallback as k,useEffect as oe}from"react";import{useOverlayTrigger as te,usePopover as re,mergeProps as z,Overlay as ne}from"react-aria";const D="bottom left",F=8,P=E(({children:i})=>l(T,{children:i})),N=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),X=E(({children:i,...o})=>l(S,{children:L.map(i,t=>A(t,o))})),Y=({children:i,...o})=>V(i,t=>{var h;const{isSelected:w,setSelected:v}=$({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:w,r=24,n=ee(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=t.getProps(P),d=R(null),{triggerProps:H,overlayProps:B}=te({type:"dialog"},n,d),s=R(null),{popoverProps:M,underlayProps:U}=re({placement:D,offset:F,popoverRef:s,triggerRef:d,...I},n),m=z(I,M);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=Q("zIndex.max"));const W=k(()=>{n.open()},[n]),x=k(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-r&&e.clientX<=c.right+r&&e.clientY>=c.top-r&&e.clientY<=c.bottom+r,Z=e.clientX>=p.left-r&&e.clientX<=p.right+r&&e.clientY>=p.top-r&&e.clientY<=p.bottom+r;!K&&!Z&&n.close()}},[n]),_=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},q=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(_,0)))};oe(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=t.get(N),f=t.get(X);return O(T,{children:[O(C,{ref:d,...z(H,o),onHover:W,onKeyDown:q,children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ne,{...B,children:[l("div",{...U,className:"underlay"}),l("div",{ref:s,...m,className:G(J({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:t.get(P)})]})]})}),j=Object.assign(Y,{LeadingIcon:N,TrailingIcon:X,Content:P});export{F as DEFAULT_OFFSET,D as DEFAULT_PLACEMENT,j as Popover,Y as PopoverHost,j as default};
+import{jsx as l,Fragment as L,jsxs as O}from"react/jsx-runtime";import C from"./button.js";import"./checkbox.js";import"./dropdown-selector.js";import"./radio.js";import"./segmented-control.js";import"./switch.js";import"./text.js";import{useToggleState as J}from"../../hooks/useToggleState.js";import{cx as Q}from"@styled/css";import{Center as R}from"@styled/jsx";import{vstack as V}from"@styled/patterns";import{token as $}from"@styled/tokens";import{createSlot as P,createHost as ee}from"create-slots";import{Children as k,cloneElement as z,useMemo as oe,useRef as A,useCallback as F,useEffect as re}from"react";import{useOverlayTrigger as te,usePopover as ne,mergeProps as N,Overlay as ie}from"react-aria";const X="bottom left",Y=8,le="hover",E=P(({children:i})=>l(L,{children:i})),w=P(({children:i,...o})=>l(R,{children:k.map(i,r=>z(r,o))})),D=P(({children:i,...o})=>l(R,{children:k.map(i,r=>z(r,o))})),H=({children:i,...o})=>ee(i,r=>{var h;const{isSelected:B,setSelected:v}=J({isOpen:o.isOpen,defaultSelected:o.defaultOpen,onChange:o.onOpenChange,...o}),a=o.isOpen!==void 0?o.isOpen:B,t=24,T=o.trigger||le,n=oe(()=>({isOpen:a,open:()=>{v(!0)},close:()=>{v(!1)},setOpen(e){v(e)},toggle(){}}),[a]),I=r.getProps(E),d=A(null),{triggerProps:M,overlayProps:U}=te({type:"dialog"},n,d),s=A(null),{popoverProps:W,underlayProps:_}=ne({placement:X,offset:Y,popoverRef:s,triggerRef:d,...I},n),m=N(I,W);!((h=m?.style)===null||h===void 0)&&h.zIndex&&(m.style.zIndex=$("zIndex.max"));const S=F(()=>{n.open()},[n]),x=F(e=>{var b,y;const c=(b=d.current)===null||b===void 0?void 0:b.getBoundingClientRect(),p=(y=s.current)===null||y===void 0?void 0:y.getBoundingClientRect();if(c&&p){const K=e.clientX>=c.left-t&&e.clientX<=c.right+t&&e.clientY>=c.top-t&&e.clientY<=c.bottom+t,Z=e.clientX>=p.left-t&&e.clientX<=p.right+t&&e.clientY>=p.top-t&&e.clientY<=p.bottom+t;!K&&!Z&&n.close()}},[n]),q=()=>{if(s.current){const e=s.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');e.length>0&&e[0].focus()}},G=e=>{e.key==="Enter"&&(e.preventDefault(),a?n.close():(n.open(),setTimeout(q,0)))};re(()=>(document.addEventListener("mousemove",x),()=>{document.removeEventListener("mousemove",x)}),[x]);const g=o.size==="sm"?16:24,u=r.get(w),f=r.get(D);return O(L,{children:[O(C,{ref:d,...N(M,o),onKeyDown:G,onHover:()=>T==="hover"&&S(),onPress:()=>T==="click"&&S(),children:[u&&l(C.LeadingIcon,{children:u&&{...u,props:{...u.props,width:g,height:g}}}),f&&l(C.TrailingIcon,{children:f&&{...f,props:{...f.props,width:g,height:g}}})]}),a&&O(ie,{...U,children:[l("div",{..._,className:"underlay"}),l("div",{ref:s,...m,className:Q(V({bg:"surface.primary",p:3,gap:0,color:"text.secondary",borderWidth:1,borderColor:"neutral.secondary",borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",maxW:52,alignItems:"start"}),m.className),children:r.get(E)})]})]})}),j=Object.assign(H,{LeadingIcon:w,TrailingIcon:D,Content:E});export{Y as DEFAULT_OFFSET,X as DEFAULT_PLACEMENT,j as Popover,H as PopoverHost,j as default};
 //# sourceMappingURL=popover.js.map

package/dist/es/components/primitives/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleMouseEnter = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onHover={handleMouseEnter}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleMouseEnter","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  trigger?: 'click' | 'hover';\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n    const trigger = props.trigger || DEFAULT_TRIGGER;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleTrigger = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onKeyDown={handleKeyDown}\n          onHover={() => trigger === 'hover' && handleTrigger()}\n          onPress={() => trigger === 'click' && handleTrigger()}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","trigger","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"ssBAyCO,MAAMA,EAA+B,cAC/BC,EAAiB,EAExBC,GAA0B,QAE1BC,EAAiBC,EAAW,CAAC,CAAE,SAAAC,CAA+B,IAAKC,EAAAC,EAAA,CAAA,SAAGF,CAAQ,CAAA,CAAI,EAElFG,EAAcJ,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGI,CAAO,IAElDH,EAACI,EAAM,CAAA,SACJC,EAAS,IAAIN,EAAUO,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKK,EAAeV,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGI,CAAO,IAEnDH,EAACI,EAAM,CAAA,SACJC,EAAS,IAAIN,EAAUO,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACM,CAAA,CAEZ,EAIYM,EAAc,CAAC,CAAE,SAAAV,EAAU,GAAGI,CAAqB,IACvDO,GAAWX,EAAUY,GAAQ,OAClC,KAAM,CAAE,WAAAC,EAAY,YAAaC,CAAO,EAAKC,EAAe,CAC1D,OAAQX,EAAM,OACd,gBAAiBA,EAAM,YACvB,SAAUA,EAAM,aAChB,GAAGA,CACJ,CAAA,EAEKY,EAASZ,EAAM,SAAW,OAAYA,EAAM,OAASS,EACrDI,EAAiB,GACjBC,EAAUd,EAAM,SAAWP,GAE3BsB,EAAQC,GACZ,KAAO,CACL,OAAAJ,EACA,KAAM,IAAK,CACTF,EAAQ,EAAI,CACd,EACA,MAAO,IAAK,CACVA,EAAQ,EAAK,CACf,EACA,QAAQO,EAAc,CACpBP,EAAQO,CAAK,CACf,EACA,SACD,CAAA,GACD,CAACL,CAAM,CAAC,EAGJM,EAAsBV,EAAM,SAASd,CAAc,EAEnDyB,EAAaC,EAA0B,IAAI,EAC3C,CAAE,aAAAC,EAAc,aAAAC,CAAc,EAAGC,GAAkB,CAAE,KAAM,QAAU,EAAER,EAAOI,CAAU,EAExFK,EAAaJ,EAAuB,IAAI,EACxC,CAAE,aAAAK,EAAc,cAAAC,CAAe,EAAGC,GACtC,CACE,UAAWpC,EACX,OAAQC,EACR,WAAYgC,EACZ,WAAAL,EACA,GAAGD,GAELH,CAAK,EAGDa,EAAeC,EAAWX,EAAqBO,CAAY,EAG7D,GAAAK,EAAAF,GAAc,SAAK,MAAAE,IAAA,SAAAA,EAAE,SACvBF,EAAa,MAAM,OAASG,EAAM,YAAY,GAGhD,MAAMC,EAAgBC,EAAY,IAAK,CACrClB,EAAM,KACR,CAAA,EAAG,CAACA,CAAK,CAAC,EAEJmB,EAAmBD,EACtBE,GAAqB,SACpB,MAAMC,GAAaN,EAAAX,EAAW,WAAO,MAAAW,IAAA,OAAA,OAAAA,EAAE,sBAAA,EACjCO,GAAcC,EAAAd,EAAW,WAAO,MAAAc,IAAA,OAAA,OAAAA,EAAE,sBAAqB,EAE7D,GAAIF,GAAcC,EAAa,CAC7B,MAAME,EACJJ,EAAM,SAAWC,EAAW,KAAOvB,GACnCsB,EAAM,SAAWC,EAAW,MAAQvB,GACpCsB,EAAM,SAAWC,EAAW,IAAMvB,GAClCsB,EAAM,SAAWC,EAAW,OAASvB,EAEjC2B,EACJL,EAAM,SAAWE,EAAY,KAAOxB,GACpCsB,EAAM,SAAWE,EAAY,MAAQxB,GACrCsB,EAAM,SAAWE,EAAY,IAAMxB,GACnCsB,EAAM,SAAWE,EAAY,OAASxB,EAEpC,CAAC0B,GAAwB,CAACC,GAC5BzB,EAAM,OAEV,CACF,EACA,CAACA,CAAK,CAAC,EAGH0B,EAA+B,IAAK,CACxC,GAAIjB,EAAW,QAAS,CACtB,MAAMkB,EAAsBlB,EAAW,QAAQ,iBAC7C,qEAAqE,EAEnEkB,EAAoB,OAAS,GAC9BA,EAAoB,CAAC,EAAkB,OAE5C,CACF,EAEMC,EAAiBR,GAA8B,CAC/CA,EAAM,MAAQ,UAChBA,EAAM,iBACFvB,EACFG,EAAM,MAAK,GAEXA,EAAM,KAAI,EACV,WAAW0B,EAA8B,CAAC,GAGhD,EAEAG,GAAU,KACR,SAAS,iBAAiB,YAAaV,CAAgB,EAChD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAgB,CAC5D,GACC,CAACA,CAAgB,CAAC,EAErB,MAAMW,EAAW7C,EAAM,OAAS,KAAO,GAAK,GACtC8C,EAActC,EAAM,IAAIT,CAAW,EACnCgD,EAAevC,EAAM,IAAIH,CAAY,EAE3C,OACE2C,EAAAlD,EAAA,CAAA,SAAA,CACEkD,EAACC,GACC,IAAK9B,EAAU,GACXU,EAAWR,EAAcrB,CAAK,EAClC,UAAW2C,EACX,QAAS,IAAM7B,IAAY,SAAWkB,EAAa,EACnD,QAAS,IAAMlB,IAAY,SAAWkB,EAAAA,EAErC,SAAA,CAAAc,GACCjD,EAACoD,EAAO,YAAW,CAAA,SAChBH,GAAe,CAAE,GAAGA,EAAa,MAAO,CAAE,GAAGA,EAAY,MAAO,MAAOD,EAAU,OAAQA,CAAQ,CAAI,CAAA,CAAA,EAGzGE,GACClD,EAACoD,EAAO,uBACLF,GAAgB,CAAE,GAAGA,EAAc,MAAO,CAAE,GAAGA,EAAa,MAAO,MAAOF,EAAU,OAAQA,CAAQ,CAAI,CAAA,CAAA,CAE5G,CAAA,CAAA,EAEFjC,GACCoC,EAACE,GAAO,CAAA,GAAK5B,EAAY,SAAA,CACvBzB,YAAS6B,EAAe,UAAU,UAAU,CAAA,EAC5C7B,EAAA,MAAA,CACE,IAAK2B,EACD,GAAAI,EACJ,UAAWuB,EACTC,EAAO,CACL,GAAI,kBACJ,EAAG,EACH,IAAK,EACL,MAAO,iBACP,YAAa,EACb,YAAa,oBACb,aAAc,KACd,UAAW,uCACX,KAAM,GACN,WAAY,OACb,CAAA,EACDxB,EAAa,SAAS,WAGvBpB,EAAM,IAAId,CAAc,CAAC,CAAA,CACtB,GAET,CAAA,CAAA,CAGP,CAAC,EAGU2D,EAAU,OAAO,OAAO/C,EAAa,CAChD,YAAAP,EACA,aAAAM,EACA,QAASX,CACV,CAAA"}

package/dist/es/components/primitives/text.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{text as m}from"../../recipes/text.js";import{css as r}from"@styled/css";import{forwardRef as c}from"react";const i={color:"text.primary"},o=c(({children:e,styles:s={},scale:t},l)=>a("h1",{ref:l,className:r({textStyle:t?"h1-scaled":"h1",...i}),style:s,children:e})),x=c(({children:e,styles:s={},scale:t},l)=>a("h2",{ref:l,className:r({textStyle:t?"h2-scaled":"h2",...i}),style:s,children:e})),p=c(({children:e,styles:s={},scale:t},l)=>a("h3",{ref:l,className:r({textStyle:t?"h3-scaled":"h3",...i}),style:s,children:e})),N=c(({children:e,styles:s={},scale:t},l)=>a("h4",{ref:l,className:r({textStyle:t?"h4-scaled":"h4",...i}),style:s,children:e})),f=c(({children:e,styles:s={},scale:t},l)=>a("h5",{ref:l,className:r({textStyle:t?"h5-scaled":"h5",...i}),style:s,children:e})),H=c(({children:e,styles:s={},scale:t},l)=>a("h6",{ref:l,className:r({textStyle:t?"h6-scaled":"h6",color:"text.secondary"}),style:s,children:e})),T=c(({children:e,styles:s={},variant:t="text",size:l="md",truncate:n=!1},d)=>{const h=m({mono:!0,variant:t,size:l});return a("span",{ref:d,className:`${h} ${r({truncate:n})}`,style:s,children:e})}),u=c(({children:e,styles:s={},scale:t,inline:l=!1,variant:n="text",size:d="md",truncate:h=!1},S)=>{const $=m({variant:n,size:d,scale:t}),y={ref:S,className:`${$} ${r({truncate:h})}`,style:s};return l?a("span",{...y,children:e}):a("p",{...y,children:e})}),v=Object.assign(u,{H1:o,H2:x,H3:p,H4:N,H5:f,H6:H,Mono:T});u.displayName="Text",o.displayName="Text.H1",x.displayName="Text.H2",p.displayName="Text.H3",N.displayName="Text.H4",f.displayName="Text.H5",H.displayName="Text.H6",T.displayName="Text.Mono";var j=v;export{j as default};
+import{jsx as l}from"react/jsx-runtime";import{text as m}from"../../recipes/text.js";import{css as r}from"@styled/css";import{forwardRef as c}from"react";const i={color:"text.primary"},p=c(({children:e,styles:t={},scale:s},a)=>l("h1",{ref:a,className:r({textStyle:s?"h1-scaled":"h1",textWrap:"pretty",...i}),style:t,children:e})),x=c(({children:e,styles:t={},scale:s},a)=>l("h2",{ref:a,className:r({textStyle:s?"h2-scaled":"h2",textWrap:"pretty",...i}),style:t,children:e})),o=c(({children:e,styles:t={},scale:s},a)=>l("h3",{ref:a,className:r({textStyle:s?"h3-scaled":"h3",textWrap:"pretty",...i}),style:t,children:e})),N=c(({children:e,styles:t={},scale:s},a)=>l("h4",{ref:a,className:r({textStyle:s?"h4-scaled":"h4",textWrap:"pretty",...i}),style:t,children:e})),f=c(({children:e,styles:t={},scale:s},a)=>l("h5",{ref:a,className:r({textStyle:s?"h5-scaled":"h5",textWrap:"pretty",...i}),style:t,children:e})),H=c(({children:e,styles:t={},scale:s},a)=>l("h6",{ref:a,className:r({textStyle:s?"h6-scaled":"h6",textWrap:"pretty",color:"text.secondary"}),style:t,children:e})),T=c(({children:e,styles:t={},variant:s="text",size:a="md",truncate:n=!1},y)=>{const d=m({mono:!0,variant:s,size:a});return l("span",{ref:y,className:`${d} ${r({truncate:n})}`,style:t,children:e})}),u=c(({children:e,styles:t={},scale:s,inline:a=!1,variant:n="text",size:y="md",truncate:d=!1},S)=>{const W=m({variant:n,size:y,scale:s}),h={ref:S,className:`${W} ${r({truncate:d})}`,style:t};return a?l("span",{...h,children:e}):l("p",{...h,children:e})}),v=Object.assign(u,{H1:p,H2:x,H3:o,H4:N,H5:f,H6:H,Mono:T});u.displayName="Text",p.displayName="Text.H1",x.displayName="Text.H2",o.displayName="Text.H3",N.displayName="Text.H4",f.displayName="Text.H5",H.displayName="Text.H6",T.displayName="Text.Mono";var $=v;export{$ as default};
 //# sourceMappingURL=text.js.map

package/dist/es/components/primitives/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1 ref={ref} className={css({ textStyle: scale ? 'h1-scaled' : 'h1', ...defaultColor })} style={styles}>\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2 ref={ref} className={css({ textStyle: scale ? 'h2-scaled' : 'h2', ...defaultColor })} style={styles}>\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3 ref={ref} className={css({ textStyle: scale ? 'h3-scaled' : 'h3', ...defaultColor })} style={styles}>\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4 ref={ref} className={css({ textStyle: scale ? 'h4-scaled' : 'h4', ...defaultColor })} style={styles}>\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5 ref={ref} className={css({ textStyle: scale ? 'h5-scaled' : 'h5', ...defaultColor })} style={styles}>\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6 ref={ref} className={css({ textStyle: scale ? 'h6-scaled' : 'h6', color: 'text.secondary' })} style={styles}>\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}
+{"version":3,"file":"text.js","sources":["../../../../src/components/primitives/text.tsx"],"sourcesContent":["import { text } from '@recipes/text';\nimport { css } from '@styled/css';\nimport { CSSProperties, PropsWithChildren, forwardRef } from 'react';\n\nexport type TextStyles = {\n  color?: CSSProperties['color'];\n  fontWeight?: CSSProperties['fontWeight'];\n  fontSize?: CSSProperties['fontSize'];\n  lineHeight?: CSSProperties['lineHeight'];\n  letterSpacing?: CSSProperties['letterSpacing'];\n  textAlign?: CSSProperties['textAlign'];\n  textDecoration?: CSSProperties['textDecoration'];\n  textTransform?: CSSProperties['textTransform'];\n};\n\nexport interface TextProps extends PropsWithChildren {\n  styles?: TextStyles;\n  scale?: boolean;\n}\n\nexport interface BodyProps extends TextProps {\n  inline?: boolean;\n  variant?: 'text' | 'error' | 'info' | 'success' | 'warning';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  truncate?: boolean;\n}\n\nconst defaultColor = { color: 'text.primary' };\n\nconst TextH1 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h1\n    ref={ref}\n    className={css({ textStyle: scale ? 'h1-scaled' : 'h1', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h1>\n));\n\nconst TextH2 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h2\n    ref={ref}\n    className={css({ textStyle: scale ? 'h2-scaled' : 'h2', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h2>\n));\n\nconst TextH3 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h3\n    ref={ref}\n    className={css({ textStyle: scale ? 'h3-scaled' : 'h3', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h3>\n));\n\nconst TextH4 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h4\n    ref={ref}\n    className={css({ textStyle: scale ? 'h4-scaled' : 'h4', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h4>\n));\n\nconst TextH5 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h5\n    ref={ref}\n    className={css({ textStyle: scale ? 'h5-scaled' : 'h5', textWrap: 'pretty', ...defaultColor })}\n    style={styles}\n  >\n    {children}\n  </h5>\n));\n\nconst TextH6 = forwardRef<HTMLHeadingElement, TextProps>(({ children, styles = {}, scale }, ref) => (\n  <h6\n    ref={ref}\n    className={css({ textStyle: scale ? 'h6-scaled' : 'h6', textWrap: 'pretty', color: 'text.secondary' })}\n    style={styles}\n  >\n    {children}\n  </h6>\n));\n\nconst TextMono = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ mono: true, variant, size });\n\n    return (\n      <span ref={ref} className={`${classStyles} ${css({ truncate })}`} style={styles}>\n        {children}\n      </span>\n    );\n  },\n);\n\nconst Body = forwardRef<HTMLParagraphElement, BodyProps>(\n  ({ children, styles = {}, scale, inline = false, variant = 'text', size = 'md', truncate = false }, ref) => {\n    const classStyles = text({ variant, size, scale });\n    const bodyProps = {\n      ref,\n      className: `${classStyles} ${css({ truncate })}`,\n      style: styles,\n    };\n\n    if (inline) {\n      return <span {...bodyProps}>{children}</span>;\n    }\n\n    return <p {...bodyProps}>{children}</p>;\n  },\n);\n\nconst Text = Object.assign(Body, {\n  H1: TextH1,\n  H2: TextH2,\n  H3: TextH3,\n  H4: TextH4,\n  H5: TextH5,\n  H6: TextH6,\n  Mono: TextMono,\n});\n\nBody.displayName = 'Text';\nTextH1.displayName = 'Text.H1';\nTextH2.displayName = 'Text.H2';\nTextH3.displayName = 'Text.H3';\nTextH4.displayName = 'Text.H4';\nTextH5.displayName = 'Text.H5';\nTextH6.displayName = 'Text.H6';\nTextMono.displayName = 'Text.Mono';\n\nexport default Text;\n"],"names":["defaultColor","TextH1","forwardRef","children","styles","scale","ref","_jsx","css","TextH2","TextH3","TextH4","TextH5","TextH6","TextMono","variant","size","truncate","classStyles","text","Body","inline","bodyProps","Text"],"mappings":"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"}

package/dist/es/recipes/button.js

@@ -1,2 +1,2 @@
-import{sva as r}from"@styled/css";const e=r({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.2s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.2s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.2s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.2s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.quaternary"},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.base"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.base"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}}},defaultVariants:{size:"md",variant:"primary"}});export{e as button};
+import{sva as r}from"@styled/css";const e=r({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.1s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.1s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.1s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.quaternary"},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}},textStyle:{negative:{},neutral:{},subtle:{}}},compoundVariants:[{variant:"text",textStyle:"negative",css:{label:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}},icon:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}}}},{variant:"text",textStyle:"neutral",css:{label:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",textStyle:"subtle",css:{label:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}}],defaultVariants:{size:"md",variant:"primary"}});export{e as button};
 //# sourceMappingURL=button.js.map

package/dist/es/recipes/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.2s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.2s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.2s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.2s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.quaternary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.base',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.base',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.quaternary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: {\n              color: 'ruby.70',\n            },\n          },\n        },\n        icon: {\n          color: 'negative.darker',\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: {\n              color: 'ruby.70',\n            },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          color: 'text.primary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          color: 'text.tertiary',\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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"}

package/dist/es/recipes/text.js

@@ -1,2 +1,2 @@
-import{cva as e}from"@styled/css";const t=e({base:{},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker",fontWeight:"medium"},info:{color:"brand.base",fontWeight:"medium"},success:{color:"positive.base",fontWeight:"medium"},warning:{color:"warning.base",fontWeight:"medium"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});export{t as text};
+import{cva as e}from"@styled/css";const t=e({base:{textWrap:"pretty"},variants:{mono:{false:{},true:{}},scale:{false:{},true:{}},variant:{text:{color:"text.primary"},error:{color:"negative.darker",fontWeight:"medium"},info:{color:"brand.base",fontWeight:"medium"},success:{color:"positive.base",fontWeight:"medium"},warning:{color:"warning.base",fontWeight:"medium"}},size:{xs:{textStyle:"body-xs"},sm:{textStyle:"body-sm"},md:{textStyle:"body-md"},lg:{textStyle:"body-lg"}}},compoundVariants:[{scale:!0,size:"sm",css:{textStyle:"body-sm-scaled"}},{scale:!0,size:"md",css:{textStyle:"body-md-scaled"}},{scale:!0,size:"lg",css:{textStyle:"body-lg-scaled"}},{mono:!0,size:"sm",css:{textStyle:"mono-sm"}},{mono:!0,size:"md",css:{textStyle:"mono-md"}},{mono:!0,size:"lg",css:{textStyle:"mono-lg"}}],defaultVariants:{mono:!1,variant:"text",size:"md"}});export{t as text};
 //# sourceMappingURL=text.js.map

package/dist/es/recipes/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {},\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n        fontWeight: 'medium',\n      },\n      info: {\n        color: 'brand.base',\n        fontWeight: 'medium',\n      },\n      success: {\n        color: 'positive.base',\n        fontWeight: 'medium',\n      },\n      warning: {\n        color: 'warning.base',\n        fontWeight: 'medium',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"kCAEa,MAAAA,EAAOC,EAAI,CACtB,KAAM,CAAA,EACN,SAAU,CACR,KAAM,CACJ,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,MAAO,CACL,MAAO,CACP,EAAA,KAAM,CACP,CAAA,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,kBACP,WAAY,QACb,EACD,KAAM,CACJ,MAAO,aACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,gBACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,eACP,WAAY,QACb,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}
+{"version":3,"file":"text.js","sources":["../../../src/recipes/text.ts"],"sourcesContent":["import { cva, type RecipeVariantProps } from '@styled/css';\n\nexport const text = cva({\n  base: {\n    textWrap: 'pretty',\n  },\n  variants: {\n    mono: {\n      false: {},\n      true: {},\n    },\n    scale: {\n      false: {},\n      true: {},\n    },\n    variant: {\n      text: {\n        color: 'text.primary',\n      },\n      error: {\n        color: 'negative.darker',\n        fontWeight: 'medium',\n      },\n      info: {\n        color: 'brand.base',\n        fontWeight: 'medium',\n      },\n      success: {\n        color: 'positive.base',\n        fontWeight: 'medium',\n      },\n      warning: {\n        color: 'warning.base',\n        fontWeight: 'medium',\n      },\n    },\n    size: {\n      xs: {\n        textStyle: 'body-xs',\n      },\n      sm: {\n        textStyle: 'body-sm',\n      },\n      md: {\n        textStyle: 'body-md',\n      },\n      lg: {\n        textStyle: 'body-lg',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      scale: true,\n      size: 'sm',\n      css: {\n        textStyle: 'body-sm-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'md',\n      css: {\n        textStyle: 'body-md-scaled',\n      },\n    },\n    {\n      scale: true,\n      size: 'lg',\n      css: {\n        textStyle: 'body-lg-scaled',\n      },\n    },\n    {\n      mono: true,\n      size: 'sm',\n      css: {\n        textStyle: 'mono-sm',\n      },\n    },\n    {\n      mono: true,\n      size: 'md',\n      css: {\n        textStyle: 'mono-md',\n      },\n    },\n    {\n      mono: true,\n      size: 'lg',\n      css: {\n        textStyle: 'mono-lg',\n      },\n    },\n  ],\n  defaultVariants: {\n    mono: false,\n    variant: 'text',\n    size: 'md',\n  },\n});\n\nexport type TextVariants = RecipeVariantProps<typeof text>;\n"],"names":["text","cva"],"mappings":"kCAEa,MAAAA,EAAOC,EAAI,CACtB,KAAM,CACJ,SAAU,QACX,EACD,SAAU,CACR,KAAM,CACJ,MAAO,CAAE,EACT,KAAM,CACP,CAAA,EACD,MAAO,CACL,MAAO,CAAA,EACP,KAAM,CAAA,CACP,EACD,QAAS,CACP,KAAM,CACJ,MAAO,cACR,EACD,MAAO,CACL,MAAO,kBACP,WAAY,QACb,EACD,KAAM,CACJ,MAAO,aACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,gBACP,WAAY,QACb,EACD,QAAS,CACP,MAAO,eACP,WAAY,QACb,CACF,EACD,KAAM,CACJ,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,EACD,GAAI,CACF,UAAW,SACZ,CACF,CACF,EACD,iBAAkB,CAChB,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,MAAO,GACP,KAAM,KACN,IAAK,CACH,UAAW,gBACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,EACD,CACE,KAAM,GACN,KAAM,KACN,IAAK,CACH,UAAW,SACZ,CACF,CACF,EACD,gBAAiB,CACf,KAAM,GACN,QAAS,OACT,KAAM,IACP,CACF,CAAA"}

package/dist/panda.buildinfo.json

@@ -1 +1 @@
-{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.2s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.2s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.quaternary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.base]___[cond:_groupHover<___>_dark","color]___[value:chalk","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","alignItems]___[value:flex-start","alignItems]___[value:flex-end","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","color]___[value:negative.darker","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","overflow]___[value:hidden","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","color]___[value:text.tertiary","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","width]___[value:4","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.quaternary","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","backgroundColor]___[value:surface.tertiary","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","alignItems]___[value:flex-start","alignItems]___[value:flex-end","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:pretty","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","gap]___[value:10px","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","paddingInline]___[value:8","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","flexDirection]___[value:row","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.primary","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","overflow]___[value:hidden","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","gap]___[value:4","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","gap]___[value:0","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","borderWidth]___[value:thick","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","width]___[value:4","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:5","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","borderRadius]___[value:1rem","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","cursor]___[value:default","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","borderColor]___[value:surface.primary","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}

package/dist/types/components/primitives/button.d.ts

@@ -4,6 +4,7 @@ export interface ButtonProps extends AriaButtonProps {
     label?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';
+    textStyle?: 'negative' | 'neutral' | 'subtle';
     disabled?: boolean;
     expand?: boolean;
     validating?: boolean;

package/dist/types/components/primitives/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IACjG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACvF;AA4GD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IACjG,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACvF;AA6GD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/dist/types/components/primitives/dropdown-selector.d.ts

@@ -4,6 +4,7 @@ export interface DropdownSelectorProps extends AriaButtonProps {
     children: ReactNode;
     onSelect: (value: string) => void;
     label?: string;
+    placeholder?: string;
     selectedValue?: string;
     tooltipContent?: string;
     disabled?: boolean;
@@ -27,7 +28,7 @@ export declare const DropdownOption: {
     displayName: string;
 };
 export declare const DropdownSelector: {
-    ({ children, onSelect, label, selectedValue, tooltipContent, disabled, viewMax, ...props }: DropdownSelectorProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, onSelect, label, placeholder, selectedValue, tooltipContent, disabled, viewMax, ...props }: DropdownSelectorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/components/primitives/dropdown-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAOD,eAAO,MAAM,cAAc;kCAAiC,mBAAmB;;CAuB9E,CAAC;AAEF,eAAO,MAAM,gBAAgB;gGAS1B,qBAAqB;;CAkLvB,CAAC"}
+{"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAOV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAOD,eAAO,MAAM,cAAc;kCAAiC,mBAAmB;;CAuB9E,CAAC;AAEF,eAAO,MAAM,gBAAgB;6GAU1B,qBAAqB;;CAkLvB,CAAC"}

package/dist/types/components/primitives/popover.d.ts

@@ -5,6 +5,7 @@ interface OverlayTriggerProps extends ButtonProps {
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    trigger?: 'click' | 'hover';
 }
 interface OverlayTriggerState {
     readonly isOpen: boolean;

package/dist/types/components/primitives/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAO7D,OAAO,EAEL,cAAc,EACd,iBAAiB,EAMjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,YAAY,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAO,MAAM,iBAAiB,EAAE,SAAyB,CAAC;AAC1D,eAAO,MAAM,cAAc,IAAI,CAAC;AAwBhC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,2BAA4B,YAAY,gBAqK/D,CAAC;AAEF,eAAO,MAAM,OAAO,4BAvKgC,YAAY;;;4BAxBf,mBAAmB;CAmMlE,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAO7D,OAAO,EAEL,cAAc,EACd,iBAAiB,EAMjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG9D,UAAU,mBAAoB,SAAQ,WAAW;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,YAAY,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1B,eAAO,MAAM,iBAAiB,EAAE,SAAyB,CAAC;AAC1D,eAAO,MAAM,cAAc,IAAI,CAAC;AA0BhC,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,2BAA4B,YAAY,gBAuK/D,CAAC;AAEF,eAAO,MAAM,OAAO,4BAzKgC,YAAY;;;4BAxBf,mBAAmB;CAqMlE,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/types/components/primitives/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqED,QAAA,MAAM,IAAI;;;;;;;;CAQR,CAAC;AAWH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAErE,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6FD,QAAA,MAAM,IAAI;;;;;;;;CAQR,CAAC;AAWH,eAAe,IAAI,CAAC"}

package/dist/types/recipes/button.d.ts

@@ -118,7 +118,7 @@ export declare const button: import("../../styled-system/types").SlotRecipeRunti
                 _groupHover: {
                     color: "brand.darkest";
                     _dark: {
-                        color: "brand.base";
+                        color: "brand.lighter";
                     };
                 };
             };
@@ -127,7 +127,7 @@ export declare const button: import("../../styled-system/types").SlotRecipeRunti
                 _groupHover: {
                     color: "brand.darkest";
                     _dark: {
-                        color: "brand.base";
+                        color: "brand.lighter";
                     };
                 };
             };
@@ -175,5 +175,10 @@ export declare const button: import("../../styled-system/types").SlotRecipeRunti
             };
         };
     };
+    textStyle: {
+        negative: {};
+        neutral: {};
+        subtle: {};
+    };
 }>;
 //# sourceMappingURL=button.d.ts.map

package/dist/types/recipes/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/recipes/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuOjB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/recipes/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8SjB,CAAC"}

package/dist/types/recipes/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/recipes/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGf,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/recipes/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE3D,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGf,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magiclabs/ui-components",
-  "version": "1.18.5",
+  "version": "1.19.1",
   "description": "💅 A theme-able library of reusable UI components",
   "author": "Magic Labs <open-source@magic.link>",
   "repository": {