npm - @magiclabs/ui-components - Versions diffs - 1.52.1 → 2.1.0 - Mend

@magiclabs/ui-components 1.52.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1476) hide show

package/dist/cjs/components/containers/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),t=require("@styled/css"),k=require("@styled/jsx"),R=require("@styled/tokens"),s=require("react"),e=require("react-aria");const n=s.forwardRef(({children:u,className:l,borderRadius:c,disabled:r,expand:d,onHover:o,shadow:b,...p},g)=>{const f=s.useRef(null),a=g||f,{buttonProps:h}=e.useButton({...p,isDisabled:r??!1},a),{hoverProps:v}=e.useHover({isDisabled:r??!1}),{isFocusVisible:m,focusProps:y}=e.useFocusRing();return i.jsx("button",{ref:a,className:t.cx(t.css({_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.8",pointerEvents:"none"},cursor:"pointer",h:"auto",outline:"none",position:"relative",transition:"all 0.1s ease",willChange:"transform, opacity",...d?{w:"full"}:{},...b?{_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}}:{}}),m&&t.css({outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}),l),style:{borderRadius:c??R.token("radii.button")},...e.mergeProps(h,v,y),"aria-disabled":r,onMouseEnter:o,onTouchStart:o,children:i.jsx(k.VStack,{children:u})})});n.displayName="ButtonContainer",exports.ButtonContainer=n;
+"use strict";var a=require("react/jsx-runtime"),x=require("../../lib/cn.js"),i=require("react"),e=require("react-aria");const n=i.forwardRef(({children:s,className:u,borderRadius:l,disabled:r,expand:b,onHover:o,shadow:d,style:c,...f},p)=>{const g=i.useRef(null),t=p||g,{buttonProps:v}=e.useButton({...f,isDisabled:r??!1},t),{hoverProps:h}=e.useHover({isDisabled:r??!1}),{isFocusVisible:m,focusProps:y}=e.useFocusRing();return a.jsx("button",{ref:t,className:x.cn("active:scale-95 disabled:opacity-80 disabled:pointer-events-none cursor-pointer h-auto outline-none relative transition-all duration-100 ease-in-out will-change-[transform,opacity]",b&&"w-full",d&&'before:content-[""] before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:rounded-[inherit] before:bg-[linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.05))] dark:before:bg-[linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05))] before:opacity-0 before:transition-opacity before:duration-100 before:ease-in-out hover:before:opacity-100',m&&"outline-brand-base outline outline-thick outline-offset-[0.125rem]",u),style:{borderRadius:l??"var(--button-radius, 9999px)",...c},...e.mergeProps(v,h,y),"aria-disabled":r,onMouseEnter:o,onTouchStart:o,children:a.jsx("div",{className:"flex flex-col",children:s})})});n.displayName="ButtonContainer",exports.ButtonContainer=n;
 //# sourceMappingURL=button.js.map

package/dist/cjs/components/containers/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../../../src/components/containers/button.tsx"],"sourcesContent":["import { ~~css,~~ cx } from '@~~styled~~/~~css~~';\nimport { ~~VStack~~ ~~} from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ MouseEventHandler, PropsWithChildren, TouchEventHandler, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonContainerProps extends AriaButtonProps, PropsWithChildren {\n className?: string;\n borderRadius?: string \| number;\n disabled?: boolean;\n expand?: boolean;\n onHover?: MouseEventHandler<HTMLButtonElement> \| TouchEventHandler<HTMLButtonElement>;\n shadow?: boolean;\n}\n\nexport const ButtonContainer = forwardRef<HTMLButtonElement, ButtonContainerProps>(\n ({ children, className, borderRadius, disabled, expand, onHover, shadow, ...props }, forwardedRef) => {\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 ~~const~~ ~~dimensions~~ = ~~expand~~ ? { w: ~~'full'~~ } : ~~{};\n const~~ ~~shadowStyles~~ ~~= shadow\~~n ? {\n ~~_before:~~ {\n content~~: '~~\"\"~~',\n position~~: ~~'absolute',\n~~ top: 0~~,\n left:~~ ~~0,\n right~~: 0~~,\n bottom:~~ ~~0,\n borderRadius~~: ~~'inherit',\n backgroundImage~~: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))~~',\n _dark:~~ ~~{ backgroundImage~~: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` ~~},\n opacity~~: ~~0,\n transition: '~~opacity 0~~.1s~~ ~~ease',\n },\n _hover~~: ~~{\n _before: {\n~~ opacity: ~~1,\n },\n },\n }\n~~ : ~~{};\n\n return (\n <button\n ref={ref}\n className={cx(\n css({\n _active~~: ~~{ transform~~: ~~'scale(0.95)' },\n _disabled~~: { opacity: '~~0.8', pointerEvents: 'none' }~~,\n cursor: 'pointer',\n h: 'auto',\n outline: 'none',\n position: 'relative',\n transition: 'all 0.1s ease',\n willChange: 'transform, opacity',\n ...dimensions,\n ...shadowStyles,\n ~~}),\n~~ isFocusVisible ~~&&\n css({~~ ~~outlineColor:~~ 'brand.base', ~~outlineStyle:~~ ~~'solid', outlineWidth: '~~thick', ~~outlineOffset:~~ 0.~~5 })~~,\n className,\n )}\n style={{ borderRadius: borderRadius ?? ~~token~~(~~'radii.~~button') }}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n <~~VStack~~>{children}</~~VStack~~>\n </button>\n );\n },\n);\n\nButtonContainer.displayName = 'ButtonContainer';\n"],"names":["ButtonContainer","forwardRef","children","className","borderRadius","disabled","expand","onHover","shadow","props","forwardedRef","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","_jsx","cx","~~css","token","~~mergeProps"~~,"VStack"~~],"mappings":"~~yKAeO~~,~~MAAMA~~,EAAkBC,~~EAAAA~~,~~WAC7B~~,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,aAAAC,EAAc,SAAAC,EAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,GAAGC,~~CAAO~~,~~EAAEC~~,IAAgB,~~CACnG~~,MAAMC,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMH,GAAgBC,EAEtB,CAAE,YAAAG,CAAa,EAAGC,~~EACtB~~,~~UAAA,~~CAAE,GAAGN,EAAO,~~WAAYJ~~,GAAY,EAAO,~~EAC3CQ~~,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,WAAS,CAAE,~~WAAYZ~~,GAAY,EAAK,CAAE,EAC3D,CAAE,~~eAAAa~~,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,~~EAyBvC~~,OACEC,MACE,SAAA,CAAA,IAAKR,EACL,UAAWS,~~KACTC,~~EAAAA,~~IAAI~~,~~CACF~~,~~QAAS~~,~~CAAE~~,~~UAAW~~,~~aAAe~~,~~EACrC~~,~~UAAW~~,CAAE,QAAS,MAAO,cAAe,MAAQ,EACpD,OAAQ,UACR,EAAG,OACH,QAAS,OACT,SAAU,WACV,WAAY,gBACZ,WAAY,qBACZ,GArCWjB,EAAS,CAAE,EAAG,MAAQ,EAAG,GAsCpC,GArCaE,EACjB,CACE,QAAS,CACP,QAAS,KACT,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,aAAc,UACd,gBAAiB,4DACjB,MAAO,CAAE,gBAAiB,uEAAyE,EACnG,QAAS,EACT,WAAY,mBACb,EACD,OAAQ,CACN,QAAS,CACP,QAAS,CACV,CACF,CACF,EACD,CAiBG,CAAA,CAAA,EACDU,GACEK,EAAAA,IAAI,CAAE,aAAc,aAAc,aAAc,QAAS,aAAc,QAAS,cAAe,EAAK,CAAA,EACtGpB,CAAS,EAEX,MAAO,CAAE,aAAcC,~~GAAgBoB~~,~~EAAAA~~,~~MAAM~~,~~cAAc~~,~~CAAC~~,~~EACxD,GAAAC,~~EAAAA,~~WAAWX~~,EAAaE,EAAYG,CAAU,~~EACnC~~,~~gBAAAd,~~EACf,aAAcE,EACd,aAAcA,~~EAA4B~~,~~SAE1Cc~~,~~MAACK,~~EAAAA,~~OAAQ~~,~~CAAA~~,~~SAAAxB~~,~~CAAkB~~,~~CAAA~~,CAAA,CAAA,~~CAGjC~~,CAAC,EAGHF,EAAgB,YAAc"}
1	+ {"version":3,"file":"button.js","sources":["../../../../src/components/containers/button.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\nimport { CSSProperties, MouseEventHandler, PropsWithChildren, TouchEventHandler, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonContainerProps extends AriaButtonProps, PropsWithChildren {\n className?: string;\n borderRadius?: string \| number;\n disabled?: boolean;\n expand?: boolean;\n onHover?: MouseEventHandler<HTMLButtonElement> \| TouchEventHandler<HTMLButtonElement>;\n shadow?: boolean;\n style?: CSSProperties;\n}\n\nexport const ButtonContainer = forwardRef<HTMLButtonElement, ButtonContainerProps>(\n ({ children, className, borderRadius, disabled, expand, onHover, shadow, style, ...props }, forwardedRef) => {\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 (\n <button\n ref={ref}\n className={cn(\n 'active:scale-95 disabled:opacity-80 disabled:pointer-events-none cursor-pointer h-auto outline-none relative transition-all duration-100 ease-in-out will-change-[transform,opacity]',\n expand && 'w-full',\n shadow &&\n 'before:content-[\"\"] before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:rounded-[inherit] before:bg-[linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.05))] dark:before:bg-[linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05))] before:opacity-0 before:transition-opacity before:duration-100 before:ease-in-out hover:before:opacity-100',\n isFocusVisible && 'outline-brand-base outline outline-thick outline-offset-[0.125rem]',\n className,\n )}\n style={{ borderRadius: borderRadius ?? 'var(--button-radius, 9999px)', ...style }}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n <div className=\"flex flex-col\">{children}</div>\n </button>\n );\n },\n);\n\nButtonContainer.displayName = 'ButtonContainer';\n"],"names":["ButtonContainer","forwardRef","children","className","borderRadius","disabled","expand","onHover","shadow","style","props","forwardedRef","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","_jsx","cn","mergeProps"],"mappings":"wHAca,MAAAA,EAAkBC,EAC7B,WAAA,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,aAAAC,EAAc,SAAAC,EAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,MAAAC,EAAO,GAAGC,CAAK,EAAIC,IAAgB,CAC1G,MAAMC,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMH,GAAgBC,EAEtB,CAAE,YAAAG,CAAa,EAAGC,YACtB,CAAE,GAAGN,EAAO,WAAYL,GAAY,EAAO,EAC3CS,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,WAAS,CAAE,WAAYb,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAc,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OACEC,MACE,SAAA,CAAA,IAAKR,EACL,UAAWS,EAAAA,GACT,uLACAjB,GAAU,SACVE,GACE,mXACFW,GAAkB,qEAClBhB,CAAS,EAEX,MAAO,CAAE,aAAcC,GAAgB,+BAAgC,GAAGK,CAAK,EAC3E,GAAAe,EAAAA,WAAWT,EAAaE,EAAYG,CAAU,kBACnCf,EACf,aAAcE,EACd,aAAcA,EAEd,SAAAe,EAAAA,IAAA,MAAA,CAAK,UAAU,gBAAe,SAAEpB,CAAQ,CAAA,CACjC,CAAA,CAEb,CAAC,EAGHF,EAAgB,YAAc"}

package/dist/cjs/components/containers/card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var v=require("react"),s=require("@styled/jsx"),d=require("@styled/css");require("../feedback/callout.js");var j=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var m=require("../../recipes/card.js");const t=v.forwardRef(({children:i,className:a,id:u,asButton:r,stack:l,onClick:o,validating:n,...x},c)=>{const q=m.card({asButton:r,validating:n,...x});return l||r?e.jsx(s.Flex,{id:u,className:d.cx(q,a),flexDirection:"column",role:r?"button":"none",onClick:r?o:void 0,ref:c,children:n?e.jsx(j.LoadingSpinner,{neutral:!0}):i}):e.jsx(s.Box,{id:u,className:d.cx(q,a),ref:c,children:i})});t.displayName="Card",exports.Card=t;
+"use strict";var i=require("react/jsx-runtime"),x=require("react"),l=require("../../lib/cn.js");require("../feedback/callout.js");var f=require("../feedback/loading-spinner.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../feedback/tooltip.js");var k=require("../../recipes/card.js");const s=x.forwardRef(({children:a,className:n,id:u,asButton:e,stack:o,onClick:q,validating:t,...v},d)=>{const c=k.card({asButton:e,validating:t,...v});return o||e?i.jsx("div",{id:u,className:l.cn(c,"flex flex-col",n),role:e?"button":"none",tabIndex:e?0:void 0,onClick:e?q:void 0,onKeyDown:e?r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),r.target.click())}:void 0,ref:d,children:t?i.jsx(f.LoadingSpinner,{neutral:!0}):a}):i.jsx("div",{id:u,className:l.cn(c,n),ref:d,children:a})});s.displayName="Card",exports.Card=s;
 //# sourceMappingURL=card.js.map

package/dist/cjs/components/containers/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { ~~card~~ } from '@~~recipes~~/~~card~~';\nimport { cx } from '@~~styled~~/~~css~~';\nimport { ~~Box, Flex } from '@styled/jsx';\nimport {~~ ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n className?: string;\n id?: string;\n alt?: boolean;\n asButton?: boolean;\n alignment?: 'center' \| 'left' \| 'right';\n expand?: boolean;\n gapType?: 'none' \| 'sm' \| 'md' \| 'lg';\n heavyShadow?: boolean;\n paddingType?: 'none' \| 'sm' \| 'md' \| 'lg';\n stack?: boolean;\n widthMax?: boolean;\n disabled?: boolean;\n validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n const classStyles = card({ asButton, validating, ...props });\n\n return stack \|\| asButton ? (\n <~~Flex~~\n id={id}\n className={cx(classStyles, className)}\n ~~flexDirection=\"column\"\n~~ role={asButton ? 'button' : 'none'}\n onClick={asButton ? onClick : undefined}\n ref={ref}\n >\n {validating ? <LoadingSpinner neutral /> : children}\n </~~Flex~~>\n ) : (\n <~~Box~~ id={id} className={cx(classStyles, className)} ref={ref}>\n {children}\n </~~Box~~>\n );\n },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","~~Flex~~","cx","LoadingSpinner"~~,"Box"~~],"mappings":"~~2uBAsBO~~,~~MAAMA~~,EAAOC,~~EAAAA~~,~~WAClB~~,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CACnF,MAAMC,EAAcC,EAAAA,KAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAAAA,~~IAACC~~,~~EAAI~~,~~KAAA~~,~~CACH~~,~~GAAIV,~~EACJ,~~UAAWW~~,~~EAAAA~~,~~GAAGJ~~,~~EAAaR~~,CAAS,~~EACpC~~,~~cAAc,SACd,~~KAAME,EAAW,SAAW,OAC5B,QAASA,EAAWE,EAAU,OAC9B,~~IAAKG~~,~~WAEJF~~,EAAaK,~~MAACG~~,EAAAA,~~eAAe~~,CAAA,~~aAAad~~,CAAQ,CAAA,EAGrDW,~~MAACI,~~EAAAA,~~KAAI~~,~~GAAIb~~,EAAI,~~UAAWW~~,~~KAAGJ~~,EAAaR,CAAS,EAAG,IAAKO,EACtD,SAAAR,CACG,CAAA,CAEV,CAAC,EAGHF,EAAK,YAAc"}
1	+ {"version":3,"file":"card.js","sources":["../../../../src/components/containers/card.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { cn } from '@lib/cn';\nimport { card } from '@recipes/card';\nimport { ComponentProps, forwardRef } from 'react';\n\nexport interface CardProps extends ComponentProps<'div'> {\n className?: string;\n id?: string;\n alt?: boolean;\n asButton?: boolean;\n alignment?: 'center' \| 'left' \| 'right';\n expand?: boolean;\n gapType?: 'none' \| 'sm' \| 'md' \| 'lg';\n heavyShadow?: boolean;\n paddingType?: 'none' \| 'sm' \| 'md' \| 'lg';\n stack?: boolean;\n widthMax?: boolean;\n disabled?: boolean;\n validating?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n ({ children, className, id, asButton, stack, onClick, validating, ...props }, ref) => {\n const classStyles = card({ asButton, validating, ...props });\n\n return stack \|\| asButton ? (\n <div\n id={id}\n className={cn(classStyles, 'flex flex-col', className)}\n role={asButton ? 'button' : 'none'}\n tabIndex={asButton ? 0 : undefined}\n onClick={asButton ? onClick : undefined}\n onKeyDown={\n asButton\n ? e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n (e.target as HTMLElement).click();\n }\n }\n : undefined\n }\n ref={ref}\n >\n {validating ? <LoadingSpinner neutral /> : children}\n </div>\n ) : (\n <div id={id} className={cn(classStyles, className)} ref={ref}>\n {children}\n </div>\n );\n },\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","id","asButton","stack","onClick","validating","props","ref","classStyles","card","_jsx","cn","e","LoadingSpinner"],"mappings":"+mBAqBa,MAAAA,EAAOC,EAClB,WAAA,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAAC,EAAI,SAAAC,EAAU,MAAAC,EAAO,QAAAC,EAAS,WAAAC,EAAY,GAAGC,CAAO,EAAEC,IAAO,CACnF,MAAMC,EAAcC,EAAAA,KAAK,CAAE,SAAAP,EAAU,WAAAG,EAAY,GAAGC,CAAK,CAAE,EAE3D,OAAOH,GAASD,EACdQ,EAAAA,IAAA,MAAA,CACE,GAAIT,EACJ,UAAWU,KAAGH,EAAa,gBAAiBR,CAAS,EACrD,KAAME,EAAW,SAAW,OAC5B,SAAUA,EAAW,EAAI,OACzB,QAASA,EAAWE,EAAU,OAC9B,UACEF,EACIU,GAAI,EACEA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,iBACDA,EAAE,OAAuB,QAE9B,EACA,OAEN,IAAKL,EAAG,SAEPF,EAAaK,EAAAA,IAACG,EAAAA,gBAAe,QAAO,EAAA,CAAA,EAAMd,CAAQ,CAAA,EAGrDW,EAAAA,WAAK,GAAIT,EAAI,UAAWU,KAAGH,EAAaR,CAAS,EAAG,IAAKO,EACtD,SAAAR,CACG,CAAA,CAEV,CAAC,EAGHF,EAAK,YAAc"}

package/dist/cjs/components/containers/content.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("react/jsx-runtime"),r=require("@styled/css"),n=require("@styled/jsx");const c=({children:e,className:t=""})=>s.jsx(n.VStack,{alignItems:"center",justifyContent:"center",flexShrink:0,className:`${r.css({pb:0,pt:6,px:8,width:"100%"})} ${t}`,children:e});exports.Content=c;
+"use strict";var t=require("react/jsx-runtime"),r=require("../../lib/cn.js");const s=({children:e,className:n=""})=>t.jsx("div",{className:r.cn("flex flex-col items-center justify-center shrink-0 pb-0 pt-6 px-8 w-full gap-2.5",n),children:e});exports.Content=s;
 //# sourceMappingURL=content.js.map

package/dist/cjs/components/containers/content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content.js","sources":["../../../../src/components/containers/content.tsx"],"sourcesContent":["import { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~VStack } from '@styled/jsx';\nimport {~~ ComponentProps } from 'react';\n\nexport interface ContentProps extends ComponentProps<'div'> {\n className?: string;\n}\n\nexport const Content = ({ children, className = '' }: ContentProps) => (\n <~~VStack\n alignItems=\"center\"\n justifyContent=\"center\"\n flexShrink={0}\n~~ className={~~`${css~~(~~{\n~~ pb: ~~0,\n~~ pt: ~~6,\n~~ px: 8~~,\n width:~~ '~~100%',\n })}~~ ${className}~~`}\n~~ >\n {children}\n </~~VStack~~>\n);\n"],"names":["Content","children","className","_jsx","~~VStack~~"~~,"css"~~],"mappings":"~~wGAQaA~~,EAAU,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,EAAE,IAChDC,EAAAA,~~IAACC~~,~~EAAM~~,~~OAAA~~,~~CACL~~,~~WAAW~~,~~SACX~~,~~eAAe~~,~~SACf~~,~~WAAY~~,~~EACZ,UAAW,GAAGC,EAAAA,IAAI,CAChB,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,MAAO,MACR,CAAA,CAAC,IAAIH,CAAS,YAEdD,~~CAAQ,CAAA"}
1	+ {"version":3,"file":"content.js","sources":["../../../../src/components/containers/content.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\nimport { ComponentProps } from 'react';\n\nexport interface ContentProps extends ComponentProps<'div'> {\n className?: string;\n}\n\nexport const Content = ({ children, className = '' }: ContentProps) => (\n <div className={cn('flex flex-col items-center justify-center shrink-0 pb-0 pt-6 px-8 w-full gap-2.5', className)}>\n {children}\n </div>\n);\n"],"names":["Content","children","className","_jsx","cn"],"mappings":"6EAOa,MAAAA,EAAU,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,EAAE,IAChDC,EAAAA,IAAK,MAAA,CAAA,UAAWC,KAAG,mFAAoFF,CAAS,EAAC,SAC9GD,CAAQ,CAAA"}

package/dist/cjs/components/containers/drawer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var h=require("../icons/ico-caret-down.js"),l=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var q=require("../primitives/text.js"),o=require("@styled/jsx"),t=require("react");const j=({isOpen:r=!1,title:c,onToggle:s,children:d,showCloseButton:x=!0})=>{const[f,a]=t.useState(r),[p,u]=t.useState(r),i=t.useRef(null);t.useEffect(()=>{let n;return r?(a(!0),n=setTimeout(()=>u(!0),10)):u(!1),()=>clearTimeout(n)},[r]),t.useEffect(()=>{const n=g=>{i.current&&!i.current.contains(g.target)&&s(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[s]);const b=()=>{r||a(!1)},m=t.useCallback(()=>{s(!1)},[s]);return e.jsxs(e.Fragment,{children:[e.jsx(o.Box,{position:"absolute",display:r?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",_dark:{bg:"rgba(0, 0, 0, .7)"},backdropFilter:"blur(3px)"}),f&&e.jsxs(o.Box,{ref:i,position:"absolute",transform:p?"translateY(0)":"translateY(100%)",transition:"transform 0.3s",bottom:0,left:0,right:0,bg:"surface.primary",_dark:{bg:"surface.secondary"},roundedTop:"3xl",boxShadow:"0px -12px 56px 0px rgba(119, 118, 122, 0.15)",onTransitionEnd:b,zIndex:10,children:[e.jsxs(o.HStack,{justifyContent:"space-between",px:6,py:4,children:[e.jsx(q.default,{fontWeight:"medium",children:c}),x&&e.jsx(l.default,{size:"sm",variant:"neutral",onPress:m,children:e.jsx(l.default.LeadingIcon,{children:e.jsx(h.default,{})})})]}),e.jsx(o.Box,{px:6,pb:6,children:d})]})]})};exports.Drawer=j;
+"use strict";var e=require("react/jsx-runtime"),p=require("../icons/ico-caret-down.js"),o=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var v=require("../primitives/text.js"),l=require("../../lib/cn.js"),t=require("react");const q=({isOpen:r=!1,title:c,onToggle:a,children:d,showCloseButton:x=!0})=>{const[m,i]=t.useState(r),[f,u]=t.useState(r),s=t.useRef(null);t.useEffect(()=>{let n;return r?(i(!0),n=setTimeout(()=>u(!0),10)):u(!1),()=>clearTimeout(n)},[r]),t.useEffect(()=>{const n=h=>{s.current&&!s.current.contains(h.target)&&a(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[a]);const b=()=>{r||i(!1)},g=t.useCallback(()=>{a(!1)},[a]);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.cn("absolute bottom-0 left-0 right-0 h-full bg-[color-mix(in_srgb,var(--color-text-primary)_20%,transparent)] dark:bg-[rgba(0,0,0,0.7)] backdrop-blur-[3px]",r?"block":"hidden")}),m&&e.jsxs("div",{ref:s,className:l.cn("absolute bottom-0 left-0 right-0 bg-surface-primary dark:bg-surface-secondary rounded-t-3xl shadow-[0px_-12px_56px_0px_rgba(119,118,122,0.15)] z-10 transition-transform duration-300",f?"translate-y-0":"translate-y-full"),onTransitionEnd:b,children:[e.jsxs("div",{className:"flex flex-row items-center gap-2.5 justify-between px-6 py-4",children:[e.jsx(v.default,{fontWeight:"medium",children:c}),x&&e.jsx(o.default,{size:"sm",variant:"neutral",onPress:g,children:e.jsx(o.default.LeadingIcon,{children:e.jsx(p.default,{})})})]}),e.jsx("div",{className:"px-6 pb-6",children:d})]})]})};exports.Drawer=q;
 //# sourceMappingURL=drawer.js.map

package/dist/cjs/components/containers/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { ~~Box,~~ ~~HStack~~ } from '@~~styled~~/~~jsx~~';\nimport { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps extends PropsWithChildren {\n onToggle: (isOpen: boolean) => void;\n isOpen: boolean;\n title?: string;\n showCloseButton?: boolean;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children, showCloseButton = true }: DrawerProps) => {\n const [shouldRender, setShouldRender] = useState(isOpen);\n const [isVisible, setIsVisible] = useState(isOpen);\n const drawerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n setShouldRender(true);\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n onToggle(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [onToggle]);\n\n const handleTransitionEnd = () => {\n if (!isOpen) {\n setShouldRender(false);\n }\n };\n const handleClose = useCallback(() => {\n onToggle(false);\n }, [onToggle]);\n\n return (\n <>\n <~~Box~~\n ~~position=\"absolute~~\"\n ~~display={isOpen ?~~ '~~block'~~ ~~: 'none'}\n h=\"full\"\n~~ bottom={0~~}\n~~ left={0~~}\n~~ right={0~~}\n~~ bg~~=\"~~text.primary~~/20\"\n _dark={{~~ bg~~: '~~rgba(0, 0, 0, .7)' ~~}}\~~n ~~backdropFilter=\"blur(3px~~)\"\n />\n {shouldRender && (\n <~~Box~~\n ref={drawerRef}\n ~~position=\"absolute\"\n transform~~={~~isVisible ? 'translateY~~(~~0)' : 'translateY(100%)'}~~\n ~~transition=\"transform~~ ~~0.3s\"\n~~ bottom={0~~}\n~~ left={0~~}\n~~ right={0~~}\n~~ bg~~=\"~~surface.primary~~\"\n _dark={{~~ bg~~: '~~surface.secondary' ~~}}\n roundedTop=\"~~3xl~~\"\n boxShadow=\"0px~~ -~~12px 56px 0px rgba~~(119, 118, 122, 0.15)~~\"\~~n ~~onTransitionEnd={handleTransitionEnd~~}\n ~~zIndex~~={10}\n >\n <~~HStack~~ ~~justifyContent~~=\"~~space~~-between\" px={6} py={4}>\n <Text fontWeight=\"medium\">{title}</Text>\n {showCloseButton && (\n <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n <Button.LeadingIcon>\n <IcoCaretDown />\n </Button.LeadingIcon>\n </Button>\n )}\n </~~HStack~~>\n <~~Box~~ px={6} pb={6~~}>\n~~ {children}\n </~~Box~~>\n </~~Box~~>\n )}\n </>\n );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","showCloseButton","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_jsx","~~Box~~","~~HStack","~~Text","Button","IcoCaretDown"],"mappings":"~~wdAYa~~,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,EAAU,gBAAAC,EAAkB,EAAmB,IAAI,CAC3G,KAAM,CAACC,EAAcC,CAAe,EAAIC,~~EAAAA~~,~~SAASP,~~CAAM,EACjD,CAACQ,EAAWC,CAAY,EAAIF,~~EAAAA~~,~~SAASP,~~CAAM,EAC3CU,EAAYC,EAAAA,OAAuB,IAAI,EAE7CC,EAAAA,UAAU,IAAK,CACb,IAAIC,EAEJ,OAAIb,GACFM,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACb,CAAM,CAAC,EAEXY,~~YAAU~~,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEb,EAAS,EAAK,CAElB,EAEA,~~gBAAS~~,iBAAiB,YAAaY,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACZ,CAAQ,CAAC,EAEb,MAAMc,EAAsB,IAAK,CAC1BhB,GACHM,EAAgB,EAAK,CAEzB,EACMW,EAAcC,~~EAAAA~~,~~YAAY~~,IAAK,CACnChB,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEiB,6BACEC,EAAAA,~~IAACC~~,~~EAAAA~~,~~KACC~~,~~SAAS~~,~~WACT~~,~~QAASrB~~,EAAS,QAAU,~~OAC5B~~,~~EAAE~~,~~OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,EAChC,eAAe,WACf,~~CAAA,EACDK,GACCc,~~OAACE~~,~~EAAAA~~,~~IAAG~~,~~CACF~~,~~IAAKX~~,EACL,~~SAAS~~,~~WACT~~,~~UAAWF~~,EAAY,gBAAkB,~~mBACzC~~,~~WAAW~~,~~iBACX~~,~~OAAQ~~,~~EACR~~,~~KAAM~~,~~EACN~~,~~MAAO~~,~~EACP~~,~~GAAG~~,~~kBACH,MAAO,CAAE,GAAI,mBAAmB,EAChC,WAAW,MACX,~~UAAU,+~~CACV~~,~~gBAAiBQ~~,~~EACjB~~,~~OAAQ,aAERG,OAACG,~~EAAAA,~~QAAO~~,~~eAAe,gBAAgB,GAAI,EAAG,GAAI,YAChDF,~~EAAAA,~~IAACG~~,~~EAAAA~~,~~SAAK,~~WAAW,~~SAAQ~~,~~SAAEtB~~,~~CAAK~~,CAAA,~~EAC/BG~~,GACCgB,EAAAA,~~IAACI~~,~~EAAAA~~,~~SAAO,~~KAAK,KAAK,QAAQ,UAAU,~~QAASP~~,~~WAC3CG~~,EAAAA,~~IAACI~~,EAAO,QAAA,~~YACN~~,CAAA,~~SAAAJ~~,EAAAA,~~IAACK~~,~~EAAe~~,~~QAAA~~,~~EAAA,~~CAAA,CAAA,~~GAGrB~~,CAAA,CAAA,~~EAEHL~~,~~EAAAA~~,~~IAACC~~,~~EAAI~~,~~IAAA~~,~~CAAA~~,~~GAAI~~,~~EAAG~~,~~GAAI~~,~~EACb~~,~~SAAAlB~~,~~GACG~~,~~CACF~~,CAAA,CACP,CACA,CAAA,CAEP"}
1	+ {"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps extends PropsWithChildren {\n onToggle: (isOpen: boolean) => void;\n isOpen: boolean;\n title?: string;\n showCloseButton?: boolean;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children, showCloseButton = true }: DrawerProps) => {\n const [shouldRender, setShouldRender] = useState(isOpen);\n const [isVisible, setIsVisible] = useState(isOpen);\n const drawerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n setShouldRender(true);\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n onToggle(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [onToggle]);\n\n const handleTransitionEnd = () => {\n if (!isOpen) {\n setShouldRender(false);\n }\n };\n const handleClose = useCallback(() => {\n onToggle(false);\n }, [onToggle]);\n\n return (\n <>\n <div\n className={cn(\n 'absolute bottom-0 left-0 right-0 h-full bg-[color-mix(in_srgb,var(--color-text-primary)_20%,transparent)] dark:bg-[rgba(0,0,0,0.7)] backdrop-blur-[3px]',\n isOpen ? 'block' : 'hidden',\n )}\n />\n {shouldRender && (\n <div\n ref={drawerRef}\n className={cn(\n 'absolute bottom-0 left-0 right-0 bg-surface-primary dark:bg-surface-secondary rounded-t-3xl shadow-[0px_-12px_56px_0px_rgba(119,118,122,0.15)] z-10 transition-transform duration-300',\n isVisible ? 'translate-y-0' : 'translate-y-full',\n )}\n onTransitionEnd={handleTransitionEnd}\n >\n <div className=\"flex flex-row items-center gap-2.5 justify-between px-6 py-4\">\n <Text fontWeight=\"medium\">{title}</Text>\n {showCloseButton && (\n <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n <Button.LeadingIcon>\n <IcoCaretDown />\n </Button.LeadingIcon>\n </Button>\n )}\n </div>\n <div className=\"px-6 pb-6\">{children}</div>\n </div>\n )}\n </>\n );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","showCloseButton","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_jsx","cn","Text","Button","IcoCaretDown"],"mappings":"8bAYa,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,EAAU,gBAAAC,EAAkB,EAAmB,IAAI,CAC3G,KAAM,CAACC,EAAcC,CAAe,EAAIC,WAASP,CAAM,EACjD,CAACQ,EAAWC,CAAY,EAAIF,WAASP,CAAM,EAC3CU,EAAYC,EAAAA,OAAuB,IAAI,EAE7CC,EAAAA,UAAU,IAAK,CACb,IAAIC,EAEJ,OAAIb,GACFM,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACb,CAAM,CAAC,EAEXY,EAAAA,UAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEb,EAAS,EAAK,CAElB,EAEA,OAAA,SAAS,iBAAiB,YAAaY,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACZ,CAAQ,CAAC,EAEb,MAAMc,EAAsB,IAAK,CAC1BhB,GACHM,EAAgB,EAAK,CAEzB,EACMW,EAAcC,EAAY,YAAA,IAAK,CACnChB,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEiB,6BACEC,EAAAA,IACE,MAAA,CAAA,UAAWC,EAAAA,GACT,0JACArB,EAAS,QAAU,QAAQ,CAE7B,CAAA,EACDK,GACCc,EAAA,KAAA,MAAA,CACE,IAAKT,EACL,UAAWW,EACT,GAAA,wLACAb,EAAY,gBAAkB,kBAAkB,EAElD,gBAAiBQ,EAEjB,SAAA,CAAAG,EAAA,KAAA,MAAA,CAAK,UAAU,+DACb,SAAA,CAAAC,EAAAA,IAACE,EAAAA,QAAI,CAAC,WAAW,SAAU,SAAArB,CAAa,CAAA,EACvCG,GACCgB,MAACG,EAAAA,QAAO,CAAA,KAAK,KAAK,QAAQ,UAAU,QAASN,EAC3C,SAAAG,EAAAA,IAACG,EAAO,QAAA,YAAW,CAAA,SACjBH,EAAAA,IAACI,EAAAA,QAAY,CAAA,CAAA,CACM,CAAA,CAAA,CAAA,CAExB,CAAA,CAAA,EAEHJ,MAAK,MAAA,CAAA,UAAU,YAAa,SAAAjB,GAAe,CACvC,CAAA,CACP,CACA,CAAA,CAEP"}

package/dist/cjs/components/containers/footer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react"),require("../utils/client-asset-logo.js");var u=require("@styled/css"),c=require("@styled/jsx");require("@styled/tokens"),require("react-qrcode-logo");var t=require("../utils/secured-by-magic.js");const a=({children:r,showLogo:s=!0,...i})=>e.jsxs(c.VStack,{alignItems:"center",className:u.css({width:"full",p:8}),children:[r,s&&e.jsx(t.default,{...i})]});exports.Footer=a;
+"use strict";var e=require("react/jsx-runtime");require("react"),require("../utils/client-asset-logo.js"),require("react-qrcode-logo");var u=require("../utils/secured-by-magic.js");require("../../lib/cn.js");const c=({children:r,showLogo:i=!0,...s})=>e.jsxs("div",{className:"flex flex-col items-center gap-2.5 w-full p-8",children:[r,i&&e.jsx(u.default,{...s})]});exports.Footer=c;
 //# sourceMappingURL=footer.js.map

package/dist/cjs/components/containers/footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.js","sources":["../../../../src/components/containers/footer.tsx"],"sourcesContent":["import { SecuredByMagic } from '@components/utils';\nimport { SecuredByMagicProps } from '@components/utils/secured-by-magic';\nimport { ~~css } from '@styled/css';\nimport { VStack } from '@styled/jsx';\nimport {~~ ComponentProps } from 'react';\n\nexport type FooterProps = ComponentProps<'div'> &\n SecuredByMagicProps & {\n showLogo?: boolean;\n };\n\nexport const Footer = ({ children, showLogo = true, ...sbmProps }: FooterProps) => (\n <~~VStack~~ ~~alignItems~~=\"center\" ~~className={css({~~ ~~width: '~~full', p: 8 ~~})}~~>\n {children}\n {showLogo && <SecuredByMagic {...sbmProps} />}\n </~~VStack~~>\n);\n"],"names":["Footer","children","showLogo","sbmProps","_jsxs","~~VStack","css","~~_jsx","SecuredByMagic"],"mappings":"~~qQAWa~~,~~MAAAA~~,EAAS,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,GAAM,GAAGC,~~CAAQ~~,~~IAC7DC~~,~~EAAAA~~,~~KAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAC~~,~~WAAW~~,~~SAAS,UAAWC,~~EAAAA,~~IAAI~~,~~CAAE~~,~~MAAO~~,~~OAAQ~~,~~EAAG~~,~~CAAG~~,CAAA,~~YAC/DL,EACAC,GAAYK,EAACC,IAAAA,EAAAA,YAAmBL,CAAQ,~~CAAA,~~CAAI,CACtC,~~CAAA"}
1	+ {"version":3,"file":"footer.js","sources":["../../../../src/components/containers/footer.tsx"],"sourcesContent":["import { SecuredByMagic } from '@components/utils';\nimport { SecuredByMagicProps } from '@components/utils/secured-by-magic';\nimport { ComponentProps } from 'react';\n\nexport type FooterProps = ComponentProps<'div'> &\n SecuredByMagicProps & {\n showLogo?: boolean;\n };\n\nexport const Footer = ({ children, showLogo = true, ...sbmProps }: FooterProps) => (\n <div className=\"flex flex-col items-center gap-2.5 w-full p-8\">\n {children}\n {showLogo && <SecuredByMagic {...sbmProps} />}\n </div>\n);\n"],"names":["Footer","children","showLogo","sbmProps","_jsxs","_jsx","SecuredByMagic"],"mappings":"gNASO,MAAMA,EAAS,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,GAAM,GAAGC,KACrDC,cAAK,UAAU,gDAA+C,SAAA,CAC3DH,EACAC,GAAYG,EAAAA,IAACC,UAAmB,CAAA,GAAAH,CAAY,CAAA,CAAA,CAAA,CAAA"}

package/dist/cjs/components/containers/header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("react/jsx-runtime"),d=require("@styled/css"),n=require("@styled/jsx"),e=require("create-slots");const o=e.createSlot("div"),a=e.createSlot("div"),c=e.createSlot("div"),v=({children:l,position:u="absolute"})=>e.createHost(l,t=>{var i,r;return s.jsxs(n.HStack,{alignItems:"center",justifyContent:"space-between",className:d.css({"& >":{_first:{minWidth:8},_last:{minWidth:8}},position:u,p:4,left:0,right:0,top:0,width:"full"}),children:[(i=t.get(a))!==null&&i!==void 0?i:s.jsx(n.Box,{}),t.get(o),(r=t.get(c))!==null&&r!==void 0?r:s.jsx(n.Box,{})]})}),g=Object.assign(v,{Content:o,LeftAction:a,RightAction:c});exports.Header=g;
+"use strict";var l=require("react/jsx-runtime"),d=require("../../lib/cn.js"),t=require("create-slots");const c=t.createSlot("div"),a=t.createSlot("div"),n=t.createSlot("div"),v=({children:o,position:e="absolute"})=>t.createHost(o,i=>{var r,s;return l.jsxs("div",{className:d.cn("flex flex-row items-center justify-between gap-2.5 p-4 left-0 right-0 top-0 w-full [&>*:first-child]:min-w-[2rem] [&>*:last-child]:min-w-[2rem]",e==="absolute"&&"absolute",e==="relative"&&"relative",e==="fixed"&&"fixed",e==="sticky"&&"sticky",e==="static"&&"static"),children:[(r=i.get(a))!==null&&r!==void 0?r:l.jsx("div",{}),i.get(c),(s=i.get(n))!==null&&s!==void 0?s:l.jsx("div",{})]})}),u=Object.assign(v,{Content:c,LeftAction:a,RightAction:n});exports.Header=u;
 //# sourceMappingURL=header.js.map

package/dist/cjs/components/containers/header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sources":["../../../../src/components/containers/header.tsx"],"sourcesContent":["import { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~Box, HStack } from '@styled/jsx';\nimport { SystemProperties } from '@styled/types';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { ComponentPropsWithoutRef } from 'react';\n\nconst Content = createSlot('div');\nconst LeftAction = createSlot('div');\nconst RightAction = createSlot('div');\n\nexport type HeaderProps = ComponentPropsWithoutRef<'div'> & {\n position?: ~~SystemProperties[~~'~~position~~'];\n};\n\nconst HeaderHost = ({ children, position = 'absolute' }: HeaderProps) => {\n return createHost(children, slots => {\n return (\n <~~HStack~~\n ~~alignItems=\"center\"\n justifyContent=\"space-between\"\n~~ className={~~css~~({\n '& ~~>':~~ { ~~_first:~~ { ~~minWidth:~~ 8 }, ~~_last:~~ { ~~minWidth~~: ~~8 } }~~,\n position~~,\n p:~~ 4,\n ~~left:~~ 0,\n ~~right:~~ 0,\n ~~top:~~ 0,\n ~~width:~~ '~~full~~',\n })}\n >\n {slots.get(LeftAction) ?? <~~Box~~ />}\n {slots.get(Content)}\n {slots.get(RightAction) ?? <~~Box~~ />}\n </~~HStack~~>\n );\n });\n};\n\nexport const Header = Object.assign(HeaderHost, {\n Content,\n LeftAction,\n RightAction,\n});\n"],"names":["Content","createSlot","LeftAction","RightAction","HeaderHost","children","position","createHost","slots","_jsxs","~~HStack~~","~~css","~~_a","_jsx","~~Box","~~_b","Header"],"mappings":"~~4HAMA~~,MAAMA,EAAUC,EAAAA,WAAW,KAAK,EAC1BC,EAAaD,EAAAA,WAAW,KAAK,EAC7BE,EAAcF,~~aAAW~~,KAAK,EAM9BG,EAAa,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,UAAyB,IAC3DC,~~aAAWF~~,EAAUG,GAAQ,SAClC,OACEC,~~OAACC~~,~~EAAAA~~,~~OAAM~~,~~CACL~~,~~WAAW,SACX,eAAe,gBACf,~~UAAWC,~~MAAI~~,~~CACb~~,~~MAAO~~,~~CAAE~~,~~OAAQ~~,~~CAAE~~,~~SAAU~~,~~CAAG~~,~~EAAE~~,~~MAAO~~,~~CAAE~~,~~SAAU~~,~~EAAK~~,~~EAC1D~~,~~SAAAL~~,~~EACA~~,~~EAAG~~,~~EACH~~,~~KAAM~~,~~EACN,MAAO,EACP,IAAK,EACL,MAAO,MACR,CAAA,EAEA,~~SAAA,~~EAAAM~~,~~EAAAJ,~~EAAM,IAAIN,CAAU,~~KAAC~~,~~MAAAU~~,IAAA,OAAAA,~~EAAIC~~,EAAAA,~~IAACC~~,~~EAAAA~~,~~IAAM~~,~~CAAA~~,~~CAAA,EAChCN,~~EAAM,IAAIR,CAAO,~~GACjBe~~,~~EAAAP~~,EAAM,IAAIL,CAAW,~~wBAAKU~~,~~EAAAA~~,~~IAACC~~,~~MAAM~~,CAAA,CAAA,CAAA,CAAA,CAAA,CAGxC,CAAC,EAGUE,EAAS,OAAO,~~OAAOZ~~,EAAY,CAC9C,QAAAJ,EACA,WAAAE,EACA,YAAAC,CACD,CAAA"}
1	+ {"version":3,"file":"header.js","sources":["../../../../src/components/containers/header.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { ComponentPropsWithoutRef } from 'react';\n\nconst Content = createSlot('div');\nconst LeftAction = createSlot('div');\nconst RightAction = createSlot('div');\n\nexport type HeaderProps = ComponentPropsWithoutRef<'div'> & {\n position?: 'absolute' \| 'relative' \| 'fixed' \| 'sticky' \| 'static';\n};\n\nconst HeaderHost = ({ children, position = 'absolute' }: HeaderProps) => {\n return createHost(children, slots => {\n return (\n <div\n className={cn(\n 'flex flex-row items-center justify-between gap-2.5 p-4 left-0 right-0 top-0 w-full [&>:first-child]:min-w-[2rem] [&>:last-child]:min-w-[2rem]',\n position === 'absolute' && 'absolute',\n position === 'relative' && 'relative',\n position === 'fixed' && 'fixed',\n position === 'sticky' && 'sticky',\n position === 'static' && 'static',\n )}\n >\n {slots.get(LeftAction) ?? <div />}\n {slots.get(Content)}\n {slots.get(RightAction) ?? <div />}\n </div>\n );\n });\n};\n\nexport const Header = Object.assign(HeaderHost, {\n Content,\n LeftAction,\n RightAction,\n});\n"],"names":["Content","createSlot","LeftAction","RightAction","HeaderHost","children","position","createHost","slots","_jsxs","cn","_a","_jsx","_b","Header"],"mappings":"uGAIA,MAAMA,EAAUC,EAAAA,WAAW,KAAK,EAC1BC,EAAaD,EAAAA,WAAW,KAAK,EAC7BE,EAAcF,EAAAA,WAAW,KAAK,EAM9BG,EAAa,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAW,UAAyB,IAC3DC,EAAAA,WAAWF,EAAUG,GAAQ,SAClC,OACEC,EAAA,KAAA,MAAA,CACE,UAAWC,EAAAA,GACT,kJACAJ,IAAa,YAAc,WAC3BA,IAAa,YAAc,WAC3BA,IAAa,SAAW,QACxBA,IAAa,UAAY,SACzBA,IAAa,UAAY,QAAQ,EAClC,SAAA,IAEAE,EAAM,IAAIN,CAAU,KAAK,MAAAS,IAAA,OAAAA,EAAAC,EAAAA,IAAA,MAAA,EAAA,EACzBJ,EAAM,IAAIR,CAAO,GACjBa,EAAAL,EAAM,IAAIL,CAAW,KAAC,MAAAU,IAAA,OAAAA,EAAID,MAAO,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAGxC,CAAC,EAGUE,EAAS,OAAO,OAAOV,EAAY,CAC9C,QAAAJ,EACA,WAAAE,EACA,YAAAC,CACD,CAAA"}

package/dist/cjs/components/containers/menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var q=require("../icons/ico-menu.js"),f=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var r=require("@styled/jsx"),i=require("create-slots"),n=require("react");const x=i.createSlot("div"),g=i.createSlot("div"),b=i.createSlot("div"),p=({children:m,placement:h="right",isOpen:u=!1})=>{const[a,s]=n.useState(u),[j,d]=n.useState(a),o=n.useRef(null),c=h==="left";return n.useEffect(()=>{s(u)},[u]),n.useEffect(()=>{let t;return a?t=setTimeout(()=>d(!0),10):d(!1),()=>clearTimeout(t)},[a]),n.useEffect(()=>{const t=l=>{o.current&&!o.current.contains(l.target)&&s(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[s]),i.createHost(m,t=>e.jsxs(e.Fragment,{children:[e.jsx(f.default,{onPress:()=>s(l=>!l),textStyle:"neutral",variant:"text",children:e.jsx(f.default.TrailingIcon,{children:e.jsx(q.default,{})})}),e.jsx(r.Box,{position:"absolute",display:a?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",_dark:{bg:"rgba(0, 0, 0, .7)"}}),e.jsxs(r.Stack,{ref:o,position:"absolute",transform:j?"translateX(0)":c?"translateX(-100%)":"translateX(100%)",transition:"transform 0.3s",top:0,bottom:0,...c?{left:0}:{right:0},bg:"surface.primary",_dark:{bg:"surface.secondary"},...c?{roundedRight:"2xl"}:{roundedLeft:"2xl"},zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[e.jsxs(r.Stack,{gap:6,children:[e.jsx(r.Stack,{h:"full",justifyContent:"space-between",children:t.get(x)}),e.jsx(r.Divider,{color:"surface.quaternary"}),e.jsx(r.Stack,{children:t.get(g)})]}),t.get(b)]})]}))},v=Object.assign(p,{Header:x,Content:g,Footer:b});exports.Menu=v;
+"use strict";var e=require("react/jsx-runtime"),j=require("../icons/ico-menu.js"),d=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var f=require("../../lib/cn.js"),l=require("create-slots"),t=require("react");const x=l.createSlot("div"),m=l.createSlot("div"),v=l.createSlot("div"),q=({children:b,placement:g="right",isOpen:n=!1})=>{const[a,s]=t.useState(n),[h,c]=t.useState(a),u=t.useRef(null),o=g==="left";return t.useEffect(()=>{s(n)},[n]),t.useEffect(()=>{let r;return a?r=setTimeout(()=>c(!0),10):c(!1),()=>clearTimeout(r)},[a]),t.useEffect(()=>{const r=i=>{u.current&&!u.current.contains(i.target)&&s(!1)};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[s]),l.createHost(b,r=>e.jsxs(e.Fragment,{children:[e.jsx(d.default,{onPress:()=>s(i=>!i),textStyle:"neutral",variant:"text",children:e.jsx(d.default.TrailingIcon,{children:e.jsx(j.default,{})})}),e.jsx("div",{className:f.cn("absolute bottom-0 left-0 right-0 h-full bg-[color-mix(in_srgb,var(--color-text-primary)_20%,transparent)] dark:bg-[rgba(0,0,0,0.7)]",a?"block":"hidden")}),e.jsxs("div",{ref:u,className:f.cn("absolute top-0 bottom-0 flex flex-col justify-between bg-surface-primary dark:bg-surface-secondary z-10 p-4 pb-6 w-80 transition-transform duration-300",o?"left-0 rounded-r-2xl":"right-0 rounded-l-2xl",h?"translate-x-0":o?"-translate-x-full":"translate-x-full"),children:[e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsx("div",{className:"flex flex-col h-full justify-between",children:r.get(x)}),e.jsx("hr",{className:"border-surface-quaternary"}),e.jsx("div",{className:"flex flex-col",children:r.get(m)})]}),r.get(v)]})]}))},p=Object.assign(q,{Header:x,Content:m,Footer:v});exports.Menu=p;
 //# sourceMappingURL=menu.js.map

package/dist/cjs/components/containers/menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { ~~Box,~~ ~~Divider, Stack~~ } from '@~~styled~~/~~jsx~~';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' \| 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [isVisible, setIsVisible] = useState(isOpen);\n const menuRef = useRef<HTMLDivElement>(null);\n const isLeftAligned = placement === 'left';\n\n useEffect(() => {\n setIsOpen(opened);\n }, [opened]);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [setIsOpen]);\n\n return createHost(children, slots => {\n return (\n <>\n <Button onPress={() => setIsOpen(prev => !prev)} textStyle=\"neutral\" variant=\"text\">\n <Button.TrailingIcon>\n <IcoMenu />\n </Button.TrailingIcon>\n </Button>\n <~~Box~~\n ~~position=\"absolute~~\"\n ~~display={isOpen ?~~ '~~block'~~ ~~: 'none'}\n h=\"full\"\n~~ bottom={0~~}\n~~ left={0~~}\n~~ right={0~~}\n~~ bg~~=\"~~text.primary~~/20\"\n _dark={{~~ bg~~: '~~rgba(0, 0, 0, .7)' }}\n />\n <~~Stack~~\n ref={menuRef}\n ~~position=\"absolute~~\"\n ~~transform={isVisible~~ ? ~~'translateX(~~0)' : ~~isLeftAligned~~ ? ~~'translateX(~~-~~100%)'~~ : ~~'translateX(100%)'}\n~~ transition~~=\"~~transform ~~0.3s\"\~~n ~~top={0}\n bottom={0}\n {...(~~isLeftAligned ? { left: 0 } : { right: 0 ~~})}\~~n ~~bg=\"surface.primary\"\n _dark={{~~ ~~bg:~~ '~~surface.secondary~~' ~~}}\n {...(~~isLeftAligned ? ~~{ roundedRight:~~ '~~2xl~~' } : ~~{ roundedLeft:~~ '~~2xl~~' ~~})}\~~n ~~zIndex={10~~}\n ~~justifyContent=\"space-between\"\n p={4}\n pb={6}\n w={80}\n~~ >\n <~~Stack~~ gap={6}>\n <~~Stack~~ h=\"full\" ~~justifyContent=\"space~~-between\"~~>\n~~ {slots.get(Header)}\n </~~Stack~~>\n <~~Divider~~ ~~color~~=\"surface.quaternary\" />\n <~~Stack~~>{slots.get(Content)}</~~Stack~~>\n </~~Stack~~>\n {slots.get(Footer)}\n </~~Stack~~>\n </>\n );\n });\n};\n\nexport const Menu = Object.assign(MenuHost, {\n Header,\n Content,\n Footer,\n});\n"],"names":["Header","createSlot","Content","Footer","MenuHost","children","placement","opened","isOpen","setIsOpen","useState","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","~~Box~~","~~Stack","Divider","~~Menu"],"mappings":"~~0eAWA~~,MAAMA,EAASC,~~aAAW~~,KAAK,EACzBC,EAAUD,EAAAA,WAAW,KAAK,EAC1BE,EAASF,~~aAAW~~,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,~~EAAAA~~,~~SAASH~~,CAAM,EACrC,CAACI,EAAWC,CAAY,EAAIF,~~EAASF~~,~~SAAAA~~,CAAM,EAC3CK,EAAUC,~~EAAAA~~,~~OAAuB,~~IAAI,EACrCC,EAAgBT,IAAc,OAEpC,OAAAU,EAAAA,UAAU,IAAK,CACbP,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXS,~~EAAU~~,~~UAAA,~~IAAK,CACb,IAAIC,EAEJ,OAAIT,EACFS,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,EAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACT,CAAM,CAAC,EAEXQ,~~YAAU~~,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEV,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaS,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACT,CAAS,CAAC,EAEPW,~~EAAAA~~,~~WAAWf~~,EAAUgB,GAExBC,EAAAA,KAAAC,EAAAA,SAAA,CAAA,SAAA,CACEC,EAAAA,IAACC,~~EAAAA~~,~~QAAO,CAAA,~~QAAS,IAAMhB,EAAUiB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,~~OAAM~~,~~SACjFF,~~EAAAA,IAACC,~~EAAAA~~,~~QAAO~~,~~aACN~~,~~CAAA~~,~~SAAAD~~,~~MAACG~~,~~EAAO~~,~~QAAA,EAAA,CACY,~~CAAA,CAAA,CAAA,~~EAExBH~~,~~EAACI~~,~~IAAAA~~,EAAAA,~~IAAG~~,~~CACF~~,~~SAAS~~,~~WACT~~,~~QAASpB~~,EAAS,QAAU,~~OAC5B~~,~~EAAE~~,~~OACF~~,~~OAAQ~~,~~EACR~~,~~KAAM~~,~~EACN~~,~~MAAO~~,~~EACP~~,~~GAAG~~,~~kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACFc,~~EAAAA,~~KAACO~~,~~EAAAA~~,~~MACC~~,~~CAAA~~,~~IAAKhB~~,~~EACL,SAAS,WACT,UAAWF,~~EAAY,gBAAkBI,EAAgB,oBAAsB,~~mBAC/E~~,~~WAAW~~,iBACX,IAAK,EACL,OAAQ,EAAC,GACJA,EAAgB,CAAE,KAAM,CAAC,EAAK,CAAE,MAAO,CAAC,EAC7C,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAqB,EAAA,GAC7BA,EAAgB,CAAE,aAAc,KAAK,EAAK,CAAE,YAAa,KAAK,EACnE,OAAQ,GACR,eAAe,gBACf,EAAG,EACH,GAAI,EACJ,EAAG,GAEH,SAAA,CAAAO,~~EAAAA~~,~~KAACO~~,~~EAAAA~~,~~MAAK~~,~~CAAC~~,~~IAAK~~,~~EAAC,~~SAAA,~~CACXL~~,~~EAAAA~~,~~IAACK~~,~~EAAAA~~,~~MAAM~~,~~CAAA~~,~~EAAE~~,~~OAAO,eAAe,gBAC5B,SAAAR,~~EAAM,IAAIrB,CAAM,~~CACX~~,CAAA,~~EACRwB~~,EAAAA,~~IAACM~~,~~EAAAA~~,~~QAAQ,~~CAAA,~~MAAM~~,~~oBAAuB~~,~~CAAA~~,~~EACtCN~~,~~MAACK~~,~~EAAO~~,~~MAAA~~,~~CAAA~~,~~SAAAR~~,EAAM,IAAInB,CAAO,CAAC,CAAA,~~CAAS~~,~~CAC7B~~,~~CAAA,EACPmB,~~EAAM,IAAIlB,CAAM,CAAC,~~CACZ~~,CAAA,CAAA,CAAA,CAAA,~~CAGb~~,CACH,~~EAEa4B~~,EAAO,OAAO,~~OAAO3B~~,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}
1	+ {"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' \| 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [isVisible, setIsVisible] = useState(isOpen);\n const menuRef = useRef<HTMLDivElement>(null);\n const isLeftAligned = placement === 'left';\n\n useEffect(() => {\n setIsOpen(opened);\n }, [opened]);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [setIsOpen]);\n\n return createHost(children, slots => {\n return (\n <>\n <Button onPress={() => setIsOpen(prev => !prev)} textStyle=\"neutral\" variant=\"text\">\n <Button.TrailingIcon>\n <IcoMenu />\n </Button.TrailingIcon>\n </Button>\n <div\n className={cn(\n 'absolute bottom-0 left-0 right-0 h-full bg-[color-mix(in_srgb,var(--color-text-primary)_20%,transparent)] dark:bg-[rgba(0,0,0,0.7)]',\n isOpen ? 'block' : 'hidden',\n )}\n />\n <div\n ref={menuRef}\n className={cn(\n 'absolute top-0 bottom-0 flex flex-col justify-between bg-surface-primary dark:bg-surface-secondary z-10 p-4 pb-6 w-80 transition-transform duration-300',\n isLeftAligned ? 'left-0 rounded-r-2xl' : 'right-0 rounded-l-2xl',\n isVisible ? 'translate-x-0' : isLeftAligned ? '-translate-x-full' : 'translate-x-full',\n )}\n >\n <div className=\"flex flex-col gap-6\">\n <div className=\"flex flex-col h-full justify-between\">{slots.get(Header)}</div>\n <hr className=\"border-surface-quaternary\" />\n <div className=\"flex flex-col\">{slots.get(Content)}</div>\n </div>\n {slots.get(Footer)}\n </div>\n </>\n );\n });\n};\n\nexport const Menu = Object.assign(MenuHost, {\n Header,\n Content,\n Footer,\n});\n"],"names":["Header","createSlot","Content","Footer","MenuHost","children","placement","opened","isOpen","setIsOpen","useState","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","cn","Menu"],"mappings":"gdAWA,MAAMA,EAASC,EAAAA,WAAW,KAAK,EACzBC,EAAUD,EAAAA,WAAW,KAAK,EAC1BE,EAASF,EAAAA,WAAW,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAASH,SAAAA,CAAM,EACrC,CAACI,EAAWC,CAAY,EAAIF,EAAAA,SAASF,CAAM,EAC3CK,EAAUC,SAAuB,IAAI,EACrCC,EAAgBT,IAAc,OAEpC,OAAAU,EAAAA,UAAU,IAAK,CACbP,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXS,YAAU,IAAK,CACb,IAAIC,EAEJ,OAAIT,EACFS,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,EAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACT,CAAM,CAAC,EAEXQ,EAAAA,UAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEV,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaS,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACT,CAAS,CAAC,EAEPW,EAAWf,WAAAA,EAAUgB,GAExBC,EAAAA,KAAAC,EAAAA,SAAA,CAAA,SAAA,CACEC,EAAAA,IAACC,WAAO,QAAS,IAAMhB,EAAUiB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,gBAC3EF,EAAAA,IAACC,EAAO,QAAA,uBACND,EAACG,IAAAA,UAAU,CAAA,CAAA,CAAA,CAAA,CAEN,CAAA,EACTH,EAAAA,IACE,MAAA,CAAA,UAAWI,KACT,sIACApB,EAAS,QAAU,QAAQ,CAC5B,CAAA,EAEHc,OAAA,MAAA,CACE,IAAKT,EACL,UAAWe,EAAAA,GACT,0JACAb,EAAgB,uBAAyB,wBACzCJ,EAAY,gBAAkBI,EAAgB,oBAAsB,kBAAkB,EAGxF,SAAA,CAAAO,EAAA,KAAA,MAAA,CAAK,UAAU,sBACb,SAAA,CAAAE,MAAA,MAAA,CAAK,UAAU,uCAAwC,SAAAH,EAAM,IAAIrB,CAAM,CAAC,CAAA,EACxEwB,EAAAA,IAAI,KAAA,CAAA,UAAU,8BACdA,EAAAA,IAAA,MAAA,CAAK,UAAU,gBAAiB,SAAAH,EAAM,IAAInB,CAAO,CAAC,CAAA,CAAO,IAE1DmB,EAAM,IAAIlB,CAAM,CAAC,CACd,CAAA,CAAA,CAAA,CAAA,CAGX,CACH,EAEa0B,EAAO,OAAO,OAAOzB,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}

package/dist/cjs/components/containers/modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var a=require("react/jsx-runtime"),y=require("../../hooks/useDisplayState.js"),v=require("../../recipes/modal.js"),w=require("@styled/jsx");const M=()=>{if(typeof navigator>"u")return!1;const e=navigator.userAgent;return/Mobi|Android|iPhone|iPad/i.test(e)},f=M(),r=({animate:e=!0,paddingType:o="none",gap:s=2.5,isOpen:n=!0,onAnimated:t=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:u=!1,isWidget:p=!1,children:c})=>{const i=v.modal({animate:e,isOpen:n,paddingType:o,showBorder:l,fullscreen:u,isWidget:p,isMobileBrowser:f}),{displayed:m,onHide:g,onShow:h}=y.useDisplayState({animate:e,show:n,onHidden:d,onShown:t});return m?a.jsx("div",{className:i.wrapper,onAnimationEnd:n?h:g,children:a.jsx(w.VStack,{alignItems:"center",gap:s,className:i.content,children:c})}):null};r.displayName="Modal",exports.Modal=r;
+"use strict";var a=require("react/jsx-runtime"),y=require("../../hooks/useDisplayState.js"),v=require("../../recipes/modal.js"),f=require("../../lib/cn.js");const w=()=>{if(typeof navigator>"u")return!1;const e=navigator.userAgent;return/Mobi|Android|iPhone|iPad/i.test(e)},M=w(),r=({animate:e=!0,paddingType:s="none",gap:o=2.5,isOpen:n=!0,onAnimated:t=()=>{},onClosed:d=()=>{},showBorder:l=!0,fullscreen:c=!1,isWidget:u=!1,children:p})=>{const i=v.modal({animate:e,isOpen:n,paddingType:s,showBorder:l,fullscreen:c,isWidget:u,isMobileBrowser:M}),{displayed:m,onHide:g,onShow:h}=y.useDisplayState({animate:e,show:n,onHidden:d,onShown:t});return m?a.jsx("div",{className:i.wrapper,onAnimationEnd:n?h:g,children:a.jsx("div",{className:f.cn(i.content,"flex flex-col items-center"),style:{gap:`${o*.25}rem`},children:p})}):null};r.displayName="Modal",exports.Modal=r;
 //# sourceMappingURL=modal.js.map

package/dist/cjs/components/containers/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { ~~VStack~~ } from '@~~styled~~/~~jsx~~';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' \| 'sm' \| 'md' \| 'lg';\n gap?: number;\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n isWidget?: boolean;\n}\n\nconst isMobile = () => {\n if (typeof navigator === 'undefined') {\n return false;\n }\n const ua = navigator.userAgent;\n return /Mobi\|Android\|iPhone\|iPad/i.test(ua);\n};\n\nconst isMobileBrowser = isMobile();\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n gap = 2.5,\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n isWidget = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isWidget, isMobileBrowser });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <~~VStack~~ ~~alignItems=\"~~center\" ~~gap~~={gap} ~~className=~~{~~classes~~.~~content~~}>\n {children}\n </~~VStack~~>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isMobile","ua","isMobileBrowser","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","isWidget","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","~~VStack~~"],"mappings":"~~yJAgBA~~,MAAMA,EAAW,IAAK,CACpB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,4BAA4B,KAAKA,CAAE,CAC5C,EAEMC,EAAkBF,EAAQ,EAEnBG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,~~CAAA~~,~~EACpB~~,SAAAC,EAAW,IAAO,CAAA,EAClB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAX,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,SAAAC,EAAU,gBAAAV,CAAe,CAAE,EACnG,CAAE,UAAAc,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAf,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKQ,EAKHI,EAAAA,~~IAAK~~,~~MAAA,CAAA,~~UAAWN,EAAQ,QAAS,eAAgBP,EAASW,EAASD,EAAM,SACvEG,EAAAA,~~IAACC~~,EAAAA,~~QAAO~~,~~WAAW~~,~~SAAS~~,~~IAAKf~~,~~EAAK~~,~~UAAWQ~~,~~EAAQ~~,~~QAAO~~,~~SAC7DD~~,~~CACM~~,~~CAAA~~,CAAA,CAAA,~~EAPJ~~,IAUX,EAEAV,EAAM,YAAc"}
1	+ {"version":3,"file":"modal.js","sources":["../../../../src/components/containers/modal.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { modal } from '@recipes/modal';\nimport { cn } from '@lib/cn';\nimport { ComponentProps } from 'react';\nexport interface ModalProps extends ComponentProps<'div'> {\n animate?: boolean;\n paddingType?: 'none' \| 'sm' \| 'md' \| 'lg';\n gap?: number;\n isOpen?: boolean;\n onAnimated?: () => void;\n onClosed?: () => void;\n showBorder?: boolean;\n fullscreen?: boolean;\n isWidget?: boolean;\n}\n\nconst isMobile = () => {\n if (typeof navigator === 'undefined') {\n return false;\n }\n const ua = navigator.userAgent;\n return /Mobi\|Android\|iPhone\|iPad/i.test(ua);\n};\n\nconst isMobileBrowser = isMobile();\n\nexport const Modal = ({\n animate = true,\n paddingType = 'none',\n gap = 2.5,\n isOpen = true,\n onAnimated = () => {},\n onClosed = () => {},\n showBorder = true,\n fullscreen = false,\n isWidget = false,\n children,\n}: ModalProps) => {\n const classes = modal({ animate, isOpen, paddingType, showBorder, fullscreen, isWidget, isMobileBrowser });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: isOpen,\n onHidden: onClosed,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n return (\n <div className={classes.wrapper} onAnimationEnd={isOpen ? onShow : onHide}>\n <div className={cn(classes.content, 'flex flex-col items-center')} style={{ gap: `${gap * 0.25}rem` }}>\n {children}\n </div>\n </div>\n );\n};\n\nModal.displayName = 'Modal';\n"],"names":["isMobile","ua","isMobileBrowser","Modal","animate","paddingType","gap","isOpen","onAnimated","onClosed","showBorder","fullscreen","isWidget","children","classes","modal","displayed","onHide","onShow","useDisplayState","_jsx","cn"],"mappings":"6JAgBA,MAAMA,EAAW,IAAK,CACpB,GAAI,OAAO,UAAc,IACvB,MAAO,GAET,MAAMC,EAAK,UAAU,UACrB,MAAO,4BAA4B,KAAKA,CAAE,CAC5C,EAEMC,EAAkBF,EAAQ,EAEnBG,EAAQ,CAAC,CACpB,QAAAC,EAAU,GACV,YAAAC,EAAc,OACd,IAAAC,EAAM,IACN,OAAAC,EAAS,GACT,WAAAC,EAAa,IAAO,CACpB,EAAA,SAAAC,EAAW,IAAO,CAAA,EAClB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,SAAAC,CACW,IAAI,CACf,MAAMC,EAAUC,EAAAA,MAAM,CAAE,QAAAX,EAAS,OAAAG,EAAQ,YAAAF,EAAa,WAAAK,EAAY,WAAAC,EAAY,SAAAC,EAAU,gBAAAV,CAAe,CAAE,EACnG,CAAE,UAAAc,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAAf,EACA,KAAMG,EACN,SAAUE,EACV,QAASD,CACV,CAAA,EAED,OAAKQ,EAKHI,EAAAA,WAAK,UAAWN,EAAQ,QAAS,eAAgBP,EAASW,EAASD,EAAM,SACvEG,EAAAA,IAAK,MAAA,CAAA,UAAWC,EAAAA,GAAGP,EAAQ,QAAS,4BAA4B,EAAG,MAAO,CAAE,IAAK,GAAGR,EAAM,GAAI,KAAK,WAChGO,CAAQ,CAAA,CAEP,CAAA,EARC,IAUX,EAEAV,EAAM,YAAc"}

package/dist/cjs/components/containers/overlay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),p=require("../../hooks/useDisplayState.js"),v=require("../../recipes/overlay.js"),b=require("@styled/jsx");const l=({animate:r=!0,backgroundType:e="none",hide:n=!1,fullscreen:t=!1,onAnimated:s=()=>{},onHidden:o=()=>{},children:d})=>{const a=v.overlay({animate:r,backgroundType:e,hide:n,fullscreen:t}),{displayed:c,onHide:u,onShow:y}=p.useDisplayState({animate:r,show:!n,onHidden:o,onShown:s});if(!c)return null;const m=e!=="none";return i.jsxs(b.VStack,{alignItems:"center",className:a.container,children:[m&&i.jsx("div",{className:a.bg,onAnimationEnd:n?u:y,style:{...e==="blurred"&&{backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)"}}}),d]})};l.displayName="Overlay",exports.Overlay=l;
+"use strict";var i=require("react/jsx-runtime"),p=require("../../hooks/useDisplayState.js"),v=require("../../recipes/overlay.js"),b=require("../../lib/cn.js");const l=({animate:r=!0,backgroundType:e="none",hide:n=!1,fullscreen:t=!1,onAnimated:o=()=>{},onHidden:s=()=>{},children:d})=>{const a=v.overlay({animate:r,backgroundType:e,hide:n,fullscreen:t}),{displayed:c,onHide:u,onShow:y}=p.useDisplayState({animate:r,show:!n,onHidden:s,onShown:o});if(!c)return null;const m=e!=="none";return i.jsxs("div",{className:b.cn(a.container,"flex flex-col items-center"),children:[m&&i.jsx("div",{className:a.bg,onAnimationEnd:n?u:y,style:{...e==="blurred"&&{backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)"}}}),d]})};l.displayName="Overlay",exports.Overlay=l;
 //# sourceMappingURL=overlay.js.map

package/dist/cjs/components/containers/overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { ~~VStack~~ } from '@~~styled~~/~~jsx~~';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n animate?: boolean;\n backgroundType?: 'none' \| 'blurred' \| 'transparent' \| 'solid';\n hide?: boolean;\n fullscreen?: boolean;\n onAnimated?: () => void;\n onHidden?: () => void;\n}\n\nexport const Overlay = ({\n animate = true,\n backgroundType = 'none',\n hide = false,\n fullscreen = false,\n onAnimated = () => {},\n onHidden = () => {},\n children,\n}: OverlayProps) => {\n const classes = overlay({ animate, backgroundType, hide, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: !hide,\n onHidden,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n const hasBackground = backgroundType !== 'none';\n\n return (\n <~~VStack~~ ~~alignItems=\"center\"~~ className={classes.container}>\n {hasBackground && (\n <div\n className={classes.bg}\n onAnimationEnd={!hide ? onShow : onHide}\n style={{\n ...(backgroundType === 'blurred' && { backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)' }),\n }}\n />\n )}\n {children}\n </~~VStack~~>\n );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","fullscreen","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","~~VStack~~","_jsx"],"mappings":"~~2JAaa~~,MAAAA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,WAAAC,EAAa,IAAK,~~CAAA~~,~~EAClB~~,SAAAC,EAAW,IAAO,~~CAClB~~,~~EAAA~~,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,~~EAAQ~~,~~QAAA,~~CAAE,QAAAR,EAAS,eAAAC,EAAgB,KAAAC,EAAM,WAAAC,CAAU,CAAE,EAC/D,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,~~EAAAA~~,~~gBAAgB~~,CACpD,QAAAZ,EACA,KAAM,CAACE,EACP,SAAAG,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBZ,IAAmB,OAEzC,OACEa,~~EAAAA~~,~~KAACC~~,~~SAAO,~~CAAA,~~WAAW~~,~~SAAS~~,~~UAAWR~~,EAAQ,~~oBAC5CM~~,GACCG,EAAAA,IACE,MAAA,CAAA,UAAWT,EAAQ,GACnB,eAAiBL,EAAgBQ,EAATC,EACxB,MAAO,CACL,GAAIV,IAAmB,WAAa,CAAE,eAAgB,YAAa,qBAAsB,YAC1F,CAAA,CAAA,EAGJK,CAAQ,CAAA,CAAA,CAGf,EAEAP,EAAQ,YAAc"}
1	+ {"version":3,"file":"overlay.js","sources":["../../../../src/components/containers/overlay.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { overlay } from '@recipes/overlay';\nimport { cn } from '@lib/cn';\nimport { ComponentProps } from 'react';\nexport interface OverlayProps extends ComponentProps<'div'> {\n animate?: boolean;\n backgroundType?: 'none' \| 'blurred' \| 'transparent' \| 'solid';\n hide?: boolean;\n fullscreen?: boolean;\n onAnimated?: () => void;\n onHidden?: () => void;\n}\n\nexport const Overlay = ({\n animate = true,\n backgroundType = 'none',\n hide = false,\n fullscreen = false,\n onAnimated = () => {},\n onHidden = () => {},\n children,\n}: OverlayProps) => {\n const classes = overlay({ animate, backgroundType, hide, fullscreen });\n const { displayed, onHide, onShow } = useDisplayState({\n animate,\n show: !hide,\n onHidden,\n onShown: onAnimated,\n });\n\n if (!displayed) {\n return null;\n }\n\n const hasBackground = backgroundType !== 'none';\n\n return (\n <div className={cn(classes.container, 'flex flex-col items-center')}>\n {hasBackground && (\n <div\n className={classes.bg}\n onAnimationEnd={!hide ? onShow : onHide}\n style={{\n ...(backgroundType === 'blurred' && { backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)' }),\n }}\n />\n )}\n {children}\n </div>\n );\n};\n\nOverlay.displayName = 'Overlay';\n"],"names":["Overlay","animate","backgroundType","hide","fullscreen","onAnimated","onHidden","children","classes","overlay","displayed","onHide","onShow","useDisplayState","hasBackground","_jsxs","cn","_jsx"],"mappings":"+JAaa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EAAU,GACV,eAAAC,EAAiB,OACjB,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,WAAAC,EAAa,IAAK,CAAE,EACpB,SAAAC,EAAW,IAAO,CAAA,EAClB,SAAAC,CAAQ,IACS,CACjB,MAAMC,EAAUC,UAAQ,CAAE,QAAAR,EAAS,eAAAC,EAAgB,KAAAC,EAAM,WAAAC,CAAU,CAAE,EAC/D,CAAE,UAAAM,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,gBAAA,CACpD,QAAAZ,EACA,KAAM,CAACE,EACP,SAAAG,EACA,QAASD,CACV,CAAA,EAED,GAAI,CAACK,EACH,OAAO,KAGT,MAAMI,EAAgBZ,IAAmB,OAEzC,OACEa,OAAK,MAAA,CAAA,UAAWC,EAAGR,GAAAA,EAAQ,UAAW,4BAA4B,EAAC,SAAA,CAChEM,GACCG,EAAAA,IACE,MAAA,CAAA,UAAWT,EAAQ,GACnB,eAAiBL,EAAgBQ,EAATC,EACxB,MAAO,CACL,GAAIV,IAAmB,WAAa,CAAE,eAAgB,YAAa,qBAAsB,YAC1F,CAAA,CAAA,EAGJK,CAAQ,CAAA,CAAA,CAGf,EAEAP,EAAQ,YAAc"}

package/dist/cjs/components/external/paypal-button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("../containers/button.js");require("../containers/card.js");var o=require("@styled/css"),i=require("@styled/jsx"),q=require("@styled/tokens");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var l=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var c=require("../logos/logo-pay-pal-wordmark.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js");var f=require("../feedback/loading-spinner.js");require("../feedback/progress-bar.js"),require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");const u=d.forwardRef((r,t)=>{const{disabled:a,validating:n}=r;return e.jsx(s.ButtonContainer,{ref:t,className:o.css({bg:"#ffc439",outlineColor:"#ffc439",border:"1px solid transparent",px:6,py:2.5}),"aria-disabled":a,shadow:!0,...r,children:n?e.jsx(f.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs(i.HStack,{w:"full",gap:1,justifyContent:"center",children:[e.jsx(l.default,{fontWeight:"semibold",styles:{color:q.token("colors.ink.90")},children:"Pay with"}),e.jsx(i.Box,{mt:.5,children:e.jsx(c.default,{width:60})})]})})});u.displayName="PayPalButton",exports.PayPalButton=u;
+"use strict";var e=require("react/jsx-runtime"),s=require("../containers/button.js");require("../containers/card.js"),require("../../lib/cn.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var n=require("../primitives/text.js"),l=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var o=require("../logos/logo-pay-pal-wordmark.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js");var q=require("../feedback/loading-spinner.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../feedback/tooltip.js");const i=l.forwardRef((r,a)=>{const{disabled:u,validating:t}=r;return e.jsx(s.ButtonContainer,{ref:a,className:"bg-[#ffc439] border border-transparent px-6 py-2.5 focus-visible:outline-[#ffc439]","aria-disabled":u,shadow:!0,...r,children:t?e.jsx(q.LoadingSpinner,{size:24,strokeWidth:2.5,inverted:!0}):e.jsxs("div",{className:"flex flex-row items-center w-full gap-1 justify-center",children:[e.jsx(n.default,{fontWeight:"semibold",styles:{color:"var(--color-ink-90)"},children:"Pay with"}),e.jsx("div",{className:"mt-0.5",children:e.jsx(o.default,{width:60})})]})})});i.displayName="PayPalButton",exports.PayPalButton=i;
 //# sourceMappingURL=paypal-button.js.map

package/dist/cjs/components/external/paypal-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { ~~css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ forwardRef } from 'react';\nimport { type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, validating } = props;\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className~~={css({\n~~ bg~~: '~~#ffc439~~',\n outlineColor:~~ ~~'#ffc439',\n~~ border: ~~'1px~~ ~~solid transparent',\n~~ px: ~~6,\n~~ py: 2.5~~,\n })}~~\n aria-disabled={disabled}\n shadow\n {...props}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <~~HStack~~ w=\"full\" gap={1} ~~justifyContent=\"~~center\">\n <Text fontWeight=\"semibold\" styles={{ color: ~~token~~(~~'colors.~~ink.90') }}>\n Pay with\n </Text>\n <~~Box~~ mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </~~Box~~>\n </~~HStack~~>\n )}\n </ButtonContainer>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","validating","_jsx","ButtonContainer","~~css","~~LoadingSpinner","_jsxs","~~HStack","~~Text","~~token","Box","~~LogoPayPalWordmark"],"mappings":"~~6jCAgBa~~,~~MAAAA~~,EAAeC,~~EAAAA~~,~~WAAiD~~,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,WAAAC,CAAY,EAAGH,EAEjC,OACEI,EAAAA,IAACC,EAAAA,gBACC,CAAA,IAAKJ,EACL,~~UAAWK~~,~~EAAAA~~,~~IAAI~~,~~CACb,GAAI,UACJ,aAAc,UACd,OAAQ,wBACR,GAAI,EACJ,GAAI,GACL,CAAA,kBACcJ,~~EACf,~~OAAM~~,~~GAAA~~,~~GACFF~~,~~EAEH~~,~~SAAAG~~,~~EACCC~~,~~MAACG,~~EAAAA,~~eAAe~~,~~CAAA,~~KAAM,GAAI,YAAa,IAAK,~~cAE5CC~~,~~OAACC~~,~~EAAAA~~,~~QAAO~~,~~EAAE~~,~~OAAO~~,~~IAAK~~,~~EAAG~~,~~eAAe~~,~~SACtC~~,~~SAAA~~,~~CAAAL,~~EAAAA,~~IAACM~~,~~UAAK~~,~~CAAA,~~WAAW,WAAW,OAAQ,CAAE,~~MAAOC~~,~~QAAM~~,~~eAAe~~,~~CAAG,EAAA,~~SAAA,UAAA,CAAA,~~EAGrEP~~,EAAAA,~~IAACQ~~,~~EAAI~~,~~IAAA~~,~~CAAA~~,~~GAAI~~,~~GAAG~~,~~SACVR,EAACS,IAAAA,~~EAAAA,QAAkB,CAAC,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,~~EAEDf~~,EAAa,YAAc"}
1	+ {"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { forwardRef } from 'react';\nimport { type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, validating } = props;\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className=\"bg-[#ffc439] border border-transparent px-6 py-2.5 focus-visible:outline-[#ffc439]\"\n aria-disabled={disabled}\n shadow\n {...props}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <div className=\"flex flex-row items-center w-full gap-1 justify-center\">\n <Text fontWeight=\"semibold\" styles={{ color: 'var(--color-ink-90)' }}>\n Pay with\n </Text>\n <div className=\"mt-0.5\">\n <LogoPayPalWordmark width={60} />\n </div>\n </div>\n )}\n </ButtonContainer>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","validating","_jsx","ButtonContainer","LoadingSpinner","_jsxs","Text","LogoPayPalWordmark"],"mappings":"67BAaO,MAAMA,EAAeC,EAAiD,WAAA,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,WAAAC,CAAY,EAAGH,EAEjC,OACEI,EAAAA,IAACC,EAAAA,gBACC,CAAA,IAAKJ,EACL,UAAU,qFACK,gBAAAC,EACf,aACIF,EAAK,SAERG,EACCC,EAAAA,IAACE,EAAAA,gBAAe,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,cAAK,UAAU,yDAAwD,SAAA,CACrEH,EAAAA,IAACI,EAAAA,QAAI,CAAC,WAAW,WAAW,OAAQ,CAAE,MAAO,qBAAqB,EAE3D,SAAA,UAAA,CAAA,EACPJ,EAAAA,WAAK,UAAU,SAAQ,SACrBA,EAAAA,IAACK,EAAAA,QAAkB,CAAC,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAEDX,EAAa,YAAc"}

package/dist/cjs/components/feedback/animated-checkmark.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),l=require("@styled/tokens"),m=require("../icons/ico-checkmark.js"),h=require("../../hooks/useDisplayState.js"),k=require("@styled/jsx");const d={lg:{circleSize:14,checkmarkSize:30},sm:{circleSize:5,checkmarkSize:12}},u=({size:n="lg",isVisible:e=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{circleSize:s,checkmarkSize:i}=d[n],{onHide:t,onShow:c}=h.useDisplayState({animate:!0,show:e,onHidden:o,onShown:a});return r.jsx(k.Circle,{size:s,bg:"positive.lightest",animation:e?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:e?c:t,children:r.jsx(m.default,{width:i,height:i,color:l.token("colors.positive.base")})})};exports.AnimatedCheckmark=u;
+"use strict";var t=require("react/jsx-runtime"),l=require("../icons/ico-checkmark.js"),m=require("../../hooks/useDisplayState.js"),h=require("../../lib/cn.js");const d={lg:{circleSize:14,checkmarkSize:30},sm:{circleSize:5,checkmarkSize:12}},u=({size:r="lg",isVisible:e=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{circleSize:i,checkmarkSize:n}=d[r],{onHide:s,onShow:c}=m.useDisplayState({animate:!0,show:e,onHidden:o,onShown:a});return t.jsx("div",{className:h.cn("rounded-full flex items-center justify-center bg-positive-lightest",e?"animate-[popIn_150ms]":"animate-[popOut_150ms]","[animation-fill-mode:forwards]"),style:{width:`${i*4}px`,height:`${i*4}px`},onAnimationEnd:e?c:s,children:t.jsx(l.default,{width:n,height:n,color:"var(--color-positive-base)"})})};exports.AnimatedCheckmark=u;
 //# sourceMappingURL=animated-checkmark.js.map

package/dist/cjs/components/feedback/animated-checkmark.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animated-checkmark.js","sources":["../../../../src/components/feedback/animated-checkmark.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { ~~Circle~~ } from '@~~styled~~/~~jsx~~';\~~nimport { token } from '@styled/tokens';\~~n\nexport interface AnimatedCheckmarkProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst checkmarkSpecs = {\n lg: {\n circleSize: 14,\n checkmarkSize: 30,\n },\n sm: {\n circleSize: 5,\n checkmarkSize: 12,\n },\n};\n\nexport const AnimatedCheckmark = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedCheckmarkProps) => {\n const { circleSize, checkmarkSize } = checkmarkSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <~~Circle~~\n ~~size~~={~~circleSize}~~\n bg~~=\"~~positive.lightest~~\"\~~n ~~animation={~~isVisible ? '~~popIn 150ms~~' : '~~popOut 150ms~~'}\n ~~animationFillMode=\"forwards~~\"\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <IcoCheckmark width={checkmarkSize} height={checkmarkSize} color~~={token~~(~~'colors.~~positive.base')} />\n </~~Circle~~>\n );\n};\n"],"names":["checkmarkSpecs","AnimatedCheckmark","size","isVisible","onShown","onHidden","circleSize","checkmarkSize","onHide","onShow","useDisplayState","_jsx","~~Circle~~","IcoCheckmark"~~,"token"~~],"mappings":"~~wLAYA~~,MAAMA,EAAiB,CACrB,GAAI,CACF,WAAY,GACZ,cAAe,EAChB,EACD,GAAI,CACF,WAAY,EACZ,cAAe,EAChB,GAGUC,EAAoB,CAAC,CAChC,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,~~CAAA~~,~~EACjB,~~SAAAC,EAAW,IAAK,CAAA,~~CAAG,~~IACQ,CAC3B,KAAM,CAAE,WAAAC,EAAY,cAAAC,CAAa,EAAKP,EAAeE,CAAI,EACnD,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAAA,~~IAACC~~,~~SAAM~~,~~CACL~~,~~KAAMN~~,~~EACN~~,~~GAAG~~,~~oBACH~~,~~UAAWH~~,~~EAAY~~,~~cAAgB~~,~~eACvC~~,~~kBAAkB~~,~~WAClB~~,~~eAAgBA~~,EAAYM,EAASD,EAAM,SAE3CG,~~EAACE~~,~~IAAAA,~~EAAAA,QAAa,CAAA,MAAON,EAAe,OAAQA,EAAe,~~MAAOO~~,~~QAAM~~,~~sBAAsB~~,~~CAAC,~~CAAA,~~CACxF,~~CAAA,~~CAEb~~"}
1	+ {"version":3,"file":"animated-checkmark.js","sources":["../../../../src/components/feedback/animated-checkmark.tsx"],"sourcesContent":["import { IcoCheckmark } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { cn } from '@lib/cn';\n\nexport interface AnimatedCheckmarkProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst checkmarkSpecs = {\n lg: {\n circleSize: 14,\n checkmarkSize: 30,\n },\n sm: {\n circleSize: 5,\n checkmarkSize: 12,\n },\n};\n\nexport const AnimatedCheckmark = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedCheckmarkProps) => {\n const { circleSize, checkmarkSize } = checkmarkSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <div\n className={cn(\n 'rounded-full flex items-center justify-center bg-positive-lightest',\n isVisible ? 'animate-[popIn_150ms]' : 'animate-[popOut_150ms]',\n '[animation-fill-mode:forwards]',\n )}\n style={{ width: `${circleSize * 4}px`, height: `${circleSize * 4}px` }}\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <IcoCheckmark width={checkmarkSize} height={checkmarkSize} color=\"var(--color-positive-base)\" />\n </div>\n );\n};\n"],"names":["checkmarkSpecs","AnimatedCheckmark","size","isVisible","onShown","onHidden","circleSize","checkmarkSize","onHide","onShow","useDisplayState","_jsx","cn","IcoCheckmark"],"mappings":"gKAWA,MAAMA,EAAiB,CACrB,GAAI,CACF,WAAY,GACZ,cAAe,EAChB,EACD,GAAI,CACF,WAAY,EACZ,cAAe,EAChB,GAGUC,EAAoB,CAAC,CAChC,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,GACjB,SAAAC,EAAW,IAAK,CAAG,CAAA,IACQ,CAC3B,KAAM,CAAE,WAAAC,EAAY,cAAAC,CAAa,EAAKP,EAAeE,CAAI,EACnD,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAA,IAAA,MAAA,CACE,UAAWC,EAAAA,GACT,qEACAT,EAAY,wBAA0B,yBACtC,gCAAgC,EAElC,MAAO,CAAE,MAAO,GAAGG,EAAa,CAAC,KAAM,OAAQ,GAAGA,EAAa,CAAC,IAAM,EACtE,eAAgBH,EAAYM,EAASD,EAAM,SAE3CG,MAACE,EAAAA,QAAa,CAAA,MAAON,EAAe,OAAQA,EAAe,MAAM,4BAA+B,CAAA,CAAA,CAAA,CAGtG"}

package/dist/cjs/components/feedback/animated-dismiss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("react/jsx-runtime"),d=require("@styled/tokens"),l=require("../icons/ico-dismiss.js"),m=require("../../hooks/useDisplayState.js"),u=require("@styled/jsx");const S={lg:{circleSize:14,dismissSize:30},sm:{circleSize:5,dismissSize:12}},h=({size:n="lg",isVisible:i=!0,onShown:o=()=>{},onHidden:r=()=>{}})=>{const{circleSize:t,dismissSize:e}=S[n],{onHide:a,onShow:c}=m.useDisplayState({animate:!0,show:i,onHidden:r,onShown:o});return s.jsx(u.Circle,{size:t,bg:"negative.lightest",animation:i?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:i?c:a,children:s.jsx(l.default,{width:e,height:e,color:d.token("colors.negative.base")})})};exports.AnimatedDismiss=h;
+"use strict";var n=require("react/jsx-runtime"),l=require("../icons/ico-dismiss.js"),m=require("../../hooks/useDisplayState.js"),c=require("../../lib/cn.js");const u={lg:{circleSize:14,dismissSize:30},sm:{circleSize:5,dismissSize:12}},h=({size:t="lg",isVisible:i=!0,onShown:a=()=>{},onHidden:r=()=>{}})=>{const{circleSize:e,dismissSize:s}=u[t],{onHide:o,onShow:d}=m.useDisplayState({animate:!0,show:i,onHidden:r,onShown:a});return n.jsx("div",{className:c.cn("rounded-full flex items-center justify-center bg-negative-lightest",i?"animate-[popIn_150ms]":"animate-[popOut_150ms]","[animation-fill-mode:forwards]"),style:{width:`${e*4}px`,height:`${e*4}px`},onAnimationEnd:i?d:o,children:n.jsx(l.default,{width:s,height:s,color:"var(--color-negative-base)"})})};exports.AnimatedDismiss=h;
 //# sourceMappingURL=animated-dismiss.js.map

package/dist/cjs/components/feedback/animated-dismiss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animated-dismiss.js","sources":["../../../../src/components/feedback/animated-dismiss.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { ~~Circle~~ } from '@~~styled~~/~~jsx~~';\~~nimport { token } from '@styled/tokens';\~~n\nexport interface AnimatedDismissProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst dismissSpecs = {\n lg: {\n circleSize: 14,\n dismissSize: 30,\n },\n sm: {\n circleSize: 5,\n dismissSize: 12,\n },\n};\n\nexport const AnimatedDismiss = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedDismissProps) => {\n const { circleSize, dismissSize } = dismissSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <~~Circle~~\n ~~size~~={~~circleSize}~~\n bg~~=\"~~negative.lightest~~\"\~~n ~~animation={~~isVisible ? '~~popIn 150ms~~' : '~~popOut 150ms~~'}\n ~~animationFillMode=\"forwards~~\"\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <IcoDismiss width={dismissSize} height={dismissSize} color~~={token~~(~~'colors.~~negative.base')} />\n </~~Circle~~>\n );\n};\n"],"names":["dismissSpecs","AnimatedDismiss","size","isVisible","onShown","onHidden","circleSize","dismissSize","onHide","onShow","useDisplayState","_jsx","~~Circle~~","IcoDismiss"~~,"token"~~],"mappings":"~~sLAYA~~,MAAMA,EAAe,CACnB,GAAI,CACF,WAAY,GACZ,YAAa,EACd,EACD,GAAI,CACF,WAAY,EACZ,YAAa,EACd,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,~~CAAA~~,~~EACjB,~~SAAAC,EAAW,IAAK,CAAA,~~CAAG,~~IACM,CACzB,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAW,EAAKP,EAAaE,CAAI,EAC/C,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAAA,~~IAACC~~,~~SAAM~~,~~CACL~~,~~KAAMN~~,~~EACN~~,~~GAAG~~,~~oBACH~~,~~UAAWH~~,~~EAAY~~,~~cAAgB~~,~~eACvC~~,~~kBAAkB~~,~~WAClB~~,~~eAAgBA~~,EAAYM,EAASD,EAAM,SAE3CG,~~EAACE~~,~~IAAAA,~~EAAAA,QAAW,CAAA,MAAON,EAAa,OAAQA,EAAa,~~MAAOO~~,~~QAAM~~,~~sBAAsB~~,~~CAAC,~~CAAA,~~CAClF,~~CAAA,~~CAEb~~"}
1	+ {"version":3,"file":"animated-dismiss.js","sources":["../../../../src/components/feedback/animated-dismiss.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { useDisplayState } from '@hooks/useDisplayState';\nimport { cn } from '@lib/cn';\n\nexport interface AnimatedDismissProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst dismissSpecs = {\n lg: {\n circleSize: 14,\n dismissSize: 30,\n },\n sm: {\n circleSize: 5,\n dismissSize: 12,\n },\n};\n\nexport const AnimatedDismiss = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedDismissProps) => {\n const { circleSize, dismissSize } = dismissSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <div\n className={cn(\n 'rounded-full flex items-center justify-center bg-negative-lightest',\n isVisible ? 'animate-[popIn_150ms]' : 'animate-[popOut_150ms]',\n '[animation-fill-mode:forwards]',\n )}\n style={{ width: `${circleSize * 4}px`, height: `${circleSize * 4}px` }}\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <IcoDismiss width={dismissSize} height={dismissSize} color=\"var(--color-negative-base)\" />\n </div>\n );\n};\n"],"names":["dismissSpecs","AnimatedDismiss","size","isVisible","onShown","onHidden","circleSize","dismissSize","onHide","onShow","useDisplayState","_jsx","cn","IcoDismiss"],"mappings":"8JAWA,MAAMA,EAAe,CACnB,GAAI,CACF,WAAY,GACZ,YAAa,EACd,EACD,GAAI,CACF,WAAY,EACZ,YAAa,EACd,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,GACjB,SAAAC,EAAW,IAAK,CAAG,CAAA,IACM,CACzB,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAW,EAAKP,EAAaE,CAAI,EAC/C,CAAE,OAAAM,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMP,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACEO,EAAA,IAAA,MAAA,CACE,UAAWC,EAAAA,GACT,qEACAT,EAAY,wBAA0B,yBACtC,gCAAgC,EAElC,MAAO,CAAE,MAAO,GAAGG,EAAa,CAAC,KAAM,OAAQ,GAAGA,EAAa,CAAC,IAAM,EACtE,eAAgBH,EAAYM,EAASD,EAAM,SAE3CG,MAACE,EAAAA,QAAW,CAAA,MAAON,EAAa,OAAQA,EAAa,MAAM,4BAA+B,CAAA,CAAA,CAAA,CAGhG"}

package/dist/cjs/components/feedback/animated-spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),t=require("@styled/css"),p=require("@styled/jsx");const h={lg:{size:56,radius:28,strokeWidth:5,animation:"animateSpinnerLarge"},sm:{size:20,radius:10,strokeWidth:3,animation:"animateSpinnerSmall"}},w=({size:r="lg",isVisible:n=!0,onShown:a=()=>{},onHidden:o=()=>{}})=>{const{size:i,radius:m,strokeWidth:s,animation:d}=h[r],{onHide:l,onShow:c}=u.useDisplayState({animate:!0,show:n,onHidden:o,onShown:a});return e.jsx(p.Center,{inline:!0,animation:n?"popIn 150ms":"popOut 150ms",animationFillMode:"forwards",onAnimationEnd:n?c:l,children:e.jsx("svg",{width:i,height:i,viewBox:`0 0 ${i} ${i}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",className:t.css({animation:"spin 1.5s linear infinite"}),children:e.jsx("circle",{className:t.css({stroke:"text.primary",transformOrigin:"center center"}),style:{animation:`${d} 2s ease-in-out infinite`},cx:"50%",cy:"50%",r:m-s/2,strokeLinecap:"round",strokeWidth:s})})})};exports.AnimatedSpinner=w;
+"use strict";var e=require("react/jsx-runtime"),u=require("../../hooks/useDisplayState.js"),t=require("../../lib/cn.js");const h={lg:{size:56,radius:28,strokeWidth:5,animationClass:"animate-[animateSpinnerLarge_2s_ease-in-out_infinite]"},sm:{size:20,radius:10,strokeWidth:3,animationClass:"animate-[animateSpinnerSmall_2s_ease-in-out_infinite]"}},p=({size:a="lg",isVisible:n=!0,onShown:r=()=>{},onHidden:o=()=>{}})=>{const{size:i,radius:m,strokeWidth:s,animationClass:l}=h[a],{onHide:d,onShow:c}=u.useDisplayState({animate:!0,show:n,onHidden:o,onShown:r});return e.jsx("div",{className:t.cn("inline-flex items-center justify-center",n?"animate-[popIn_150ms]":"animate-[popOut_150ms]","[animation-fill-mode:forwards]"),onAnimationEnd:n?c:d,children:e.jsx("svg",{width:i,height:i,viewBox:`0 0 ${i} ${i}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",className:"animate-[spin_1.5s_linear_infinite]",children:e.jsx("circle",{className:t.cn("stroke-text-primary origin-center",l),cx:"50%",cy:"50%",r:m-s/2,strokeLinecap:"round",strokeWidth:s})})})};exports.AnimatedSpinner=p;
 //# sourceMappingURL=animated-spinner.js.map

package/dist/cjs/components/feedback/animated-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animated-spinner.js","sources":["../../../../src/components/feedback/animated-spinner.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\~~nimport { Center } from '@styled/jsx';\~~n\nexport interface AnimatedSpinnerProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst spinnerSpecs = {\n lg: {\n size: 56,\n radius: 28,\n strokeWidth: 5,\n ~~animation~~: '~~animateSpinnerLarge~~',\n },\n sm: {\n size: 20,\n radius: 10,\n strokeWidth: 3,\n ~~animation~~: '~~animateSpinnerSmall~~',\n },\n};\n\nexport const AnimatedSpinner = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedSpinnerProps) => {\n const { size: spinnerSize, radius, strokeWidth, ~~animation~~ } = spinnerSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <~~Center~~\n ~~inline~~\n ~~animation={~~isVisible ? '~~popIn 150ms~~' : '~~popOut 150ms~~'}\n ~~animationFillMode=\"forwards~~\"\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <svg\n width={spinnerSize}\n height={spinnerSize}\n viewBox={`0 0 ${spinnerSize} ${spinnerSize}`}\n fill=\"none\"\n stroke=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className~~={css({ animation: 'spin 1~~.~~5s linear infinite' })}~~\n >\n <circle\n className={~~css~~(~~{\n~~ stroke~~: '~~text.primary~~',\n transformOrigin:~~ '~~center~~ ~~center',\n }~~)}\n ~~style={{ animation: `${animation} 2s ease-in-out infinite` }}\n~~ cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n </svg>\n </~~Center~~>\n );\n};\n"],"names":["spinnerSpecs","AnimatedSpinner","size","isVisible","onShown","onHidden","spinnerSize","radius","strokeWidth","~~animation~~","onHide","onShow","useDisplayState","_jsx","~~Center~~"~~,"css"~~],"mappings":"~~8IAWA~~,MAAMA,EAAe,CACnB,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,~~UAAW~~,~~qBACZ~~,EACD,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,~~UAAW~~,~~qBACZ~~,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAG,~~CAAA,~~IACM,CACzB,KAAM,CAAE,KAAMC,EAAa,OAAAC,EAAQ,YAAAC,EAAa,~~UAAAC~~,~~GAAcT~~,EAAaE,CAAI,~~EACzE~~,CAAE,OAAAQ,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMT,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACES,~~EAAAA~~,~~IAACC~~,EAAAA,~~OACC~~,~~CAAA~~,~~UACA,UAAWX,~~EAAY,~~cAAgB~~,~~eACvC~~,~~kBAAkB~~,~~WAClB~~,eAAgBA,EAAYQ,EAASD,~~WAErCG~~,~~EACE~~,~~IAAA~~,MAAA,CAAA,MAAOP,EACP,OAAQA,EACR,QAAS,OAAOA,CAAW,IAAIA,CAAW,GAC1C,KAAK,OACL,OAAO,OACP,MAAM,6BACN,~~UAAWS~~,~~MAAI~~,~~CAAE~~,~~UAAW~~,~~4BAA6B,EAAC,SAE1DF,EAAAA,cACE,UAAWE,EAAI,~~IAAA,~~CACb~~,~~OAAQ~~,~~eACR~~,~~gBAAiB~~,~~eAClB~~,~~CAAA~~,~~EACD~~,~~MAAO~~,~~CAAE,UAAW,GAAGN,CAAS,0BAA0B,EAC1D,~~GAAG,MACH,GAAG,MACH,EAAGF,EAASC,EAAc,EAC1B,cAAc,QACd,YAAaA,~~GAEX~~,CAAA,CAAA,CAAA,~~CAGZ~~"}
1	+ {"version":3,"file":"animated-spinner.js","sources":["../../../../src/components/feedback/animated-spinner.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { cn } from '@lib/cn';\n\nexport interface AnimatedSpinnerProps {\n size?: 'lg' \| 'sm';\n isVisible?: boolean;\n onShown?: () => void;\n onHidden?: () => void;\n}\n\nconst spinnerSpecs = {\n lg: {\n size: 56,\n radius: 28,\n strokeWidth: 5,\n animationClass: 'animate-[animateSpinnerLarge_2s_ease-in-out_infinite]',\n },\n sm: {\n size: 20,\n radius: 10,\n strokeWidth: 3,\n animationClass: 'animate-[animateSpinnerSmall_2s_ease-in-out_infinite]',\n },\n};\n\nexport const AnimatedSpinner = ({\n size = 'lg',\n isVisible = true,\n onShown = () => {},\n onHidden = () => {},\n}: AnimatedSpinnerProps) => {\n const { size: spinnerSize, radius, strokeWidth, animationClass } = spinnerSpecs[size];\n const { onHide, onShow } = useDisplayState({\n animate: true,\n show: isVisible,\n onHidden,\n onShown,\n });\n\n return (\n <div\n className={cn(\n 'inline-flex items-center justify-center',\n isVisible ? 'animate-[popIn_150ms]' : 'animate-[popOut_150ms]',\n '[animation-fill-mode:forwards]',\n )}\n onAnimationEnd={isVisible ? onShow : onHide}\n >\n <svg\n width={spinnerSize}\n height={spinnerSize}\n viewBox={`0 0 ${spinnerSize} ${spinnerSize}`}\n fill=\"none\"\n stroke=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"animate-[spin_1.5s_linear_infinite]\"\n >\n <circle\n className={cn('stroke-text-primary origin-center', animationClass)}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n </svg>\n </div>\n );\n};\n"],"names":["spinnerSpecs","AnimatedSpinner","size","isVisible","onShown","onHidden","spinnerSize","radius","strokeWidth","animationClass","onHide","onShow","useDisplayState","_jsx","cn"],"mappings":"yHAUA,MAAMA,EAAe,CACnB,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,eAAgB,uDACjB,EACD,GAAI,CACF,KAAM,GACN,OAAQ,GACR,YAAa,EACb,eAAgB,uDACjB,GAGUC,EAAkB,CAAC,CAC9B,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,QAAAC,EAAU,IAAO,CAAA,EACjB,SAAAC,EAAW,IAAK,CAAA,CAAG,IACM,CACzB,KAAM,CAAE,KAAMC,EAAa,OAAAC,EAAQ,YAAAC,EAAa,eAAAC,GAAmBT,EAAaE,CAAI,EAC9E,CAAE,OAAAQ,EAAQ,OAAAC,CAAQ,EAAGC,EAAAA,gBAAgB,CACzC,QAAS,GACT,KAAMT,EACN,SAAAE,EACA,QAAAD,CACD,CAAA,EAED,OACES,aACE,UAAWC,EAAAA,GACT,0CACAX,EAAY,wBAA0B,yBACtC,gCAAgC,EAElC,eAAgBA,EAAYQ,EAASD,EAAM,SAE3CG,EAAAA,IACE,MAAA,CAAA,MAAOP,EACP,OAAQA,EACR,QAAS,OAAOA,CAAW,IAAIA,CAAW,GAC1C,KAAK,OACL,OAAO,OACP,MAAM,6BACN,UAAU,sCAEV,SAAAO,EAAA,IAAA,SAAA,CACE,UAAWC,EAAAA,GAAG,oCAAqCL,CAAc,EACjE,GAAG,MACH,GAAG,MACH,EAAGF,EAASC,EAAc,EAC1B,cAAc,QACd,YAAaA,CACb,CAAA,CAAA,CAAA,CAEA,CAAA,CAEV"}

package/dist/cjs/components/feedback/callout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("@styled/tokens"),C=require("../icons/ico-caret-right.js"),I=require("../icons/ico-dismiss.js"),R=require("../../recipes/callout.js"),r=require("@styled/jsx"),n=require("react"),H=require("react-aria"),P=require("./status-icon.js");const x=n.forwardRef((b,p)=>{const{label:v,description:i,size:c="md",variant:o="branded",icon:u=!1,dismissible:d=!1,onPress:a}=b,[g,f]=n.useState(!0),[k,N]=n.useState(!1),t={sm:l.token("spacing.4"),md:l.token("spacing.5"),lg:l.token("spacing.6")},m=i?t.sm:t[c],s=R.callout({size:c,variant:o,icon:u,description:!!i,isDismissed:k,dismissible:d,interactive:!!a}),q=()=>{N(!0)},S=n.useRef(null),h=p||S,{buttonProps:w}=H.useButton({onPress:a},h),j=()=>e.jsxs(r.HStack,{className:a?"":s.container,onAnimationEnd:()=>f(!1),ref:h,children:[e.jsxs(r.VStack,{alignItems:"flex-start",gap:1.5,children:[e.jsxs(r.HStack,{w:"full",justifyContent:"space-between",children:[e.jsxs(r.HStack,{alignItems:"center",children:[u&&e.jsx(P.StatusIcon,{variant:o,className:s.icon,width:m,height:m}),e.jsx("p",{className:s.label,children:v})]}),d&&e.jsx("button",{className:s.button,onClick:q,"aria-label":"dismiss callout",children:e.jsx(I.default,{className:s.button,width:t.sm,height:t.sm})})]}),!!i&&e.jsx("p",{className:s.description,children:i})]}),!!a&&e.jsx(C.default,{className:s.button,width:t.sm,height:t.sm})]});return g?a?e.jsx("button",{...w,className:s.container,children:e.jsx(j,{})}):e.jsx(j,{}):null});x.displayName="Callout",exports.Callout=x;
+"use strict";var e=require("react/jsx-runtime"),C=require("../icons/ico-caret-right.js"),R=require("../icons/ico-dismiss.js"),P=require("../../lib/cn.js"),S=require("../../recipes/callout.js"),r=require("react"),y=require("react-aria"),z=require("./status-icon.js");const i={sm:"1rem",md:"1.25rem",lg:"1.5rem"},x=r.forwardRef((h,f)=>{const{label:v,description:t,size:l="md",variant:n="branded",icon:c=!1,dismissible:o=!1,onPress:a}=h,[j,b]=r.useState(!0),[N,p]=r.useState(!1),u=t?i.sm:i[l],s=S.callout({size:l,variant:n,icon:c,description:!!t,isDismissed:N,dismissible:o,interactive:!!a}),g=()=>{p(!0)},w=r.useRef(null),m=f||w,{buttonProps:q}=y.useButton({onPress:a},m),d=()=>e.jsxs("div",{className:P.cn(a?"":s.container,"flex flex-row items-center gap-2"),onAnimationEnd:()=>b(!1),ref:m,children:[e.jsxs("div",{className:"flex flex-col items-start gap-1.5",children:[e.jsxs("div",{className:"flex flex-row items-center justify-between w-full gap-2.5",children:[e.jsxs("div",{className:"flex flex-row items-center gap-2.5",children:[c&&e.jsx(z.StatusIcon,{variant:n,className:s.icon,width:u,height:u}),e.jsx("p",{className:s.label,children:v})]}),o&&e.jsx("button",{className:s.button,onClick:g,"aria-label":"dismiss callout",children:e.jsx(R.default,{className:s.button,width:i.sm,height:i.sm})})]}),!!t&&e.jsx("p",{className:s.description,children:t})]}),!!a&&e.jsx(C.default,{className:s.button,width:i.sm,height:i.sm})]});return j?a?e.jsx("button",{...q,className:s.container,children:e.jsx(d,{})}):e.jsx(d,{}):null});x.displayName="Callout",exports.Callout=x;
 //# sourceMappingURL=callout.js.map

package/dist/cjs/components/feedback/callout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import { IcoCaretRight, IcoDismiss } from '@components/icons';\nimport { ~~callout~~ } from '@~~recipes~~/~~callout~~';\nimport { ~~HStack,~~ ~~VStack~~ } from '@~~styled~~/~~jsx~~';\nimport { ~~token } from '@styled/tokens';\nimport {~~ forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\nimport { StatusIcon } from './status-icon';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n size?: 'sm' \| 'md' \| 'lg';\n variant?: 'branded' \| 'success' \| 'error' \| 'warning' \| 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: boolean;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps \| DismissibleCalloutProps \| InteractiveCalloutProps;\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const ~~iconSizes = {\n sm: token('spacing.4'),\n md: token('spacing.5'),\n lg: token('spacing.6'),\n };\n const~~ iconSize = description ? ~~iconSizes~~.sm : ~~iconSizes~~[size];\n\n const classes = callout({\n size,\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <~~HStack~~ className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n <~~VStack~~ ~~alignItems={'~~flex-start'} gap={1.5}>\n <~~HStack~~ w~~={'~~full'} ~~justifyContent={'space~~-~~between'}~~>\n <~~HStack~~ ~~alignItems={'~~center'}>\n {icon && <StatusIcon variant={variant} className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </~~HStack~~>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={~~iconSizes~~.sm} height={~~iconSizes~~.sm} />\n </button>\n )}\n </~~HStack~~>\n {!!description && <p className={classes.description}>{description}</p>}\n </~~VStack~~>\n {!!onPress && <IcoCaretRight className={classes.button} width={~~iconSizes~~.sm} height={~~iconSizes~~.sm} />}\n </~~HStack~~>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["Callout","forwardRef","props","forwardedRef","label","description","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","~~iconSizes","token","~~iconSize","classes","callout","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","~~HStack~~","~~VStack","~~_jsx","StatusIcon","IcoDismiss","IcoCaretRight"],"mappings":"~~kSAkCa~~,~~MAAAA~~,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,~~EAAAA~~,~~SAAS~~,EAAK,EAE9CG,~~EAAY~~,~~CAChB~~,~~GAAIC~~,~~EAAAA,MAAM,WAAW,EACrB,GAAIA,EAAAA,MAAM,WAAW,EACrB,GAAIA,EAAAA,MAAM,WAAW,GAEjBC,EAAWb,EAAcW,EAAU,~~GAAKA,~~EAAUV~~,CAAI,~~EAEtDa~~,EAAUC,~~UAAQ~~,CACtB,~~KAAAd~~,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,~~EAEKW~~,EAAiB,IAAK,~~CAC1BN~~,EAAe,EAAI,CACrB,~~EAEMO~~,EAAcC,EAAAA,OAAO,IAAI,EACzBC,~~EAAMrB~~,~~GAAgBmB~~,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UAAU,CAAE,~~QAAAhB~~,CAAS,~~EAAEc~~,CAAyC,EAElFG,EAAc,IAEhBC,EAAAA,~~KAACC~~,~~UAAO~~,~~UAAYnB~~,EAA8B,~~GAApBS~~,EAAQ,UAAgB,eAAgB,~~IAAMP~~,EAAa,EAAK,~~EAAG~~,~~IAAKY~~,~~YACpGI~~,EAAAA,~~KAACE~~,~~EAAAA~~,~~QAAO~~,~~WAAY~~,~~aAAc~~,~~IAAK,IAAG,~~SAAA,~~CACxCF~~,~~EAAAA~~,~~KAACC~~,~~EAAAA~~,~~QAAO~~,~~EAAG~~,~~OAAQ~~,~~eAAgB~~,~~gBAAe~~,~~SAAA~~,~~CAChDD~~,~~EAAAA~~,~~KAACC~~,~~SAAM~~,~~CAAC~~,~~WAAY~~,~~mBACjBrB~~,~~GAAQuB,~~EAAAA,IAACC,EAAAA,WAAU,CAAC,~~QAASzB~~,EAAS,~~UAAWY~~,EAAQ,KAAM,MAAOD,EAAU,OAAQA,~~IACzFa~~,~~EAAA~~,~~IAAA~~,~~IAAA~~,~~CAAG~~,~~UAAWZ,~~EAAQ,~~eAAQf~~,CAAK,CAAA,CAAK,~~IAGzCK~~,~~GACCsB~~,EAAAA,~~IAAA~~,SAAA,~~CAAQ~~,~~UAAWZ~~,EAAQ,OAAQ,QAASE,eAA2B,kBAAiB,~~SACtFU~~,MAACE,~~WAAW~~,~~UAAWd~~,EAAQ,OAAQ,~~MAAOH~~,~~EAAU~~,GAAI,OAAQA,~~EAAU~~,~~IACvE~~,CAAA,~~CACV~~,~~CACM~~,CAAA,~~EACR~~,CAAC,~~CAACX~~,~~GAAe0B~~,~~EAAAA~~,~~IAAG,~~IAAA,~~CAAA~~,~~UAAWZ~~,EAAQ,~~YAAc~~,~~SAAAd~~,~~GAAgB~~,~~CAC/D,~~CAAA,~~EACR~~,CAAC,CAACK,~~GAAWqB~~,MAACG,~~EAAc~~,~~QAAA~~,~~CAAA~~,~~UAAWf~~,EAAQ,OAAQ,~~MAAOH~~,~~EAAU~~,GAAI,OAAQA,~~EAAU~~,EAAM,CAAA,CAAA,CAAA,CAAA,~~EAK3G~~,~~OAAKL~~,EAIDD,~~EAEAqB~~,EAAAA,IAAA,SAAA,CAAA,~~GAAYN~~,EAAa,UAAWN,EAAQ,~~mBAC1CY~~,~~EAACJ~~,~~IAAAA,~~EAAc,CAAA,CAAA,CAAA,CAAA,~~EAKdI~~,EAAAA,~~IAACJ~~,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,~~EAED3B~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import { IcoCaretRight, IcoDismiss } from '@components/icons';\nimport { cn } from '@lib/cn';\nimport { callout } from '@recipes/callout';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\nimport { StatusIcon } from './status-icon';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n size?: 'sm' \| 'md' \| 'lg';\n variant?: 'branded' \| 'success' \| 'error' \| 'warning' \| 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: boolean;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps \| DismissibleCalloutProps \| InteractiveCalloutProps;\n\nconst iconSizeValues: Record<string, string> = {\n sm: '1rem',\n md: '1.25rem',\n lg: '1.5rem',\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const iconSize = description ? iconSizeValues.sm : iconSizeValues[size];\n\n const classes = callout({\n size,\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <div\n className={cn(!onPress ? classes.container : '', 'flex flex-row items-center gap-2')}\n onAnimationEnd={() => setIsVisible(false)}\n ref={ref}\n >\n <div className=\"flex flex-col items-start gap-1.5\">\n <div className=\"flex flex-row items-center justify-between w-full gap-2.5\">\n <div className=\"flex flex-row items-center gap-2.5\">\n {icon && <StatusIcon variant={variant} className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </div>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={iconSizeValues.sm} height={iconSizeValues.sm} />\n </button>\n )}\n </div>\n {!!description && <p className={classes.description}>{description}</p>}\n </div>\n {!!onPress && <IcoCaretRight className={classes.button} width={iconSizeValues.sm} height={iconSizeValues.sm} />}\n </div>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["iconSizeValues","Callout","forwardRef","props","forwardedRef","label","description","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","cn","_jsx","StatusIcon","IcoDismiss","IcoCaretRight"],"mappings":"0QAiCA,MAAMA,EAAyC,CAC7C,GAAI,OACJ,GAAI,UACJ,GAAI,UAGOC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAS,SAAA,EAAK,EAE9CG,EAAWX,EAAcN,EAAe,GAAKA,EAAeO,CAAI,EAEhEW,EAAUC,EAAAA,QAAQ,CACtB,KAAAZ,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKS,EAAiB,IAAK,CAC1BJ,EAAe,EAAI,CACrB,EAEMK,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMnB,GAAgBiB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UAAU,CAAE,QAAAd,CAAS,EAAEY,CAAyC,EAElFG,EAAc,IAEhBC,EAAAA,KACE,MAAA,CAAA,UAAWC,EAAIjB,GAAAA,EAA8B,GAApBO,EAAQ,UAAgB,kCAAkC,EACnF,eAAgB,IAAML,EAAa,EAAK,EACxC,IAAKU,YAELI,EAAAA,KAAK,MAAA,CAAA,UAAU,oCAAmC,SAAA,CAChDA,OAAK,MAAA,CAAA,UAAU,4DAA2D,SAAA,CACxEA,EAAAA,KAAK,MAAA,CAAA,UAAU,qCAAoC,SAAA,CAChDlB,GAAQoB,EAAAA,IAACC,EAAAA,WAAU,CAAC,QAAStB,EAAS,UAAWU,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAY,CAAA,EACrGY,WAAG,UAAWX,EAAQ,eAAQb,CAAK,CAAA,CAAK,CACpC,CAAA,EAELK,GACCmB,EAAAA,IAAQ,SAAA,CAAA,UAAWX,EAAQ,OAAQ,QAASE,eAA2B,kBAAiB,SACtFS,MAACE,EAAAA,QAAU,CAAC,UAAWb,EAAQ,OAAQ,MAAOlB,EAAe,GAAI,OAAQA,EAAe,EAAM,CAAA,CAAA,CAAA,CAEjG,CACG,CAAA,EACL,CAAC,CAACM,GAAeuB,MAAA,IAAA,CAAG,UAAWX,EAAQ,YAAW,SAAGZ,CAAW,CAAA,CAAK,IAEvE,CAAC,CAACK,GAAWkB,MAACG,EAAAA,QAAa,CAAC,UAAWd,EAAQ,OAAQ,MAAOlB,EAAe,GAAI,OAAQA,EAAe,EAAM,CAAA,CAAA,CAAA,CAAA,EAKrH,OAAKY,EAIDD,EAEAkB,EAAAA,IAAA,SAAA,CAAA,GAAYL,EAAa,UAAWN,EAAQ,mBAC1CW,MAACH,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdG,EAAAA,IAACH,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAEDzB,EAAQ,YAAc"}

package/dist/cjs/components/feedback/loading-spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("react/jsx-runtime"),a=require("@styled/css"),d=require("@styled/jsx");const k=({inverted:o,neutral:c,progress:h=30,size:e=64,strokeWidth:r=6})=>{const t=e/2,l=Math.abs(h)/100,i=2*Math.PI*t,n=o?"surface.primary":c?"text.primary":"brand.base";return s.jsx(d.Center,{inline:!0,children:s.jsxs("svg",{width:e,height:e,viewBox:`0 0 ${e} ${e}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("circle",{className:a.css({stroke:n,strokeOpacity:.12}),cx:"50%",cy:"50%",r:t-r/2,strokeLinecap:"round",strokeWidth:r}),s.jsx("circle",{className:a.css({animation:"spin 1s linear infinite",stroke:n,transformOrigin:"center center"}),cx:"50%",cy:"50%",r:t-r/2,strokeDasharray:i,strokeDashoffset:i-i*l+r*4,strokeLinecap:"round",strokeWidth:r})]})})};exports.LoadingSpinner=k;
+"use strict";var t=require("react/jsx-runtime"),a=require("../../lib/cn.js");const l=({inverted:c,neutral:o,progress:d=30,size:e=64,strokeWidth:r=6})=>{const s=e/2,h=Math.abs(d)/100,n=2*Math.PI*s,i=c?"stroke-surface-primary":o?"stroke-text-primary":"stroke-brand-base";return t.jsx("div",{className:"inline-flex items-center justify-center",children:t.jsxs("svg",{width:e,height:e,viewBox:`0 0 ${e} ${e}`,fill:"none",stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("circle",{className:a.cn(i,"opacity-[0.12]"),cx:"50%",cy:"50%",r:s-r/2,strokeLinecap:"round",strokeWidth:r}),t.jsx("circle",{className:a.cn("animate-spin origin-center",i),cx:"50%",cy:"50%",r:s-r/2,strokeDasharray:n,strokeDashoffset:n-n*h+r*4,strokeLinecap:"round",strokeWidth:r})]})})};exports.LoadingSpinner=l;
 //# sourceMappingURL=loading-spinner.js.map

package/dist/cjs/components/feedback/loading-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-spinner.js","sources":["../../../../src/components/feedback/loading-spinner.tsx"],"sourcesContent":["import { ~~css~~ } from '@~~styled~~/~~css~~';\~~nimport { Center } from '@styled/jsx';\~~n\nexport interface LoadingSpinnerProps {\n inverted?: boolean;\n neutral?: boolean;\n progress?: number;\n size?: number;\n strokeWidth?: number;\n}\n\nexport const LoadingSpinner = ({\n inverted,\n neutral,\n progress = 30,\n size = 64,\n strokeWidth = 6,\n}: LoadingSpinnerProps) => {\n const radius = size / 2;\n const dashProgress = Math.abs(progress) / 100;\n const dashSize = 2 * Math.PI * radius;\n const strokeColor = inverted ? 'surface.primary' : neutral ? 'text.primary' : 'brand.base';\n\n return (\n <~~Center~~ inline>\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n stroke=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className={~~css~~(~~{ stroke:~~ strokeColor, ~~strokeOpacity:~~ 0.12 })}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n <circle\n className={~~css~~(~~{\n animation:~~ 'spin ~~1s linear infinite~~'~~,\n stroke:~~ strokeColor~~,\n transformOrigin: 'center center',\n }~~)}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeDasharray={dashSize}\n strokeDashoffset={dashSize - dashSize * dashProgress + strokeWidth * 4}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n </svg>\n </~~Center~~>\n );\n};\n"],"names":["LoadingSpinner","inverted","neutral","progress","size","strokeWidth","radius","dashProgress","dashSize","strokeColor","_jsx","~~Center","~~_jsxs","~~css~~"],"mappings":"~~wGAWaA~~,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EAAO,GACP,YAAAC,EAAc,CACM,IAAI,CACxB,MAAMC,EAASF,EAAO,EAChBG,EAAe,KAAK,IAAIJ,CAAQ,EAAI,IACpCK,EAAW,EAAI,KAAK,GAAKF,EACzBG,EAAcR,EAAW,~~kBAAoBC~~,EAAU,~~eAAiB~~,~~aAE9E~~,OACEQ,EAAAA,~~IAACC~~,~~EAAAA~~,~~OAAO,~~CAAA,~~mBACNC~~,~~OACE~~,MAAA,~~CAAA~~,~~MAAOR~~,EACP,OAAQA,EACR,QAAS,OAAOA,CAAI,IAAIA,CAAI,GAC5B,KAAK,OACL,OAAO,OACP,MAAM,~~uCAENM~~,EAAAA,IACE,SAAA,CAAA,~~UAAWG~~,~~EAAI~~,~~IAAA~~,~~CAAE,OAAQJ,~~EAAa,~~cAAe~~,~~GAAM~~,~~CAAA,EAC3D,~~GAAG,MACH,GAAG,MACH,EAAGH,EAASD,EAAc,EAC1B,cAAc,QACd,YAAaA,~~CACb~~,CAAA,~~EACFK~~,EAAAA,~~cACE,UAAWG,EAAI,~~IAAA,~~CACb~~,~~UAAW~~,~~0BACX~~,~~OAAQJ~~,~~EACR~~,~~gBAAiB~~,~~gBAClB~~,~~EACD~~,GAAG,MACH,GAAG,MACH,EAAGH,EAASD,EAAc,EAC1B,gBAAiBG,EACjB,iBAAkBA,EAAWA,EAAWD,EAAeF,EAAc,EACrE,cAAc,QACd,YAAaA,~~GACb~~,~~CACE~~,CAAA,CAAA,CAAA,~~CAGZ~~"}
1	+ {"version":3,"file":"loading-spinner.js","sources":["../../../../src/components/feedback/loading-spinner.tsx"],"sourcesContent":["import { cn } from '@lib/cn';\n\nexport interface LoadingSpinnerProps {\n inverted?: boolean;\n neutral?: boolean;\n progress?: number;\n size?: number;\n strokeWidth?: number;\n}\n\nexport const LoadingSpinner = ({\n inverted,\n neutral,\n progress = 30,\n size = 64,\n strokeWidth = 6,\n}: LoadingSpinnerProps) => {\n const radius = size / 2;\n const dashProgress = Math.abs(progress) / 100;\n const dashSize = 2 * Math.PI * radius;\n const strokeColor = inverted ? 'stroke-surface-primary' : neutral ? 'stroke-text-primary' : 'stroke-brand-base';\n\n return (\n <div className=\"inline-flex items-center justify-center\">\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n fill=\"none\"\n stroke=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className={cn(strokeColor, 'opacity-[0.12]')}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n <circle\n className={cn('animate-spin origin-center', strokeColor)}\n cx=\"50%\"\n cy=\"50%\"\n r={radius - strokeWidth / 2}\n strokeDasharray={dashSize}\n strokeDashoffset={dashSize - dashSize * dashProgress + strokeWidth * 4}\n strokeLinecap=\"round\"\n strokeWidth={strokeWidth}\n />\n </svg>\n </div>\n );\n};\n"],"names":["LoadingSpinner","inverted","neutral","progress","size","strokeWidth","radius","dashProgress","dashSize","strokeColor","_jsx","_jsxs","cn"],"mappings":"6EAUO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EAAO,GACP,YAAAC,EAAc,CACM,IAAI,CACxB,MAAMC,EAASF,EAAO,EAChBG,EAAe,KAAK,IAAIJ,CAAQ,EAAI,IACpCK,EAAW,EAAI,KAAK,GAAKF,EACzBG,EAAcR,EAAW,yBAA2BC,EAAU,sBAAwB,oBAE5F,OACEQ,EAAAA,IAAK,MAAA,CAAA,UAAU,0CACb,SAAAC,EAAAA,KAAA,MAAA,CACE,MAAOP,EACP,OAAQA,EACR,QAAS,OAAOA,CAAI,IAAIA,CAAI,GAC5B,KAAK,OACL,OAAO,OACP,MAAM,6BAA4B,SAAA,CAElCM,EAAAA,IACE,SAAA,CAAA,UAAWE,EAAAA,GAAGH,EAAa,gBAAgB,EAC3C,GAAG,MACH,GAAG,MACH,EAAGH,EAASD,EAAc,EAC1B,cAAc,QACd,YAAaA,CAAW,CAAA,EAE1BK,EAAAA,IAAA,SAAA,CACE,UAAWE,EAAAA,GAAG,6BAA8BH,CAAW,EACvD,GAAG,MACH,GAAG,MACH,EAAGH,EAASD,EAAc,EAC1B,gBAAiBG,EACjB,iBAAkBA,EAAWA,EAAWD,EAAeF,EAAc,EACrE,cAAc,QACd,YAAaA,CACb,CAAA,CAAA,CAAA,CAAA,CAEA,CAAA,CAEV"}

package/dist/cjs/components/feedback/progress-bar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=require("react/jsx-runtime"),d=require("@styled/jsx"),e=require("@styled/tokens"),g=require("react");const h=75,b=90,i=e.token("colors.brand.lighter"),n=e.token("colors.negative.lighter"),p=e.token("colors.neutral.secondary"),m=e.token("colors.positive.lighter"),u=e.token("colors.warning.lighter"),x=({autoTarget:t="min",progress:r=0})=>t==="min"?r>b?n:r>h?u:i:r<=100-b?n:r<=100-h?u:r===100?m:i,v=({autoTarget:t,current:r=0,strokeWidth:o=8,total:s=100,variant:c="auto"})=>{const a=g.useMemo(()=>Math.min(r,s)/s*100,[r,s]),k=g.useMemo(()=>{switch(c){case"branded":return i;case"success":return m;case"error":return n;case"warning":return u;case"neutral":return p;default:return x({autoTarget:t,progress:a})}},[a,c]);return l.jsx(d.Box,{bgColor:"surface.tertiary",borderRadius:"2rem",position:"relative",w:"full",style:{height:`${o}px`},children:l.jsx(d.Box,{position:"absolute",borderRadius:"2rem",borderStyle:"solid",borderWidth:"thick",borderColor:"surface.primary",style:{height:`${o}px`,minWidth:`${o}px`,width:`${a}%`,background:k}})})};exports.ProgressBar=v;
+"use strict";var c=require("react/jsx-runtime"),l=require("react");const d=75,g=90,o="var(--color-brand-lighter)",i="var(--color-negative-lighter)",v="var(--color-neutral-secondary)",h="var(--color-positive-lighter)",n="var(--color-warning-lighter)",b=({autoTarget:e="min",progress:r=0})=>e==="min"?r>g?i:r>d?n:o:r<=100-g?i:r<=100-d?n:r===100?h:o,p=({autoTarget:e,current:r=0,strokeWidth:a=8,total:t=100,variant:u="auto"})=>{const s=l.useMemo(()=>Math.min(r,t)/t*100,[r,t]),m=l.useMemo(()=>{switch(u){case"branded":return o;case"success":return h;case"error":return i;case"warning":return n;case"neutral":return v;default:return b({autoTarget:e,progress:s})}},[s,u]);return c.jsx("div",{className:"bg-surface-tertiary rounded-[2rem] relative w-full",style:{height:`${a}px`},children:c.jsx("div",{className:"absolute rounded-[2rem] border-solid border-thick border-surface-primary",style:{height:`${a}px`,minWidth:`${a}px`,width:`${s}%`,background:m}})})};exports.ProgressBar=p;
 //# sourceMappingURL=progress-bar.js.map