npm - @magiclabs/ui-components - Versions diffs - 1.23.1 → 1.23.2 - Mend

@magiclabs/ui-components 1.23.1 → 1.23.2

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

Files changed (103) hide show

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

@@ -1,2 +1,2 @@
-import{jsxs as i,Fragment as w,jsx as r}from"react/jsx-runtime";import"@styled/tokens";import y from"../icons/ico-caret-down.js";import a 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 j from"../primitives/text.js";import{Box as s,HStack as k}from"@styled/jsx";import{useState as p,useRef as v,useEffect as c,useCallback as E}from"react";const T=({isOpen:t=!1,title:u,onToggle:e,children:d})=>{const[f,m]=p(t),[b,l]=p(t),n=v(null);c(()=>{let o;return t?(m(!0),o=setTimeout(()=>l(!0),10)):l(!1),()=>clearTimeout(o)},[t]),c(()=>{const o=g=>{n.current&&!n.current.contains(g.target)&&e(!1)};return document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}},[e]);const h=()=>{t||m(!1)},x=E(()=>{e(!1)},[e]);return i(w,{children:[r(s,{position:"absolute",display:t?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",backdropFilter:"blur(3px)"}),f&&i(s,{ref:n,position:"absolute",transform:b?"translateY(0)":"translateY(100%)",transition:"transform 0.3s",bottom:0,left:0,right:0,bg:"surface.primary",rounded:"xl",boxShadow:"0px -12px 56px 0px rgba(119, 118, 122, 0.15)",onTransitionEnd:h,children:[i(k,{justifyContent:"space-between",p:6,pb:5,children:[r(j,{styles:{fontWeight:"bold"},children:u}),r(a,{size:"sm",variant:"neutral",onPress:x,children:r(a.LeadingIcon,{children:r(y,{})})})]}),r(s,{px:6,pb:8,children:d})]})]})};export{T as Drawer};
+import{jsxs as i,Fragment as w,jsx as r}from"react/jsx-runtime";import"@styled/tokens";import k from"../icons/ico-caret-down.js";import l 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 v from"../primitives/text.js";import{Box as s,HStack as y}from"@styled/jsx";import{useState as p,useRef as E,useEffect as c,useCallback as T}from"react";const j=({isOpen:t=!1,title:u,onToggle:e,children:d})=>{const[f,m]=p(t),[b,a]=p(t),n=E(null);c(()=>{let o;return t?(m(!0),o=setTimeout(()=>a(!0),10)):a(!1),()=>clearTimeout(o)},[t]),c(()=>{const o=g=>{n.current&&!n.current.contains(g.target)&&e(!1)};return document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}},[e]);const h=()=>{t||m(!1)},x=T(()=>{e(!1)},[e]);return i(w,{children:[r(s,{position:"absolute",display:t?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",backdropFilter:"blur(3px)"}),f&&i(s,{ref:n,position:"absolute",transform:b?"translateY(0)":"translateY(100%)",transition:"transform 0.3s",bottom:0,left:0,right:0,bg:"surface.primary",rounded:"xl",boxShadow:"0px -12px 56px 0px rgba(119, 118, 122, 0.15)",onTransitionEnd:h,children:[i(y,{justifyContent:"space-between",p:6,pb:5,children:[r(v,{fontWeight:"bold",children:u}),r(l,{size:"sm",variant:"neutral",onPress:x,children:r(l.LeadingIcon,{children:r(k,{})})})]}),r(s,{px:6,pb:8,children:d})]})]})};export{j as Drawer};
 //# sourceMappingURL=drawer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps extends PropsWithChildren {\n onToggle: (isOpen: boolean) => void;\n isOpen: boolean;\n title?: string;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children }: DrawerProps) => {\n const [shouldRender, setShouldRender] = useState(isOpen);\n const [isVisible, setIsVisible] = useState(isOpen);\n const drawerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n setShouldRender(true);\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n onToggle(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [onToggle]);\n\n const handleTransitionEnd = () => {\n if (!isOpen) {\n setShouldRender(false);\n }\n };\n const handleClose = useCallback(() => {\n onToggle(false);\n }, [onToggle]);\n\n return (\n <>\n <Box\n position=\"absolute\"\n display={isOpen ? 'block' : 'none'}\n h=\"full\"\n bottom={0}\n left={0}\n right={0}\n bg=\"text.primary/20\"\n backdropFilter=\"blur(3px)\"\n />\n {shouldRender && (\n <Box\n ref={drawerRef}\n position=\"absolute\"\n transform={isVisible ? 'translateY(0)' : 'translateY(100%)'}\n transition=\"transform 0.3s\"\n bottom={0}\n left={0}\n right={0}\n bg=\"surface.primary\"\n rounded=\"xl\"\n boxShadow=\"0px -12px 56px 0px rgba(119, 118, 122, 0.15)\"\n onTransitionEnd={handleTransitionEnd}\n >\n <HStack justifyContent=\"space-between\" p={6} pb={5}>\n <Text ~~styles={{~~ fontWeight~~: '~~bold~~' }}~~>{title}</Text>\n <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n <Button.LeadingIcon>\n <IcoCaretDown />\n </Button.LeadingIcon>\n </Button>\n </HStack>\n <Box px={6} pb={8}>\n {children}\n </Box>\n </Box>\n )}\n </>\n );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_Fragment","_jsx","Box","HStack","Text","Button","IcoCaretDown"],"mappings":"giBAWa,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,CAAQ,IAAmB,CACnF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAASN,CAAM,EACjD,CAACO,EAAWC,CAAY,EAAIF,EAASN,CAAM,EAC3CS,EAAYC,EAAuB,IAAI,EAE7CC,EAAU,IAAK,CACb,IAAIC,EAEJ,OAAIZ,GACFK,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACZ,CAAM,CAAC,EAEXW,EAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEZ,EAAS,EAAK,CAElB,EAEA,~~OAAS~~,~~SAAA~~,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAQ,CAAC,EAEb,MAAMa,EAAsB,IAAK,CAC1Bf,GACHK,EAAgB,EAAK,CAEzB,EACMW,EAAcC,EAAY,IAAK,CACnCf,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEgB,EACEC,EAAA,CAAA,SAAA,CAAAC,EAACC,EACC,CAAA,SAAS,WACT,QAASrB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,eAAe,~~WAAW~~,~~CAAA,EAE3BI,~~GACCc,EAACG,~~GACC~~,IAAKZ,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkB,mBACzC,WAAW,iBACX,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,QAAQ,KACR,UAAU,+CACV,gBAAiBQ,~~EAAmB~~,SAAA,~~CAEpCG~~,EAACI,~~EAAM~~,~~CAAC~~,eAAe,gBAAgB,EAAG,EAAG,GAAI,~~YAC/CF~~,EAACG,GAAK,OAAQ,~~CAAE~~,~~WAAY~~,~~MAAQ~~,~~EAAA~~,~~SAAGtB~~,~~CAAa,CAAA,EACpDmB,EAACI,GAAO,~~KAAK,KAAK,QAAQ,UAAU,QAASR,WAC3CI,EAACI,EAAO,YAAW,CAAA,SACjBJ,EAACK,EAAY,CAAA,CAAA,CACM,CAAA,CAAA,CAAA,CACd,IAEXL,EAACC,EAAI,CAAA,GAAI,EAAG,GAAI,WACblB,CAAQ,CAAA,CACL,GAET,CAAA,CAAA,CAGP"}
1	+ {"version":3,"file":"drawer.js","sources":["../../../../src/components/containers/drawer.tsx"],"sourcesContent":["import { IcoCaretDown } from '@components/icons';\nimport { Button, Text } from '@components/primitives';\nimport { Box, HStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface DrawerProps extends PropsWithChildren {\n onToggle: (isOpen: boolean) => void;\n isOpen: boolean;\n title?: string;\n}\n\nexport const Drawer = ({ isOpen = false, title, onToggle, children }: DrawerProps) => {\n const [shouldRender, setShouldRender] = useState(isOpen);\n const [isVisible, setIsVisible] = useState(isOpen);\n const drawerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n setShouldRender(true);\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {\n onToggle(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [onToggle]);\n\n const handleTransitionEnd = () => {\n if (!isOpen) {\n setShouldRender(false);\n }\n };\n const handleClose = useCallback(() => {\n onToggle(false);\n }, [onToggle]);\n\n return (\n <>\n <Box\n position=\"absolute\"\n display={isOpen ? 'block' : 'none'}\n h=\"full\"\n bottom={0}\n left={0}\n right={0}\n bg=\"text.primary/20\"\n backdropFilter=\"blur(3px)\"\n />\n {shouldRender && (\n <Box\n ref={drawerRef}\n position=\"absolute\"\n transform={isVisible ? 'translateY(0)' : 'translateY(100%)'}\n transition=\"transform 0.3s\"\n bottom={0}\n left={0}\n right={0}\n bg=\"surface.primary\"\n rounded=\"xl\"\n boxShadow=\"0px -12px 56px 0px rgba(119, 118, 122, 0.15)\"\n onTransitionEnd={handleTransitionEnd}\n >\n <HStack justifyContent=\"space-between\" p={6} pb={5}>\n <Text fontWeight=\"bold\">{title}</Text>\n <Button size=\"sm\" variant=\"neutral\" onPress={handleClose}>\n <Button.LeadingIcon>\n <IcoCaretDown />\n </Button.LeadingIcon>\n </Button>\n </HStack>\n <Box px={6} pb={8}>\n {children}\n </Box>\n </Box>\n )}\n </>\n );\n};\n"],"names":["Drawer","isOpen","title","onToggle","children","shouldRender","setShouldRender","useState","isVisible","setIsVisible","drawerRef","useRef","useEffect","timeoutId","handleClickOutside","event","handleTransitionEnd","handleClose","useCallback","_jsxs","_Fragment","_jsx","Box","HStack","Text","Button","IcoCaretDown"],"mappings":"giBAWa,MAAAA,EAAS,CAAC,CAAE,OAAAC,EAAS,GAAO,MAAAC,EAAO,SAAAC,EAAU,SAAAC,CAAQ,IAAmB,CACnF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAASN,CAAM,EACjD,CAACO,EAAWC,CAAY,EAAIF,EAASN,CAAM,EAC3CS,EAAYC,EAAuB,IAAI,EAE7CC,EAAU,IAAK,CACb,IAAIC,EAEJ,OAAIZ,GACFK,EAAgB,EAAI,EACpBO,EAAY,WAAW,IAAMJ,EAAa,EAAI,EAAG,EAAE,GAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaI,CAAS,CACrC,EAAG,CAACZ,CAAM,CAAC,EAEXW,EAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CL,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASK,EAAM,MAAc,GACvEZ,EAAS,EAAK,CAElB,EAEA,OAAA,SAAS,iBAAiB,YAAaW,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACX,CAAQ,CAAC,EAEb,MAAMa,EAAsB,IAAK,CAC1Bf,GACHK,EAAgB,EAAK,CAEzB,EACMW,EAAcC,EAAY,IAAK,CACnCf,EAAS,EAAK,CAChB,EAAG,CAACA,CAAQ,CAAC,EAEb,OACEgB,EACEC,EAAA,CAAA,SAAA,CAAAC,EAACC,EACC,CAAA,SAAS,WACT,QAASrB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,eAAe,cAEhBI,GACCc,EAACG,EACC,CAAA,IAAKZ,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkB,mBACzC,WAAW,iBACX,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,QAAQ,KACR,UAAU,+CACV,gBAAiBQ,EAEjB,SAAA,CAAAG,EAACI,EAAO,CAAA,eAAe,gBAAgB,EAAG,EAAG,GAAI,EAAC,SAAA,CAChDF,EAACG,GAAK,WAAW,OAAQ,SAAAtB,IACzBmB,EAACI,EAAM,CAAC,KAAK,KAAK,QAAQ,UAAU,QAASR,WAC3CI,EAACI,EAAO,YAAW,CAAA,SACjBJ,EAACK,EAAY,CAAA,CAAA,CACM,CAAA,CAAA,CAAA,CACd,IAEXL,EAACC,EAAI,CAAA,GAAI,EAAG,GAAI,WACblB,CAAQ,CAAA,CACL,GAET,CAAA,CAAA,CAGP"}

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as u}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as c}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import{token as h}from"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import b from"../primitives/text.js";import"../primitives/portal.js";import{forwardRef as g,useRef as P}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{HStack as x,Box as y}from"@styled/jsx";import"../feedback/tooltip.js";import k from"../logos/logo-pay-pal-wordmark.js";import{button as j}from"../../recipes/button.js";import{cx as w,css as B}from"@styled/css";import{useButton as v,useFocusRing as R,mergeProps as S}from"react-aria";const m=g((t,n)=>{const{disabled:i,expand:s,validating:r}=t,p=j({expand:s,validating:r}),l=P(null),e=n||l,{buttonProps:a}=v({...t,isDisabled:i??!1},e),{isFocusVisible:f,focusProps:d}=R();return o("button",{className:w(p.button,B({bg:"#ffc439",outlineColor:"#ffc439",outlineWidth:"thick",outlineOffset:.5,outlineStyle:f?"solid":"none"})),ref:e,...S(a,d),"aria-disabled":i,children:r?o(c,{size:24,strokeWidth:2.5,inverted:!0}):u(x,{w:"full",gap:1,justifyContent:"center",children:[o(b,{styles:{fontWeight:600,color:h("colors.ink.90")},children:"Pay with"}),o(y,{mt:.5,children:o(k,{width:60})})]})})});m.displayName="PayPalButton";export{m as PayPalButton};
+import{jsx as o,jsxs as u}from"react/jsx-runtime";import"../feedback/callout.js";import{LoadingSpinner as c}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import{token as b}from"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import h from"../primitives/text.js";import"../primitives/portal.js";import{forwardRef as g,useRef as P}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import{HStack as x,Box as y}from"@styled/jsx";import"../feedback/tooltip.js";import k from"../logos/logo-pay-pal-wordmark.js";import{button as B}from"../../recipes/button.js";import{cx as w,css as j}from"@styled/css";import{useButton as v,useFocusRing as R,mergeProps as S}from"react-aria";const m=g((t,n)=>{const{disabled:i,expand:s,validating:r}=t,p=B({expand:s,validating:r}),l=P(null),e=n||l,{buttonProps:a}=v({...t,isDisabled:i??!1},e),{isFocusVisible:f,focusProps:d}=R();return o("button",{className:w(p.button,j({bg:"#ffc439",outlineColor:"#ffc439",outlineWidth:"thick",outlineOffset:.5,outlineStyle:f?"solid":"none"})),ref:e,...S(a,d),"aria-disabled":i,children:r?o(c,{size:24,strokeWidth:2.5,inverted:!0}):u(x,{w:"full",gap:1,justifyContent:"center",children:[o(h,{fontWeight:"semibold",styles:{color:b("colors.ink.90")},children:"Pay with"}),o(y,{mt:.5,children:o(k,{width:60})})]})})});m.displayName="PayPalButton";export{m as PayPalButton};
 //# sourceMappingURL=paypal-button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, expand, validating } = props;\n\n const classes = button({ expand, validating });\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <button\n className={cx(\n classes.button,\n css({\n bg: '#ffc439',\n outlineColor: '#ffc439',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n }),\n )}\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n aria-disabled={disabled}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <HStack w=\"full\" gap={1} justifyContent=\"center\">\n <Text styles={{ ~~fontWeight: 600,~~ color: token('colors.ink.90') }}>Pay with</Text>\n <Box mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </Box>\n </HStack>\n )}\n </button>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"y6BAgBO,MAAMA,EAAeC,EAAiD,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,OAAAC,EAAQ,WAAAC,CAAU,EAAKJ,EAEnCK,EAAUC,EAAO,CAAE,OAAAH,EAAQ,WAAAC,CAAY,CAAA,EAEvCG,EAAcC,EAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EACtB,CAAE,GAAGX,EAAO,WAAYE,GAAY,EAAO,EAC3CO,CAAyC,EAGrC,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,EACE,SAAA,CAAA,UAAWC,EACTX,EAAQ,OACRY,EAAI,CACF,GAAI,UACJ,aAAc,UACd,aAAc,QACd,cAAe,GACf,aAAcL,EAAiB,QAAU,MAC1C,CAAA,CAAC,EAEJ,IAAKH,EAAG,GACJS,EAAWR,EAAaG,CAAU,kBACvBX,EAAQ,SAEtBE,EACCW,EAACI,EAAe,CAAA,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,EAACC,EAAO,CAAA,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAN,EAACO,EAAK,CAAA,OAAQ,CAAE,~~WAAY,IAAK,~~MAAOC,EAAM,eAAe,~~GAAoB~~,SAAA,UAAA,CAAA,~~EACjFR~~,EAACS,EAAG,CAAC,GAAI,YACPT,EAACU,GAAmB,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAED3B,EAAa,YAAc"}
1	+ {"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { button } from '@recipes/button';\nimport { css, cx } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport React, { forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, expand, validating } = props;\n\n const classes = button({ expand, validating });\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <button\n className={cx(\n classes.button,\n css({\n bg: '#ffc439',\n outlineColor: '#ffc439',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n }),\n )}\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n aria-disabled={disabled}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <HStack w=\"full\" gap={1} justifyContent=\"center\">\n <Text fontWeight=\"semibold\" styles={{ color: token('colors.ink.90') }}>\n Pay with\n </Text>\n <Box mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </Box>\n </HStack>\n )}\n </button>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","expand","validating","classes","button","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","_jsx","cx","css","mergeProps","LoadingSpinner","_jsxs","HStack","Text","token","Box","LogoPayPalWordmark"],"mappings":"y6BAgBO,MAAMA,EAAeC,EAAiD,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,OAAAC,EAAQ,WAAAC,CAAU,EAAKJ,EAEnCK,EAAUC,EAAO,CAAE,OAAAH,EAAQ,WAAAC,CAAY,CAAA,EAEvCG,EAAcC,EAAO,IAAI,EACzBC,EAAMR,GAAgBM,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EACtB,CAAE,GAAGX,EAAO,WAAYE,GAAY,EAAO,EAC3CO,CAAyC,EAGrC,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,IAEvC,OACEC,EACE,SAAA,CAAA,UAAWC,EACTX,EAAQ,OACRY,EAAI,CACF,GAAI,UACJ,aAAc,UACd,aAAc,QACd,cAAe,GACf,aAAcL,EAAiB,QAAU,MAC1C,CAAA,CAAC,EAEJ,IAAKH,EAAG,GACJS,EAAWR,EAAaG,CAAU,kBACvBX,EAAQ,SAEtBE,EACCW,EAACI,EAAe,CAAA,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,EAACC,EAAO,CAAA,EAAE,OAAO,IAAK,EAAG,eAAe,SACtC,SAAA,CAAAN,EAACO,EAAK,CAAA,WAAW,WAAW,OAAQ,CAAE,MAAOC,EAAM,eAAe,GAE3D,SAAA,UAAA,CAAA,EACPR,EAACS,EAAG,CAAC,GAAI,YACPT,EAACU,GAAmB,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAED3B,EAAa,YAAc"}

package/dist/es/components/feedback/toast-provider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as h}from"react/jsx-runtime";import{token as x}from"@styled/tokens";import C from"../icons/ico-dismiss.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import S from"../primitives/text.js";import j from"../primitives/portal.js";import y from"../utils/animate.js";import{ToastContext as g}from"../../hooks/useToast.js";import{toast as v}from"../../recipes/toast.js";import{HStack as H,VStack as P}from"@styled/jsx";import{useState as R,useRef as $,useReducer as w,useCallback as N,useMemo as A}from"react";import{StatusIcon as I}from"./status-icon.js";let M=0;const T=e=>{const{dismissible:c,lifespan:a,message:l="",variant:o="branded"}=e,i=v({variant:o}),s=e.id,n=e.removeToast,[p,m]=R(!0);return a&&setTimeout(()=>{m(!1)},a),t(y,{"aria-live":["error"].includes(o||"")?"assertive":"polite",show:p,type:"slide",onHidden:()=>{s&&n(s)},children:h(H,{className:i.toast,children:[e.icon&&t(I,{className:i.icon,variant:o}),t(S,{styles:{color:x("colors.surface.primary")},children:l}),c&&t("button",{className:i.dismiss,onClick:()=>m(!1),"aria-label":"dismiss toast",children:t(C,{className:i.icon})})]})})},V=({icon:e=!1,lifespan:c=0,position:a="top-right",children:l})=>{const o=$([]),i=w(r=>r+1,0)[1],s=N(r=>{o.current=o.current.filter(d=>d.id!==r),i()},[]),n=N(r=>{const{icon:d=r.icon||e,lifespan:b=r.lifespan||c,...k}=r,f=++M;return o.current.push({icon:d,lifespan:b,id:f,...k}),i(),f},[]),p=A(()=>({createToast:n,removeToast:s}),[n,s]),m=(a?.startsWith("top")?[...o.current]:[...o.current].reverse()).map(r=>t(T,{...r,removeToast:s},r.id)),u=v({position:a});return h(g.Provider,{value:p,children:[l,t(j,{children:t("div",{className:u.portal,children:t(P,{className:u.container,children:m})})})]})};export{T as Toast,V as ToastProvider};
+import{jsx as i,jsxs as v}from"react/jsx-runtime";import"@styled/tokens";import k from"../icons/ico-dismiss.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import C from"../primitives/text.js";import S from"../primitives/portal.js";import g from"../utils/animate.js";import{ToastContext as j}from"../../hooks/useToast.js";import{toast as h}from"../../recipes/toast.js";import{HStack as y,VStack as H}from"@styled/jsx";import{useState as P,useRef as R,useReducer as $,useCallback as N,useMemo as q}from"react";import{StatusIcon as w}from"./status-icon.js";let B=0;const T=o=>{const{dismissible:c,lifespan:a,message:l="",variant:t="branded"}=o,e=h({variant:t}),s=o.id,n=o.removeToast,[p,m]=P(!0);return a&&setTimeout(()=>{m(!1)},a),i(g,{"aria-live":["error"].includes(t||"")?"assertive":"polite",show:p,type:"slide",onHidden:()=>{s&&n(s)},children:v(y,{className:e.toast,children:[o.icon&&i(w,{className:e.icon,variant:t}),i(C,{color:"text.quaternary",children:l}),c&&i("button",{className:e.dismiss,onClick:()=>m(!1),"aria-label":"dismiss toast",children:i(k,{className:e.icon})})]})})},I=({icon:o=!1,lifespan:c=0,position:a="top-right",children:l})=>{const t=R([]),e=$(r=>r+1,0)[1],s=N(r=>{t.current=t.current.filter(d=>d.id!==r),e()},[]),n=N(r=>{const{icon:d=r.icon||o,lifespan:x=r.lifespan||c,...b}=r,f=++B;return t.current.push({icon:d,lifespan:x,id:f,...b}),e(),f},[]),p=q(()=>({createToast:n,removeToast:s}),[n,s]),m=(a?.startsWith("top")?[...t.current]:[...t.current].reverse()).map(r=>i(T,{...r,removeToast:s},r.id)),u=h({position:a});return v(j.Provider,{value:p,children:[l,i(S,{children:i("div",{className:u.portal,children:i(H,{className:u.container,children:m})})})]})};export{T as Toast,I as ToastProvider};
 //# sourceMappingURL=toast-provider.js.map

package/dist/es/components/feedback/toast-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast-provider.js","sources":["../../../../src/components/feedback/toast-provider.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport Portal from '@components/primitives/portal';\nimport Animate from '@components/utils/animate';\nimport { ToastProps as BaseToastProps, ToastContext, ToastDefinition } from '@hooks/useToast';\nimport { toast as classes } from '@recipes/toast';\nimport { HStack, VStack } from '@styled/jsx';\nimport { ~~token } from '@styled/tokens';\nimport {~~ PropsWithChildren, useCallback, useMemo, useReducer, useRef, useState } from 'react';\nimport { StatusIcon } from './status-icon';\n\nlet toastID = 0;\n\ninterface InternalToast extends ToastDefinition {\n removeToast: ToastContext['removeToast'];\n}\n\nexport interface ToastProps extends BaseToastProps {}\nexport interface ToastProviderProps extends PropsWithChildren {\n icon?: boolean;\n lifespan?: number;\n position?: 'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps \| InternalToast) => {\n const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n const toastClasses = classes({ variant });\n const dismissId = (props as InternalToast).id;\n const removeToast = (props as InternalToast).removeToast;\n const [show, setShow] = useState(true);\n\n if (lifespan) {\n setTimeout(() => {\n setShow(false);\n }, lifespan);\n }\n\n return (\n <Animate\n aria-live={['error'].includes(variant \|\| '') ? 'assertive' : 'polite'}\n show={show}\n type=\"slide\"\n onHidden={() => {\n if (dismissId) {\n removeToast(dismissId);\n }\n }}\n >\n <HStack className={toastClasses.toast}>\n {props.icon && <StatusIcon className={toastClasses.icon} variant={variant} />}\n <Text ~~styles={{~~ color~~: token('colors~~.~~surface.primary') }}~~>{message}</Text>\n {dismissible && (\n <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n <IcoDismiss className={toastClasses.icon} />\n </button>\n )}\n </HStack>\n </Animate>\n );\n};\n\nexport const ToastProvider = ({\n icon: defaultIcon = false,\n lifespan: defaultLifespan = 0,\n position = 'top-right',\n children,\n}: ToastProviderProps) => {\n const toastsRef = useRef<ToastDefinition[]>([]);\n const forceUpdate = useReducer((x: number) => x + 1, 0)[1];\n\n const removeToast: ToastContext['removeToast'] = useCallback((id: number) => {\n toastsRef.current = toastsRef.current.filter(toast => toast.id !== id);\n forceUpdate();\n }, []);\n\n const createToast: ToastContext['createToast'] = useCallback(options => {\n const { icon = options.icon \|\| defaultIcon, lifespan = options.lifespan \|\| defaultLifespan, ...props } = options;\n const id = ++toastID;\n\n toastsRef.current.push({ icon, lifespan, id, ...props });\n forceUpdate();\n\n return id;\n }, []);\n\n const toastCtx = useMemo(() => ({ createToast, removeToast }), [createToast, removeToast]);\n const toasts = position?.startsWith('top') ? [...toastsRef.current] : [...toastsRef.current].reverse();\n const activeToasts = toasts.map(toast => {\n return <Toast key={toast.id} {...toast} removeToast={removeToast} />;\n });\n\n const providerClasses = classes({ position });\n\n return (\n <ToastContext.Provider value={toastCtx}>\n {children}\n <Portal>\n <div className={providerClasses.portal}>\n <VStack className={providerClasses.container}>{activeToasts}</VStack>\n </div>\n </Portal>\n </ToastContext.Provider>\n );\n};\n"],"names":["toastID","Toast","props","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","~~token","~~IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"~~uwBAWA~~,IAAIA,EAAU,~~EAaD~~,~~MAAAC~~,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,EAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,EAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,EAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,~~WAEAO~~,EAACC,~~EAAO~~,~~CAAA~~,UAAWV,EAAa,~~MAAK~~,~~SAAA,CAClCL,~~EAAM,MAAQY,EAACI,~~GAAW~~,UAAWX,EAAa,KAAM,QAASD,~~IAClEQ~~,~~EAACK~~,~~EAAI~~,~~CAAC~~,~~OAAQ~~,~~CAAE~~,~~MAAOC~~,~~EAAM~~,~~wBAAwB~~,~~CAAG,EAAA,SAAGf,CAAe,~~CAAA,~~EACzEF~~,GACCW,EAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,~~EAAc~~,~~aAAA~~,~~yBACjFE~~,~~EAACO~~,~~GAAW~~,~~UAAWd~~,~~EAAa~~,~~IAAQ~~,~~CAAA~~,~~CAAA~~,CAAA,~~CAE/C~~,CACM,CAAA,CAAA,CAAA,CAGf,~~EAEae~~,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAA0B,CAAA,~~CAAE,~~EACxCC,EAAcC,EAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,~~EAEnDrB~~,~~EAA2CsB~~,EAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,~~GACF~~,EAAG,~~CAAA~~,~~CAAE,~~EAECM,EAA2CH,EAAYI,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,~~SAAAnB~~,~~EAAWgC~~,EAAQ,UAAYZ,EAAiB,~~GAAGtB~~,CAAK,~~EAAKkC~~,EACnGH,EAAK,~~EAAEjC~~,EAEb,~~OAAA2B~~,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,~~SAAAjC~~,EAAU,~~GAAA6B~~,EAAI,~~GAAG/B~~,CAAK,CAAE,~~EACvD2B~~,~~IAEOI~~,CACT,EAAG,CAAA,~~CAAE,~~EAECK,EAAWC,EAAQ,KAAO,CAAE,YAAAJ,EAAa,~~YAAAzB~~,CAAW,GAAK,~~CAACyB~~,~~EAAazB~~,CAAW,CAAC,~~EAEnF8B~~,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,~~QAAA~~,~~GACjE,~~IAAIO,~~GACvBpB~~,EAACb,EAAyB,CAAA,~~GAAAiC~~,EAAO,~~YAAaxB~~,CAAlC,~~EAAAwB~~,EAAM,EAAE,CAC5B,EAEKO,~~EAAkBjC~~,EAAQ,CAAE,~~SAAAiB~~,CAAQ,CAAE,EAE5C,~~OACET~~,~~EAAC0B~~,EAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,~~EACDZ~~,~~EAAC6B~~,EAAM,CAAA,~~SACL7B~~,SAAK,~~UAAW2B~~,EAAgB,OAC9B,~~SAAA3B~~,~~EAAC8B~~,EAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}
1	+ {"version":3,"file":"toast-provider.js","sources":["../../../../src/components/feedback/toast-provider.tsx"],"sourcesContent":["import { IcoDismiss } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport Portal from '@components/primitives/portal';\nimport Animate from '@components/utils/animate';\nimport { ToastProps as BaseToastProps, ToastContext, ToastDefinition } from '@hooks/useToast';\nimport { toast as classes } from '@recipes/toast';\nimport { HStack, VStack } from '@styled/jsx';\nimport { PropsWithChildren, useCallback, useMemo, useReducer, useRef, useState } from 'react';\nimport { StatusIcon } from './status-icon';\n\nlet toastID = 0;\n\ninterface InternalToast extends ToastDefinition {\n removeToast: ToastContext['removeToast'];\n}\n\nexport interface ToastProps extends BaseToastProps {}\nexport interface ToastProviderProps extends PropsWithChildren {\n icon?: boolean;\n lifespan?: number;\n position?: 'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right';\n}\n\nexport const Toast = (props: ToastProps \| InternalToast) => {\n const { dismissible, lifespan, message = '', variant = 'branded' } = props;\n const toastClasses = classes({ variant });\n const dismissId = (props as InternalToast).id;\n const removeToast = (props as InternalToast).removeToast;\n const [show, setShow] = useState(true);\n\n if (lifespan) {\n setTimeout(() => {\n setShow(false);\n }, lifespan);\n }\n\n return (\n <Animate\n aria-live={['error'].includes(variant \|\| '') ? 'assertive' : 'polite'}\n show={show}\n type=\"slide\"\n onHidden={() => {\n if (dismissId) {\n removeToast(dismissId);\n }\n }}\n >\n <HStack className={toastClasses.toast}>\n {props.icon && <StatusIcon className={toastClasses.icon} variant={variant} />}\n <Text color=\"text.quaternary\">{message}</Text>\n {dismissible && (\n <button className={toastClasses.dismiss} onClick={() => setShow(false)} aria-label=\"dismiss toast\">\n <IcoDismiss className={toastClasses.icon} />\n </button>\n )}\n </HStack>\n </Animate>\n );\n};\n\nexport const ToastProvider = ({\n icon: defaultIcon = false,\n lifespan: defaultLifespan = 0,\n position = 'top-right',\n children,\n}: ToastProviderProps) => {\n const toastsRef = useRef<ToastDefinition[]>([]);\n const forceUpdate = useReducer((x: number) => x + 1, 0)[1];\n\n const removeToast: ToastContext['removeToast'] = useCallback((id: number) => {\n toastsRef.current = toastsRef.current.filter(toast => toast.id !== id);\n forceUpdate();\n }, []);\n\n const createToast: ToastContext['createToast'] = useCallback(options => {\n const { icon = options.icon \|\| defaultIcon, lifespan = options.lifespan \|\| defaultLifespan, ...props } = options;\n const id = ++toastID;\n\n toastsRef.current.push({ icon, lifespan, id, ...props });\n forceUpdate();\n\n return id;\n }, []);\n\n const toastCtx = useMemo(() => ({ createToast, removeToast }), [createToast, removeToast]);\n const toasts = position?.startsWith('top') ? [...toastsRef.current] : [...toastsRef.current].reverse();\n const activeToasts = toasts.map(toast => {\n return <Toast key={toast.id} {...toast} removeToast={removeToast} />;\n });\n\n const providerClasses = classes({ position });\n\n return (\n <ToastContext.Provider value={toastCtx}>\n {children}\n <Portal>\n <div className={providerClasses.portal}>\n <VStack className={providerClasses.container}>{activeToasts}</VStack>\n </div>\n </Portal>\n </ToastContext.Provider>\n );\n};\n"],"names":["toastID","Toast","props","dismissible","lifespan","message","variant","toastClasses","classes","dismissId","removeToast","show","setShow","useState","_jsx","Animate","_jsxs","HStack","StatusIcon","Text","IcoDismiss","ToastProvider","defaultIcon","defaultLifespan","position","children","toastsRef","useRef","forceUpdate","useReducer","x","useCallback","id","toast","createToast","options","icon","toastCtx","useMemo","activeToasts","providerClasses","ToastContext","Portal","VStack"],"mappings":"uvBAUA,IAAIA,EAAU,EAaP,MAAMC,EAASC,GAAqC,CACzD,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,QAAAC,EAAU,GAAI,QAAAC,EAAU,SAAW,EAAGJ,EAC/DK,EAAeC,EAAQ,CAAE,QAAAF,CAAO,CAAE,EAClCG,EAAaP,EAAwB,GACrCQ,EAAeR,EAAwB,YACvC,CAACS,EAAMC,CAAO,EAAIC,EAAS,EAAI,EAErC,OAAIT,GACF,WAAW,IAAK,CACdQ,EAAQ,EAAK,CACf,EAAGR,CAAQ,EAIXU,EAACC,EAAO,CAAA,YACK,CAAC,OAAO,EAAE,SAAST,GAAW,EAAE,EAAI,YAAc,SAC7D,KAAMK,EACN,KAAK,QACL,SAAU,IAAK,CACTF,GACFC,EAAYD,CAAS,CAEzB,EAEA,SAAAO,EAACC,EAAM,CAAC,UAAWV,EAAa,gBAC7BL,EAAM,MAAQY,EAACI,EAAU,CAAC,UAAWX,EAAa,KAAM,QAASD,CAAO,CAAA,EACzEQ,EAACK,EAAK,CAAA,MAAM,2BAAmBd,CAAO,CAAA,EACrCF,GACCW,EAAQ,SAAA,CAAA,UAAWP,EAAa,QAAS,QAAS,IAAMK,EAAQ,EAAK,EAAC,aAAa,gBACjF,SAAAE,EAACM,EAAU,CAAC,UAAWb,EAAa,MAC7B,CAAA,CACV,CACM,CAAA,CAAA,CAAA,CAGf,EAEac,EAAgB,CAAC,CAC5B,KAAMC,EAAc,GACpB,SAAUC,EAAkB,EAC5B,SAAAC,EAAW,YACX,SAAAC,CACmB,IAAI,CACvB,MAAMC,EAAYC,EAA0B,CAAE,CAAA,EACxCC,EAAcC,EAAYC,GAAcA,EAAI,EAAG,CAAC,EAAE,CAAC,EAEnDpB,EAA2CqB,EAAaC,GAAc,CAC1EN,EAAU,QAAUA,EAAU,QAAQ,OAAOO,GAASA,EAAM,KAAOD,CAAE,EACrEJ,EAAAA,CACF,EAAG,EAAE,EAECM,EAA2CH,EAAYI,GAAU,CACrE,KAAM,CAAE,KAAAC,EAAOD,EAAQ,MAAQb,EAAa,SAAAlB,EAAW+B,EAAQ,UAAYZ,EAAiB,GAAGrB,CAAK,EAAKiC,EACnGH,EAAK,EAAEhC,EAEb,OAAA0B,EAAU,QAAQ,KAAK,CAAE,KAAAU,EAAM,SAAAhC,EAAU,GAAA4B,EAAI,GAAG9B,CAAK,CAAE,EACvD0B,EAAAA,EAEOI,CACT,EAAG,CAAE,CAAA,EAECK,EAAWC,EAAQ,KAAO,CAAE,YAAAJ,EAAa,YAAAxB,CAAW,GAAK,CAACwB,EAAaxB,CAAW,CAAC,EAEnF6B,GADSf,GAAU,WAAW,KAAK,EAAI,CAAC,GAAGE,EAAU,OAAO,EAAI,CAAC,GAAGA,EAAU,OAAO,EAAE,WACjE,IAAIO,GACvBnB,EAACb,EAAyB,CAAA,GAAAgC,EAAO,YAAavB,CAAlC,EAAAuB,EAAM,EAAE,CAC5B,EAEKO,EAAkBhC,EAAQ,CAAE,SAAAgB,CAAQ,CAAE,EAE5C,OACER,EAACyB,EAAa,UAAS,MAAOJ,EAAQ,SAAA,CACnCZ,EACDX,EAAC4B,EAAM,CAAA,SACL5B,SAAK,UAAW0B,EAAgB,OAC9B,SAAA1B,EAAC6B,EAAM,CAAC,UAAWH,EAAgB,mBAAYD,CAAY,CAAA,GAEtD,CAAA,CAAA,CAAA,CAAA,CAGf"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n {\n content: ReactNode;\n } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n const isTouchDevice = 'ontouchstart' in window \|\| navigator.maxTouchPoints > 0 \|\| navigator.maxTouchPoints > 0;\n\n const { children, content, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n const [isClicked, setIsClicked] = useState(false);\n\n const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: defaultOpen,\n onChange(open) {\n if (!open) {\n setIsClicked(false);\n }\n },\n ...props,\n });\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: (immediate?: boolean) => {\n if (immediate) {\n setOpen(false);\n return;\n }\n if (!isTouchDevice) {\n if (isClicked) {\n setTimeout(() => {\n setOpen(false);\n setIsClicked(false);\n }, closeDelay);\n }\n if (!isClicked) {\n setOpen(false);\n }\n } else {\n setOpen(false);\n }\n },\n }),\n [isOpen, isClicked],\n );\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n triggerProps.onClick = () => {\n state.open();\n setIsClicked(true);\n };\n\n const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n state.close(true);\n });\n\n return (\n <div\n ~~// tabIndex={0}\n~~ ref={clickAwayRef}\n className={css({ position: 'relative' })}\n onMouseLeave={() => {\n state.close();\n }}\n onFocus={() => {\n state.open();\n }}\n onBlur={() => {\n state.close();\n }}\n >\n {cloneElement(children as ReactElement, {\n ...triggerProps,\n tabIndex: 0,\n })}\n <div\n ref={forwardedRef}\n aria-describedby=\"tooltip\"\n role=\"tooltip\"\n className={cx(\n css({\n display: state.isOpen ? 'block' : 'none',\n maxW: 72,\n w: 'max',\n color: 'text.secondary',\n bgColor: 'surface.primary',\n borderColor: 'neutral.secondary',\n position: 'absolute',\n py: 2,\n px: 3,\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n }),\n )}\n onMouseEnter={() => {\n state.open();\n }}\n {...mergeProps(tooltipProps, restProps)}\n >\n <Text size=\"sm\">{content}</Text>\n {state.isOpen && (\n <div\n onMouseEnter={() => {\n state.open();\n }}\n className={css({\n position: 'absolute',\n ~~w: 72,\n~~ h: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n })}\n />\n )}\n </div>\n </div>\n );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"~~8oBAaA~~,~~MAAMA,~~EAAsB,KAEtBC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,WAAAC,~~EAAaR~~,EAAqB,~~YAAAS~~,EAAa,GAAGC,CAAW,~~EAAGP~~,~~EACrF~~,~~CAACQ~~,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAe,CAClE,~~OAAQb~~,EAAM,OACd,~~gBAAiBM~~,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,~~GAAGT~~,CACJ,CAAA,~~EAEKe~~,EAAQC,EACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,~~CACKV~~,~~EAWHU~~,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,~~EAAkBtB~~,~~EAAOe~~,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,~~OACNN~~,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,~~EAAA~~,~~MAAA,CAEE,~~IAAKF,EACL,UAAWG,EAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,~~MACR~~,~~CAAA~~,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAY,~~EAAaxB~~,EAA0B,CACtC,~~GAAGiB~~,EACH,SAAU,~~CACX~~,~~CAAA,~~EACDK,~~EACE~~,~~MAAA~~,~~CAAA~~,~~IAAKxB~~,~~qBACY,~~UACjB,KAAK,UACL,~~UAAW2B~~,EACTF,EAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,~~EAAG~~,~~MACH~~,MAAO,iBACP,QAAS,kBACT,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,~~oDACZ~~,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,EAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAACC,EAAI,CAAC,KAAK,KAAI,~~SAAE3B~~,CAAO,CAAA,~~EACvBW~~,EAAM,QACLe,EACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KACR,CAAA,EACA,~~UAAWW~~,EAAI,CACb,SAAU,WACV,EAAG,~~GACH,EAAG,~~EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,~~EAED5B~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip.tsx"],"sourcesContent":["import { Text } from '@components/primitives';\nimport { useClickAway } from '@hooks/useClickAway';\nimport { useToggleState } from '@hooks/useToggleState';\nimport { css, cx } from '@styled/css';\nimport { PropsWithChildren, ReactElement, ReactNode, cloneElement, forwardRef, useMemo, useRef, useState } from 'react';\nimport { TooltipTriggerProps, mergeProps, useTooltipTrigger } from 'react-aria';\n\nexport type TooltipProps = PropsWithChildren<\n {\n content: ReactNode;\n width?: number \| string;\n } & TooltipTriggerProps\n>;\n\nconst DEFAULT_CLOSE_DELAY = 2500;\n\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, forwardedRef) => {\n const isTouchDevice = 'ontouchstart' in window \|\| navigator.maxTouchPoints > 0 \|\| navigator.maxTouchPoints > 0;\n\n const { children, content, width = 288, closeDelay = DEFAULT_CLOSE_DELAY, defaultOpen, ...restProps } = props;\n const [isClicked, setIsClicked] = useState(false);\n\n const { isSelected: isOpen, setSelected: setOpen } = useToggleState({\n isOpen: props.isOpen,\n defaultSelected: defaultOpen,\n onChange(open) {\n if (!open) {\n setIsClicked(false);\n }\n },\n ...props,\n });\n\n const state = useMemo(\n () => ({\n isOpen,\n open: () => {\n setOpen(true);\n },\n close: (immediate?: boolean) => {\n if (immediate) {\n setOpen(false);\n return;\n }\n if (!isTouchDevice) {\n if (isClicked) {\n setTimeout(() => {\n setOpen(false);\n setIsClicked(false);\n }, closeDelay);\n }\n if (!isClicked) {\n setOpen(false);\n }\n } else {\n setOpen(false);\n }\n },\n }),\n [isOpen, isClicked],\n );\n\n const triggerRef = useRef<HTMLDivElement>(null);\n const { triggerProps, tooltipProps } = useTooltipTrigger(props, state, triggerRef);\n\n triggerProps.onClick = () => {\n state.open();\n setIsClicked(true);\n };\n\n const clickAwayRef = useClickAway<HTMLDivElement>(() => {\n state.close(true);\n });\n\n return (\n <div\n ref={clickAwayRef}\n className={css({ position: 'relative' })}\n onMouseLeave={() => {\n state.close();\n }}\n onFocus={() => {\n state.open();\n }}\n onBlur={() => {\n state.close();\n }}\n >\n {cloneElement(children as ReactElement, {\n ...triggerProps,\n tabIndex: 0,\n })}\n <div\n ref={forwardedRef}\n aria-describedby=\"tooltip\"\n role=\"tooltip\"\n style={{ width }}\n className={cx(\n css({\n display: state.isOpen ? 'block' : 'none',\n maxW: 72,\n width: 'max',\n color: 'text.secondary',\n bgColor: 'surface.primary',\n borderColor: 'neutral.secondary',\n position: 'absolute',\n py: 2,\n px: 3,\n borderRadius: 'xl',\n boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)',\n top: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(calc(-100% - 0.75rem))',\n zIndex: 'max',\n }),\n )}\n onMouseEnter={() => {\n state.open();\n }}\n {...mergeProps(tooltipProps, restProps)}\n >\n <Text size=\"sm\">{content}</Text>\n {state.isOpen && (\n <div\n onMouseEnter={() => {\n state.open();\n }}\n style={{ width }}\n className={css({\n position: 'absolute',\n h: 4,\n bottom: 0,\n left: '50%',\n transform: 'translateX(-50%) translateY(0.75rem)',\n })}\n />\n )}\n </div>\n </div>\n );\n});\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":["DEFAULT_CLOSE_DELAY","Tooltip","forwardRef","props","forwardedRef","isTouchDevice","children","content","width","closeDelay","defaultOpen","restProps","isClicked","setIsClicked","useState","isOpen","setOpen","useToggleState","open","state","useMemo","immediate","triggerRef","useRef","triggerProps","tooltipProps","useTooltipTrigger","clickAwayRef","useClickAway","_jsxs","css","cloneElement","cx","mergeProps","_jsx","Text"],"mappings":"opBAcMA,EAAsB,KAEtBC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CAC/E,MAAMC,EAAgB,iBAAkB,QAAU,UAAU,eAAiB,GAAK,UAAU,eAAiB,EAEvG,CAAE,SAAAC,EAAU,QAAAC,EAAS,MAAAC,EAAQ,IAAK,WAAAC,EAAaT,EAAqB,YAAAU,EAAa,GAAGC,CAAW,EAAGR,EAClG,CAACS,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAE1C,CAAE,WAAYC,EAAQ,YAAaC,CAAO,EAAKC,EAAe,CAClE,OAAQd,EAAM,OACd,gBAAiBO,EACjB,SAASQ,EAAI,CACNA,GACHL,EAAa,EAAK,CAEtB,EACA,GAAGV,CACJ,CAAA,EAEKgB,EAAQC,EACZ,KAAO,CACL,OAAAL,EACA,KAAM,IAAK,CACTC,EAAQ,EAAI,CACd,EACA,MAAQK,GAAuB,CAC7B,GAAIA,EAAW,CACbL,EAAQ,EAAK,EACb,MACF,CACKX,EAWHW,EAAQ,EAAK,GAVTJ,GACF,WAAW,IAAK,CACdI,EAAQ,EAAK,EACbH,EAAa,EAAK,CACpB,EAAGJ,CAAU,EAEVG,GACHI,EAAQ,EAAK,EAKnB,CACD,GACD,CAACD,EAAQH,CAAS,CAAC,EAGfU,EAAaC,EAAuB,IAAI,EACxC,CAAE,aAAAC,EAAc,aAAAC,GAAiBC,EAAkBvB,EAAOgB,EAAOG,CAAU,EAEjFE,EAAa,QAAU,IAAK,CAC1BL,EAAM,KAAA,EACNN,EAAa,EAAI,CACnB,EAEA,MAAMc,EAAeC,EAA6B,IAAK,CACrDT,EAAM,MAAM,EAAI,CAClB,CAAC,EAED,OACEU,SACE,IAAKF,EACL,UAAWG,EAAI,CAAE,SAAU,UAAY,CAAA,EACvC,aAAc,IAAK,CACjBX,EAAM,MAAA,CACR,EACA,QAAS,IAAK,CACZA,EAAM,KACR,CAAA,EACA,OAAQ,IAAK,CACXA,EAAM,MACR,CAAA,EAEC,SAAA,CAAAY,EAAazB,EAA0B,CACtC,GAAGkB,EACH,SAAU,EACX,EACDK,SACE,IAAKzB,EACY,mBAAA,UACjB,KAAK,UACL,MAAO,CAAE,MAAAI,CAAO,EAChB,UAAWwB,EACTF,EAAI,CACF,QAASX,EAAM,OAAS,QAAU,OAClC,KAAM,GACN,MAAO,MACP,MAAO,iBACP,QAAS,kBACT,YAAa,oBACb,SAAU,WACV,GAAI,EACJ,GAAI,EACJ,aAAc,KACd,UAAW,uCACX,IAAK,EACL,KAAM,MACN,UAAW,qDACX,OAAQ,KACT,CAAA,CAAC,EAEJ,aAAc,IAAK,CACjBA,EAAM,KACR,CAAA,EAAC,GACGc,EAAWR,EAAcd,CAAS,EAEtC,SAAA,CAAAuB,EAACC,EAAI,CAAC,KAAK,KAAI,SAAE5B,CAAO,CAAA,EACvBY,EAAM,QACLe,EACE,MAAA,CAAA,aAAc,IAAK,CACjBf,EAAM,KACR,CAAA,EACA,MAAO,CAAE,MAAAX,GACT,UAAWsB,EAAI,CACb,SAAU,WACV,EAAG,EACH,OAAQ,EACR,KAAM,MACN,UAAW,sCACZ,CAAA,CACD,CAAA,CACH,CACG,CAAA,CAAA,CAAA,CAAA,CAGZ,CAAC,EAED7B,EAAQ,YAAc"}

package/dist/es/components/info/text-box.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as o,Fragment as x}from"react/jsx-runtime";import{token as t}from"@styled/tokens";import g from"../icons/ico-checkmark.js";import k from"../icons/ico-copy.js";import C from"../icons/ico-eye-closed.js";import y from"../icons/ico-eye-opened.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import N from"../primitives/text.js";import{css as c}from"@styled/css";import{HStack as m,Box as W}from"@styled/jsx";import{center as j}from"@styled/patterns";import{useState as p,useEffect as h,useCallback as v}from"react";const u=f=>{const{content:e,onCopy:i,showHideButton:r}=f,[l,n]=p(!!r),[s,d]=p(!1);h(()=>{if(s){const w=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(w)}},[s]),h(()=>{n(!!r)},[r]);const b=v(()=>{i&&(i(e),d(!0))},[e]);return a(m,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[o(W,{textWrap:"nowrap",overflow:"hidden",filter:l?"blur(10px)":"",children:o("p",{className:c({overflow:"hidden",textOverflow:"ellipsis",color:"text.primary"}),children:e})}),l&&a("button",{className:j({position:"absolute",width:"full",height:"full",left:0,gap:2,cursor:"pointer",rounded:10,outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>n(!1),"aria-label":"show",children:[o(N,{size:"sm",styles:{fontWeight:600,color:t("colors.brand.base")},children:"Show"}),o(y,{width:20,height:20,color:t("colors.brand.base")})]}),a(m,{children:[r&&!l&&o("button",{className:c({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>n(!0),"aria-label":"hide",children:o(C,{width:20,height:20,color:t("colors.brand.base")})}),i&&o(x,{children:s?o(g,{width:20,height:20,color:t("colors.brand.base")}):o("button",{className:c({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5,zIndex:10}),onClick:b,"aria-label":"copy",children:o(k,{width:20,height:20,color:t("colors.brand.base")})})})]})]})};u.displayName="TextBox";export{u as default};
+import{jsxs as s,jsx as o,Fragment as g}from"react/jsx-runtime";import{token as e}from"@styled/tokens";import k from"../icons/ico-checkmark.js";import y from"../icons/ico-copy.js";import W from"../icons/ico-eye-closed.js";import B from"../icons/ico-eye-opened.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import c from"../primitives/text.js";import{css as m}from"@styled/css";import{HStack as h,Box as N}from"@styled/jsx";import{center as j}from"@styled/patterns";import{useState as p,useEffect as u,useCallback as v}from"react";const f=b=>{const{content:t,onCopy:i,showHideButton:r,mono:w}=b,[n,l]=p(!!r),[a,d]=p(!1);u(()=>{if(a){const C=setTimeout(()=>{d(!1)},1500);return()=>clearTimeout(C)}},[a]),u(()=>{l(!!r)},[r]);const x=v(()=>{i&&(i(t),d(!0))},[t]);return s(h,{w:"full",px:4,py:3,rounded:10,bg:"surface.secondary",justifyContent:"space-between",position:"relative",children:[o(N,{textWrap:"nowrap",overflow:"hidden",filter:n?"blur(10px)":"",children:w?o(c.Mono,{truncate:!0,children:t}):o(c,{truncate:!0,children:t})}),n&&s("button",{className:j({position:"absolute",width:"full",height:"full",left:0,gap:2,cursor:"pointer",rounded:10,outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>l(!1),"aria-label":"show",children:[o(c,{size:"sm",fontWeight:"semibold",variant:"info",children:"Show"}),o(B,{width:20,height:20,color:e("colors.brand.base")})]}),s(h,{children:[r&&!n&&o("button",{className:m({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5}),onClick:()=>l(!0),"aria-label":"hide",children:o(W,{width:20,height:20,color:e("colors.brand.base")})}),i&&o(g,{children:a?o(k,{width:20,height:20,color:e("colors.brand.base")}):o("button",{className:m({cursor:"pointer",outlineColor:"brand.base",outlineWidth:"thick",outlineOffset:.5,zIndex:10}),onClick:x,"aria-label":"copy",children:o(y,{width:20,height:20,color:e("colors.brand.base")})})})]})]})};f.displayName="TextBox";export{f as default};
 //# sourceMappingURL=text-box.js.map

package/dist/es/components/info/text-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { center } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n content: string;\n onCopy?: (content: string) => void;\n showHideButton?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n const { content, onCopy, showHideButton } = props;\n const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n useEffect(() => {\n if (showHideButton) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n }, [showHideButton]);\n\n const handleOnCopy = useCallback(() => {\n if (!onCopy) return;\n onCopy(content);\n setIsCopied(true);\n }, [content]);\n\n return (\n <HStack\n w=\"full\"\n px={4}\n py={3}\n rounded={10}\n bg=\"surface.secondary\"\n justifyContent=\"space-between\"\n position=\"relative\"\n >\n <Box textWrap=\"nowrap\" overflow=\"hidden\" filter={isHidden ? 'blur(10px)' : ''}>\n ~~<p className=~~{~~css({~~ ~~overflow:~~ ~~'hidden',~~ ~~textOverflow:~~ ~~'ellipsis', color~~: ~~'text.primary'~~ ~~})}~~>{content}</~~p>\~~n </Box>\n\n {isHidden && (\n <button\n className={center({\n position: 'absolute',\n width: 'full',\n height: 'full',\n left: 0,\n gap: 2,\n cursor: 'pointer',\n rounded: 10,\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n })}\n onClick={() => setIsHidden(false)}\n aria-label=\"show\"\n >\n <Text size=\"sm\" ~~styles={{~~ fontWeight: ~~600, color: token('colors.brand.base') }}~~>\n Show\n </Text>\n <IcoEyeOpened width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n\n <HStack>\n {showHideButton && !isHidden && (\n <button\n className={css({\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n })}\n onClick={() => setIsHidden(true)}\n aria-label=\"hide\"\n >\n <IcoEyeClosed width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n {onCopy && (\n <>\n {isCopied ? (\n <IcoCheckmark width={20} height={20} color={token('colors.brand.base')} />\n ) : (\n <button\n className={css({\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n zIndex: 10,\n })}\n onClick={handleOnCopy}\n aria-label=\"copy\"\n >\n <IcoCopy width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n </>\n )}\n </HStack>\n </HStack>\n );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","~~css~~","center","~~Text~~","token","~~IcoEyeOpened~~","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"~~suBAcMA~~,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,~~CAAc~~,~~EAAKH~~,~~EACtC~~,~~CAACI~~,EAAUC,CAAW,EAAIC,EAAS,~~CAAQH~~,~~CAAAA,~~CAAe,EAC1D,~~CAACI~~,EAAUC,CAAW,EAAIF,EAAS,EAAK,EAE9CG,EAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,IAAK,CAEXJ,EADE,~~CAAA~~,~~CAAAF~~,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,~~MAAMQ~~,EAAeC,EAAY,IAAK,CAC/BV,IACLA,EAAOD,CAAO,~~EACdO~~,EAAY,EAAI,EAClB,EAAG,~~CAACP~~,CAAO,CAAC,EAEZ,~~OACEY~~,EAACC,GACC,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,qBAETC,EAACC,GAAI,SAAS,SAAS,SAAS,SAAS,OAAQZ,EAAW,aAAe,~~GACzE~~,~~SAAAW~~,~~EAAA~~,~~IAAA~~,~~CAAG~~,~~UAAWE~~,~~EAAI~~,~~CAAE~~,~~SAAU~~,~~SAAU~~,~~aAAc~~,~~WAAY~~,~~MAAO~~,~~cAAc~~,~~CAAE~~,~~EAAI~~,~~SAAAhB~~,~~GACzF~~,CAAA,~~EAELG~~,GACCS,YACE,UAAWK,EAAO,CAChB,SAAU,WACV,MAAO,OACP,OAAQ,OACR,KAAM,EACN,IAAK,EACL,OAAQ,UACR,QAAS,GACT,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMb,EAAY,EAAK,~~EAAC~~,~~aACtB~~,~~OAAM~~,SAAA,~~CAEjBU~~,~~EAACI~~,EAAI,CAAC,KAAK,KAAK,~~OAAQ~~,~~CAAE~~,~~WAAY~~,~~IAAK~~,~~MAAOC,EAAM,mBAAmB,CAAG,EAAA,~~SAAA,MAAA,CAAA,~~EAG9EL~~,~~EAACM~~,~~EAAY~~,~~CAAC~~,MAAO,GAAI,OAAQ,GAAI,~~MAAOD~~,EAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,CAAA,EAI9EP,EAACC,~~aACEX~~,GAAkB,~~CAACC~~,GAClBW,EAAA,SAAA,CACE,~~UAAWE~~,EAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,~~IAAMZ~~,EAAY,EAAI,EAAC,aACrB,OAAM,SAEjBU,EAACO,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOF,EAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,~~EAG7ElB~~,~~GACCa~~,EACGQ,EAAA,CAAA,SAAAhB,EACCQ,EAACS,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOJ,EAAM,mBAAmB,CAAK,CAAA,EAE1EL,EAAA,SAAA,CACE,~~UAAWE~~,EAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,GACf,OAAQ,EACT,CAAA,EACD,~~QAASN~~,eACE,OAAM,SAEjBI,EAACU,EAAQ,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOL,EAAM,mBAAmB,CAAC,CAAA,CAC1D,CAAA,CAEV,CAAA,CACJ,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,~~EAEArB~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"text-box.js","sources":["../../../../src/components/info/text-box.tsx"],"sourcesContent":["import { IcoCheckmark, IcoCopy, IcoEyeClosed, IcoEyeOpened } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { center } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useState } from 'react';\n\nexport interface TextBoxProps {\n content: string;\n onCopy?: (content: string) => void;\n showHideButton?: boolean;\n mono?: boolean;\n}\n\nconst TextBox = (props: TextBoxProps) => {\n const { content, onCopy, showHideButton, mono } = props;\n const [isHidden, setIsHidden] = useState(Boolean(showHideButton));\n const [isCopied, setIsCopied] = useState(false);\n\n useEffect(() => {\n if (isCopied) {\n const timeoutId = setTimeout(() => {\n setIsCopied(false);\n }, 1500);\n\n return () => clearTimeout(timeoutId);\n }\n }, [isCopied]);\n\n useEffect(() => {\n if (showHideButton) {\n setIsHidden(true);\n } else {\n setIsHidden(false);\n }\n }, [showHideButton]);\n\n const handleOnCopy = useCallback(() => {\n if (!onCopy) return;\n onCopy(content);\n setIsCopied(true);\n }, [content]);\n\n return (\n <HStack\n w=\"full\"\n px={4}\n py={3}\n rounded={10}\n bg=\"surface.secondary\"\n justifyContent=\"space-between\"\n position=\"relative\"\n >\n <Box textWrap=\"nowrap\" overflow=\"hidden\" filter={isHidden ? 'blur(10px)' : ''}>\n {mono ? <Text.Mono truncate>{content}</Text.Mono> : <Text truncate>{content}</Text>}\n </Box>\n\n {isHidden && (\n <button\n className={center({\n position: 'absolute',\n width: 'full',\n height: 'full',\n left: 0,\n gap: 2,\n cursor: 'pointer',\n rounded: 10,\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n })}\n onClick={() => setIsHidden(false)}\n aria-label=\"show\"\n >\n <Text size=\"sm\" fontWeight=\"semibold\" variant=\"info\">\n Show\n </Text>\n <IcoEyeOpened width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n\n <HStack>\n {showHideButton && !isHidden && (\n <button\n className={css({\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n })}\n onClick={() => setIsHidden(true)}\n aria-label=\"hide\"\n >\n <IcoEyeClosed width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n {onCopy && (\n <>\n {isCopied ? (\n <IcoCheckmark width={20} height={20} color={token('colors.brand.base')} />\n ) : (\n <button\n className={css({\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n zIndex: 10,\n })}\n onClick={handleOnCopy}\n aria-label=\"copy\"\n >\n <IcoCopy width={20} height={20} color={token('colors.brand.base')} />\n </button>\n )}\n </>\n )}\n </HStack>\n </HStack>\n );\n};\n\nTextBox.displayName = 'TextBox';\n\nexport default TextBox;\n"],"names":["TextBox","props","content","onCopy","showHideButton","mono","isHidden","setIsHidden","useState","isCopied","setIsCopied","useEffect","timeoutId","handleOnCopy","useCallback","_jsxs","HStack","_jsx","Box","Text","center","IcoEyeOpened","token","css","IcoEyeClosed","_Fragment","IcoCheckmark","IcoCopy"],"mappings":"suBAeMA,EAAWC,GAAuB,CACtC,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,eAAAC,EAAgB,KAAAC,CAAI,EAAKJ,EAC5C,CAACK,EAAUC,CAAW,EAAIC,EAAS,EAAQJ,CAAe,EAC1D,CAACK,EAAUC,CAAW,EAAIF,EAAS,EAAK,EAE9CG,EAAU,IAAK,CACb,GAAIF,EAAU,CACZ,MAAMG,EAAY,WAAW,IAAK,CAChCF,EAAY,EAAK,CACnB,EAAG,IAAI,EAEP,MAAO,IAAM,aAAaE,CAAS,CACrC,CACF,EAAG,CAACH,CAAQ,CAAC,EAEbE,EAAU,IAAK,CAEXJ,EADE,CAAAH,CAAAA,CACc,CAIpB,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAMS,EAAeC,EAAY,IAAK,CAC/BX,IACLA,EAAOD,CAAO,EACdQ,EAAY,EAAI,EAClB,EAAG,CAACR,CAAO,CAAC,EAEZ,OACEa,EAACC,GACC,EAAE,OACF,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,GAAG,oBACH,eAAe,gBACf,SAAS,qBAETC,EAACC,GAAI,SAAS,SAAS,SAAS,SAAS,OAAQZ,EAAW,aAAe,YACxED,EAAOY,EAACE,EAAK,MAAK,SAAQ,GAAA,SAAEjB,CAAO,CAAA,EAAgBe,EAACE,EAAI,CAAC,SAAU,GAAA,SAAAjB,GAChE,CAAA,EAELI,GACCS,YACE,UAAWK,EAAO,CAChB,SAAU,WACV,MAAO,OACP,OAAQ,OACR,KAAM,EACN,IAAK,EACL,OAAQ,UACR,QAAS,GACT,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMb,EAAY,EAAK,EACrB,aAAA,OAEX,SAAA,CAAAU,EAACE,EAAI,CAAC,KAAK,KAAK,WAAW,WAAW,QAAQ,OAAM,SAAA,MAAA,CAAA,EAGpDF,EAACI,EAAa,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,CAAA,EAI9EP,EAACC,EACE,CAAA,SAAA,CAAAZ,GAAkB,CAACE,GAClBW,EAAA,SAAA,CACE,UAAWM,EAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,EAChB,CAAA,EACD,QAAS,IAAMhB,EAAY,EAAI,EAAC,aACrB,OAAM,SAEjBU,EAACO,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOF,EAAM,mBAAmB,CAAK,CAAA,CAAA,CAAA,EAG7EnB,GACCc,EACGQ,EAAA,CAAA,SAAAhB,EACCQ,EAACS,EAAY,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOJ,EAAM,mBAAmB,CAAK,CAAA,EAE1EL,EAAA,SAAA,CACE,UAAWM,EAAI,CACb,OAAQ,UACR,aAAc,aACd,aAAc,QACd,cAAe,GACf,OAAQ,EACT,CAAA,EACD,QAASV,eACE,OAAM,SAEjBI,EAACU,EAAQ,CAAA,MAAO,GAAI,OAAQ,GAAI,MAAOL,EAAM,mBAAmB,CAAC,CAAA,CAC1D,CAAA,CAEV,CAAA,CACJ,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,EAEAtB,EAAQ,YAAc"}

package/dist/es/components/inputs/phone-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as t}from"react/jsx-runtime";import{token as y}from"@styled/tokens";import oe from"../icons/ico-caret-down.js";import te from"../icons/ico-checkmark-circle-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import k from"../primitives/text.js";import{css as C}from"@styled/css";import{VStack as ne,Flex as N,HStack as I,Box as ie}from"@styled/jsx";import{useState as c,useRef as d,useMemo as _,useCallback as z,useEffect as W}from"react";import{useButton as se,useFocusRing as le,useKeyboard as ae,mergeProps as A}from"react-aria";import{usePhoneInput as ue,defaultCountries as P,FlagImage as ce}from"react-international-phone";const B=({iso2:p})=>t(N,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:t(ce,{src:`https://flagcdn.com/${p}.svg`,iso2:p,size:16,className:C({objectFit:"cover"})})}),M=p=>{const{onChange:$,autoFocus:H=!0,errorMessage:S}=p,[K,O]=c(""),[T,w]=c(!1),[l,h]=c(!1),[s,m]=c(0),[x,j]=c(""),U=d(null),Y=d(null),f=d(null),b=d([]),D=d(void 0),{country:n,setCountry:F,inputRef:g,handlePhoneValueChange:q,inputValue:G}=ue({defaultCountry:"us",value:K,onChange:e=>{O(e.phone),$(e.phone)}}),i=_(()=>{const e=P.filter(([,o])=>o!==n.iso2),r=P.find(([,o])=>o===n.iso2);return r?[r,...e]:[...P]},[n.iso2]),R=_(()=>i.filter(([,e])=>e!==n.iso2),[n.iso2]),V=z(e=>{var r;F(e),h(!1),(r=g.current)===null||r===void 0||r.focus()},[F]),J=z(()=>{h(!l),l||(m(0),setTimeout(()=>{var e;return(e=f.current)===null||e===void 0?void 0:e.focus()}))},[l]),{buttonProps:Q}=se({onPress:J},U),{focusProps:E,isFocusVisible:L}=le(),{keyboardProps:X}=ae({onKeyDown:e=>{var r;if(l)switch(e.key){case"ArrowDown":e.preventDefault(),m(o=>(o+1)%i.length);break;case"ArrowUp":e.preventDefault(),m(o=>(o-1+i.length)%i.length);break;case"Enter":if(e.preventDefault(),s>=0){const[,o]=i[s];V(o)}break;case"Escape":h(!1),(r=g.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(D.current),j(o=>o+e.key),D.current=window.setTimeout(()=>{j("")},1e3));break}}});W(()=>{var e;H&&((e=g.current)===null||e===void 0||e.focus());const r=o=>{f.current&&!f.current.contains(o.target)&&(h(!1),w(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),W(()=>{var e;if(x!==""){const r=R.findIndex(([o])=>o.toLowerCase().startsWith(x.toLowerCase()));if(r!==-1){const o=i.findIndex(([v])=>v===R[r][0]);m(o),(e=b.current[o])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[x,i,n.iso2]),W(()=>{var e;s>=0&&b.current[s]&&((e=b.current[s])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[s]);const Z=()=>{w(!0)},ee=()=>{w(!1)};return a(ne,{gap:2,children:[a(N,{...A(X,E),ref:Y,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:T&&!L?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:Z,onBlur:ee,position:"relative",_hover:{borderColor:"neutral.primary"},children:[t("button",{...A(Q,E),className:C({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:L?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:a(I,{gap:2,children:[t(B,{iso2:n.iso2}),t(oe,{width:14,height:14,transform:l?"rotate(180)":""})]})}),l&&t(ie,{ref:f,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:i.map(([e,r,o],v)=>{const u=n.iso2===r;return a(I,{cursor:"pointer",bg:u?"brand.base":s===v?"brand.lightest":"",_hover:u?{}:{bg:"brand.lightest"},ref:re=>b.current[v]=re,gap:2,p:4,onClick:()=>V(r),justify:"space-between",children:[a(I,{gap:4,children:[u?t(te,{width:18,height:18,color:y("colors.surface.primary")}):t(B,{iso2:r}),t(k,{styles:{color:u?y("colors.surface.primary"):""},children:e})]}),a(k,{styles:{color:u?y("colors.surface.primary"):y("colors.text.tertiary")},children:["+",o]})]},r)})}),t("input",{type:"tel",inputMode:"tel",onChange:q,value:G,ref:g,className:C({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),S&&t(k,{variant:"error",size:"sm",styles:{fontWeight:"400"},children:S})]})};M.displayName="PhoneInput";export{M as default};
+import{jsxs as l,jsx as o}from"react/jsx-runtime";import{token as re}from"@styled/tokens";import te from"../icons/ico-caret-down.js";import oe from"../icons/ico-checkmark-circle-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import x from"../primitives/text.js";import{css as k}from"@styled/css";import{VStack as ne,Flex as E,HStack as C,Box as ie}from"@styled/jsx";import{useState as c,useRef as d,useMemo as L,useCallback as N,useEffect as I}from"react";import{useButton as ae,useFocusRing as se,useKeyboard as le,mergeProps as _}from"react-aria";import{usePhoneInput as ue,defaultCountries as S,FlagImage as ce}from"react-international-phone";const A=({iso2:h})=>o(E,{width:"1.125rem",height:"1.125rem",borderRadius:"full",borderWidth:"thin",borderColor:"neutral.primary",overflow:"hidden",align:"center",children:o(ce,{src:`https://flagcdn.com/${h}.svg`,iso2:h,size:16,className:k({objectFit:"cover"})})}),B=h=>{const{onChange:M,autoFocus:q=!0,errorMessage:W}=h,[H,K]=c(""),[O,y]=c(!1),[s,m]=c(!1),[a,p]=c(0),[w,P]=c(""),T=d(null),$=d(null),f=d(null),b=d([]),j=d(void 0),{country:n,setCountry:D,inputRef:g,handlePhoneValueChange:U,inputValue:Y}=ue({defaultCountry:"us",value:H,onChange:e=>{K(e.phone),M(e.phone)}}),i=L(()=>{const e=S.filter(([,t])=>t!==n.iso2),r=S.find(([,t])=>t===n.iso2);return r?[r,...e]:[...S]},[n.iso2]),F=L(()=>i.filter(([,e])=>e!==n.iso2),[n.iso2]),R=N(e=>{var r;D(e),m(!1),(r=g.current)===null||r===void 0||r.focus()},[D]),G=N(()=>{m(!s),s||(p(0),setTimeout(()=>{var e;return(e=f.current)===null||e===void 0?void 0:e.focus()}))},[s]),{buttonProps:J}=ae({onPress:G},T),{focusProps:V,isFocusVisible:z}=se(),{keyboardProps:Q}=le({onKeyDown:e=>{var r;if(s)switch(e.key){case"ArrowDown":e.preventDefault(),p(t=>(t+1)%i.length);break;case"ArrowUp":e.preventDefault(),p(t=>(t-1+i.length)%i.length);break;case"Enter":if(e.preventDefault(),a>=0){const[,t]=i[a];R(t)}break;case"Escape":m(!1),(r=g.current)===null||r===void 0||r.focus();break;default:(e.key===" "||e.key.match(/[\w]/i))&&(e.preventDefault(),clearTimeout(j.current),P(t=>t+e.key),j.current=window.setTimeout(()=>{P("")},1e3));break}}});I(()=>{var e;q&&((e=g.current)===null||e===void 0||e.focus());const r=t=>{f.current&&!f.current.contains(t.target)&&(m(!1),y(!1))};return document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[]),I(()=>{var e;if(w!==""){const r=F.findIndex(([t])=>t.toLowerCase().startsWith(w.toLowerCase()));if(r!==-1){const t=i.findIndex(([v])=>v===F[r][0]);p(t),(e=b.current[t])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"})}}},[w,i,n.iso2]),I(()=>{var e;a>=0&&b.current[a]&&((e=b.current[a])===null||e===void 0||e.scrollIntoView({behavior:"smooth",block:"nearest"}))},[a]);const X=()=>{y(!0)},Z=()=>{y(!1)};return l(ne,{gap:2,children:[l(E,{..._(Q,V),ref:$,height:"fit-content",width:"full",alignItems:"center",justify:"center",borderWidth:"thin",borderColor:"neutral.secondary",borderRadius:"input",transition:"all linear 120ms",outlineColor:"brand.base",outlineStyle:O&&!z?"solid":"none",outlineWidth:"thick",outlineOffset:.5,onFocus:X,onBlur:Z,position:"relative",_hover:{borderColor:"neutral.primary"},children:[o("button",{..._(J,V),className:k({display:"flex",justifyContent:"center",alignItems:"center",borderStartRadius:"input",h:12,w:20,px:3,outlineColor:"brand.base",outlineStyle:z?"solid":"none",outlineWidth:"thick",outlineOffset:.5,cursor:"pointer",transition:"all linear 120ms",_hover:{bg:"surface.tertiary"}}),children:l(C,{gap:2,children:[o(A,{iso2:n.iso2}),o(te,{width:14,height:14,transform:s?"rotate(180)":""})]})}),s&&o(ie,{ref:f,tabIndex:-1,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",maxHeight:"17.5rem",overflowY:"auto",outline:"none",children:i.map(([e,r,t],v)=>{const u=n.iso2===r;return l(C,{cursor:"pointer",bg:u?"brand.base":a===v?"brand.lightest":"",_hover:u?{}:{bg:"brand.lightest"},ref:ee=>b.current[v]=ee,gap:2,p:4,onClick:()=>R(r),justify:"space-between",children:[l(C,{gap:4,children:[u?o(oe,{width:18,height:18,color:re("colors.surface.primary")}):o(A,{iso2:r}),o(x,{color:u?"text.quaternary":"text.primary",children:e})]}),l(x,{color:u?"text.quaternary":"text.tertiary",children:["+",t]})]},r)})}),o("input",{type:"tel",inputMode:"tel",onChange:U,value:Y,ref:g,className:k({transition:"all linear 120ms",width:"full",boxSizing:"border-box",borderLeftWidth:"thin",borderColor:"neutral.secondary",rounded:0,margin:0,minWidth:10,fontWeight:"medium",backgroundColor:"transparent",color:"text.primary",height:12,fontSize:"md",py:3,px:4,textAlign:"left",outline:"none",_placeholder:{color:"text.tertiary"}})})]}),W&&o(x,{variant:"error",size:"sm",fontWeight:"normal",children:W})]})};B.displayName="PhoneInput";export{B as default};
 //# sourceMappingURL=phone-input.js.map

package/dist/es/components/inputs/phone-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n onChange: (phone: string) => void;\n autoFocus?: boolean;\n errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n return (\n <Flex\n width=\"1.125rem\"\n height=\"1.125rem\"\n borderRadius=\"full\"\n borderWidth=\"thin\"\n borderColor=\"neutral.primary\"\n overflow=\"hidden\"\n align=\"center\"\n >\n <FlagImage\n src={`https://flagcdn.com/${iso2}.svg`}\n iso2={iso2}\n size={16}\n className={css({ objectFit: 'cover' })}\n />\n </Flex>\n );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n const { onChange, autoFocus = true, errorMessage } = props;\n const [value, setValue] = useState('');\n const [isFocused, setIsFocused] = useState(false);\n const [showDropdown, setShowDropdown] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const [searchString, setSearchString] = useState('');\n const buttonRef = useRef<HTMLButtonElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const itemRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const typeAheadTimeout = useRef<number \| undefined>(undefined);\n\n const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n defaultCountry: 'us',\n value,\n onChange: data => {\n setValue(data.phone);\n onChange(data.phone);\n },\n });\n\n const sortedCountries = useMemo(() => {\n const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n }, [country.iso2]);\n\n const filteredCountries = useMemo(() => {\n return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n }, [country.iso2]);\n\n const handleSelect = useCallback(\n (iso2: CountryIso2) => {\n setCountry(iso2);\n setShowDropdown(false);\n inputRef.current?.focus();\n },\n [setCountry],\n );\n\n const toggleDropdown = useCallback(() => {\n setShowDropdown(!showDropdown);\n if (!showDropdown) {\n setFocusedIndex(0);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [showDropdown]);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: e => {\n if (!showDropdown) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n break;\n case 'ArrowUp':\n e.preventDefault();\n setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n break;\n case 'Enter':\n e.preventDefault();\n if (focusedIndex >= 0) {\n const [, iso2] = sortedCountries[focusedIndex];\n handleSelect(iso2);\n }\n break;\n case 'Escape':\n setShowDropdown(false);\n inputRef.current?.focus();\n break;\n default:\n if (e.key === ' ' \|\| e.key.match(/[\\w]/i)) {\n e.preventDefault();\n clearTimeout(typeAheadTimeout.current);\n setSearchString(s => s + e.key);\n typeAheadTimeout.current = window.setTimeout(() => {\n setSearchString('');\n }, 1000);\n }\n break;\n }\n },\n });\n\n useEffect(() => {\n // Focus the input when the component mounts if autoFocus is true\n if (autoFocus) {\n inputRef.current?.focus();\n }\n\n // Closes the dropdown when clicking outside of it\n const handleClick = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setShowDropdown(false);\n setIsFocused(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n useEffect(() => {\n // Implements type-ahead search functionality\n if (searchString !== '') {\n const matchIndex = filteredCountries.findIndex(([name]) =>\n name.toLowerCase().startsWith(searchString.toLowerCase()),\n );\n if (matchIndex !== -1) {\n const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n setFocusedIndex(actualIndex);\n itemRefs.current[actualIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }\n }, [searchString, sortedCountries, country.iso2]);\n\n useEffect(() => {\n // Scrolls the focused item into view\n if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n itemRefs.current[focusedIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }, [focusedIndex]);\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n return (\n <VStack gap={2}>\n <Flex\n {...mergeProps(keyboardProps, focusProps)}\n ref={containerRef}\n height=\"fit-content\"\n width=\"full\"\n alignItems=\"center\"\n justify=\"center\"\n borderWidth=\"thin\"\n borderColor=\"neutral.secondary\"\n borderRadius=\"input\"\n transition=\"all linear 120ms\"\n outlineColor=\"brand.base\"\n outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n outlineWidth=\"thick\"\n outlineOffset={0.5}\n onFocus={handleFocus}\n onBlur={handleBlur}\n position=\"relative\"\n _hover={{ borderColor: 'neutral.primary' }}\n >\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderStartRadius: 'input',\n h: 12,\n w: 20,\n px: 3,\n outlineColor: 'brand.base',\n outlineStyle: isButtonFocused ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n transition: 'all linear 120ms',\n _hover: {\n bg: 'surface.tertiary',\n },\n })}\n >\n <HStack gap={2}>\n <FlagContainer iso2={country.iso2} />\n <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n </HStack>\n </button>\n\n {showDropdown && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n top={55}\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n maxHeight=\"17.5rem\"\n overflowY=\"auto\"\n outline=\"none\"\n >\n {sortedCountries.map(([name, iso2, countryCode], index) => {\n const isSelectedCountry = country.iso2 === iso2;\n const isFocusedCountry = focusedIndex === index;\n\n return (\n <HStack\n cursor=\"pointer\"\n bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n key={iso2}\n ref={el => (itemRefs.current[index] = el)}\n gap={2}\n p={4}\n onClick={() => handleSelect(iso2)}\n justify=\"space-between\"\n >\n <HStack gap={4}>\n {isSelectedCountry ? (\n <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n ) : (\n <FlagContainer iso2={iso2} />\n )}\n <Text styles={{ color: isSelectedCountry ? token('colors.surface.primary') : '' }}>{name}</Text>\n </HStack>\n <Text\n styles={{\n color: isSelectedCountry ? token('colors.surface.primary') : token('colors.text.tertiary'),\n }}\n >\n +{countryCode}\n </Text>\n </HStack>\n );\n })}\n </Box>\n )}\n <input\n type=\"tel\"\n inputMode=\"tel\"\n onChange={handlePhoneValueChange}\n value={inputValue}\n ref={inputRef}\n className={css({\n transition: 'all linear 120ms',\n width: 'full',\n boxSizing: 'border-box',\n borderLeftWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 0,\n margin: 0,\n minWidth: 10,\n fontWeight: 'medium',\n backgroundColor: 'transparent',\n color: 'text.primary',\n height: 12,\n fontSize: 'md',\n py: 3,\n px: 4,\n textAlign: 'left',\n outline: 'none',\n _placeholder: {\n color: 'text.tertiary',\n },\n })}\n />\n </Flex>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" styles={{ fontWeight: '400' }}>\n {errorMessage}\n </Text>\n )}\n </VStack>\n );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}
1	+ {"version":3,"file":"phone-input.js","sources":["../../../../src/components/inputs/phone-input.tsx"],"sourcesContent":["import { IcoCaretDown, IcoCheckmarkCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, Flex, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\nimport { FlagImage, defaultCountries, usePhoneInput, type CountryIso2 } from 'react-international-phone';\n\nexport interface PhoneInputProps {\n onChange: (phone: string) => void;\n autoFocus?: boolean;\n errorMessage?: string;\n}\n\nconst FlagContainer = ({ iso2 }: { iso2: CountryIso2 }) => {\n return (\n <Flex\n width=\"1.125rem\"\n height=\"1.125rem\"\n borderRadius=\"full\"\n borderWidth=\"thin\"\n borderColor=\"neutral.primary\"\n overflow=\"hidden\"\n align=\"center\"\n >\n <FlagImage\n src={`https://flagcdn.com/${iso2}.svg`}\n iso2={iso2}\n size={16}\n className={css({ objectFit: 'cover' })}\n />\n </Flex>\n );\n};\n\nconst PhoneInput = (props: PhoneInputProps) => {\n const { onChange, autoFocus = true, errorMessage } = props;\n const [value, setValue] = useState('');\n const [isFocused, setIsFocused] = useState(false);\n const [showDropdown, setShowDropdown] = useState(false);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const [searchString, setSearchString] = useState('');\n const buttonRef = useRef<HTMLButtonElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const itemRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const typeAheadTimeout = useRef<number \| undefined>(undefined);\n\n const { country, setCountry, inputRef, handlePhoneValueChange, inputValue } = usePhoneInput({\n defaultCountry: 'us',\n value,\n onChange: data => {\n setValue(data.phone);\n onChange(data.phone);\n },\n });\n\n const sortedCountries = useMemo(() => {\n const otherCountries = defaultCountries.filter(([, iso2]) => iso2 !== country.iso2);\n const selectedCountry = defaultCountries.find(([, iso2]) => iso2 === country.iso2);\n return selectedCountry ? [selectedCountry, ...otherCountries] : [...defaultCountries];\n }, [country.iso2]);\n\n const filteredCountries = useMemo(() => {\n return sortedCountries.filter(([, iso2]) => iso2 !== country.iso2);\n }, [country.iso2]);\n\n const handleSelect = useCallback(\n (iso2: CountryIso2) => {\n setCountry(iso2);\n setShowDropdown(false);\n inputRef.current?.focus();\n },\n [setCountry],\n );\n\n const toggleDropdown = useCallback(() => {\n setShowDropdown(!showDropdown);\n if (!showDropdown) {\n setFocusedIndex(0);\n setTimeout(() => dropdownRef.current?.focus());\n }\n }, [showDropdown]);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleDropdown,\n },\n buttonRef,\n );\n\n const { focusProps, isFocusVisible: isButtonFocused } = useFocusRing();\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: e => {\n if (!showDropdown) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setFocusedIndex(prev => (prev + 1) % sortedCountries.length);\n break;\n case 'ArrowUp':\n e.preventDefault();\n setFocusedIndex(prev => (prev - 1 + sortedCountries.length) % sortedCountries.length);\n break;\n case 'Enter':\n e.preventDefault();\n if (focusedIndex >= 0) {\n const [, iso2] = sortedCountries[focusedIndex];\n handleSelect(iso2);\n }\n break;\n case 'Escape':\n setShowDropdown(false);\n inputRef.current?.focus();\n break;\n default:\n if (e.key === ' ' \|\| e.key.match(/[\\w]/i)) {\n e.preventDefault();\n clearTimeout(typeAheadTimeout.current);\n setSearchString(s => s + e.key);\n typeAheadTimeout.current = window.setTimeout(() => {\n setSearchString('');\n }, 1000);\n }\n break;\n }\n },\n });\n\n useEffect(() => {\n // Focus the input when the component mounts if autoFocus is true\n if (autoFocus) {\n inputRef.current?.focus();\n }\n\n // Closes the dropdown when clicking outside of it\n const handleClick = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setShowDropdown(false);\n setIsFocused(false);\n }\n };\n\n document.addEventListener('mousedown', handleClick);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n };\n }, []);\n\n useEffect(() => {\n // Implements type-ahead search functionality\n if (searchString !== '') {\n const matchIndex = filteredCountries.findIndex(([name]) =>\n name.toLowerCase().startsWith(searchString.toLowerCase()),\n );\n if (matchIndex !== -1) {\n const actualIndex = sortedCountries.findIndex(([name]) => name === filteredCountries[matchIndex][0]);\n setFocusedIndex(actualIndex);\n itemRefs.current[actualIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }\n }, [searchString, sortedCountries, country.iso2]);\n\n useEffect(() => {\n // Scrolls the focused item into view\n if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {\n itemRefs.current[focusedIndex]?.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n }, [focusedIndex]);\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n return (\n <VStack gap={2}>\n <Flex\n {...mergeProps(keyboardProps, focusProps)}\n ref={containerRef}\n height=\"fit-content\"\n width=\"full\"\n alignItems=\"center\"\n justify=\"center\"\n borderWidth=\"thin\"\n borderColor=\"neutral.secondary\"\n borderRadius=\"input\"\n transition=\"all linear 120ms\"\n outlineColor=\"brand.base\"\n outlineStyle={isFocused && !isButtonFocused ? 'solid' : 'none'}\n outlineWidth=\"thick\"\n outlineOffset={0.5}\n onFocus={handleFocus}\n onBlur={handleBlur}\n position=\"relative\"\n _hover={{ borderColor: 'neutral.primary' }}\n >\n <button\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderStartRadius: 'input',\n h: 12,\n w: 20,\n px: 3,\n outlineColor: 'brand.base',\n outlineStyle: isButtonFocused ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n cursor: 'pointer',\n transition: 'all linear 120ms',\n _hover: {\n bg: 'surface.tertiary',\n },\n })}\n >\n <HStack gap={2}>\n <FlagContainer iso2={country.iso2} />\n <IcoCaretDown width={14} height={14} transform={showDropdown ? 'rotate(180)' : ''} />\n </HStack>\n </button>\n\n {showDropdown && (\n <Box\n ref={dropdownRef}\n tabIndex={-1}\n bg=\"surface.primary\"\n position=\"absolute\"\n w=\"full\"\n rounded=\"input\"\n top={55}\n boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n maxHeight=\"17.5rem\"\n overflowY=\"auto\"\n outline=\"none\"\n >\n {sortedCountries.map(([name, iso2, countryCode], index) => {\n const isSelectedCountry = country.iso2 === iso2;\n const isFocusedCountry = focusedIndex === index;\n\n return (\n <HStack\n cursor=\"pointer\"\n bg={isSelectedCountry ? 'brand.base' : isFocusedCountry ? 'brand.lightest' : ''}\n _hover={!isSelectedCountry ? { bg: 'brand.lightest' } : {}}\n key={iso2}\n ref={el => (itemRefs.current[index] = el)}\n gap={2}\n p={4}\n onClick={() => handleSelect(iso2)}\n justify=\"space-between\"\n >\n <HStack gap={4}>\n {isSelectedCountry ? (\n <IcoCheckmarkCircleFill width={18} height={18} color={token('colors.surface.primary')} />\n ) : (\n <FlagContainer iso2={iso2} />\n )}\n <Text color={isSelectedCountry ? 'text.quaternary' : 'text.primary'}>{name}</Text>\n </HStack>\n <Text color={isSelectedCountry ? 'text.quaternary' : 'text.tertiary'}>+{countryCode}</Text>\n </HStack>\n );\n })}\n </Box>\n )}\n <input\n type=\"tel\"\n inputMode=\"tel\"\n onChange={handlePhoneValueChange}\n value={inputValue}\n ref={inputRef}\n className={css({\n transition: 'all linear 120ms',\n width: 'full',\n boxSizing: 'border-box',\n borderLeftWidth: 'thin',\n borderColor: 'neutral.secondary',\n rounded: 0,\n margin: 0,\n minWidth: 10,\n fontWeight: 'medium',\n backgroundColor: 'transparent',\n color: 'text.primary',\n height: 12,\n fontSize: 'md',\n py: 3,\n px: 4,\n textAlign: 'left',\n outline: 'none',\n _placeholder: {\n color: 'text.tertiary',\n },\n })}\n />\n </Flex>\n {errorMessage && (\n <Text variant=\"error\" size=\"sm\" fontWeight=\"normal\">\n {errorMessage}\n </Text>\n )}\n </VStack>\n );\n};\n\nPhoneInput.displayName = 'PhoneInput';\nexport default PhoneInput;\n"],"names":["FlagContainer","iso2","_jsx","Flex","FlagImage","css","PhoneInput","props","onChange","autoFocus","errorMessage","value","setValue","useState","isFocused","setIsFocused","showDropdown","setShowDropdown","focusedIndex","setFocusedIndex","searchString","setSearchString","buttonRef","useRef","containerRef","dropdownRef","itemRefs","typeAheadTimeout","country","setCountry","inputRef","handlePhoneValueChange","inputValue","usePhoneInput","data","sortedCountries","useMemo","otherCountries","defaultCountries","selectedCountry","filteredCountries","handleSelect","useCallback","_a","toggleDropdown","buttonProps","useButton","focusProps","isButtonFocused","useFocusRing","keyboardProps","useKeyboard","prev","s","useEffect","handleClick","event","matchIndex","name","actualIndex","handleFocus","handleBlur","_jsxs","VStack","mergeProps","HStack","IcoCaretDown","Box","countryCode","index","isSelectedCountry","el","IcoCheckmarkCircleFill","token","Text"],"mappings":"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"}

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

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

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

	@@ -1 +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 { 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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"}
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 { 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} color=\"text.tertiary\" />}\n <input ref={ref} className={classes.input} {...mergeProps(inputProps, focusProps, hoverProps)} {...attr} />\n {suffixProps && <Text {...suffixProps} color=\"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'} fontWeight=\"normal\">\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/layouts/dialogue.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Page as o}from"./page.js";import n from"../primitives/button.js";import c from"../primitives/text.js";import{css as g}from"@styled/css";import{HStack as b}from"@styled/jsx";import{createSlot as j,createHost as x}from"create-slots";const i=j(o.Icon),H=({children:l,cancelLabel:t,confirmLabel:s,title:m,message:a,onCancel:f=()=>{},onConfirm:p=()=>{},...d})=>x(l,h=>r(o,{...d,children:[e(o.Icon,{children:h.get(i)}),r(o.Content,{children:[e(c.H3,{styles:{textAlign:"center"},children:m}),e(c,{size:"md",children:a}),r(b,{className:g({pt:6}),children:[e(n,{onPress:p,label:s}),t&&e(n,{onPress:f,label:t})]})]}),e(o.Footer,{})]})),C=Object.assign(H,{Icon:i});export{C as Dialogue};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Page as o}from"./page.js";import n from"../primitives/button.js";import c from"../primitives/text.js";import{css as g}from"@styled/css";import{HStack as b}from"@styled/jsx";import{createSlot as x,createHost as H}from"create-slots";const i=x(o.Icon),j=({children:l,cancelLabel:t,confirmLabel:s,title:m,message:a,onCancel:f=()=>{},onConfirm:p=()=>{},...d})=>H(l,h=>r(o,{...d,children:[e(o.Icon,{children:h.get(i)}),r(o.Content,{children:[e(c.H3,{styles:{textAlign:"center"},children:m}),e(c,{size:"md",children:a}),r(b,{className:g({pt:6}),children:[e(n,{onPress:p,label:s}),t&&e(n,{onPress:f,label:t})]})]}),e(o.Footer,{})]})),C=Object.assign(j,{Icon:i});export{C as Dialogue};
 //# sourceMappingURL=dialogue.js.map

package/dist/es/components/layouts/error.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import"@styled/tokens";import C from"../icons/ico-code.js";import{Page as i}from"./page.js";import o from"../primitives/text.js";import{css as m}from"@styled/css";import{Center as s}from"@styled/jsx";import{createSlot as a,createHost as y}from"create-slots";import{Children as d,cloneElement as h}from"react";const p=a(({children:n,...r})=>e(s,{children:d.map(n,t=>h(t,r))})),f=a(({children:n,...r})=>e(s,{children:d.map(n,t=>h(t,r))})),g=({children:n,detailTitle:r,detailMessage:t,title:u,message:x,...j})=>y(n,c=>{const b=c.get(p),v=c.get(f);return l(i,{...j,children:[e(i.Icon,{children:b||e(C,{})}),l(i.Content,{children:[e(o.H3,{styles:{textAlign:"center"},children:u}),e(o,{size:"md",styles:{textAlign:"center"},children:x}),t&&l("div",{className:m({background:"negative.lightest",borderRadius:"0.5rem",my:4,p:4,width:"full"}),children:[r&&e(o,{variant:"error",children:e("b",{className:m({textTransform:"uppercase"}),children:r})}),e(o,{variant:"error",children:t})]}),v]}),e(i.Footer,{})]})}),A=Object.assign(g,{Icon:p,Button:f});export{g as Component,A as Error};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import"@styled/tokens";import C from"../icons/ico-code.js";import{Page as i}from"./page.js";import o from"../primitives/text.js";import{css as m}from"@styled/css";import{Center as s}from"@styled/jsx";import{createSlot as a,createHost as y}from"create-slots";import{Children as d,cloneElement as h}from"react";const p=a(({children:n,...r})=>e(s,{children:d.map(n,t=>h(t,r))})),f=a(({children:n,...r})=>e(s,{children:d.map(n,t=>h(t,r))})),g=({children:n,detailTitle:r,detailMessage:t,title:u,message:x,...b})=>y(n,c=>{const j=c.get(p),v=c.get(f);return l(i,{...b,children:[e(i.Icon,{children:j||e(C,{})}),l(i.Content,{children:[e(o.H3,{styles:{textAlign:"center"},children:u}),e(o,{size:"md",styles:{textAlign:"center"},children:x}),t&&l("div",{className:m({background:"negative.lightest",borderRadius:"0.5rem",my:4,p:4,width:"full"}),children:[r&&e(o,{variant:"error",children:e("b",{className:m({textTransform:"uppercase"}),children:r})}),e(o,{variant:"error",children:t})]}),v]}),e(i.Footer,{})]})}),A=Object.assign(g,{Icon:p,Button:f});export{g as Component,A as Error};
 //# sourceMappingURL=error.js.map

package/dist/es/components/list-items/navigation-button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as s}from"react/jsx-runtime";import{token as p}from"@styled/tokens";import L from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import m from"../primitives/text.js";import{css as d}from"@styled/css";import{Center as u,HStack as h}from"@styled/jsx";import{flex as B}from"@styled/patterns";import{createSlot as f,createHost as E}from"create-slots";import{Children as b,cloneElement as g,forwardRef as H,useRef as P}from"react";import{useButton as R,useFocusRing as S,mergeProps as F}from"react-aria";const y=f(({children:r,...o})=>t(u,{children:b.map(r,e=>g(e,o))})),x=f(({children:r,...o})=>t(u,{children:b.map(r,e=>g(e,o))})),j=H((r,o)=>{const{primaryLabel:e,secondaryLabel:l,isExternalLink:k,disabled:v}=r,w=P(null),a=o||w,{buttonProps:N}=R({...r,isDisabled:v??!1},a),{isFocusVisible:C,focusProps:I}=S();return E(r.children,c=>{const i=c.get(y),n=c.get(x);return s("button",{...F(N,I),ref:a,className:B({justifyContent:"space-between",alignItems:"center",w:"full",p:4,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",cursor:"pointer",outlineColor:"brand.base",outlineStyle:C?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_disabled:{opacity:"0.3",pointerEvents:"none"}}),children:[s(h,{children:[i&&{...i,props:{...i.props,className:i.props.color?void 0:d({color:"brand.base"}),height:24}},t(m,{styles:{fontWeight:500},children:e}),k&&t(L,{width:14,height:14,color:p("colors.neutral.primary")})]}),s(h,{children:[l&&t(m,{size:"sm",styles:{color:p("colors.text.tertiary")},children:l}),n&&{...n,props:{...n.props,className:n.props.color?void 0:d({color:"neutral.primary"}),width:16,height:16}}]})]})})});j.displayName="NavigationButton";const O=Object.assign(j,{LeadingIcon:y,TrailingIcon:x});export{O as default};
+import{jsx as t,jsxs as s}from"react/jsx-runtime";import{token as I}from"@styled/tokens";import L from"../icons/ico-external-link.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import p from"../primitives/text.js";import{css as m}from"@styled/css";import{Center as d,HStack as u}from"@styled/jsx";import{flex as B}from"@styled/patterns";import{createSlot as h,createHost as E}from"create-slots";import{Children as f,cloneElement as b,forwardRef as H,useRef as P}from"react";import{useButton as R,useFocusRing as S,mergeProps as F}from"react-aria";const g=h(({children:r,...o})=>t(d,{children:f.map(r,e=>b(e,o))})),y=h(({children:r,...o})=>t(d,{children:f.map(r,e=>b(e,o))})),x=H((r,o)=>{const{primaryLabel:e,secondaryLabel:l,isExternalLink:k,disabled:v}=r,w=P(null),a=o||w,{buttonProps:N}=R({...r,isDisabled:v??!1},a),{isFocusVisible:j,focusProps:C}=S();return E(r.children,c=>{const i=c.get(g),n=c.get(y);return s("button",{...F(N,C),ref:a,className:B({justifyContent:"space-between",alignItems:"center",w:"full",p:4,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",cursor:"pointer",outlineColor:"brand.base",outlineStyle:j?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_disabled:{opacity:"0.3",pointerEvents:"none"}}),children:[s(u,{children:[i&&{...i,props:{...i.props,className:i.props.color?void 0:m({color:"brand.base"}),height:24}},t(p,{fontWeight:"medium",children:e}),k&&t(L,{width:14,height:14,color:I("colors.neutral.primary")})]}),s(u,{children:[l&&t(p,{size:"sm",color:"text.tertiary",children:l}),n&&{...n,props:{...n.props,className:n.props.color?void 0:m({color:"neutral.primary"}),width:16,height:16}}]})]})})});x.displayName="NavigationButton";const O=Object.assign(x,{LeadingIcon:g,TrailingIcon:y});export{O as default};
 //# sourceMappingURL=navigation-button.js.map

package/dist/es/components/list-items/navigation-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, RefObject, cloneElement, forwardRef, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\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\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink, disabled } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLButtonElement>);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={flex({\n justifyContent: 'space-between',\n alignItems: 'center',\n w: 'full',\n p: 4,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n })}\n >\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n height: 24,\n },\n }}\n <Text ~~styles={{~~ fontWeight~~: 500 }}~~>{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n <HStack>\n {secondaryLabel && (\n <Text size=\"sm\" ~~styles={{~~ color~~: token('colors.~~text.tertiary~~') }}~~>\n {secondaryLabel}\n </Text>\n )}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </button>\n );\n });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","disabled","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","_jsxs","mergeProps","flex","HStack","css","Text","IcoExternalLink","token","NavigationButton"],"mappings":"gvBAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,EAAgB,SAAAC,CAAQ,EAAKb,EAE7Dc,EAAcC,EAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,CAAE,GAAGlB,EAAO,WAAYa,GAAY,EAAO,EAAEG,CAAmC,EAC5G,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,EAEvC,OAAOC,EAAWtB,EAAM,SAAUuB,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAI1B,CAAW,EACnC4B,EAAeF,EAAM,IAAIjB,CAAY,EAE3C,OACEoB,EACM,SAAA,CAAA,GAAAC,EAAWV,EAAaG,CAAU,EACtC,IAAKJ,EACL,UAAWY,EAAK,CACd,eAAgB,gBAChB,WAAY,SACZ,EAAG,OACH,EAAG,EACH,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,OAAQ,UACR,aAAc,aACd,aAAcT,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,CACrD,CAAA,EAED,SAAA,CAAAO,EAACG,EAAM,CAAA,SAAA,CACJL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BM,EAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,~~CACF~~,~~EACD7B,~~EAAC8B,~~EAAK~~,~~CAAA~~,~~OAAQ~~,~~CAAE~~,~~WAAY~~,~~GAAG~~,~~EAAK~~,~~SAAArB~~,~~IACnCE,~~GAAkBX,EAAC+B,EAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTP,EAACG,~~EACE~~,~~CAAA,SAAA,CAAAlB,~~GACCV,EAAC8B,~~EAAK~~,~~CAAA~~,KAAK,KAAK,~~OAAQ~~,~~CAAE~~,~~MAAOE~~,~~EAAM~~,~~sBAAsB,CAAG,EAAA,SAC7DtB,CAAc,~~CAAA,~~EAGlBc~~,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCK,EAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,CACH,CAAC,EAEDvB,EAAqB,YAAc,mBAE7B2B,MAAAA,EAAmB,OAAO,OAAO3B,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}
1	+ {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack } from '@styled/jsx';\nimport { flex } from '@styled/patterns';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, RefObject, cloneElement, forwardRef, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps {\n primaryLabel: string;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\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\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>((props, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink, disabled } = props;\n\n const internalRef = useRef(null);\n const ref = forwardedRef \|\| internalRef;\n\n const { buttonProps } = useButton({ ...props, isDisabled: disabled ?? false }, ref as RefObject<HTMLButtonElement>);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <button\n {...mergeProps(buttonProps, focusProps)}\n ref={ref}\n className={flex({\n justifyContent: 'space-between',\n alignItems: 'center',\n w: 'full',\n p: 4,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n cursor: 'pointer',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n })}\n >\n <HStack>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? css({ color: 'brand.base' }) : undefined,\n height: 24,\n },\n }}\n <Text fontWeight=\"medium\">{primaryLabel}</Text>\n {isExternalLink && <IcoExternalLink width={14} height={14} color={token('colors.neutral.primary')} />}\n </HStack>\n <HStack>\n {secondaryLabel && (\n <Text size=\"sm\" color=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? css({ color: 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </HStack>\n </button>\n );\n });\n});\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","disabled","internalRef","useRef","ref","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","_jsxs","mergeProps","flex","HStack","css","Text","IcoExternalLink","token","NavigationButton"],"mappings":"gvBAiBA,MAAMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAEKO,EAAuBC,EAAqD,CAACR,EAAOS,IAAgB,CACxG,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,EAAgB,SAAAC,CAAQ,EAAKb,EAE7Dc,EAAcC,EAAO,IAAI,EACzBC,EAAMP,GAAgBK,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,CAAE,GAAGlB,EAAO,WAAYa,GAAY,EAAO,EAAEG,CAAmC,EAC5G,CAAE,eAAAG,EAAgB,WAAAC,GAAeC,EAAAA,EAEvC,OAAOC,EAAWtB,EAAM,SAAUuB,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAI1B,CAAW,EACnC4B,EAAeF,EAAM,IAAIjB,CAAY,EAE3C,OACEoB,EACM,SAAA,CAAA,GAAAC,EAAWV,EAAaG,CAAU,EACtC,IAAKJ,EACL,UAAWY,EAAK,CACd,eAAgB,gBAChB,WAAY,SACZ,EAAG,OACH,EAAG,EACH,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,OAAQ,UACR,aAAc,aACd,aAAcT,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,GACf,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,CACrD,CAAA,EAED,SAAA,CAAAO,EAACG,EAAM,CAAA,SAAA,CACJL,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuC,OAA/BM,EAAI,CAAE,MAAO,aAAc,EACjE,OAAQ,EACT,GAEH7B,EAAC8B,EAAI,CAAC,WAAW,SAAU,SAAArB,CAAoB,CAAA,EAC9CE,GAAkBX,EAAC+B,EAAe,CAAC,MAAO,GAAI,OAAQ,GAAI,MAAOC,EAAM,wBAAwB,CAAC,CAAA,CAAI,CAC9F,CAAA,EACTP,EAACG,aACElB,GACCV,EAAC8B,EAAI,CAAC,KAAK,KAAK,MAAM,gBACnB,SAAApB,CACI,CAAA,EAERc,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAA4C,OAApCK,EAAI,CAAE,MAAO,kBAAmB,EACvE,MAAO,GACP,OAAQ,EACT,EACF,CACM,CAAA,CAAA,CAAA,CAAA,CAGf,CAAC,CACH,CAAC,EAEDvB,EAAqB,YAAc,mBAE7B2B,MAAAA,EAAmB,OAAO,OAAO3B,EAAsB,CAAE,YAAAV,EAAa,aAAAS,CAAY,CAAE"}

