@magiclabs/ui-components 1.21.2 → 1.22.0

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

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

package/dist/cjs/components/inputs/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","HStack","mergeProps","Char","TextInput"],"mappings":"kiBA0CA,MAAMA,EAAWC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE/CC,MAACC,EAAI,KAAA,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAS,SAAA,IAAIJ,EAAUK,GAAQ,OAC9B,OAAOC,EAAAA,aAAaD,EAAO,CAAE,GAAGJ,EAAO,OAAOM,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,QAAM,wBAAwB,CAAG,CAAA,CACtG,CAAC,CACI,CAAA,CAEV,EAEKC,EAAaV,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAwB,IAElEC,EAAAA,IAACC,OAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAAA,SAAS,IAAIJ,EAAUK,GAAQ,OAC9B,OAAIK,EAAAA,eAAgCL,CAAK,EAChCC,EAAaD,aAAAA,EAAO,CAAE,GAAGJ,EAAO,OAAOM,EAAAF,EAAM,MAAM,SAAS,MAAAE,IAAA,OAAAA,EAAAC,EAAAA,MAAM,mBAAmB,CAAG,CAAA,EAE1F,IACT,CAAC,CACI,CAAA,CAEV,EAEKG,EAAeZ,EAAAA,WAAWa,EAAM,OAAA,EAChCC,EAASd,EAAAA,WAAWe,EAAI,OAAA,EACxBC,EAAShB,EAAAA,WAAWe,EAAAA,OAAI,EAExBE,EAAYC,EAA6C,WAAA,CAAChB,EAAOiB,IAAgB,CACrF,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,UAAAC,EAAY,OACZ,KAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,GACZ,aAAAC,CAAY,EACV1B,EACE2B,EAAWP,IAAS,KAAO,GAAK,GAEhCQ,EAAcC,EAAAA,OAAO,IAAI,EAEzBC,EAAMb,GAAgBW,EAEtB,CAAE,WAAAG,EAAY,WAAAC,EAAY,iBAAAC,EAAkB,kBAAAC,EAAmB,UAAAC,EAAW,iBAAAC,CAAgB,EAAKC,EAAAA,aACnG,CAAE,GAAGrC,EAAO,WAAYmB,GAAY,GAAO,UAAW,CAAC,CAACO,GACxDI,CAAkC,EAG9B,CAAE,WAAAQ,CAAY,EAAGC,eAAa,CAClC,UAAWf,GAAa,EACzB,CAAA,EACK,CAAE,WAAAgB,CAAU,EAAKC,EAAAA,SAAS,CAAE,WAAYtB,GAAY,EAAK,CAAE,EAEjE,OAAOuB,EAAAA,WAAW1C,EAAM,SAAU2C,GAAQ,CACxC,MAAMC,EAAWD,EAAM,IAAI9C,CAAQ,EAC7BgD,EAAaF,EAAM,IAAInC,CAAU,EACjCsC,EAAoBH,EAAM,SAASjC,CAAY,EAC/CqC,EAAcJ,EAAM,SAAS/B,CAAM,EACnCoC,EAAcL,EAAM,SAAS7B,CAAM,EAEnCmC,EAAUC,EAAU,UAAA,CACxB,KAAA9B,EACA,UAAAC,EACA,SAAAF,EACA,QAASgB,CACV,CAAA,EAED,OACEgB,EAAAA,KAACC,EAAAA,QAAO,UAAWC,EAAGJ,GAAAA,EAAQ,UAAWxB,CAAS,YAC/CP,GACCjB,EAAAA,IAAO,QAAA,CAAA,UAAWgD,EAAQ,MAAK,GAAMlB,EAClC,SAAAb,IAGLiC,EAAAA,KAACG,EAAAA,OAAM,CAAC,UAAWL,EAAQ,eAAc,SAAA,CACtCL,GAAY,CACX,GAAGA,EACH,MAAO,CAAE,GAAGA,EAAS,MAAO,UAAWK,EAAQ,SAAU,MAAOtB,EAAU,OAAQA,CAAU,CAC7F,EACAoB,GAAe9C,MAACY,EAAS,QAAA,CAAA,GAAAkC,EAAa,OAAQ,CAAE,MAAOxC,EAAAA,MAAM,sBAAsB,CAAG,CAAA,CAAA,EACvFN,EAAAA,IAAA,QAAA,CAAO,IAAK6B,EAAK,UAAWmB,EAAQ,MAAW,GAAAM,EAAWvB,WAAAA,EAAYM,EAAYE,CAAU,EAAC,GAAMlB,CAAI,CAAA,EACtG0B,GAAe/C,EAAAA,IAACY,EAAAA,QAAI,CAAA,GAAKmC,EAAa,OAAQ,CAAE,MAAOzC,EAAAA,MAAM,sBAAsB,CAAC,CAAM,CAAA,EAC1FsC,GAAc,CACb,GAAGA,EACH,MAAO,CAAE,GAAGA,EAAW,MAAO,UAAWI,EAAQ,WAAY,MAAOtB,EAAU,OAAQA,CAAU,GAEjGmB,GACC7C,EAAAA,IAACC,EAAAA,KAAK,CAAA,WAAW,SAAS,eAAe,SAAS,UAAW+C,EAAQ,aACnE,SAAAhD,EAAAA,IAACU,EAAAA,QAAM,CAAA,GAAKmC,EAAmB,QAAQ,OAAO,KAAM1B,CAAQ,CAAA,CAAA,CAAA,CAE/D,CAAA,CAAA,EAEFG,GACCtB,EAAAA,IAAK,MAAA,CAAA,UAAWgD,EAAQ,YAAW,GAAMhB,EAAgB,SACtDV,CACG,CAAA,EAEPY,GACClC,EAAAA,IAACY,EAAAA,QAAK,CAAA,QAAQ,WAAYqB,EAAmB,KAAM,KAAM,OAAQ,CAAE,WAAY,OAC5E,SAAAE,EAAiB,OAAS,EAAIA,EAAiB,KAAK,GAAG,EAAIV,CACvD,CAAA,CACR,CACM,CAAA,CAEb,CAAC,CACH,CAAC,EAEK8B,EAAOxC,aAAwC,CAAChB,EAAOiB,IAAgB,CAC3E,KAAM,CAAE,SAAAE,EAAU,UAAAK,EAAW,UAAAC,EAAY,GAAI,KAAAH,CAAM,EAAGtB,EAEhD4B,EAAcC,EAAAA,OAAO,IAAI,EAEzBC,EAAMb,GAAgBW,EAEtB,CAAE,WAAAI,CAAY,EAAGK,EAAAA,aAAa,CAAE,GAAGrC,EAAO,WAAYmB,GAAY,EAAO,EAAEW,CAAkC,EAE7G,CAAE,WAAAQ,CAAU,EAAKC,eAAa,CAAE,UAAWf,GAAa,EAAK,CAAE,EAC/D,CAAE,WAAAgB,CAAU,EAAKC,EAAAA,SAAS,CAAE,WAAYtB,GAAY,EAAK,CAAE,EAE3D8B,EAAUC,EAAAA,UAAU,CAAE,KAAM,GAAM,SAAA/B,CAAU,CAAA,EAElD,OACElB,aAAK,UAAWoD,EAAAA,GAAGJ,EAAQ,UAAWA,EAAQ,eAAgBxB,CAAS,WACrExB,EAAAA,IACE,QAAA,CAAA,IAAK6B,EACL,UAAWmB,EAAQ,MAAK,GACpBM,EAAAA,WAAWvB,EAAYM,EAAYE,CAAU,EACjD,KAAM,KACFlB,CAAI,CAAA,CAEN,CAAA,CAEV,CAAC,EAEYmC,EAAY,OAAO,OAAO1C,EAAW,CAChD,SAAAlB,EACA,WAAAW,EACA,aAAAE,EACA,KAAA8C,EACA,OAAA5C,EACA,OAAAE,CACD,CAAA,EAEDC,EAAU,YAAc,YACxByC,EAAK,YAAc"}
+{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { css, cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n  required?: boolean;\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n    required,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label} {required && <span className={css({ color: 'negative.darker' })}>*</span>}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","required","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","css","HStack","mergeProps","Char","TextInput"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","HStack","mergeProps","Char","TextInput"],"mappings":"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"}
+{"version":3,"file":"text-input.js","sources":["../../../../src/components/inputs/text-input.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  isValidElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport type { AriaTextFieldProps } from 'react-aria';\nimport { mergeProps, useFocusRing, useHover, useTextField } from 'react-aria';\n\nimport { Button, Text } from '@components/primitives';\nimport { textInput } from '@recipes/text-input';\nimport { css, cx } from '@styled/css';\nimport { Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\n\nimport { createHost, createSlot } from 'create-slots';\n\nexport type TextInputProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n  errorMessage?: string;\n  children?: ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  alignText?: 'left' | 'center' | 'right';\n  required?: boolean;\n};\n\nexport type CharProps = AriaTextFieldProps & {\n  className?: string;\n  disabled?: boolean;\n  attr?: InputHTMLAttributes<HTMLInputElement>;\n};\n\nexport type ActionIconProps = HTMLAttributes<HTMLElement> & {\n  onClick: () => void;\n};\n\nconst TypeIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        return cloneElement(child, { ...props, color: child.props.color ?? token('colors.neutral.primary') });\n      })}\n    </Flex>\n  );\n});\n\nconst ActionIcon = createSlot(({ children, ...props }: ActionIconProps) => {\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {Children.map(children, child => {\n        if (isValidElement<ActionIconProps>(child)) {\n          return cloneElement(child, { ...props, color: child.props.color ?? token('colors.brand.base') });\n        }\n        return null;\n      })}\n    </Flex>\n  );\n});\n\nconst ActionButton = createSlot(Button);\nconst Prefix = createSlot(Text);\nconst Suffix = createSlot(Text);\n\nconst Component = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => {\n  const {\n    label,\n    disabled,\n    size = 'md',\n    alignText = 'left',\n    attr,\n    description,\n    autoFocus,\n    className = '',\n    errorMessage,\n    required,\n  } = props;\n  const iconSize = size === 'sm' ? 16 : 20;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors } = useTextField(\n    { ...props, isDisabled: disabled ?? false, isInvalid: !!errorMessage },\n    ref as RefObject<HTMLInputElement>,\n  );\n\n  const { focusProps } = useFocusRing({\n    autoFocus: autoFocus ?? false,\n  });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  return createHost(props.children, slots => {\n    const typeIcon = slots.get(TypeIcon);\n    const actionIcon = slots.get(ActionIcon);\n    const actionButtonProps = slots.getProps(ActionButton);\n    const prefixProps = slots.getProps(Prefix);\n    const suffixProps = slots.getProps(Suffix);\n\n    const classes = textInput({\n      size,\n      alignText,\n      disabled,\n      isError: isInvalid,\n    });\n\n    return (\n      <VStack className={cx(classes.container, className)}>\n        {label && (\n          <label className={classes.label} {...labelProps}>\n            {label} {required && <span className={css({ color: 'negative.darker' })}>*</span>}\n          </label>\n        )}\n        <HStack className={classes.inputContainer}>\n          {typeIcon && {\n            ...typeIcon,\n            props: { ...typeIcon.props, className: classes.typeIcon, width: iconSize, height: iconSize },\n          }}\n          {prefixProps && <Text {...prefixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n          {suffixProps && <Text {...suffixProps} styles={{ color: token('colors.text.tertiary') }} />}\n          {actionIcon && {\n            ...actionIcon,\n            props: { ...actionIcon.props, className: classes.actionIcon, width: iconSize, height: iconSize },\n          }}\n          {actionButtonProps && (\n            <Flex alignItems=\"center\" justifyContent=\"center\" className={classes.actionButton}>\n              <Button {...actionButtonProps} variant=\"text\" size={size} />\n            </Flex>\n          )}\n        </HStack>\n        {description && (\n          <div className={classes.description} {...descriptionProps}>\n            {description}\n          </div>\n        )}\n        {isInvalid && (\n          <Text variant=\"error\" {...errorMessageProps} size={'sm'} styles={{ fontWeight: '400' }}>\n            {validationErrors.length > 0 ? validationErrors.join(' ') : errorMessage}\n          </Text>\n        )}\n      </VStack>\n    );\n  });\n});\n\nconst Char = forwardRef<HTMLInputElement, CharProps>((props, forwardedRef) => {\n  const { disabled, autoFocus, className = '', attr } = props;\n\n  const internalRef = useRef(null);\n  // forwardedRef is null until after first render\n  const ref = forwardedRef || internalRef;\n\n  const { inputProps } = useTextField({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLInputElement>);\n\n  const { focusProps } = useFocusRing({ autoFocus: autoFocus ?? false });\n  const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n\n  const classes = textInput({ char: true, disabled });\n\n  return (\n    <div className={cx(classes.container, classes.inputContainer, className)}>\n      <input\n        ref={ref}\n        className={classes.input}\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        size={1}\n        {...attr}\n      />\n    </div>\n  );\n});\n\nexport const TextInput = Object.assign(Component, {\n  TypeIcon,\n  ActionIcon,\n  ActionButton,\n  Char,\n  Prefix,\n  Suffix,\n});\n\nComponent.displayName = 'TextInput';\nChar.displayName = 'TextInputChar';\n"],"names":["TypeIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","_a","token","ActionIcon","isValidElement","ActionButton","Button","Prefix","Text","Suffix","Component","forwardRef","forwardedRef","label","disabled","size","alignText","attr","description","autoFocus","className","errorMessage","required","iconSize","internalRef","useRef","ref","labelProps","inputProps","descriptionProps","errorMessageProps","isInvalid","validationErrors","useTextField","focusProps","useFocusRing","hoverProps","useHover","createHost","slots","typeIcon","actionIcon","actionButtonProps","prefixProps","suffixProps","classes","textInput","_jsxs","VStack","cx","css","HStack","mergeProps","Char","TextInput"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  trigger?: 'click' | 'hover';\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n    const trigger = props.trigger || DEFAULT_TRIGGER;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleTrigger = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        <Button\n          ref={triggerRef}\n          {...mergeProps(triggerProps, props)}\n          onKeyDown={handleKeyDown}\n          onHover={() => trigger === 'hover' && handleTrigger()}\n          onPress={() => trigger === 'click' && handleTrigger()}\n        >\n          {leadingIcon && (\n            <Button.LeadingIcon>\n              {leadingIcon && { ...leadingIcon, props: { ...leadingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.LeadingIcon>\n          )}\n          {trailingIcon && (\n            <Button.TrailingIcon>\n              {trailingIcon && { ...trailingIcon, props: { ...trailingIcon.props, width: iconSize, height: iconSize } }}\n            </Button.TrailingIcon>\n          )}\n        </Button>\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","LeadingIcon","props","Center","Children","child","cloneElement","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","trigger","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","leadingIcon","trailingIcon","_jsxs","Button","Overlay","cx","vstack","Popover"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/primitives/popover.tsx"],"sourcesContent":["import { Button, ButtonProps } from '@components/primitives';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { cx } from '@styled/css';\nimport { Box, Center } from '@styled/jsx';\nimport { vstack } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport {\n  Children,\n  ComponentProps,\n  PropsWithChildren,\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\nimport type { AriaPopoverProps, Placement } from 'react-aria';\nimport { Overlay, mergeProps, useOverlayTrigger, usePopover } from 'react-aria';\n\ninterface OverlayTriggerProps extends ButtonProps {\n  isOpen?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  trigger?: 'click' | 'hover';\n}\n\ninterface OverlayTriggerState {\n  readonly isOpen: boolean;\n  setOpen(isOpen: boolean): void;\n  open(): void;\n  close(): void;\n  toggle(): void;\n}\n\ntype PopoverContentProps = Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'> & {\n  children?: ReactNode;\n  state?: OverlayTriggerState;\n} & ComponentProps<'div'>;\n\nexport const DEFAULT_PLACEMENT: Placement = 'bottom left';\nexport const DEFAULT_OFFSET = 8;\n\nconst DEFAULT_TRIGGER: string = 'hover';\n\nconst PopoverContent = createSlot(({ children }: PopoverContentProps) => <>{children}</>);\n\nconst Trigger = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n  return (\n    <Center>\n      {Children.map(children, child => {\n        return cloneElement(child, props);\n      })}\n    </Center>\n  );\n});\n\nexport type PopoverProps = PropsWithChildren<OverlayTriggerProps>;\n\nexport const PopoverHost = ({ children, ...props }: PopoverProps) => {\n  return createHost(children, slots => {\n    const { isSelected, setSelected: setOpen } = useToggleState({\n      isOpen: props.isOpen,\n      defaultSelected: props.defaultOpen,\n      onChange: props.onOpenChange,\n      ...props,\n    });\n\n    const isOpen = props.isOpen !== undefined ? props.isOpen : isSelected;\n    const safeZoneRadius = 24;\n    const trigger = props.trigger || DEFAULT_TRIGGER;\n\n    const state = useMemo(\n      () => ({\n        isOpen,\n        open: () => {\n          setOpen(true);\n        },\n        close: () => {\n          setOpen(false);\n        },\n        setOpen(value: boolean) {\n          setOpen(value);\n        },\n        toggle() {},\n      }),\n      [isOpen],\n    );\n\n    const popoverContentProps = slots.getProps(PopoverContent);\n\n    const triggerRef = useRef<HTMLDivElement>(null);\n    const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { popoverProps, underlayProps } = usePopover(\n      {\n        placement: DEFAULT_PLACEMENT,\n        offset: DEFAULT_OFFSET,\n        popoverRef: contentRef,\n        triggerRef,\n        ...popoverContentProps,\n      },\n      state,\n    );\n\n    const contentProps = mergeProps(popoverContentProps, popoverProps);\n\n    // Need to override zIndex set by react-aria so popover displays over iframe\n    if (contentProps?.style?.zIndex) {\n      contentProps.style.zIndex = token('zIndex.max');\n    }\n\n    const handleTrigger = useCallback(() => {\n      state.open();\n    }, [state]);\n\n    const handleMouseLeave = useCallback(\n      (event: MouseEvent) => {\n        const buttonRect = triggerRef.current?.getBoundingClientRect();\n        const popoverRect = contentRef.current?.getBoundingClientRect();\n\n        if (buttonRect && popoverRect) {\n          const withinButtonSafeZone =\n            event.clientX >= buttonRect.left - safeZoneRadius &&\n            event.clientX <= buttonRect.right + safeZoneRadius &&\n            event.clientY >= buttonRect.top - safeZoneRadius &&\n            event.clientY <= buttonRect.bottom + safeZoneRadius;\n\n          const withinPopoverSafeZone =\n            event.clientX >= popoverRect.left - safeZoneRadius &&\n            event.clientX <= popoverRect.right + safeZoneRadius &&\n            event.clientY >= popoverRect.top - safeZoneRadius &&\n            event.clientY <= popoverRect.bottom + safeZoneRadius;\n\n          if (!withinButtonSafeZone && !withinPopoverSafeZone) {\n            state.close();\n          }\n        }\n      },\n      [state],\n    );\n\n    const focusFirstInteractiveElement = () => {\n      if (contentRef.current) {\n        const interactiveElements = contentRef.current.querySelectorAll(\n          'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (interactiveElements.length > 0) {\n          (interactiveElements[0] as HTMLElement).focus();\n        }\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        if (isOpen) {\n          state.close();\n        } else {\n          state.open();\n          setTimeout(focusFirstInteractiveElement, 0);\n        }\n      }\n    };\n\n    useEffect(() => {\n      document.addEventListener('mousemove', handleMouseLeave);\n      return () => {\n        document.removeEventListener('mousemove', handleMouseLeave);\n      };\n    }, [handleMouseLeave]);\n\n    const iconSize = props.size === 'sm' ? 16 : 24;\n    const triggerEle = slots.get(Trigger);\n    const leadingIcon = slots.get(LeadingIcon);\n    const trailingIcon = slots.get(TrailingIcon);\n\n    return (\n      <>\n        {triggerEle ? (\n          <Box display=\"inline-block\" ref={triggerRef} {...mergeProps(triggerProps, props)}>\n            {triggerEle && { ...triggerEle, props: { ...triggerEle.props } }}\n          </Box>\n        ) : (\n          <Box display=\"inline-block\" ref={triggerRef}>\n            <Button\n              {...mergeProps(triggerProps, props)}\n              onKeyDown={handleKeyDown}\n              onHover={() => trigger === 'hover' && handleTrigger()}\n              onPress={() => trigger === 'click' && handleTrigger()}\n            >\n              {leadingIcon && (\n                <Button.LeadingIcon>\n                  {leadingIcon && {\n                    ...leadingIcon,\n                    props: { ...leadingIcon.props, width: iconSize, height: iconSize },\n                  }}\n                </Button.LeadingIcon>\n              )}\n              {trailingIcon && (\n                <Button.TrailingIcon>\n                  {trailingIcon && {\n                    ...trailingIcon,\n                    props: { ...trailingIcon.props, width: iconSize, height: iconSize },\n                  }}\n                </Button.TrailingIcon>\n              )}\n            </Button>\n          </Box>\n        )}\n        {isOpen && (\n          <Overlay {...overlayProps}>\n            <div {...underlayProps} className=\"underlay\" />\n            <div\n              ref={contentRef}\n              {...contentProps}\n              className={cx(\n                vstack({\n                  bg: 'surface.primary',\n                  p: 3,\n                  gap: 0,\n                  color: 'text.secondary',\n                  borderWidth: 1,\n                  borderColor: 'neutral.secondary',\n                  borderRadius: 'xl',\n                  boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n                  maxW: 52,\n                  alignItems: 'start',\n                }),\n                contentProps.className,\n              )}\n            >\n              {slots.get(PopoverContent)}\n            </div>\n          </Overlay>\n        )}\n      </>\n    );\n  });\n};\n\nexport const Popover = Object.assign(PopoverHost, {\n  Trigger,\n  LeadingIcon,\n  TrailingIcon,\n  Content: PopoverContent,\n});\n\nexport default Popover;\n"],"names":["DEFAULT_PLACEMENT","DEFAULT_OFFSET","DEFAULT_TRIGGER","PopoverContent","createSlot","children","_jsx","_Fragment","Trigger","props","Center","Children","child","cloneElement","LeadingIcon","TrailingIcon","PopoverHost","createHost","slots","isSelected","setOpen","useToggleState","isOpen","safeZoneRadius","trigger","state","useMemo","value","popoverContentProps","triggerRef","useRef","triggerProps","overlayProps","useOverlayTrigger","contentRef","popoverProps","underlayProps","usePopover","contentProps","mergeProps","_a","token","handleTrigger","useCallback","handleMouseLeave","event","buttonRect","popoverRect","_b","withinButtonSafeZone","withinPopoverSafeZone","focusFirstInteractiveElement","interactiveElements","handleKeyDown","useEffect","iconSize","triggerEle","leadingIcon","trailingIcon","_jsxs","Box","Button","Overlay","cx","vstack","Popover"],"mappings":"ktBAyCO,MAAMA,EAA+B,cAC/BC,EAAiB,EAExBC,GAA0B,QAE1BC,EAAiBC,EAAW,CAAC,CAAE,SAAAC,CAA+B,IAAKC,EAAAC,EAAA,CAAA,SAAGF,CAAQ,CAAA,CAAI,EAElFG,EAAUJ,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGI,CAAO,IAE9CH,EAACI,EAAM,CAAA,SACJC,EAAS,IAAIN,EAAUO,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKK,EAAcV,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGI,CAAO,IAElDH,EAACI,EAAM,CAAA,SACJC,EAAS,IAAIN,EAAUO,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeX,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGI,CAAO,IAEnDH,EAACI,EAAM,CAAA,SACJC,EAAS,IAAIN,EAAUO,GACfC,EAAaD,EAAOH,CAAK,CACjC,CACM,CAAA,CAEZ,EAIYO,EAAc,CAAC,CAAE,SAAAX,EAAU,GAAGI,CAAqB,IACvDQ,GAAWZ,EAAUa,GAAQ,OAClC,KAAM,CAAE,WAAAC,EAAY,YAAaC,CAAO,EAAKC,EAAe,CAC1D,OAAQZ,EAAM,OACd,gBAAiBA,EAAM,YACvB,SAAUA,EAAM,aAChB,GAAGA,CACJ,CAAA,EAEKa,EAASb,EAAM,SAAW,OAAYA,EAAM,OAASU,EACrDI,EAAiB,GACjBC,EAAUf,EAAM,SAAWP,GAE3BuB,EAAQC,GACZ,KAAO,CACL,OAAAJ,EACA,KAAM,IAAK,CACTF,EAAQ,EAAI,CACd,EACA,MAAO,IAAK,CACVA,EAAQ,EAAK,CACf,EACA,QAAQO,EAAc,CACpBP,EAAQO,CAAK,CACf,EACA,SACD,CAAA,GACD,CAACL,CAAM,CAAC,EAGJM,EAAsBV,EAAM,SAASf,CAAc,EAEnD0B,EAAaC,EAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,CAAc,EAAGC,GAAkB,CAAE,KAAM,QAAU,EAAER,EAAOI,CAAU,EAExFK,EAAaJ,EAAuB,IAAI,EACxC,CAAE,aAAAK,EAAc,cAAAC,CAAe,EAAGC,GACtC,CACE,UAAWrC,EACX,OAAQC,EACR,WAAYiC,EACZ,WAAAL,EACA,GAAGD,GAELH,CAAK,EAGDa,EAAeC,EAAWX,EAAqBO,CAAY,EAG7D,GAAAK,EAAAF,GAAc,SAAK,MAAAE,IAAA,SAAAA,EAAE,SACvBF,EAAa,MAAM,OAASG,GAAM,YAAY,GAGhD,MAAMC,EAAgBC,EAAY,IAAK,CACrClB,EAAM,KAAI,CACZ,EAAG,CAACA,CAAK,CAAC,EAEJmB,EAAmBD,EACtBE,GAAqB,SACpB,MAAMC,GAAaN,EAAAX,EAAW,WAAO,MAAAW,IAAA,OAAA,OAAAA,EAAE,sBAAA,EACjCO,GAAcC,EAAAd,EAAW,WAAO,MAAAc,IAAA,OAAA,OAAAA,EAAE,wBAExC,GAAIF,GAAcC,EAAa,CAC7B,MAAME,EACJJ,EAAM,SAAWC,EAAW,KAAOvB,GACnCsB,EAAM,SAAWC,EAAW,MAAQvB,GACpCsB,EAAM,SAAWC,EAAW,IAAMvB,GAClCsB,EAAM,SAAWC,EAAW,OAASvB,EAEjC2B,EACJL,EAAM,SAAWE,EAAY,KAAOxB,GACpCsB,EAAM,SAAWE,EAAY,MAAQxB,GACrCsB,EAAM,SAAWE,EAAY,IAAMxB,GACnCsB,EAAM,SAAWE,EAAY,OAASxB,EAEpC,CAAC0B,GAAwB,CAACC,GAC5BzB,EAAM,MAAK,CAEf,CACF,EACA,CAACA,CAAK,CAAC,EAGH0B,EAA+B,IAAK,CACxC,GAAIjB,EAAW,QAAS,CACtB,MAAMkB,EAAsBlB,EAAW,QAAQ,iBAC7C,qEAAqE,EAEnEkB,EAAoB,OAAS,GAC9BA,EAAoB,CAAC,EAAkB,OAE5C,CACF,EAEMC,EAAiBR,GAA8B,CAC/CA,EAAM,MAAQ,UAChBA,EAAM,eAAc,EAChBvB,EACFG,EAAM,SAENA,EAAM,OACN,WAAW0B,EAA8B,CAAC,GAGhD,EAEAG,GAAU,KACR,SAAS,iBAAiB,YAAaV,CAAgB,EAChD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAgB,CAC5D,GACC,CAACA,CAAgB,CAAC,EAErB,MAAMW,EAAW9C,EAAM,OAAS,KAAO,GAAK,GACtC+C,EAAatC,EAAM,IAAIV,CAAO,EAC9BiD,EAAcvC,EAAM,IAAIJ,CAAW,EACnC4C,EAAexC,EAAM,IAAIH,CAAY,EAE3C,OACE4C,eACGH,EACClD,EAACsD,EAAI,CAAA,QAAQ,eAAe,IAAK/B,EAAU,GAAMU,EAAWR,EAActB,CAAK,EAAC,SAC7E+C,GAAc,CAAE,GAAGA,EAAY,MAAO,CAAE,GAAGA,EAAW,MAAS,CAAA,CAAA,EAGlElD,EAACsD,EAAI,CAAA,QAAQ,eAAe,IAAK/B,EAC/B,SAAA8B,EAACE,EACK,CAAA,GAAAtB,EAAWR,EAActB,CAAK,EAClC,UAAW4C,EACX,QAAS,IAAM7B,IAAY,SAAWkB,EAAa,EACnD,QAAS,IAAMlB,IAAY,SAAWkB,IAAe,SAAA,CAEpDe,GACCnD,EAACuD,EAAO,YACL,CAAA,SAAAJ,GAAe,CACd,GAAGA,EACH,MAAO,CAAE,GAAGA,EAAY,MAAO,MAAOF,EAAU,OAAQA,CAAU,EAEjD,CAAA,EAEtBG,GACCpD,EAACuD,EAAO,aACL,CAAA,SAAAH,GAAgB,CACf,GAAGA,EACH,MAAO,CAAE,GAAGA,EAAa,MAAO,MAAOH,EAAU,OAAQA,CAAU,CACpE,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEC,CAAA,EAEPjC,GACCqC,EAACG,GAAO,CAAA,GAAK9B,EAAY,SAAA,CACvB1B,YAAS8B,EAAe,UAAU,UAAU,CAAA,EAC5C9B,EAAA,MAAA,CACE,IAAK4B,EACD,GAAAI,EACJ,UAAWyB,GACTC,GAAO,CACL,GAAI,kBACJ,EAAG,EACH,IAAK,EACL,MAAO,iBACP,YAAa,EACb,YAAa,oBACb,aAAc,KACd,UAAW,uCACX,KAAM,GACN,WAAY,OACb,CAAA,EACD1B,EAAa,SAAS,WAGvBpB,EAAM,IAAIf,CAAc,CAAC,CAAA,CACtB,GAET,CAAA,CAAA,CAGP,CAAC,EAGU8D,EAAU,OAAO,OAAOjD,EAAa,CAChD,QAAAR,EACA,YAAAM,EACA,aAAAC,EACA,QAASZ,CACV,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","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","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","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","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:pretty","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","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","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","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","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","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","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","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
+{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.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","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","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","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","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","opacity]___[value:0.3","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:left","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:pretty","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","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","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","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","width]___[value:72","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","filter]___[value:blur(10px)","textWrap]___[value:nowrap","textOverflow]___[value:ellipsis","zIndex]___[value:10","gap]___[value:2","width]___[value:20","height]___[value:20","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","background]___[value:brand.lightest]___[cond:_hover","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","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","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","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","gap]___[value:3","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","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","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","fontWeight]___[value:bold","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}

package/dist/types/components/inputs/text-input.d.ts

@@ -8,6 +8,7 @@ export type TextInputProps = AriaTextFieldProps & {
     children?: ReactNode;
     size?: 'sm' | 'md' | 'lg';
     alignText?: 'left' | 'center' | 'right';
+    required?: boolean;
 };
 export type CharProps = AriaTextFieldProps & {
     className?: string;
@@ -25,6 +26,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<AriaTe
     children?: ReactNode;
     size?: "sm" | "md" | "lg" | undefined;
     alignText?: "left" | "center" | "right" | undefined;
+    required?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement>> & {
     TypeIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
     ActionIcon: ({ children, ...props }: ActionIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/inputs/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,cAAc,EACd,mBAAmB,EAEnB,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAWrD,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,kBAAkB,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA0IF,eAAO,MAAM,SAAS;;;;;eAvJT,SAAS;;;;;yCAyBiC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIpE,CAAC"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,cAAc,EACd,mBAAmB,EAEnB,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAWrD,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,kBAAkB,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;eAzJT,SAAS;;;;;;yCA0BiC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIpE,CAAC"}

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

@@ -23,6 +23,7 @@ export declare const DEFAULT_OFFSET = 8;
 export type PopoverProps = PropsWithChildren<OverlayTriggerProps>;
 export declare const PopoverHost: ({ children, ...props }: PopoverProps) => JSX.Element;
 export declare const Popover: (({ children, ...props }: PopoverProps) => JSX.Element) & {
+    Trigger: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
     LeadingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
     TrailingIcon: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
     Content: ({ children }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

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