@magiclabs/ui-components 1.32.0 → 1.32.1

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var C=require("../primitives/text.js"),O=require("../../hooks/useClickAway.js"),S=require("../../hooks/useToggleState.js"),a=require("@styled/css"),o=require("react"),p=require("react-aria");const j=2500,x=o.forwardRef((s,m)=>{const f="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:g,content:v,width:u=288,closeDelay:b=j,defaultOpen:h,...y}=s,[i,n]=o.useState(!1),{isSelected:c,setSelected:r}=S.useToggleState({isOpen:s.isOpen,defaultSelected:h,onChange(l){l||n(!1)},...s}),e=o.useMemo(()=>({isOpen:c,open:()=>{r(!0)},close:l=>{if(l){r(!1);return}f?r(!1):(i&&setTimeout(()=>{r(!1),n(!1)},b),i||r(!1))}}),[c,i]),q=o.useRef(null),{triggerProps:d,tooltipProps:w}=p.useTooltipTrigger(s,e,q);d.onClick=()=>{e.open(),n(!0)};const T=O.useClickAway(()=>{e.close(!0)});return t.jsxs("div",{ref:T,className:a.css({position:"relative"}),onMouseLeave:()=>{e.close()},onFocus:()=>{e.open()},onBlur:()=>{e.close()},children:[o.cloneElement(g,{...d,tabIndex:0}),t.jsxs("div",{ref:m,"aria-describedby":"tooltip",role:"tooltip",style:{width:u},className:a.cx(a.css({display:e.isOpen?"block":"none",maxW:72,width:"max",color:"text.secondary",bgColor:"surface.primary",_dark:{bgColor:"surface.secondary"},borderColor:"neutral.secondary",position:"absolute",py:2,px:3,borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",top:0,left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))",zIndex:"max"})),onMouseEnter:()=>{e.open()},...p.mergeProps(w,y),children:[t.jsx(C.default,{size:"sm",children:v}),e.isOpen&&t.jsx("div",{onMouseEnter:()=>{e.open()},style:{width:u},className:a.css({position:"absolute",h:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"})})]})]})});x.displayName="Tooltip",exports.default=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var M=require("../primitives/text.js"),b=require("../../hooks/useClickAway.js"),k=require("../../hooks/useToggleState.js"),B=require("../../recipes/tooltip.js"),u=require("@styled/jsx"),t=require("react"),x=require("react-aria");const g=t.forwardRef((o,q)=>{const m="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:v,content:f,width:h=288,closeDelay:O=2500,defaultOpen:T,placement:c="top",expand:j=!1,...w}=o,[s,n]=t.useState(!1),{isSelected:p,setSelected:r}=k.useToggleState({isOpen:o.isOpen,defaultSelected:T,onChange(l){l||n(!1)},...o}),e=t.useMemo(()=>({isOpen:p,open:()=>{r(!0)},close:l=>{if(l){r(!1);return}m?r(!1):(s&&setTimeout(()=>{r(!1),n(!1)},O),s||r(!1))}}),[p,s]),y=t.useRef(null),{triggerProps:d,tooltipProps:P}=x.useTooltipTrigger(o,e,y);d.onClick=()=>{e.open(),n(!0)};const S=b.useClickAway(()=>{e.close(!0)}),C=c.split(" ")[0],a=B.tooltip({expand:j,isOpen:e.isOpen,placement:c,position:C});return i.jsxs(u.Box,{ref:S,className:a.trigger,onMouseLeave:()=>{e.close()},onFocus:()=>{e.open()},onBlur:()=>{e.close()},children:[t.cloneElement(v,{...d,tabIndex:0}),i.jsxs(u.Box,{ref:q,"aria-describedby":"tooltip",role:"tooltip",className:a.content,style:{width:h},onMouseEnter:()=>{e.open()},...x.mergeProps(P,w),children:[i.jsx(M.default,{size:"sm",children:f}),e.isOpen&&i.jsx(u.Box,{onMouseEnter:()=>{e.open()},className:a.spacer})]})]})});g.displayName="Tooltip",exports.default=g;
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, width = 288, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        style={{ width }}\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            width: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            _dark: { bgColor: 'surface.secondary' },\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n            zIndex: 'max',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            style={{ width }}\n            className={css({\n              position: 'absolute',\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"yjBAcMA,EAAsB,KAEtBC,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,MAAAC,EAAQ,IAAK,WAAAC,EAAaT,EAAqB,YAAAU,EAAa,GAAGC,CAAW,EAAGR,EAClG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAAA,eAAe,CAClE,OAAQd,EAAM,OACd,gBAAiBO,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGV,CACJ,CAAA,EAEKgB,EAAQC,EAAAA,QACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKX,EAWHW,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAAA,kBAAkBvB,EAAOgB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,OACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,eAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,EAAAA,YACE,IAAKF,EACL,UAAWG,EAAAA,IAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,MACR,EACA,OAAQ,IAAK,CACXA,EAAM,MAAK,CACb,EAEC,SAAA,CAAAY,EAAAA,aAAazB,EAA0B,CACtC,GAAGkB,EACH,SAAU,EACX,EACDK,cACE,IAAKzB,EACY,mBAAA,UACjB,KAAK,UACL,MAAO,CAAE,MAAAI,CAAO,EAChB,UAAWwB,EAAAA,GACTF,EAAAA,IAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,MAAO,MACP,MAAO,iBACP,QAAS,kBACT,MAAO,CAAE,QAAS,mBAAqB,EACvC,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,qDACX,OAAQ,KACT,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,aAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,QAAI,CAAC,KAAK,KAAI,SAAE5B,CAAO,CAAA,EACvBY,EAAM,QACLe,MACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KAAI,CACZ,EACA,MAAO,CAAE,MAAAX,GACT,UAAWsB,EAAI,IAAA,CACb,SAAU,WACV,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED7B,EAAQ,YAAc"}
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { tooltip } from '@recipes/tooltip';\nimport { Box } from '@styled/jsx';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\ntype Position = 'top' | 'bottom' | 'left' | 'right';\n\ntype Placement =\n  | 'top'\n  | 'top right'\n  | 'top left'\n  | 'left'\n  | 'left top'\n  | 'left bottom'\n  | 'right'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom'\n  | 'bottom right'\n  | 'bottom left';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n    placement?: Placement;\n    expand?: boolean;\n  } & TooltipTriggerProps\n>;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const {\n    children,\n    content,\n    width = 288,\n    closeDelay = 2500,\n    defaultOpen,\n    placement = 'top',\n    expand = false,\n    ...restProps\n  } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  const position = placement.split(' ')[0] as Position;\n  const classes = tooltip({ expand, isOpen: state.isOpen, placement, position });\n\n  return (\n    <Box\n      ref={clickAwayRef}\n      className={classes.trigger}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <Box\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        className={classes.content}\n        style={{ width }}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <Box\n            onMouseEnter={() => {\n              state.open();\n            }}\n            className={classes.spacer}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","placement","expand","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","position","classes","tooltip","_jsxs","Box","cloneElement","mergeProps","_jsx","Text"],"mappings":"ylBAiCMA,MAAAA,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CACJ,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EAAa,KACb,YAAAC,EACA,UAAAC,EAAY,MACZ,OAAAC,EAAS,GACT,GAAGC,CAAS,EACVV,EACE,CAACW,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAAA,eAAe,CAClE,OAAQhB,EAAM,OACd,gBAAiBO,EACjB,SAASU,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGZ,CACJ,CAAA,EAEKkB,EAAQC,EAAAA,QACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKb,EAWHa,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGN,CAAU,EAEVK,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAAA,kBAAkBzB,EAAOkB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,KACNN,EAAAA,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAAAA,aAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAEKU,EAAWpB,EAAU,MAAM,GAAG,EAAE,CAAC,EACjCqB,EAAUC,EAAAA,QAAQ,CAAE,OAAArB,EAAQ,OAAQS,EAAM,OAAQ,UAAAV,EAAW,SAAAoB,CAAQ,CAAE,EAE7E,OACEG,EAAAA,KAACC,MACC,CAAA,IAAKN,EACL,UAAWG,EAAQ,QACnB,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAe,eAAa9B,EAA0B,CACtC,GAAGoB,EACH,SAAU,CACX,CAAA,EACDQ,EAAAA,KAACC,EAAG,IAAA,CACF,IAAK/B,EAAY,mBACA,UACjB,KAAK,UACL,UAAW4B,EAAQ,QACnB,MAAO,CAAE,MAAAxB,CAAO,EAChB,aAAc,IAAK,CACjBa,EAAM,KACR,CAAA,EACI,GAAAgB,EAAWV,WAAAA,EAAcd,CAAS,EAAC,SAAA,CAEvCyB,EAAAA,IAACC,EAAAA,QAAK,CAAA,KAAK,KAAM,SAAAhC,CAAe,CAAA,EAC/Bc,EAAM,QACLiB,EAAAA,IAACH,EAAAA,IAAG,CACF,aAAc,IAAK,CACjBd,EAAM,KACR,CAAA,EACA,UAAWW,EAAQ,MAAM,CAAA,CAE5B,CAAA,CAAA,CACG,CACF,CAAA,CAEV,CAAC,EAED/B,EAAQ,YAAc"}

package/dist/cjs/recipes/tooltip.js

@@ -0,0 +1,2 @@
+"use strict";var t=require("@styled/css");const a=t.sva({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"0%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});exports.tooltip=a;
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n  slots: ['trigger', 'content', 'spacer'],\n  base: {\n    trigger: {\n      position: 'relative',\n      w: 'auto',\n    },\n    content: {\n      w: 'max',\n      maxW: 72,\n      color: 'text.secondary',\n      bg: 'surface.primary',\n      _dark: { bg: 'surface.secondary' },\n      position: 'absolute',\n      py: 2,\n      px: 3,\n      rounded: 'xl',\n      boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n      zIndex: 'max',\n      display: 'none',\n    },\n    spacer: {\n      position: 'absolute',\n    },\n  },\n  variants: {\n    expand: {\n      true: {\n        trigger: {\n          w: 'full',\n        },\n      },\n    },\n    isOpen: {\n      true: {\n        content: {\n          display: 'block',\n        },\n      },\n    },\n    placement: {\n      top: {\n        content: {\n          top: '0%',\n          left: '50%',\n          transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      'top left': {\n        content: {\n          top: '0%',\n          right: '100%',\n          transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      'top right': {\n        content: {\n          top: '0%',\n          left: '0%',\n          transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      left: {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n        },\n      },\n      'left top': {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n        },\n      },\n      'left bottom': {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n        },\n      },\n      right: {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n        },\n      },\n      'right top': {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n        },\n      },\n      'right bottom': {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n        },\n      },\n      bottom: {\n        content: {\n          bottom: '0%',\n          left: '50%',\n          transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n      'bottom left': {\n        content: {\n          bottom: '0%',\n          right: '0%',\n          transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n      'bottom right': {\n        content: {\n          bottom: '0%',\n          left: '0%',\n          transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n    },\n    position: {\n      top: {\n        spacer: {\n          width: 72,\n          height: 4,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%) translateY(0.75rem)',\n        },\n      },\n      bottom: {\n        spacer: {\n          width: 72,\n          height: 4,\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%) translateY(-0.75rem)',\n        },\n      },\n      left: {\n        spacer: {\n          width: 4,\n          height: 48,\n          top: '50%',\n          right: -6,\n          transform: 'translateX(-0.75rem) translateY(-50%)',\n        },\n      },\n      right: {\n        spacer: {\n          width: 4,\n          height: 48,\n          top: '50%',\n          left: -6,\n          transform: 'translateX(0.75rem) translateY(-50%)',\n        },\n      },\n    },\n  },\n});\n"],"names":["tooltip","sva"],"mappings":"0CAEO,MAAMA,EAAUC,EAAAA,IAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,KACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,KACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,CACF,CAAA"}

package/dist/es/components/feedback/tooltip.js

@@ -1,2 +1,2 @@
-import{jsxs as m,jsx as c}from"react/jsx-runtime";import"../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 C from"../primitives/text.js";import{useClickAway as O}from"../../hooks/useClickAway.js";import{useToggleState as S}from"../../hooks/useToggleState.js";import{css as n,cx as P}from"@styled/css";import{forwardRef as k,useState as M,useMemo as N,useRef as E,cloneElement as R}from"react";import{useTooltipTrigger as j,mergeProps as z}from"react-aria";const B=2500,d=k((t,u)=>{const f="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:x,content:h,width:a=288,closeDelay:b=B,defaultOpen:g,...y}=t,[r,s]=M(!1),{isSelected:l,setSelected:e}=S({isOpen:t.isOpen,defaultSelected:g,onChange(i){i||s(!1)},...t}),o=N(()=>({isOpen:l,open:()=>{e(!0)},close:i=>{if(i){e(!1);return}f?e(!1):(r&&setTimeout(()=>{e(!1),s(!1)},b),r||e(!1))}}),[l,r]),w=E(null),{triggerProps:p,tooltipProps:v}=j(t,o,w);p.onClick=()=>{o.open(),s(!0)};const T=O(()=>{o.close(!0)});return m("div",{ref:T,className:n({position:"relative"}),onMouseLeave:()=>{o.close()},onFocus:()=>{o.open()},onBlur:()=>{o.close()},children:[R(x,{...p,tabIndex:0}),m("div",{ref:u,"aria-describedby":"tooltip",role:"tooltip",style:{width:a},className:P(n({display:o.isOpen?"block":"none",maxW:72,width:"max",color:"text.secondary",bgColor:"surface.primary",_dark:{bgColor:"surface.secondary"},borderColor:"neutral.secondary",position:"absolute",py:2,px:3,borderRadius:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",top:0,left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))",zIndex:"max"})),onMouseEnter:()=>{o.open()},...z(v,y),children:[c(C,{size:"sm",children:h}),o.isOpen&&c("div",{onMouseEnter:()=>{o.open()},style:{width:a},className:n({position:"absolute",h:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"})})]})]})});d.displayName="Tooltip";export{d as default};
+import{jsxs as c,jsx as u}from"react/jsx-runtime";import"../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 b from"../primitives/text.js";import{useClickAway as j}from"../../hooks/useClickAway.js";import{useToggleState as k}from"../../hooks/useToggleState.js";import{tooltip as v}from"../../recipes/tooltip.js";import{Box as p}from"@styled/jsx";import{forwardRef as B,useState as E,useMemo as R,useRef as z,cloneElement as A}from"react";import{useTooltipTrigger as D,mergeProps as F}from"react-aria";const d=B((t,f)=>{const g="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.maxTouchPoints>0,{children:h,content:x,width:O=288,closeDelay:T=2500,defaultOpen:w,placement:l="top",expand:y=!1,...P}=t,[r,i]=E(!1),{isSelected:m,setSelected:o}=k({isOpen:t.isOpen,defaultSelected:w,onChange(s){s||i(!1)},...t}),e=R(()=>({isOpen:m,open:()=>{o(!0)},close:s=>{if(s){o(!1);return}g?o(!1):(r&&setTimeout(()=>{o(!1),i(!1)},T),r||o(!1))}}),[m,r]),S=z(null),{triggerProps:a,tooltipProps:C}=D(t,e,S);a.onClick=()=>{e.open(),i(!0)};const M=j(()=>{e.close(!0)}),N=l.split(" ")[0],n=v({expand:y,isOpen:e.isOpen,placement:l,position:N});return c(p,{ref:M,className:n.trigger,onMouseLeave:()=>{e.close()},onFocus:()=>{e.open()},onBlur:()=>{e.close()},children:[A(h,{...a,tabIndex:0}),c(p,{ref:f,"aria-describedby":"tooltip",role:"tooltip",className:n.content,style:{width:O},onMouseEnter:()=>{e.open()},...F(C,P),children:[u(b,{size:"sm",children:x}),e.isOpen&&u(p,{onMouseEnter:()=>{e.open()},className:n.spacer})]})]})});d.displayName="Tooltip";export{d as default};
 //# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n  } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const { children, content, width = 288, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  return (\n    <div\n      ref={clickAwayRef}\n      className={css({ position: 'relative' })}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <div\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        style={{ width }}\n        className={cx(\n          css({\n            display: state.isOpen ? 'block' : 'none',\n            maxW: 72,\n            width: 'max',\n            color: 'text.secondary',\n            bgColor: 'surface.primary',\n            _dark: { bgColor: 'surface.secondary' },\n            borderColor: 'neutral.secondary',\n            position: 'absolute',\n            py: 2,\n            px: 3,\n            borderRadius: 'xl',\n            boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n            top: 0,\n            left: '50%',\n            transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n            zIndex: 'max',\n          }),\n        )}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <div\n            onMouseEnter={() => {\n              state.open();\n            }}\n            style={{ width }}\n            className={css({\n              position: 'absolute',\n              h: 4,\n              bottom: 0,\n              left: '50%',\n              transform: 'translateX(-50%) translateY(0.75rem)',\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"opBAcMA,EAAsB,KAEtBC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,MAAAC,EAAQ,IAAK,WAAAC,EAAaT,EAAqB,YAAAU,EAAa,GAAGC,CAAW,EAAGR,EAClG,CAACS,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAe,CAClE,OAAQd,EAAM,OACd,gBAAiBO,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGV,CACJ,CAAA,EAEKgB,EAAQC,EACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKX,EAWHW,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAkBvB,EAAOgB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,OACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,SACE,IAAKF,EACL,UAAWG,EAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,MACR,EACA,OAAQ,IAAK,CACXA,EAAM,MAAK,CACb,EAEC,SAAA,CAAAY,EAAazB,EAA0B,CACtC,GAAGkB,EACH,SAAU,EACX,EACDK,SACE,IAAKzB,EACY,mBAAA,UACjB,KAAK,UACL,MAAO,CAAE,MAAAI,CAAO,EAChB,UAAWwB,EACTF,EAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,MAAO,MACP,MAAO,iBACP,QAAS,kBACT,MAAO,CAAE,QAAS,mBAAqB,EACvC,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,qDACX,OAAQ,KACT,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,EAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAACC,EAAI,CAAC,KAAK,KAAI,SAAE5B,CAAO,CAAA,EACvBY,EAAM,QACLe,EACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KAAI,CACZ,EACA,MAAO,CAAE,MAAAX,GACT,UAAWsB,EAAI,CACb,SAAU,WACV,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED7B,EAAQ,YAAc"}
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { tooltip } from '@recipes/tooltip';\nimport { Box } from '@styled/jsx';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\ntype Position = 'top' | 'bottom' | 'left' | 'right';\n\ntype Placement =\n  | 'top'\n  | 'top right'\n  | 'top left'\n  | 'left'\n  | 'left top'\n  | 'left bottom'\n  | 'right'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom'\n  | 'bottom right'\n  | 'bottom left';\n\nexport type TooltipProps = PropsWithChildren<\n  {\n    content: ReactNode;\n    width?: number | string;\n    placement?: Placement;\n    expand?: boolean;\n  } & TooltipTriggerProps\n>;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;\n\n  const {\n    children,\n    content,\n    width = 288,\n    closeDelay = 2500,\n    defaultOpen,\n    placement = 'top',\n    expand = false,\n    ...restProps\n  } = props;\n  const [isClicked, setIsClicked] = useState(false);\n\n  const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n    isOpen: props.isOpen,\n    defaultSelected: defaultOpen,\n    onChange(open) {\n      if (!open) {\n        setIsClicked(false);\n      }\n    },\n    ...props,\n  });\n\n  const state = useMemo(\n    () => ({\n      isOpen,\n      open: () => {\n        setOpen(true);\n      },\n      close: (immediate?: boolean) => {\n        if (immediate) {\n          setOpen(false);\n          return;\n        }\n        if (!isTouchDevice) {\n          if (isClicked) {\n            setTimeout(() => {\n              setOpen(false);\n              setIsClicked(false);\n            }, closeDelay);\n          }\n          if (!isClicked) {\n            setOpen(false);\n          }\n        } else {\n          setOpen(false);\n        }\n      },\n    }),\n    [isOpen, isClicked],\n  );\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n  triggerProps.onClick = () => {\n    state.open();\n    setIsClicked(true);\n  };\n\n  const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n    state.close(true);\n  });\n\n  const position = placement.split(' ')[0] as Position;\n  const classes = tooltip({ expand, isOpen: state.isOpen, placement, position });\n\n  return (\n    <Box\n      ref={clickAwayRef}\n      className={classes.trigger}\n      onMouseLeave={() => {\n        state.close();\n      }}\n      onFocus={() => {\n        state.open();\n      }}\n      onBlur={() => {\n        state.close();\n      }}\n    >\n      {cloneElement(children as ReactElement, {\n        ...triggerProps,\n        tabIndex: 0,\n      })}\n      <Box\n        ref={forwardedRef}\n        aria-describedby=\"tooltip\"\n        role=\"tooltip\"\n        className={classes.content}\n        style={{ width }}\n        onMouseEnter={() => {\n          state.open();\n        }}\n        {...mergeProps(tooltipProps, restProps)}\n      >\n        <Text size=\"sm\">{content}</Text>\n        {state.isOpen && (\n          <Box\n            onMouseEnter={() => {\n              state.open();\n            }}\n            className={classes.spacer}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","placement","expand","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","position","classes","tooltip","_jsxs","Box","cloneElement","mergeProps","_jsx","Text"],"mappings":"yrBAiCMA,MAAAA,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CACJ,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,IACR,WAAAC,EAAa,KACb,YAAAC,EACA,UAAAC,EAAY,MACZ,OAAAC,EAAS,GACT,GAAGC,CAAS,EACVV,EACE,CAACW,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAe,CAClE,OAAQhB,EAAM,OACd,gBAAiBO,EACjB,SAASU,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGZ,CACJ,CAAA,EAEKkB,EAAQC,EACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKb,EAWHa,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGN,CAAU,EAEVK,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAkBzB,EAAOkB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,KACNN,EAAAA,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAEKU,EAAWpB,EAAU,MAAM,GAAG,EAAE,CAAC,EACjCqB,EAAUC,EAAQ,CAAE,OAAArB,EAAQ,OAAQS,EAAM,OAAQ,UAAAV,EAAW,SAAAoB,CAAQ,CAAE,EAE7E,OACEG,EAACC,EACC,CAAA,IAAKN,EACL,UAAWG,EAAQ,QACnB,aAAc,IAAK,CACjBX,EAAM,MACR,CAAA,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAe,EAAa9B,EAA0B,CACtC,GAAGoB,EACH,SAAU,CACX,CAAA,EACDQ,EAACC,EAAG,CACF,IAAK/B,EAAY,mBACA,UACjB,KAAK,UACL,UAAW4B,EAAQ,QACnB,MAAO,CAAE,MAAAxB,CAAO,EAChB,aAAc,IAAK,CACjBa,EAAM,KACR,CAAA,EACI,GAAAgB,EAAWV,EAAcd,CAAS,EAAC,SAAA,CAEvCyB,EAACC,EAAK,CAAA,KAAK,KAAM,SAAAhC,CAAe,CAAA,EAC/Bc,EAAM,QACLiB,EAACH,EAAG,CACF,aAAc,IAAK,CACjBd,EAAM,KACR,CAAA,EACA,UAAWW,EAAQ,MAAM,CAAA,CAE5B,CAAA,CAAA,CACG,CACF,CAAA,CAEV,CAAC,EAED/B,EAAQ,YAAc"}

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

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

package/dist/es/recipes/tooltip.js

@@ -0,0 +1,2 @@
+import{sva as t}from"@styled/css";const a=t({slots:["trigger","content","spacer"],base:{trigger:{position:"relative",w:"auto"},content:{w:"max",maxW:72,color:"text.secondary",bg:"surface.primary",_dark:{bg:"surface.secondary"},position:"absolute",py:2,px:3,rounded:"xl",boxShadow:"0px 4px 20px 0px rgba(0, 0, 0, 0.10)",zIndex:"max",display:"none"},spacer:{position:"absolute"}},variants:{expand:{true:{trigger:{w:"full"}}},isOpen:{true:{content:{display:"block"}}},placement:{top:{content:{top:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(-100% - 0.75rem))"}},"top left":{content:{top:"0%",right:"100%",transform:"translateX(10%) translateY(calc(-100% - 0.75rem))"}},"top right":{content:{top:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(-100% - 0.75rem))"}},left:{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-50%)"}},"left top":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-75%)"}},"left bottom":{content:{top:"50%",left:"0%",transform:"translateX(calc(-100% - 0.75rem)) translateY(-25%)"}},right:{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-50%)"}},"right top":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-75%)"}},"right bottom":{content:{top:"50%",right:"0%",transform:"translateX(calc(100% + 0.75rem)) translateY(-25%)"}},bottom:{content:{bottom:"0%",left:"50%",transform:"translateX(-50%) translateY(calc(100% + 0.75rem))"}},"bottom left":{content:{bottom:"0%",right:"0%",transform:"translateX(10%) translateY(calc(100% + 0.75rem))"}},"bottom right":{content:{bottom:"0%",left:"0%",transform:"translateX(-10%) translateY(calc(100% + 0.75rem))"}}},position:{top:{spacer:{width:72,height:4,bottom:0,left:"50%",transform:"translateX(-50%) translateY(0.75rem)"}},bottom:{spacer:{width:72,height:4,top:0,left:"50%",transform:"translateX(-50%) translateY(-0.75rem)"}},left:{spacer:{width:4,height:48,top:"50%",right:-6,transform:"translateX(-0.75rem) translateY(-50%)"}},right:{spacer:{width:4,height:48,top:"50%",left:-6,transform:"translateX(0.75rem) translateY(-50%)"}}}}});export{a as tooltip};
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/recipes/tooltip.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const tooltip = sva({\n  slots: ['trigger', 'content', 'spacer'],\n  base: {\n    trigger: {\n      position: 'relative',\n      w: 'auto',\n    },\n    content: {\n      w: 'max',\n      maxW: 72,\n      color: 'text.secondary',\n      bg: 'surface.primary',\n      _dark: { bg: 'surface.secondary' },\n      position: 'absolute',\n      py: 2,\n      px: 3,\n      rounded: 'xl',\n      boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n      zIndex: 'max',\n      display: 'none',\n    },\n    spacer: {\n      position: 'absolute',\n    },\n  },\n  variants: {\n    expand: {\n      true: {\n        trigger: {\n          w: 'full',\n        },\n      },\n    },\n    isOpen: {\n      true: {\n        content: {\n          display: 'block',\n        },\n      },\n    },\n    placement: {\n      top: {\n        content: {\n          top: '0%',\n          left: '50%',\n          transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      'top left': {\n        content: {\n          top: '0%',\n          right: '100%',\n          transform: 'translateX(10%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      'top right': {\n        content: {\n          top: '0%',\n          left: '0%',\n          transform: 'translateX(-10%) translateY(calc(-100% - 0.75rem))',\n        },\n      },\n      left: {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-50%)',\n        },\n      },\n      'left top': {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-75%)',\n        },\n      },\n      'left bottom': {\n        content: {\n          top: '50%',\n          left: '0%',\n          transform: 'translateX(calc(-100% - 0.75rem)) translateY(-25%)',\n        },\n      },\n      right: {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-50%)',\n        },\n      },\n      'right top': {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-75%)',\n        },\n      },\n      'right bottom': {\n        content: {\n          top: '50%',\n          right: '0%',\n          transform: 'translateX(calc(100% + 0.75rem)) translateY(-25%)',\n        },\n      },\n      bottom: {\n        content: {\n          bottom: '0%',\n          left: '50%',\n          transform: 'translateX(-50%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n      'bottom left': {\n        content: {\n          bottom: '0%',\n          right: '0%',\n          transform: 'translateX(10%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n      'bottom right': {\n        content: {\n          bottom: '0%',\n          left: '0%',\n          transform: 'translateX(-10%) translateY(calc(100% + 0.75rem))',\n        },\n      },\n    },\n    position: {\n      top: {\n        spacer: {\n          width: 72,\n          height: 4,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%) translateY(0.75rem)',\n        },\n      },\n      bottom: {\n        spacer: {\n          width: 72,\n          height: 4,\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%) translateY(-0.75rem)',\n        },\n      },\n      left: {\n        spacer: {\n          width: 4,\n          height: 48,\n          top: '50%',\n          right: -6,\n          transform: 'translateX(-0.75rem) translateY(-50%)',\n        },\n      },\n      right: {\n        spacer: {\n          width: 4,\n          height: 48,\n          top: '50%',\n          left: -6,\n          transform: 'translateX(0.75rem) translateY(-50%)',\n        },\n      },\n    },\n  },\n});\n"],"names":["tooltip","sva"],"mappings":"kCAEO,MAAMA,EAAUC,EAAI,CACzB,MAAO,CAAC,UAAW,UAAW,QAAQ,EACtC,KAAM,CACJ,QAAS,CACP,SAAU,WACV,EAAG,MACJ,EACD,QAAS,CACP,EAAG,MACH,KAAM,GACN,MAAO,iBACP,GAAI,kBACJ,MAAO,CAAE,GAAI,mBAAqB,EAClC,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,QAAS,KACT,UAAW,uCACX,OAAQ,MACR,QAAS,MACV,EACD,OAAQ,CACN,SAAU,UACX,CACF,EACD,SAAU,CACR,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,EAAG,MACJ,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,QAAS,CACP,QAAS,OACV,CACF,CACF,EACD,UAAW,CACT,IAAK,CACH,QAAS,CACP,IAAK,KACL,KAAM,MACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,KACL,MAAO,OACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,KACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,KAAM,CACJ,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,WAAY,CACV,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,IAAK,MACL,KAAM,KACN,UAAW,oDACZ,CACF,EACD,MAAO,CACL,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,YAAa,CACX,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,IAAK,MACL,MAAO,KACP,UAAW,mDACZ,CACF,EACD,OAAQ,CACN,QAAS,CACP,OAAQ,KACR,KAAM,MACN,UAAW,mDACZ,CACF,EACD,cAAe,CACb,QAAS,CACP,OAAQ,KACR,MAAO,KACP,UAAW,kDACZ,CACF,EACD,eAAgB,CACd,QAAS,CACP,OAAQ,KACR,KAAM,KACN,UAAW,mDACZ,CACF,CACF,EACD,SAAU,CACR,IAAK,CACH,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CACF,EACD,OAAQ,CACN,OAAQ,CACN,MAAO,GACP,OAAQ,EACR,IAAK,EACL,KAAM,MACN,UAAW,uCACZ,CACF,EACD,KAAM,CACJ,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,MAAO,GACP,UAAW,uCACZ,CACF,EACD,MAAO,CACL,OAAQ,CACN,MAAO,EACP,OAAQ,GACR,IAAK,MACL,KAAM,GACN,UAAW,sCACZ,CACF,CACF,CACF,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","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","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","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","background]___[value:rgba(0, 0, 0, .7)]___[cond:_dark","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","background]___[value:surface.secondary]___[cond:_dark","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","borderRadius]___[value:3xl","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","maxWidth]___[value:72","width]___[value:max","backgroundColor]___[value:surface.secondary]___[cond:_dark","paddingInline]___[value:3","borderRadius]___[value:xl","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:40","height]___[value:40","background]___[value:surface.tertiary]___[cond:_dark","minHeight]___[value:16","width]___[value:16","height]___[value:16","borderRadius]___[value:0.75rem","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","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","width]___[value:4","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","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","height]___[value:76px","maxWidth]___[value:115px","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","pointerEvents]___[value:initial","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","width]___[value:10","alignItems]___[value:baseline","margin]___[value:1","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:positive.base","color]___[value:positive.darker]___[cond:_groupHover","color]___[value:positive.darker]___[cond:_groupHover<___>_dark","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","height]___[value:100vh","width]___[value:100vw","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","width]___[value:auto","width]___[value:max","maxWidth]___[value:72","background]___[value:surface.secondary]___[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:0%","transform]___[value:translateX(-10%) translateY(calc(-100% - 0.75rem))","top]___[value:50%","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","borderTopRadius]___[value:3xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","zIndex]___[value:10","paddingBottom]___[value:6","justifyContent]___[value:space-between","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","textStyle]___[value:neutral","transform]___[value:translateX(-100%)","transform]___[value:translateX(100%)","transform]___[value:translateX(0)","width]___[value:80","borderRightRadius]___[value:2xl","borderLeftRadius]___[value:2xl","--thickness]___[value:1px","borderBlockEndWidth]___[value:var(--thickness)","borderColor]___[value:surface.quaternary","gap]___[value:2.5","boxShadow]___[value:true","background]___[value:#ffc439","outlineColor]___[value:#ffc439","border]___[value:1px solid transparent","paddingBlock]___[value:2.5","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","flex]___[value:0 0 auto","borderRadius]___[value:9999px","animation]___[value:popIn 150ms","animation]___[value:popOut 150ms","animation]___[value:spin 1.5s linear infinite","stroke]___[value:text.primary","transformOrigin]___[value:center center","gap]___[value:1.5","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","borderRadius]___[value:3xl","background]___[value:surface.primary]___[cond:_dark","left]___[value:-50%","transform]___[value:skewX(-20deg)","backgroundImage]___[value:linear-gradient(90deg, transparent,rgba(0, 0, 0, .1), transparent)","backgroundImage]___[value:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent)]___[cond:_dark","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","fontVariant]___[value:no-contextual","color]___[value:positive.darker","width]___[value:1.125rem","height]___[value:1.125rem","outlineStyle]___[value:none","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","textStyle]___[value:subtle","height]___[value:24","width]___[value:24","padding]___[value:6","paddingTop]___[value:3","borderBottomColor]___[value:neutral.primary","borderBottomWidth]___[value:1px","width]___[value:6","flexDirection]___[value:column-reverse","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:40","height]___[value:40","background]___[value:surface.tertiary]___[cond:_dark","minHeight]___[value:16","width]___[value:16","height]___[value:16","borderRadius]___[value:0.75rem","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","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","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","height]___[value:76px","maxWidth]___[value:115px","backgroundColor]___[value:neutral.secondary]___[cond:_hover","backgroundColor]___[value:neutral.tertiary","height]___[value:100%","minWidth]___[value:20","paddingInline]___[value:10","pointerEvents]___[value:initial","color]___[value:text.primary]___[cond:_groupHover","height]___[value:6.25rem","background]___[value:text.primary/6","borderColor]___[value:text.primary/10","borderWidth]___[value:medium","borderRadius]___[value:52","backdropFilter]___[value:blur(24px)","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","backgroundColor]___[value:text.primary/1","backgroundColor]___[value:text.primary/5","backdropFilter]___[value:blur(8px)","borderColor]___[value:text.primary/6","paddingBlock]___[value:5","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","padding]___[value:10","overflow]___[value:scroll","textStyle]___[value:negative","width]___[value:114px","height]___[value:48px","translateX]___[value:6","translateY]___[value:6","translateX]___[value:3","translateY]___[value:3","width]___[value:10","alignItems]___[value:baseline","margin]___[value:1","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8"],"recipes":{}}}

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

@@ -1,12 +1,17 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { TooltipTriggerProps } from 'react-aria';
+type Placement = 'top' | 'top right' | 'top left' | 'left' | 'left top' | 'left bottom' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom right' | 'bottom left';
 export type TooltipProps = PropsWithChildren<{
     content: ReactNode;
     width?: number | string;
+    placement?: Placement;
+    expand?: boolean;
 } & TooltipTriggerProps>;
 declare const Tooltip: import("react").ForwardRefExoticComponent<{
     content: ReactNode;
     width?: string | number | undefined;
+    placement?: Placement | undefined;
+    expand?: boolean | undefined;
 } & TooltipTriggerProps & {
     children?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAgB,SAAS,EAAuD,MAAM,OAAO,CAAC;AACxH,OAAO,EAAE,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAEhF,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,GAAG,mBAAmB,CACxB,CAAC;AAIF,QAAA,MAAM,OAAO;aAPA,SAAS;;;;kDAoIpB,CAAC;AAIH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAgB,SAAS,EAAuD,MAAM,OAAO,CAAC;AACxH,OAAO,EAAE,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAIhF,KAAK,SAAS,GACV,KAAK,GACL,WAAW,GACX,UAAU,GACV,MAAM,GACN,UAAU,GACV,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,QAAQ,GACR,cAAc,GACd,aAAa,CAAC;AAElB,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C;IACE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,mBAAmB,CACxB,CAAC;AAEF,QAAA,MAAM,OAAO;aAPA,SAAS;;;;;;kDAsHpB,CAAC;AAIH,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,141 @@
+export declare const tooltip: import("../../styled-system/types").SlotRecipeRuntimeFn<"trigger" | "content" | "spacer", {
+    expand: {
+        true: {
+            trigger: {
+                w: "full";
+            };
+        };
+    };
+    isOpen: {
+        true: {
+            content: {
+                display: "block";
+            };
+        };
+    };
+    placement: {
+        top: {
+            content: {
+                top: "0%";
+                left: "50%";
+                transform: "translateX(-50%) translateY(calc(-100% - 0.75rem))";
+            };
+        };
+        'top left': {
+            content: {
+                top: "0%";
+                right: "100%";
+                transform: "translateX(10%) translateY(calc(-100% - 0.75rem))";
+            };
+        };
+        'top right': {
+            content: {
+                top: "0%";
+                left: "0%";
+                transform: "translateX(-10%) translateY(calc(-100% - 0.75rem))";
+            };
+        };
+        left: {
+            content: {
+                top: "50%";
+                left: "0%";
+                transform: "translateX(calc(-100% - 0.75rem)) translateY(-50%)";
+            };
+        };
+        'left top': {
+            content: {
+                top: "50%";
+                left: "0%";
+                transform: "translateX(calc(-100% - 0.75rem)) translateY(-75%)";
+            };
+        };
+        'left bottom': {
+            content: {
+                top: "50%";
+                left: "0%";
+                transform: "translateX(calc(-100% - 0.75rem)) translateY(-25%)";
+            };
+        };
+        right: {
+            content: {
+                top: "50%";
+                right: "0%";
+                transform: "translateX(calc(100% + 0.75rem)) translateY(-50%)";
+            };
+        };
+        'right top': {
+            content: {
+                top: "50%";
+                right: "0%";
+                transform: "translateX(calc(100% + 0.75rem)) translateY(-75%)";
+            };
+        };
+        'right bottom': {
+            content: {
+                top: "50%";
+                right: "0%";
+                transform: "translateX(calc(100% + 0.75rem)) translateY(-25%)";
+            };
+        };
+        bottom: {
+            content: {
+                bottom: "0%";
+                left: "50%";
+                transform: "translateX(-50%) translateY(calc(100% + 0.75rem))";
+            };
+        };
+        'bottom left': {
+            content: {
+                bottom: "0%";
+                right: "0%";
+                transform: "translateX(10%) translateY(calc(100% + 0.75rem))";
+            };
+        };
+        'bottom right': {
+            content: {
+                bottom: "0%";
+                left: "0%";
+                transform: "translateX(-10%) translateY(calc(100% + 0.75rem))";
+            };
+        };
+    };
+    position: {
+        top: {
+            spacer: {
+                width: number;
+                height: number;
+                bottom: number;
+                left: "50%";
+                transform: "translateX(-50%) translateY(0.75rem)";
+            };
+        };
+        bottom: {
+            spacer: {
+                width: number;
+                height: number;
+                top: number;
+                left: "50%";
+                transform: "translateX(-50%) translateY(-0.75rem)";
+            };
+        };
+        left: {
+            spacer: {
+                width: number;
+                height: number;
+                top: "50%";
+                right: number;
+                transform: "translateX(-0.75rem) translateY(-50%)";
+            };
+        };
+        right: {
+            spacer: {
+                width: number;
+                height: number;
+                top: "50%";
+                left: number;
+                transform: "translateX(0.75rem) translateY(-50%)";
+            };
+        };
+    };
+}>;
+//# sourceMappingURL=tooltip.d.ts.map

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

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

package/package.json

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