@magiclabs/ui-components 1.34.14 → 1.34.16

package/dist/cjs/components/feedback/skeleton.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@styled/jsx");const i=({width:t="100px",height:a="20px",speed:n="1.5s"})=>e.jsx(r.Box,{style:{width:t,height:a},bg:"neutral.tertiary",overflow:"hidden",position:"relative",rounded:"3xl",_dark:{bg:"surface.primary"},children:e.jsx(r.Box,{style:{animation:`slideRight ${n} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});exports.Skeleton=i;
+"use strict";var e=require("react/jsx-runtime"),r=require("@styled/jsx");const s=({width:a="100px",height:t="20px",speed:i="1.5s",borderRadius:n="24px",backgroundColor:o})=>e.jsx(r.Box,{style:{width:a,height:t,borderRadius:n,backgroundColor:o},bg:"neutral.tertiary",overflow:"hidden",position:"relative",_dark:{bg:"surface.primary"},children:e.jsx(r.Box,{style:{animation:`slideRight ${i} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});exports.Skeleton=s;
 //# sourceMappingURL=skeleton.js.map

package/dist/cjs/components/feedback/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n  width?: string;\n  height?: string;\n  speed?: string;\n}\n\nexport const Skeleton = ({ width = '100px', height = '20px', speed = '1.5s' }: SkeletonProps) => {\n  return (\n    <Box\n      style={{ width, height }}\n      bg=\"neutral.tertiary\"\n      overflow=\"hidden\"\n      position=\"relative\"\n      rounded=\"3xl\"\n      _dark={{ bg: 'surface.primary' }}\n    >\n      <Box\n        style={{\n          animation: `slideRight ${speed} infinite ease-in-out`,\n        }}\n        w=\"full\"\n        h=\"full\"\n        position=\"absolute\"\n        top={0}\n        left=\"-50%\"\n        transform=\"skewX(-20deg)\"\n        backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n        _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n      />\n    </Box>\n  );\n};\n"],"names":["Skeleton","width","height","speed","_jsx","Box"],"mappings":"yEAQO,MAAMA,EAAW,CAAC,CAAE,MAAAC,EAAQ,QAAS,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,MAAM,IAEvEC,EAACC,IAAAA,EAAAA,KACC,MAAO,CAAE,MAAAJ,EAAO,OAAAC,CAAM,EACtB,GAAG,mBACH,SAAS,SACT,SAAS,WACT,QAAQ,MACR,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCE,MAACC,EAAG,IAAA,CACF,MAAO,CACL,UAAW,cAAcF,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n  width?: string | number;\n  height?: string | number;\n  speed?: string;\n  borderRadius?: string | number;\n  backgroundColor?: string;\n}\n\nexport const Skeleton = ({\n  width = '100px',\n  height = '20px',\n  speed = '1.5s',\n  borderRadius = '24px',\n  backgroundColor,\n}: SkeletonProps) => {\n  return (\n    <Box\n      style={{ width, height, borderRadius, backgroundColor }}\n      bg=\"neutral.tertiary\"\n      overflow=\"hidden\"\n      position=\"relative\"\n      _dark={{ bg: 'surface.primary' }}\n    >\n      <Box\n        style={{\n          animation: `slideRight ${speed} infinite ease-in-out`,\n        }}\n        w=\"full\"\n        h=\"full\"\n        position=\"absolute\"\n        top={0}\n        left=\"-50%\"\n        transform=\"skewX(-20deg)\"\n        backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n        _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n      />\n    </Box>\n  );\n};\n"],"names":["Skeleton","width","height","speed","borderRadius","backgroundColor","_jsx","Box"],"mappings":"yEAUO,MAAMA,EAAW,CAAC,CACvB,MAAAC,EAAQ,QACR,OAAAC,EAAS,OACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,OACf,gBAAAC,CACc,IAEZC,EAAAA,IAACC,OACC,MAAO,CAAE,MAAAN,EAAO,OAAAC,EAAQ,aAAAE,EAAc,gBAAAC,GACtC,GAAG,mBACH,SAAS,SACT,SAAS,WACT,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCC,EAACC,IAAAA,MAAG,CACF,MAAO,CACL,UAAW,cAAcJ,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{Box as r}from"@styled/jsx";const i=({width:t="100px",height:a="20px",speed:n="1.5s"})=>e(r,{style:{width:t,height:a},bg:"neutral.tertiary",overflow:"hidden",position:"relative",rounded:"3xl",_dark:{bg:"surface.primary"},children:e(r,{style:{animation:`slideRight ${n} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});export{i as Skeleton};
+import{jsx as r}from"react/jsx-runtime";import{Box as e}from"@styled/jsx";const d=({width:t="100px",height:a="20px",speed:i="1.5s",borderRadius:n="24px",backgroundColor:o})=>r(e,{style:{width:t,height:a,borderRadius:n,backgroundColor:o},bg:"neutral.tertiary",overflow:"hidden",position:"relative",_dark:{bg:"surface.primary"},children:r(e,{style:{animation:`slideRight ${i} infinite ease-in-out`},w:"full",h:"full",position:"absolute",top:0,left:"-50%",transform:"skewX(-20deg)",backgroundImage:"linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)",_dark:{backgroundImage:"linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)"}})});export{d as Skeleton};
 //# sourceMappingURL=skeleton.js.map

package/dist/es/components/feedback/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n  width?: string;\n  height?: string;\n  speed?: string;\n}\n\nexport const Skeleton = ({ width = '100px', height = '20px', speed = '1.5s' }: SkeletonProps) => {\n  return (\n    <Box\n      style={{ width, height }}\n      bg=\"neutral.tertiary\"\n      overflow=\"hidden\"\n      position=\"relative\"\n      rounded=\"3xl\"\n      _dark={{ bg: 'surface.primary' }}\n    >\n      <Box\n        style={{\n          animation: `slideRight ${speed} infinite ease-in-out`,\n        }}\n        w=\"full\"\n        h=\"full\"\n        position=\"absolute\"\n        top={0}\n        left=\"-50%\"\n        transform=\"skewX(-20deg)\"\n        backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n        _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n      />\n    </Box>\n  );\n};\n"],"names":["Skeleton","width","height","speed","_jsx","Box"],"mappings":"0EAQO,MAAMA,EAAW,CAAC,CAAE,MAAAC,EAAQ,QAAS,OAAAC,EAAS,OAAQ,MAAAC,EAAQ,MAAM,IAEvEC,EAACC,GACC,MAAO,CAAE,MAAAJ,EAAO,OAAAC,CAAM,EACtB,GAAG,mBACH,SAAS,SACT,SAAS,WACT,QAAQ,MACR,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCE,EAACC,EAAG,CACF,MAAO,CACL,UAAW,cAAcF,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedback/skeleton.tsx"],"sourcesContent":["import { Box } from '@styled/jsx';\n\nexport interface SkeletonProps {\n  width?: string | number;\n  height?: string | number;\n  speed?: string;\n  borderRadius?: string | number;\n  backgroundColor?: string;\n}\n\nexport const Skeleton = ({\n  width = '100px',\n  height = '20px',\n  speed = '1.5s',\n  borderRadius = '24px',\n  backgroundColor,\n}: SkeletonProps) => {\n  return (\n    <Box\n      style={{ width, height, borderRadius, backgroundColor }}\n      bg=\"neutral.tertiary\"\n      overflow=\"hidden\"\n      position=\"relative\"\n      _dark={{ bg: 'surface.primary' }}\n    >\n      <Box\n        style={{\n          animation: `slideRight ${speed} infinite ease-in-out`,\n        }}\n        w=\"full\"\n        h=\"full\"\n        position=\"absolute\"\n        top={0}\n        left=\"-50%\"\n        transform=\"skewX(-20deg)\"\n        backgroundImage={`linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)`}\n        _dark={{ backgroundImage: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)' }}\n      />\n    </Box>\n  );\n};\n"],"names":["Skeleton","width","height","speed","borderRadius","backgroundColor","_jsx","Box"],"mappings":"0EAUO,MAAMA,EAAW,CAAC,CACvB,MAAAC,EAAQ,QACR,OAAAC,EAAS,OACT,MAAAC,EAAQ,OACR,aAAAC,EAAe,OACf,gBAAAC,CACc,IAEZC,EAACC,GACC,MAAO,CAAE,MAAAN,EAAO,OAAAC,EAAQ,aAAAE,EAAc,gBAAAC,GACtC,GAAG,mBACH,SAAS,SACT,SAAS,WACT,MAAO,CAAE,GAAI,iBAAmB,EAAA,SAEhCC,EAACC,EAAG,CACF,MAAO,CACL,UAAW,cAAcJ,CAAK,uBAC/B,EACD,EAAE,OACF,EAAE,OACF,SAAS,WACT,IAAK,EACL,KAAK,OACL,UAAU,gBACV,gBAAiB,qEACjB,MAAO,CAAE,gBAAiB,8EAC1B,CAAA,CAAA,CAAA"}

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

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

package/dist/es/components/layouts/passport-page.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as J,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as $}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import q from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import w from"../primitives/text.js";import{createSlot as i,createHost as E}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),k=i(l),D=i(l),H=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),M=i(({branding:e,title:t})=>t?r(w,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),T=i(({children:e})=>r(d,{w:"full",justify:"center",children:e})),W=i(z),F=i(v),I=i(({children:e})=>r(J,{pt:3,w:"full",children:e})),A=i(({children:e,domain:t,name:a,logoUrl:m})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(w,{size:"sm",fontWeight:"semibold",children:a}),t&&r(w,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),K=({actionDirection:e="row",address:t,children:a,onBack:m,onCancel:p,...L})=>E(a,o=>{const c=o.getProps(k),s=o.getProps(D),x=o.getProps(F),h=o.getProps(W),C=o.get(S),b=o.get(H),G=o.get(M),f=e==="row";return n($,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[m&&r(l,{onPress:m,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(m||p)&&r(y,{w:6}),G,t||b||h?n(g,{children:[t&&r(q,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(A)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,children:[o.get(T),n(d,{w:"full",gap:3,children:[o.get(I),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),x&&r(v,{...x})]})}),N=Object.assign(K,{Actions:S,Cancel:k,Confirm:D,Content:T,Menu:W,Drawer:F,Footer:I,Header:A,Info:H,Title:M});export{N as PassportPage};
+import{jsx as r,jsxs as n}from"react/jsx-runtime";import"../containers/button.js";import"../containers/card.js";import"@styled/css";import{VStack as d,Center as K,HStack as g,Box as y,Flex as P}from"@styled/jsx";import{Drawer as v}from"../containers/drawer.js";import{Children as O}from"react";import"../utils/client-asset-logo.js";import{token as B}from"@styled/tokens";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import U from"../icons/ico-caret-left.js";import j from"../icons/ico-magic.js";import V from"../icons/ico-question-circle-fill.js";import"../containers/header.js";import{Menu as z}from"../containers/menu.js";import{Modal as $}from"../containers/modal.js";import"../containers/overlay.js";import"../info/copy-button.js";import"../info/email-wbr.js";import"../info/security-otp.js";import"../info/text-box.js";import q from"../info/wallet-address.js";import l from"../primitives/button.js";import{Popover as u}from"../primitives/popover.js";import w from"../primitives/text.js";import{createSlot as i,createHost as E}from"create-slots";const S=i(({children:e})=>O.map(e,t=>r(l,{expand:!0,...t.props}))),k=i(l),D=i(l),H=i(({children:e})=>n(u,{textStyle:"subtle",variant:"text",children:[r(u.TrailingIcon,{children:r(V,{})}),r(u.Content,{children:e})]})),M=i(({branding:e,title:t})=>t?r(w,{size:"sm",fontColor:"text.secondary",children:t}):r(j,{color:B(e==="light"?"colors.text.primary":"colors.neutral.primary")})),T=i(({children:e})=>r(d,{w:"full",justify:"center",children:e})),W=i(z),F=i(v),I=i(({children:e})=>r(K,{pt:3,w:"full",children:e})),A=i(({children:e,domain:t,name:a,logoUrl:m})=>n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",p:3,width:"full",children:[m?r("img",{src:m,alt:a,width:24,height:24}):r(j,{color:B("colors.brand.base"),height:24,width:24}),r(w,{size:"sm",fontWeight:"semibold",children:a}),t&&r(w,{size:"sm",fontColor:"text.tertiary",children:t}),e]})),G=({actionDirection:e="row",address:t,children:a,onBack:m,onCancel:p,...L})=>E(a,o=>{const c=o.getProps(k),s=o.getProps(D),x=o.getProps(F),h=o.getProps(W),C=o.get(S),b=o.get(H),J=o.get(M),f=e==="row";return n($,{...L,fullscreen:!0,paddingType:"none",gap:0,children:[n(d,{gap:0,width:"full",children:[n(g,{borderBottomColor:"neutral.primary",borderBottomWidth:"1px",justifyContent:"space-between",p:3,width:"full",children:[m&&r(l,{onPress:m,size:"md",textStyle:"neutral",variant:"text",children:r(l.LeadingIcon,{children:r(U,{})})}),p&&r(l,{onPress:p,label:"Cancel",size:"sm",textStyle:"neutral",variant:"text"}),!(m||p)&&r(y,{w:6}),J,t||b||h?n(g,{children:[t&&r(q,{address:t}),b,h&&r(z,{...h})]}):r(y,{w:6})]}),o.get(A)]}),n(d,{h:"full",w:"full",justify:"space-between",p:6,children:[o.get(T),n(d,{w:"full",gap:3,children:[o.get(I),(c||s)&&n(P,{direction:f?"row":"column-reverse",gap:f?4:3,width:"full",children:[c&&r(l,{expand:!0,label:"Cancel",variant:"neutral",...c}),s&&r(l,{expand:!0,label:"Confirm",variant:"inverse",...s})]}),C&&r(P,{direction:e,gap:f?4:3,width:"full",children:C})]})]}),x&&r(v,{...x})]})}),N=Object.assign(G,{Actions:S,Cancel:k,Confirm:D,Content:T,Menu:W,Drawer:F,Footer:I,Header:A,Info:H,Title:M});export{N as PassportPage};
 //# sourceMappingURL=passport-page.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"@styled/tokens";import{Children as b,cloneElement as v,forwardRef as k,useRef as D}from"react";import{Flex as y,HStack as E,Box as x}from"@styled/jsx";import{cx as L}from"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as O}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";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"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{button as T}from"../../recipes/button.js";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(O,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:e,neutral:p})},z=k((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=T({variant:p,textStyle:N,expand:c,size:m,validating:d,iconOnly:!e}),H=D(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:L(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(E,{w:"full",gap:2,justify:e&&(n||s)?"space-between":"center",children:[n&&{...n,props:{className:n.props.color?void 0:o.icon,width:a,height:a,...n.props}},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:{className:s.props.color?void 0:o.icon,width:a,height:a,...s.props}}]})})})}),J=Object.assign(z,{LeadingIcon:j,TrailingIcon:S});z.displayName="Button";export{J as default};
+import{jsx as e,jsxs as k}from"react/jsx-runtime";import"@styled/tokens";import{Children as x,cloneElement as y,forwardRef as D,useRef as E}from"react";import{Flex as w,HStack as L,Box as j}from"@styled/jsx";import{cx as T}from"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as J}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";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"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{button as K}from"../../recipes/button.js";import{createSlot as z,createHost as M}from"create-slots";import{useButton as V,useHover as W,useFocusRing as q,mergeProps as A}from"react-aria";const C=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),N=z(({children:t,...i})=>e(w,{alignItems:"center",justifyContent:"center",children:x.map(t,r=>y(r,i))})),G=({variant:t="primary",size:i="md"})=>{const r=t==="primary"||t==="negative",p=t==="neutral"||t==="tertiary";return e(J,{size:{sm:20,md:24,lg:28}[i],strokeWidth:2.5,inverted:r,neutral:p})},S=D((t,i)=>{const{label:r,variant:p="primary",textStyle:H,size:m="md",disabled:l,expand:c,validating:d,iconSize:I,onHover:u,centerContent:f}=t,a=I||(m==="sm"?16:24),g=r&&c&&!f,o=K({variant:p,textStyle:H,expand:c,size:m,validating:d,iconOnly:!r}),P=E(null),h=i||P,{buttonProps:B}=V({...t,isDisabled:l??!1},h),{hoverProps:F}=W({isDisabled:l??!1}),{isFocusVisible:R,focusProps:O}=q();return M(t.children,b=>{const n=b.get(C),s=b.get(N),v=a/4;return e("button",{className:T(o.button,"group",!r&&o.iconContainer,R&&o.focus),ref:h,...A(B,F,O),"aria-disabled":l,onMouseEnter:u,onTouchStart:u,children:d?e(G,{variant:p,size:m}):k(L,{w:"full",gap:2,justify:r&&(n||s)&&!f?"space-between":"center",children:[n&&{...n,props:{className:n.props.color?void 0:o.icon,width:a,height:a,...n.props}},s&&g&&e(j,{w:v}),r&&e("span",{className:o.label,children:r}),n&&g&&e(j,{w:v}),s&&{...s,props:{className:s.props.color?void 0:o.icon,width:a,height:a,...s.props}}]})})})}),Q=Object.assign(S,{LeadingIcon:C,TrailingIcon:N});S.displayName="Button";export{Q 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' | 'inverse';\n  textStyle?: 'negative' | 'positive' | '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                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n                ...leadingIcon.props,\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                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n                ...trailingIcon.props,\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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"}
+{"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' | 'inverse';\n  textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';\n  disabled?: boolean;\n  expand?: boolean;\n  validating?: boolean;\n  iconSize?: number;\n  onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n  centerContent?: boolean;\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    centerContent,\n  } = props;\n\n  const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n  const addPaddingContainer = label && expand && !centerContent;\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\n            w=\"full\"\n            gap={2}\n            justify={label && (leadingIcon || trailingIcon) && !centerContent ? 'space-between' : 'center'}\n          >\n            {leadingIcon && {\n              ...leadingIcon,\n              props: {\n                className: !leadingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n                ...leadingIcon.props,\n              },\n            }}\n            {trailingIcon && addPaddingContainer && <Box w={containerSize} />}\n            {label && <span className={classes.label}>{label}</span>}\n            {leadingIcon && addPaddingContainer && <Box w={containerSize} />}\n            {trailingIcon && {\n              ...trailingIcon,\n              props: {\n                className: !trailingIcon.props.color ? classes.icon : undefined,\n                width: iconSize,\n                height: iconSize,\n                ...trailingIcon.props,\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","centerContent","iconSize","addPaddingContainer","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/popover.js

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

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.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.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","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","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","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:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","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","width]___[value:fit-content","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","textAlign]___[value:left","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","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","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","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","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:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","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","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","borderRadius]___[value:3xl","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","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","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","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","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","minHeight]___[value:16","width]___[value:16","height]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","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","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","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","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","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","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","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","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","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"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.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","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","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before<___>_dark","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:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","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","width]___[value:fit-content","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","textAlign]___[value:left","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","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","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","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","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:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","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","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.tertiary]___[cond:_dark","position]___[value:absolute","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","display]___[value:none","display]___[value:block","top]___[value:0%","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","right]___[value:100%","transform]___[value:translateX(10%) translateY(calc(-100% - 0.75rem))","left]___[value:100%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","left]___[value:0%","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(-100% - 0.75rem)) translateY(-25%)","right]___[value:0%","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-50%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-75%)","transform]___[value:translateX(calc(100% + 0.75rem)) translateY(-25%)","bottom]___[value:0%","transform]___[value:translateX(-50%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(10%) translateY(calc(100% + 0.75rem))","transform]___[value:translateX(-10%) translateY(calc(100% + 0.75rem))","width]___[value:72","height]___[value:4","bottom]___[value:0","transform]___[value:translateX(-50%) translateY(0.75rem)","transform]___[value:translateX(-50%) translateY(-0.75rem)","width]___[value:4","height]___[value:48","right]___[value:-6","transform]___[value:translateX(-0.75rem) translateY(-50%)","left]___[value:-6","transform]___[value:translateX(0.75rem) translateY(-50%)","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","opacity]___[value:0.8]___[cond:_disabled","height]___[value:auto","flexShrink]___[value:0","paddingTop]___[value:6","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","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","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","borderRadius]___[value:60","height]___[value:11","width]___[value:11","width]___[value:10","left]___[value:9","top]___[value:11","height]___[value:7","width]___[value:7","borderRadius]___[value:30","borderWidth]___[value:2","width]___[value:5","height]___[value:5","borderRadius]___[value:0.375rem","borderRadius]___[value:md","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","fontWeight]___[value:bold","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","opacity]___[value:0.5","opacity]___[value:1","width]___[value:40","height]___[value:40","minHeight]___[value:16","width]___[value:16","height]___[value:16","borderRadius]___[value:0.75rem","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","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","srOnly]___[value:true","marginLeft]___[value:3","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","height]___[value:6","width]___[value:3","height]___[value:3","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","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","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","marginBlock]___[value:3","pointerEvents]___[value:initial","height]___[value:76px","maxWidth]___[value:115px","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","width]___[value:max-content","border]___[value:thin solid transparent","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","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","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","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","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","alignItems]___[value:baseline","margin]___[value:1","backgroundColor]___[value:neutral.secondary","backgroundColor]___[value:negative.lighter","gridTemplateColumns]___[value:2","gap]___[value:8"],"recipes":{}}}

package/dist/types/components/feedback/skeleton.d.ts

@@ -1,7 +1,9 @@
 export interface SkeletonProps {
-    width?: string;
-    height?: string;
+    width?: string | number;
+    height?: string | number;
     speed?: string;
+    borderRadius?: string | number;
+    backgroundColor?: string;
 }
-export declare const Skeleton: ({ width, height, speed }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ width, height, speed, borderRadius, backgroundColor, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/types/components/feedback/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,6BAA0D,aAAa,4CAyB3F,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/skeleton.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,6DAMlB,aAAa,4CAwBf,CAAC"}

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

@@ -10,6 +10,7 @@ export interface ButtonProps extends AriaButtonProps {
     validating?: boolean;
     iconSize?: number;
     onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;
+    centerContent?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
     LeadingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;

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,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,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"}
+{"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,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,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;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmHD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/package.json

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