package/dist/es/components/list-items/token-list-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as s}from"react/jsx-runtime";import k from"../logos/icon-generic-token.js";import{token as S}from"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import a from"../primitives/text.js";import{css as W}from"@styled/css";import{Center as B,HStack as h,VStack as w}from"@styled/jsx";import{createSlot as x,createHost as I}from"create-slots";import{Children as j,cloneElement as H,useRef as P,useCallback as C}from"react";import{useButton as U,useFocusRing as z,mergeProps as T}from"react-aria";const p=x(({children:e,...t})=>o(B,{children:j.map(e,n=>H(n,t))})),u=({name:e,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:r,logoUrl:i})=>s(h,{w:"full",justify:"space-between",children:[s(h,{gap:2,children:[r?{...r,props:{...r.props,width:30,height:30}}:i?o("img",{width:30,height:30,src:i,alt:`${e} logo`}):o(k,{width:30,height:30}),o(a,{styles:{fontWeight:"500",textTransform:"capitalize"},children:e})]}),s(w,{gap:0,alignItems:"flex-end",children:[o(a,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),o(a,{size:"sm",styles:{lineHeight:"1.5rem",color:S("colors.text.secondary")},children:n})]})]}),F=e=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,logoUrl:i,onPress:l}=e,m=P(null),f=C(()=>{l?.()},[l]),{buttonProps:g}=U({...e,onPress:f},m),{isFocusVisible:d,focusProps:b}=z();return I(e.children,y=>{const c=y.get(p);return l?o("button",{ref:m,...T(g,b),className:W({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:d?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:o(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,tokenIcon:c,logoUrl:i})}):o(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,tokenIcon:c,logoUrl:i})})},L=Object.assign(F,{TokenIcon:p});export{L as TokenListItem};
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import k from"../logos/icon-generic-token.js";import"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import m from"../primitives/text.js";import{css as S}from"@styled/css";import{Center as W,HStack as h,VStack as B}from"@styled/jsx";import{createSlot as w,createHost as x}from"create-slots";import{Children as I,cloneElement as H,useRef as P,useCallback as j}from"react";import{useButton as z,useFocusRing as C,mergeProps as U}from"react-aria";const p=w(({children:o,...t})=>e(W,{children:I.map(o,n=>H(n,t))})),u=({name:o,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:i,logoUrl:r})=>s(h,{w:"full",justify:"space-between",children:[s(h,{gap:2,children:[i?{...i,props:{...i.props,width:30,height:30}}:r?e("img",{width:30,height:30,src:r,alt:`${o} logo`}):e(k,{width:30,height:30}),e(m,{fontWeight:"medium",styles:{textTransform:"capitalize"},children:o})]}),s(B,{gap:0,alignItems:"flex-end",children:[e(m,{size:"sm",fontWeight:"medium",styles:{lineHeight:"1.5rem"},children:t}),e(m,{size:"sm",color:"text.secondary",styles:{lineHeight:"1.5rem"},children:n})]})]}),T=o=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,logoUrl:r,onPress:l}=o,a=P(null),d=j(()=>{l?.()},[l]),{buttonProps:f}=z({...o,onPress:d},a),{isFocusVisible:g,focusProps:b}=C();return x(o.children,y=>{const c=y.get(p);return l?e("button",{ref:a,...U(f,b),className:S({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:g?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:e(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,tokenIcon:c,logoUrl:r})}):e(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:i,tokenIcon:c,logoUrl:r})})},F=Object.assign(T,{TokenIcon:p});export{F as TokenListItem};
 //# sourceMappingURL=token-list-item.js.map