@magiclabs/ui-components 1.35.5 → 1.35.8

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var S=require("../icons/ico-menu.js"),x=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 s=require("@styled/jsx"),i=require("create-slots"),r=require("react");const g=i.createSlot("div"),m=i.createSlot("div"),b=i.createSlot("div"),k=({children:j,placement:h="right",isOpen:u=!1})=>{const[n,a]=r.useState(u),[q,d]=r.useState(n),[v,f]=r.useState(n),o=r.useRef(null),c=h==="left";r.useEffect(()=>{a(u)},[u]),r.useEffect(()=>{let t;return n?(d(!0),t=setTimeout(()=>f(!0),10)):f(!1),()=>clearTimeout(t)},[n]),r.useEffect(()=>{const t=l=>{o.current&&!o.current.contains(l.target)&&a(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[a]);const p=()=>{n||d(!1)};return i.createHost(j,t=>e.jsxs(e.Fragment,{children:[e.jsx(x.default,{onPress:()=>a(l=>!l),textStyle:"neutral",variant:"text",children:e.jsx(x.default.TrailingIcon,{children:e.jsx(S.default,{})})}),e.jsx(s.Box,{position:"absolute",display:n?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",_dark:{bg:"rgba(0, 0, 0, .7)"}}),q&&e.jsxs(s.Stack,{ref:o,position:"absolute",transform:v?"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"},onTransitionEnd:p,zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[e.jsxs(s.Stack,{gap:6,children:[e.jsx(s.Stack,{h:"full",justifyContent:"space-between",children:t.get(g)}),e.jsx(s.Divider,{color:"surface.quaternary"}),e.jsx(s.Stack,{children:t.get(m)})]}),t.get(b)]})]}))},y=Object.assign(k,{Header:g,Content:m,Footer:b});exports.Menu=y;
+"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;
 //# sourceMappingURL=menu.js.map

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

@@ -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 [shouldRender, setShouldRender] = useState(isOpen);\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      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 (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  const handleTransitionEnd = () => {\n    if (!isOpen) {\n      setShouldRender(false);\n    }\n  };\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        {shouldRender && (\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            onTransitionEnd={handleTransitionEnd}\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};\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","shouldRender","setShouldRender","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","Box","Stack","Divider","Menu"],"mappings":"0eAWA,MAAMA,EAASC,EAAW,WAAA,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,EAAcC,CAAe,EAAIF,EAAAA,SAASF,CAAM,EACjD,CAACK,EAAWC,CAAY,EAAIJ,EAAAA,SAASF,CAAM,EAC3CO,EAAUC,SAAuB,IAAI,EACrCC,EAAgBX,IAAc,OAEpCY,EAAAA,UAAU,IAAK,CACbT,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXW,EAAU,UAAA,IAAK,CACb,IAAIC,EAEJ,OAAIX,GACFI,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACX,CAAM,CAAC,EAEXU,EAAU,UAAA,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEZ,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAS,CAAC,EAEd,MAAMa,EAAsB,IAAK,CAC1Bd,GACHI,EAAgB,EAAK,CAEzB,EAEA,OAAOW,EAAAA,WAAWlB,EAAUmB,GAExBC,EAAAA,KAAAC,EAAA,SAAA,CAAA,SAAA,CACEC,EAAAA,IAACC,UAAO,CAAA,QAAS,IAAMnB,EAAUoB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,OAAM,SACjFF,MAACC,EAAAA,QAAO,aAAY,CAAA,SAClBD,EAAAA,IAACG,UAAU,CAAA,CAAA,CAAA,CAAA,CAEN,CAAA,EACTH,EAAAA,IAACI,MACC,CAAA,SAAS,WACT,QAASvB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACDG,GACCc,OAACO,EAAAA,MAAK,CACJ,IAAKjB,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkBI,EAAgB,oBAAsB,mBAC/E,WAAW,iBACX,IAAK,EACL,OAAQ,EACJ,GAACA,EAAgB,CAAE,KAAM,CAAG,EAAG,CAAE,MAAO,CAAG,EAC/C,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAqB,EAAA,GAC7BA,EAAgB,CAAE,aAAc,KAAK,EAAK,CAAE,YAAa,KAAO,EACrE,gBAAiBK,EACjB,OAAQ,GACR,eAAe,gBACf,EAAG,EACH,GAAI,EACJ,EAAG,GAAE,SAAA,CAELG,EAACO,KAAAA,EAAAA,MAAM,CAAA,IAAK,EAAC,SAAA,CACXL,EAAAA,IAACK,QAAM,CAAA,EAAE,OAAO,eAAe,gBAC5B,SAAAR,EAAM,IAAIxB,CAAM,CACX,CAAA,EACR2B,EAAAA,IAACM,EAAAA,QAAQ,CAAA,MAAM,oBAAuB,CAAA,EACtCN,MAACK,QAAO,CAAA,SAAAR,EAAM,IAAItB,CAAO,CAAU,CAAA,CAAA,CAAA,CAAA,EAEpCsB,EAAM,IAAIrB,CAAM,CAAC,CAAA,CAAA,CAErB,CAAA,CAAA,CAGN,CACH,EAEa+B,EAAO,OAAO,OAAO9B,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}
+{"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"}

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

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

package/dist/cjs/recipes/button.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.tertiary',\n          _light: {\n            mixBlendMode: 'multiply',\n          },\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n      inverse: {\n        button: {\n          bg: 'ink.90',\n          _dark: {\n            bg: 'paper',\n          },\n          _before: {\n            backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',\n            _dark: { backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))' },\n          },\n        },\n        label: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n        icon: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      positive: {},\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      textStyle: 'positive',\n      css: {\n        label: {\n          color: 'positive.base',\n        },\n        icon: {\n          color: 'positive.base',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'positive',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n        icon: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n        },\n        icon: {\n          color: 'text.tertiary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      iconOnly: true,\n      css: {\n        iconContainer: {\n          p: 1.5,\n          w: 'fit-content',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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SAAU,CAAA,EACV,QAAS,CAAA,EACT,OAAQ,CACT,CAAA,CACF,EACD,iBAAkB,CAChB,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,CACF,CACF,EACD,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,EACD,KAAM,CACJ,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,CACF,CACF,EACD,CACE,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}
+{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      positive: {\n        button: {\n          bg: 'positive.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.tertiary',\n          _light: {\n            mixBlendMode: 'multiply',\n          },\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n      inverse: {\n        button: {\n          bg: 'ink.90',\n          _dark: {\n            bg: 'paper',\n          },\n          _before: {\n            backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',\n            _dark: { backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))' },\n          },\n        },\n        label: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n        icon: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      positive: {},\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      textStyle: 'positive',\n      css: {\n        label: {\n          color: 'positive.base',\n        },\n        icon: {\n          color: 'positive.base',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'positive',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n        icon: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n        },\n        icon: {\n          color: 'text.tertiary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      iconOnly: true,\n      css: {\n        iconContainer: {\n          p: 1.5,\n          w: 'fit-content',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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CR,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,OAAQ,CACN,aAAc,MACf,CACF,CACF,EACD,UAAW,CACT,SAAU,GACV,SAAU,CAAA,EACV,QAAS,CAAA,EACT,OAAQ,CACT,CAAA,CACF,EACD,iBAAkB,CAChB,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,CACF,CACF,EACD,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,EACD,KAAM,CACJ,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,CACF,CACF,EACD,CACE,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}

package/dist/es/components/containers/menu.js

@@ -1,2 +1,2 @@
-import{jsxs as c,Fragment as E,jsx as e}from"react/jsx-runtime";import"@styled/tokens";import S from"../icons/ico-menu.js";import g from"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import{Box as T,Stack as o,Divider as C}from"@styled/jsx";import{createSlot as l,createHost as I}from"create-slots";import{useState as d,useRef as L,useEffect as u}from"react";const b=l("div"),h=l("div"),x=l("div"),X=({children:v,placement:y="right",isOpen:i=!1})=>{const[r,n]=d(i),[j,p]=d(r),[k,f]=d(r),a=L(null),s=y==="left";u(()=>{n(i)},[i]),u(()=>{let t;return r?(p(!0),t=setTimeout(()=>f(!0),10)):f(!1),()=>clearTimeout(t)},[r]),u(()=>{const t=m=>{a.current&&!a.current.contains(m.target)&&n(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[n]);const w=()=>{r||p(!1)};return I(v,t=>c(E,{children:[e(g,{onPress:()=>n(m=>!m),textStyle:"neutral",variant:"text",children:e(g.TrailingIcon,{children:e(S,{})})}),e(T,{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)"}}),j&&c(o,{ref:a,position:"absolute",transform:k?"translateX(0)":s?"translateX(-100%)":"translateX(100%)",transition:"transform 0.3s",top:0,bottom:0,...s?{left:0}:{right:0},bg:"surface.primary",_dark:{bg:"surface.secondary"},...s?{roundedRight:"2xl"}:{roundedLeft:"2xl"},onTransitionEnd:w,zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[c(o,{gap:6,children:[e(o,{h:"full",justifyContent:"space-between",children:t.get(b)}),e(C,{color:"surface.quaternary"}),e(o,{children:t.get(h)})]}),t.get(x)]})]}))},_=Object.assign(X,{Header:b,Content:h,Footer:x});export{_ as Menu};
+import{jsxs as l,Fragment as j,jsx as e}from"react/jsx-runtime";import"@styled/tokens";import w from"../icons/ico-menu.js";import u from"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import{Box as k,Stack as n,Divider as C}from"@styled/jsx";import{createSlot as c,createHost as S}from"create-slots";import{useState as f,useRef as E,useEffect as d}from"react";const g=c("div"),b=c("div"),h=c("div"),L=({children:x,placement:y="right",isOpen:i=!1})=>{const[r,o]=f(i),[v,p]=f(r),a=E(null),s=y==="left";return d(()=>{o(i)},[i]),d(()=>{let t;return r?t=setTimeout(()=>p(!0),10):p(!1),()=>clearTimeout(t)},[r]),d(()=>{const t=m=>{a.current&&!a.current.contains(m.target)&&o(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[o]),S(x,t=>l(j,{children:[e(u,{onPress:()=>o(m=>!m),textStyle:"neutral",variant:"text",children:e(u.TrailingIcon,{children:e(w,{})})}),e(k,{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)"}}),l(n,{ref:a,position:"absolute",transform:v?"translateX(0)":s?"translateX(-100%)":"translateX(100%)",transition:"transform 0.3s",top:0,bottom:0,...s?{left:0}:{right:0},bg:"surface.primary",_dark:{bg:"surface.secondary"},...s?{roundedRight:"2xl"}:{roundedLeft:"2xl"},zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[l(n,{gap:6,children:[e(n,{h:"full",justifyContent:"space-between",children:t.get(g)}),e(C,{color:"surface.quaternary"}),e(n,{children:t.get(b)})]}),t.get(h)]})]}))},T=Object.assign(L,{Header:g,Content:b,Footer:h});export{T as Menu};
 //# sourceMappingURL=menu.js.map

package/dist/es/components/containers/menu.js.map

@@ -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 [shouldRender, setShouldRender] = useState(isOpen);\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      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 (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  const handleTransitionEnd = () => {\n    if (!isOpen) {\n      setShouldRender(false);\n    }\n  };\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        {shouldRender && (\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            onTransitionEnd={handleTransitionEnd}\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};\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","shouldRender","setShouldRender","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","Box","Stack","Divider","Menu"],"mappings":"wkBAWA,MAAMA,EAASC,EAAW,KAAK,EACzBC,EAAUD,EAAW,KAAK,EAC1BE,EAASF,EAAW,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAASH,CAAM,EACrC,CAACI,EAAcC,CAAe,EAAIF,EAASF,CAAM,EACjD,CAACK,EAAWC,CAAY,EAAIJ,EAASF,CAAM,EAC3CO,EAAUC,EAAuB,IAAI,EACrCC,EAAgBX,IAAc,OAEpCY,EAAU,IAAK,CACbT,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXW,EAAU,IAAK,CACb,IAAIC,EAEJ,OAAIX,GACFI,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACX,CAAM,CAAC,EAEXU,EAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEZ,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAS,CAAC,EAEd,MAAMa,EAAsB,IAAK,CAC1Bd,GACHI,EAAgB,EAAK,CAEzB,EAEA,OAAOW,EAAWlB,EAAUmB,GAExBC,EAAAC,EAAA,CAAA,SAAA,CACEC,EAACC,EAAO,CAAA,QAAS,IAAMnB,EAAUoB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,OAAM,SACjFF,EAACC,EAAO,aAAY,CAAA,SAClBD,EAACG,EAAU,CAAA,CAAA,CAAA,CAAA,CAEN,CAAA,EACTH,EAACI,EACC,CAAA,SAAS,WACT,QAASvB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACDG,GACCc,EAACO,EAAK,CACJ,IAAKjB,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkBI,EAAgB,oBAAsB,mBAC/E,WAAW,iBACX,IAAK,EACL,OAAQ,EACJ,GAACA,EAAgB,CAAE,KAAM,CAAG,EAAG,CAAE,MAAO,CAAG,EAC/C,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAqB,EAAA,GAC7BA,EAAgB,CAAE,aAAc,KAAK,EAAK,CAAE,YAAa,KAAO,EACrE,gBAAiBK,EACjB,OAAQ,GACR,eAAe,gBACf,EAAG,EACH,GAAI,EACJ,EAAG,GAAE,SAAA,CAELG,EAACO,EAAM,CAAA,IAAK,EAAC,SAAA,CACXL,EAACK,EAAM,CAAA,EAAE,OAAO,eAAe,gBAC5B,SAAAR,EAAM,IAAIxB,CAAM,CACX,CAAA,EACR2B,EAACM,EAAQ,CAAA,MAAM,oBAAuB,CAAA,EACtCN,EAACK,EAAO,CAAA,SAAAR,EAAM,IAAItB,CAAO,CAAU,CAAA,CAAA,CAAA,CAAA,EAEpCsB,EAAM,IAAIrB,CAAM,CAAC,CAAA,CAAA,CAErB,CAAA,CAAA,CAGN,CACH,EAEa+B,EAAO,OAAO,OAAO9B,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}
+{"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":"wkBAWA,MAAMA,EAASC,EAAW,KAAK,EACzBC,EAAUD,EAAW,KAAK,EAC1BE,EAASF,EAAW,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAASH,CAAM,EACrC,CAACI,EAAWC,CAAY,EAAIF,EAASF,CAAM,EAC3CK,EAAUC,EAAuB,IAAI,EACrCC,EAAgBT,IAAc,OAEpC,OAAAU,EAAU,IAAK,CACbP,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXS,EAAU,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,EAAU,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,EAAUgB,GAExBC,EAAAC,EAAA,CAAA,SAAA,CACEC,EAACC,EAAO,CAAA,QAAS,IAAMhB,EAAUiB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,OAAM,SACjFF,EAACC,EAAO,aACN,CAAA,SAAAD,EAACG,EAAO,EAAA,CACY,CAAA,CAAA,CAAA,EAExBH,EAACI,EAAG,CACF,SAAS,WACT,QAASpB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACFc,EAACO,EACC,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,EAACO,EAAK,CAAC,IAAK,EAAC,SAAA,CACXL,EAACK,EAAM,CAAA,EAAE,OAAO,eAAe,gBAC5B,SAAAR,EAAM,IAAIrB,CAAM,CACX,CAAA,EACRwB,EAACM,EAAQ,CAAA,MAAM,oBAAuB,CAAA,EACtCN,EAACK,EAAO,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"}

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

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

package/dist/es/recipes/button.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.tertiary',\n          _light: {\n            mixBlendMode: 'multiply',\n          },\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n      inverse: {\n        button: {\n          bg: 'ink.90',\n          _dark: {\n            bg: 'paper',\n          },\n          _before: {\n            backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',\n            _dark: { backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))' },\n          },\n        },\n        label: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n        icon: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      positive: {},\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      textStyle: 'positive',\n      css: {\n        label: {\n          color: 'positive.base',\n        },\n        icon: {\n          color: 'positive.base',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'positive',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n        icon: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n        },\n        icon: {\n          color: 'text.tertiary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      iconOnly: true,\n      css: {\n        iconContainer: {\n          p: 1.5,\n          w: 'fit-content',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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AAA,EACV,QAAS,CAAA,EACT,OAAQ,CACT,CAAA,CACF,EACD,iBAAkB,CAChB,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,CACF,CACF,EACD,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,EACD,KAAM,CACJ,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,CACF,CACF,EACD,CACE,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}
+{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n  slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n  base: {\n    button: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      position: 'relative',\n      fontWeight: 'semibold',\n      boxSizing: 'border-box',\n      borderRadius: 'button',\n      border: 'thin solid',\n      borderColor: 'transparent',\n      cursor: 'pointer',\n      transition: 'all 0.1s ease',\n      outline: 'none',\n      willChange: 'transform, opacity',\n      bg: 'none',\n      _active: { transform: 'scale(0.95)' },\n      _disabled: { opacity: '0.3', pointerEvents: 'none' },\n      _before: {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n        _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n        opacity: 0,\n        transition: 'opacity 0.1s ease',\n      },\n      _hover: {\n        _before: {\n          opacity: 1,\n        },\n      },\n    },\n    label: {\n      display: 'flex',\n      textAlign: 'center',\n      justifyContent: 'center',\n      whiteSpace: 'nowrap',\n      transition: 'all 0.1s ease',\n    },\n    focus: {\n      outlineColor: 'brand.base',\n      outlineStyle: 'solid',\n      outlineWidth: 'thick',\n      outlineOffset: 0.5,\n    },\n    icon: {\n      transition: 'all 0.1s ease',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        button: {\n          h: 9,\n          py: 1.5,\n          px: 4,\n        },\n        label: {\n          fontSize: 'sm',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 9,\n          p: 1.5,\n        },\n      },\n      md: {\n        button: {\n          h: 12,\n          py: 3,\n          px: 6,\n        },\n        label: {\n          fontSize: 'md',\n          lineHeight: '1.5rem',\n        },\n        iconContainer: {\n          w: 12,\n          p: 3,\n        },\n      },\n      lg: {\n        button: {\n          h: 15,\n          py: 4,\n          px: 6,\n        },\n        label: {\n          fontSize: 'lg',\n          lineHeight: '1.75rem',\n        },\n        iconContainer: {\n          w: 15,\n          p: 4,\n        },\n      },\n    },\n    variant: {\n      primary: {\n        button: {\n          bg: 'brand.base',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      secondary: {\n        button: {\n          bg: 'brand.lightest',\n        },\n        label: {\n          color: 'brand.darker',\n        },\n        icon: {\n          color: 'brand.darker',\n        },\n      },\n      positive: {\n        button: {\n          bg: 'positive.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      negative: {\n        button: {\n          bg: 'negative.darker',\n        },\n        label: {\n          color: 'surface.primary',\n        },\n        icon: {\n          color: 'surface.primary',\n        },\n      },\n      neutral: {\n        button: {\n          bg: 'neutral.tertiary',\n          _light: {\n            mixBlendMode: 'multiply',\n          },\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n      tertiary: {\n        button: {\n          bg: 'transparent',\n          borderColor: 'neutral.primary',\n        },\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'brand.base',\n        },\n      },\n      text: {\n        button: {\n          p: 0,\n          h: 'fit-content',\n          _hover: {\n            _before: {\n              opacity: 0,\n            },\n          },\n        },\n        label: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n        icon: {\n          color: 'brand.base',\n          _groupHover: {\n            color: 'brand.darkest',\n            _dark: {\n              color: 'brand.lighter',\n            },\n          },\n        },\n      },\n      transparent: {\n        button: {\n          bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n          _dark: { bg: '#ffffff29' },\n          backdropFilter: 'blur(3px)',\n          _before: { display: 'none' },\n        },\n        label: {\n          color: 'chalk',\n        },\n        icon: {\n          color: 'chalk',\n        },\n      },\n      inverse: {\n        button: {\n          bg: 'ink.90',\n          _dark: {\n            bg: 'paper',\n          },\n          _before: {\n            backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',\n            _dark: { backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))' },\n          },\n        },\n        label: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n        icon: {\n          color: 'chalk',\n          _dark: {\n            color: 'ink.90',\n          },\n        },\n      },\n    },\n    validating: {\n      true: {\n        button: {\n          pointerEvents: 'none',\n        },\n      },\n    },\n    expand: {\n      true: {\n        button: {\n          width: 'full',\n        },\n      },\n    },\n    iconOnly: {\n      true: {\n        button: {\n          borderRadius: 'full',\n        },\n      },\n    },\n    textStyle: {\n      positive: {},\n      negative: {},\n      neutral: {},\n      subtle: {},\n    },\n  },\n  compoundVariants: [\n    {\n      textStyle: 'positive',\n      css: {\n        label: {\n          color: 'positive.base',\n        },\n        icon: {\n          color: 'positive.base',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'positive',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'positive.darker',\n            _dark: { color: 'positive.darker' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'negative',\n      css: {\n        label: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n        icon: {\n          color: 'negative.darker',\n          _dark: { color: 'negative.base' },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'negative',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'negative.darkest',\n            _dark: { color: 'negative.lighter' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'neutral',\n      css: {\n        label: {\n          color: 'text.primary',\n        },\n        icon: {\n          color: 'text.primary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'neutral',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      textStyle: 'subtle',\n      css: {\n        label: {\n          color: 'text.tertiary',\n        },\n        icon: {\n          color: 'text.tertiary',\n        },\n      },\n    },\n    {\n      variant: 'text',\n      textStyle: 'subtle',\n      css: {\n        label: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n        icon: {\n          _groupHover: {\n            color: 'text.secondary',\n            _dark: { color: 'text.secondary' },\n          },\n        },\n      },\n    },\n    {\n      variant: 'text',\n      iconOnly: true,\n      css: {\n        iconContainer: {\n          p: 1.5,\n          w: 'fit-content',\n        },\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'md',\n    variant: 'primary',\n  },\n});\n"],"names":["button","sva"],"mappings":"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F,CACF,EACD,SAAU,CACR,KAAM,CACJ,OAAQ,CACN,aAAc,MACf,CACF,CACF,EACD,UAAW,CACT,SAAU,GACV,SAAU,CAAA,EACV,QAAS,CAAA,EACT,OAAQ,CACT,CAAA,CACF,EACD,iBAAkB,CAChB,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,kBACP,MAAO,CAAE,MAAO,iBAAmB,CACpC,CACF,CACF,CACF,EACD,CACE,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,EACD,KAAM,CACJ,MAAO,kBACP,MAAO,CAAE,MAAO,eAAiB,CAClC,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,mBACP,MAAO,CAAE,MAAO,kBAAoB,CACrC,CACF,CACF,CACF,EACD,CACE,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}

package/dist/panda.buildinfo.json

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

package/dist/types/components/containers/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAqGD,eAAO,MAAM,IAAI,6CA/F4D,SAAS;;;;CAmGpF,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AA0FD,eAAO,MAAM,IAAI,6CApF4D,SAAS;;;;CAwFpF,CAAC"}

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

@@ -3,7 +3,7 @@ import { type AriaButtonProps } from 'react-aria';
 export interface ButtonProps extends AriaButtonProps {
     label?: string;
     size?: 'sm' | 'md' | 'lg';
-    variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';
+    variant?: 'primary' | 'secondary' | 'positive' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';
     textStyle?: 'negative' | 'positive' | 'neutral' | 'subtle';
     disabled?: boolean;
     expand?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmHD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,UAAU,GACV,MAAM,GACN,aAAa,GACb,SAAS,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmHD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}

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

@@ -69,6 +69,17 @@ export declare const button: import("../../styled-system/types").SlotRecipeRunti
                 color: "brand.darker";
             };
         };
+        positive: {
+            button: {
+                bg: "positive.darker";
+            };
+            label: {
+                color: "surface.primary";
+            };
+            icon: {
+                color: "surface.primary";
+            };
+        };
         negative: {
             button: {
                 bg: "negative.darker";

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

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

package/package.json

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