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

@magiclabs/ui-components 1.52.1 → 2.1.0

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

Files changed (1476) hide show

package/dist/cjs/styles/tokens.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("@pandacss/dev");const a=e.defineTokens.colors({slate:{0:{value:"#19191A"},1:{value:"#252525"},2:{value:"#303030"},3:{value:"#383838"},4:{value:"#474747"}},ink:{10:{value:"#F8F8FA"},20:{value:"#EDEDF3"},30:{value:"#E2E0E5"},40:{value:"#CCCAD0"},50:{value:"#B6B4BA"},60:{value:"#97959A"},70:{value:"#77767A"},80:{value:"#4E4D52"},90:{value:"#18171A"}},magic:{10:{value:"#EDEBFF"},20:{value:"#CAC2FF"},30:{value:"#A799FF"},40:{value:"#8875FF"},50:{value:"#6851FF"},60:{value:"#5D40EA"},70:{value:"#522FD4"},80:{value:"#4421C3"},90:{value:"#3512B2"}},leaf:{10:{value:"#E3FAF3"},20:{value:"#BAF5E3"},30:{value:"#90F0D3"},40:{value:"#48DEB1"},50:{value:"#00CC8F"},60:{value:"#00AA77"},70:{value:"#00875F"},80:{value:"#007753"},90:{value:"#006647"}},ruby:{10:{value:"#FFEAE5"},20:{value:"#FFC3B3"},30:{value:"#FF9B80"},40:{value:"#FE7C58"},50:{value:"#FC5C30"},60:{value:"#E84718"},70:{value:"#D43100"},80:{value:"#C12E02"},90:{value:"#AD2B03"}},gold:{10:{value:"#FCF4E5"},20:{value:"#FEE5BD"},30:{value:"#FFD594"},40:{value:"#EDBD72"},50:{value:"#DBA550"},60:{value:"#BF8832"},70:{value:"#A36B14"},80:{value:"#97630C"},90:{value:"#8A5A03"}},sky:{10:{value:"#EBF0FE"},20:{value:"#AFC4FF"},30:{value:"#7398FF"},40:{value:"#5482FB"},50:{value:"#346BF7"},60:{value:"#295EE7"},70:{value:"#1E50D6"},80:{value:"#1344C7"},90:{value:"#0737B8"}},chalk:{value:"#FFFFFF"},paper:{value:"#FFFFFF"}}),u=e.defineTokens.borderWidths({thin:{value:"0.0625rem"},medium:{value:"0.09375rem"},thick:{value:"0.125rem"}}),l=e.defineTokens.radii({button:{value:"var(--button-radius, 9999px)"},container:{value:"var(--container-radius, 1.75rem)"},input:{value:"var(--input-radius, 0.875rem)"}}),v=e.defineTokens.sizes({13:{value:"3.25rem"},15:{value:"3.75rem"}}),F=e.defineTokens.zIndex({max:{value:"2147483647"}});exports.borderWidthTokens=u,exports.colorTokens=a,exports.radiiTokens=l,exports.sizeTokens=v,exports.zIndexTokens=F;
+"use strict";const F={slate:{0:"#19191A",1:"#252525",2:"#303030",3:"#383838",4:"#474747"},ink:{10:"#F8F8FA",20:"#EDEDF3",30:"#E2E0E5",40:"#CCCAD0",50:"#B6B4BA",60:"#97959A",70:"#77767A",80:"#4E4D52",90:"#18171A"},magic:{10:"#EDEBFF",20:"#CAC2FF",30:"#A799FF",40:"#8875FF",50:"#6851FF",60:"#5D40EA",70:"#522FD4",80:"#4421C3",90:"#3512B2"},leaf:{10:"#E3FAF3",20:"#BAF5E3",30:"#90F0D3",40:"#48DEB1",50:"#00CC8F",60:"#00AA77",70:"#00875F",80:"#007753",90:"#006647"},ruby:{10:"#FFEAE5",20:"#FFC3B3",30:"#FF9B80",40:"#FE7C58",50:"#FC5C30",60:"#E84718",70:"#D43100",80:"#C12E02",90:"#AD2B03"},gold:{10:"#FCF4E5",20:"#FEE5BD",30:"#FFD594",40:"#EDBD72",50:"#DBA550",60:"#BF8832",70:"#A36B14",80:"#97630C",90:"#8A5A03"},sky:{10:"#EBF0FE",20:"#AFC4FF",30:"#7398FF",40:"#5482FB",50:"#346BF7",60:"#295EE7",70:"#1E50D6",80:"#1344C7",90:"#0737B8"},chalk:"#FFFFFF",paper:"#FFFFFF"},e={thin:"0.0625rem",medium:"0.09375rem",thick:"0.125rem"},r={button:"var(--button-radius, 9999px)",container:"var(--container-radius, 1.75rem)",input:"var(--input-radius, 0.875rem)"},E={13:"3.25rem",15:"3.75rem"},n={max:"2147483647"};exports.borderWidthTokens=e,exports.colorTokens=F,exports.radiiTokens=r,exports.sizeTokens=E,exports.zIndexTokens=n;
 //# sourceMappingURL=tokens.js.map

package/dist/cjs/styles/tokens.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["~~import~~ ~~{ defineTokens } from '@pandacss/dev';\n\nexport~~ const colorTokens = ~~defineTokens.colors(~~{\n slate: {\n 0: ~~{ value:~~ '#19191A' },\n 1: ~~{ value:~~ '#252525' },\n 2: ~~{ value:~~ '#303030' },\n 3: ~~{ value:~~ '#383838' },\n 4: ~~{ value:~~ '#474747' },\n },\n ink: {\n 10: ~~{ value:~~ '#F8F8FA' },\n 20: ~~{ value:~~ '#EDEDF3' },\n 30: ~~{ value:~~ '#E2E0E5' },\n 40: ~~{ value:~~ '#CCCAD0' },\n 50: ~~{ value:~~ '#B6B4BA' },\n 60: ~~{ value:~~ '#97959A' },\n 70: ~~{ value:~~ '#77767A' },\n 80: ~~{ value:~~ '#4E4D52' },\n 90: ~~{ value:~~ '#18171A' },\n },\n magic: {\n 10: ~~{ value:~~ '#EDEBFF' },\n 20: ~~{ value:~~ '#CAC2FF' },\n 30: ~~{ value:~~ '#A799FF' },\n 40: ~~{ value:~~ '#8875FF' },\n 50: ~~{ value:~~ '#6851FF' },\n 60: ~~{ value:~~ '#5D40EA' },\n 70: ~~{ value:~~ '#522FD4' },\n 80: ~~{ value:~~ '#4421C3' },\n 90: ~~{ value:~~ '#3512B2' },\n },\n leaf: {\n 10: ~~{ value:~~ '#E3FAF3' },\n 20: ~~{ value:~~ '#BAF5E3' },\n 30: ~~{ value:~~ '#90F0D3' },\n 40: ~~{ value:~~ '#48DEB1' },\n 50: ~~{ value:~~ '#00CC8F' },\n 60: ~~{ value:~~ '#00AA77' },\n 70: ~~{ value:~~ '#00875F' },\n 80: ~~{ value:~~ '#007753' },\n 90: ~~{ value:~~ '#006647' },\n },\n ruby: {\n 10: ~~{ value:~~ '#FFEAE5' },\n 20: ~~{ value:~~ '#FFC3B3' },\n 30: ~~{ value:~~ '#FF9B80' },\n 40: ~~{ value:~~ '#FE7C58' },\n 50: ~~{ value:~~ '#FC5C30' },\n 60: ~~{ value:~~ '#E84718' },\n 70: ~~{ value:~~ '#D43100' },\n 80: ~~{ value:~~ '#C12E02' },\n 90: ~~{ value:~~ '#AD2B03' },\n },\n gold: {\n 10: ~~{ value:~~ '#FCF4E5' },\n 20: ~~{ value:~~ '#FEE5BD' },\n 30: ~~{ value:~~ '#FFD594' },\n 40: ~~{ value:~~ '#EDBD72' },\n 50: ~~{ value:~~ '#DBA550' },\n 60: ~~{ value:~~ '#BF8832' },\n 70: ~~{ value:~~ '#A36B14' },\n 80: ~~{ value:~~ '#97630C' },\n 90: ~~{ value:~~ '#8A5A03' },\n },\n sky: {\n 10: ~~{ value:~~ '#EBF0FE' },\n 20: ~~{ value:~~ '#AFC4FF' },\n 30: ~~{ value:~~ '#7398FF' },\n 40: ~~{ value:~~ '#5482FB' },\n 50: ~~{ value:~~ '#346BF7' },\n 60: ~~{ value:~~ '#295EE7' },\n 70: ~~{ value:~~ '#1E50D6' },\n 80: ~~{ value:~~ '#1344C7' },\n 90: ~~{ value:~~ '#0737B8' },\n },\n chalk: ~~{ value:~~ '#FFFFFF' },\n paper: ~~{ value:~~ '#FFFFFF' },\n});\n\nexport const borderWidthTokens = ~~defineTokens.borderWidths(~~{\n thin: ~~{ value:~~ '0.0625rem' },\n medium: ~~{ value:~~ '0.09375rem' },\n thick: ~~{ value:~~ '0.125rem' },\n});\n\nexport const radiiTokens = ~~defineTokens.radii(~~{\n button: ~~{ value:~~ 'var(--button-radius, 9999px)' },\n container: ~~{ value:~~ 'var(--container-radius, 1.75rem)' },\n input: ~~{ value:~~ 'var(--input-radius, 0.875rem)' },\n});\n\nexport const sizeTokens = ~~defineTokens.sizes(~~{\n ~~// Extends from these panda defaults: https://panda-css.com/docs/customization/theme#spacing\n~~ 13: ~~{ value:~~ '3.25rem' },\n 15: ~~{ value:~~ '3.75rem' },\n});\n\nexport const zIndexTokens = ~~defineTokens.zIndex(~~{\n max: ~~{ value:~~ '2147483647' },\n});\n"],"names":["colorTokens","~~defineTokens","~~borderWidthTokens","radiiTokens","sizeTokens","zIndexTokens"],"mappings":"~~4CAEO~~,MAAMA,~~EAAcC~~,~~EAAa~~,~~aAAA,OAAO,CAC7C,~~MAAO,CACL,EAAG,~~CAAE~~,~~MAAO,SAAW,EACvB,~~EAAG,~~CAAE~~,~~MAAO,SAAW,EACvB,~~EAAG,~~CAAE~~,~~MAAO,SAAW,EACvB,~~EAAG,~~CAAE~~,~~MAAO,SAAW,EACvB,~~EAAG,~~CAAE~~,~~MAAO,SAAW,CACxB,~~EACD,IAAK,CACH,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,MAAO,CACL,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,KAAM,CACJ,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,KAAM,CACJ,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,KAAM,CACJ,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,IAAK,CACH,GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO,SAAW,CACzB,~~EACD,MAAO,~~CAAE~~,MAAO,~~SAAW~~,~~EAC3B~~,~~MAAO~~,~~CAAE,MAAO,SAAW,CAC5B,CAAA,EAEYC,EAAoBD,EAAa,aAAA,aAAa,CACzD,~~KAAM,~~CAAE~~,~~MAAO,WAAa,EAC5B,~~OAAQ,~~CAAE~~,MAAO,~~YAAc~~,~~EAC/B~~,~~MAAO~~,~~CAAE,MAAO,UAAY,CAC7B,CAAA,EAEYE,EAAcF,EAAa,aAAA,MAAM,CAC5C,~~OAAQ,~~CAAE,MAAO,8BAAgC,EACjD,~~UAAW,~~CAAE~~,MAAO,~~kCAAoC~~,~~EACxD~~,~~MAAO~~,~~CAAE,MAAO,+BAAiC,CAClD,CAAA,EAEYG,EAAaH,EAAAA,aAAa,MAAM,CAE3C,~~GAAI,~~CAAE~~,~~MAAO,SAAW,EACxB,~~GAAI,~~CAAE~~,~~MAAO~~,~~SAAW~~,~~CACzB,CAAA,EAEYI,EAAeJ,EAAAA,aAAa,OAAO,CAC9C,~~IAAK~~,CAAE,MAAO,YAAc,CAC7B,CAAA~~"}
1	+ {"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const colorTokens = {\n slate: {\n 0: '#19191A',\n 1: '#252525',\n 2: '#303030',\n 3: '#383838',\n 4: '#474747',\n },\n ink: {\n 10: '#F8F8FA',\n 20: '#EDEDF3',\n 30: '#E2E0E5',\n 40: '#CCCAD0',\n 50: '#B6B4BA',\n 60: '#97959A',\n 70: '#77767A',\n 80: '#4E4D52',\n 90: '#18171A',\n },\n magic: {\n 10: '#EDEBFF',\n 20: '#CAC2FF',\n 30: '#A799FF',\n 40: '#8875FF',\n 50: '#6851FF',\n 60: '#5D40EA',\n 70: '#522FD4',\n 80: '#4421C3',\n 90: '#3512B2',\n },\n leaf: {\n 10: '#E3FAF3',\n 20: '#BAF5E3',\n 30: '#90F0D3',\n 40: '#48DEB1',\n 50: '#00CC8F',\n 60: '#00AA77',\n 70: '#00875F',\n 80: '#007753',\n 90: '#006647',\n },\n ruby: {\n 10: '#FFEAE5',\n 20: '#FFC3B3',\n 30: '#FF9B80',\n 40: '#FE7C58',\n 50: '#FC5C30',\n 60: '#E84718',\n 70: '#D43100',\n 80: '#C12E02',\n 90: '#AD2B03',\n },\n gold: {\n 10: '#FCF4E5',\n 20: '#FEE5BD',\n 30: '#FFD594',\n 40: '#EDBD72',\n 50: '#DBA550',\n 60: '#BF8832',\n 70: '#A36B14',\n 80: '#97630C',\n 90: '#8A5A03',\n },\n sky: {\n 10: '#EBF0FE',\n 20: '#AFC4FF',\n 30: '#7398FF',\n 40: '#5482FB',\n 50: '#346BF7',\n 60: '#295EE7',\n 70: '#1E50D6',\n 80: '#1344C7',\n 90: '#0737B8',\n },\n chalk: '#FFFFFF',\n paper: '#FFFFFF',\n} as const;\n\nexport const borderWidthTokens = {\n thin: '0.0625rem',\n medium: '0.09375rem',\n thick: '0.125rem',\n} as const;\n\nexport const radiiTokens = {\n button: 'var(--button-radius, 9999px)',\n container: 'var(--container-radius, 1.75rem)',\n input: 'var(--input-radius, 0.875rem)',\n} as const;\n\nexport const sizeTokens = {\n 13: '3.25rem',\n 15: '3.75rem',\n} as const;\n\nexport const zIndexTokens = {\n max: '2147483647',\n} as const;\n"],"names":["colorTokens","borderWidthTokens","radiiTokens","sizeTokens","zIndexTokens"],"mappings":"aAAO,MAAMA,EAAc,CACzB,MAAO,CACL,EAAG,UACH,EAAG,UACH,EAAG,UACH,EAAG,UACH,EAAG,SACJ,EACD,IAAK,CACH,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,MAAO,CACL,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,IAAK,CACH,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACL,EACD,MAAO,UACP,MAAO,WAGIC,EAAoB,CAC/B,KAAM,YACN,OAAQ,aACR,MAAO,YAGIC,EAAc,CACzB,OAAQ,+BACR,UAAW,mCACX,MAAO,iCAGIC,EAAa,CACxB,GAAI,UACJ,GAAI,WAGOC,EAAe,CAC1B,IAAK"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import"@styled/tokens";import{forwardRef as f}from"react";import{Flex as u,Box as x}from"@styled/jsx";import{cx as e}from"@styled/css";import"../feedback/callout.js";import{LoadingSpinner as C}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.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"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";import{card as N}from"../../recipes/card.js";const c=f(({children:i,className:t,id:m,asButton:o,stack:l,onClick:d,validating:p,...s},a)=>{const n=N({asButton:o,validating:p,...s});return l||o?r(u,{id:m,className:e(n,t),flexDirection:"column",role:o?"button":"none",onClick:o?d:void 0,ref:a,children:p?r(C,{neutral:!0}):i}):r(x,{id:m,className:e(n,t),ref:a,children:i})});c.displayName="Card";export{c as Card};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as v}from"react";import{cn as d}from"../../lib/cn.js";import"../feedback/callout.js";import{LoadingSpinner as k}from"../feedback/loading-spinner.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"../primitives/text.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../feedback/tooltip.js";import{card as u}from"../../recipes/card.js";const l=v(({children:t,className:m,id:n,asButton:o,stack:c,onClick:s,validating:a,...f},e)=>{const p=u({asButton:o,validating:a,...f});return c||o?i("div",{id:n,className:d(p,"flex flex-col",m),role:o?"button":"none",tabIndex:o?0:void 0,onClick:o?s:void 0,onKeyDown:o?r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),r.target.click())}:void 0,ref:e,children:a?i(k,{neutral:!0}):t}):i("div",{id:n,className:d(p,m),ref:e,children:t})});l.displayName="Card";export{l as Card};
 //# sourceMappingURL=card.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{ButtonContainer as n}from"../containers/button.js";import"../containers/card.js";import{css as a}from"@styled/css";import{HStack as s,Box as l}from"@styled/jsx";import{token as d}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 f from"../primitives/text.js";import{forwardRef as c}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import h from"../logos/logo-pay-pal-wordmark.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import"../feedback/callout.js";import{LoadingSpinner as u}from"../feedback/loading-spinner.js";import"../feedback/progress-bar.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../../recipes/toast.js";import"../feedback/tooltip.js";const t=c((r,i)=>{const{disabled:m,validating:p}=r;return o(n,{ref:i,className:a({bg:"#ffc439",outlineColor:"#ffc439",border:"1px solid transparent",px:6,py:2.5}),"aria-disabled":m,shadow:!0,...r,children:p?o(u,{size:24,strokeWidth:2.5,inverted:!0}):e(s,{w:"full",gap:1,justifyContent:"center",children:[o(f,{fontWeight:"semibold",styles:{color:d("colors.ink.90")},children:"Pay with"}),o(l,{mt:.5,children:o(h,{width:60})})]})})});t.displayName="PayPalButton";export{t as PayPalButton};
+import{jsx as r,jsxs as p}from"react/jsx-runtime";import{ButtonContainer as a}from"../containers/button.js";import"../containers/card.js";import"../../lib/cn.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{forwardRef as n}from"react";import"../utils/client-asset-logo.js";import"react-qrcode-logo";import"../utils/secured-by-magic.js";import l from"../logos/logo-pay-pal-wordmark.js";import"../containers/header.js";import"../containers/menu.js";import"../containers/modal.js";import"../containers/overlay.js";import"../feedback/callout.js";import{LoadingSpinner as d}from"../feedback/loading-spinner.js";import"../primitives/portal.js";import"../../hooks/useToast.js";import"../feedback/tooltip.js";const o=n((i,t)=>{const{disabled:m,validating:e}=i;return r(a,{ref:t,className:"bg-[#ffc439] border border-transparent px-6 py-2.5 focus-visible:outline-[#ffc439]","aria-disabled":m,shadow:!0,...i,children:e?r(d,{size:24,strokeWidth:2.5,inverted:!0}):p("div",{className:"flex flex-row items-center w-full gap-1 justify-center",children:[r(s,{fontWeight:"semibold",styles:{color:"var(--color-ink-90)"},children:"Pay with"}),r("div",{className:"mt-0.5",children:r(l,{width:60})})]})})});o.displayName="PayPalButton";export{o 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 { ButtonContainer } from '@components/containers';\nimport { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { ~~css } from '@styled/css';\nimport { Box, HStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ forwardRef } from 'react';\nimport { type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, validating } = props;\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className~~={css({\n~~ bg~~: '~~#ffc439~~',\n outlineColor:~~ ~~'#ffc439',\n~~ border: ~~'1px~~ ~~solid transparent',\n~~ px: ~~6,\n~~ py: 2.5~~,\n })}~~\n aria-disabled={disabled}\n shadow\n {...props}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <~~HStack~~ w=\"full\" gap={1} ~~justifyContent=\"~~center\">\n <Text fontWeight=\"semibold\" styles={{ color: ~~token~~(~~'colors.~~ink.90') }}>\n Pay with\n </Text>\n <~~Box~~ mt={0.5}>\n <LogoPayPalWordmark width={60} />\n </~~Box~~>\n </~~HStack~~>\n )}\n </ButtonContainer>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","validating","_jsx","ButtonContainer","~~css","~~LoadingSpinner","_jsxs","~~HStack","~~Text","~~token","Box","~~LogoPayPalWordmark"],"mappings":"~~slCAgBa~~,~~MAAAA~~,EAAeC,EAAiD,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,WAAAC,CAAY,EAAGH,EAEjC,OACEI,EAACC,EACC,CAAA,IAAKJ,EACL,~~UAAWK~~,~~EAAI~~,~~CACb~~,~~GAAI,UACJ,aAAc,UACd,OAAQ,wBACR,GAAI,EACJ,GAAI,GACL,CAAA,kBACcJ,~~EACf,~~OAAM~~,~~GAAA~~,~~GACFF~~,~~EAEH,SAAAG,~~EACCC,~~EAACG~~,~~EAAe~~,~~CAAA,~~KAAM,GAAI,YAAa,IAAK,~~cAE5CC~~,~~EAACC~~,~~GAAO~~,~~EAAE~~,~~OAAO~~,~~IAAK~~,~~EAAG~~,~~eAAe,SACtC,~~SAAA,~~CAAAL~~,~~EAACM~~,~~EAAK~~,~~CAAA~~,WAAW,WAAW,OAAQ,CAAE,~~MAAOC~~,~~EAAM~~,~~eAAe~~,~~CAAG,EAAA,~~SAAA,UAAA,CAAA,~~EAGrEP~~,~~EAACQ~~,~~EAAI~~,~~CAAA~~,~~GAAI~~,~~GAAG~~,~~SACVR,EAACS,~~EAAkB,CAAC,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,~~EAEDf~~,EAAa,YAAc"}
1	+ {"version":3,"file":"paypal-button.js","sources":["../../../../src/components/external/paypal-button.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { LoadingSpinner } from '@components/feedback';\nimport { LogoPayPalWordmark } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { forwardRef } from 'react';\nimport { type AriaButtonProps } from 'react-aria';\n\nexport interface PayPalButtonProps extends AriaButtonProps {\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n}\n\nexport const PayPalButton = forwardRef<HTMLButtonElement, PayPalButtonProps>((props, forwardedRef) => {\n const { disabled, validating } = props;\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className=\"bg-[#ffc439] border border-transparent px-6 py-2.5 focus-visible:outline-[#ffc439]\"\n aria-disabled={disabled}\n shadow\n {...props}\n >\n {validating ? (\n <LoadingSpinner size={24} strokeWidth={2.5} inverted />\n ) : (\n <div className=\"flex flex-row items-center w-full gap-1 justify-center\">\n <Text fontWeight=\"semibold\" styles={{ color: 'var(--color-ink-90)' }}>\n Pay with\n </Text>\n <div className=\"mt-0.5\">\n <LogoPayPalWordmark width={60} />\n </div>\n </div>\n )}\n </ButtonContainer>\n );\n});\n\nPayPalButton.displayName = 'PayPalButton';\n"],"names":["PayPalButton","forwardRef","props","forwardedRef","disabled","validating","_jsx","ButtonContainer","LoadingSpinner","_jsxs","Text","LogoPayPalWordmark"],"mappings":"o7BAaO,MAAMA,EAAeC,EAAiD,CAACC,EAAOC,IAAgB,CACnG,KAAM,CAAE,SAAAC,EAAU,WAAAC,CAAY,EAAGH,EAEjC,OACEI,EAACC,EACC,CAAA,IAAKJ,EACL,UAAU,qFACK,gBAAAC,EACf,aACIF,EAAK,SAERG,EACCC,EAACE,GAAe,KAAM,GAAI,YAAa,IAAK,SAAQ,EAAA,CAAA,EAEpDC,SAAK,UAAU,yDAAwD,SAAA,CACrEH,EAACI,EAAI,CAAC,WAAW,WAAW,OAAQ,CAAE,MAAO,qBAAqB,EAE3D,SAAA,UAAA,CAAA,EACPJ,SAAK,UAAU,SAAQ,SACrBA,EAACK,EAAkB,CAAC,MAAO,EAAM,CAAA,CAAA,CAAA,CAC7B,GAET,CAAA,CAGP,CAAC,EAEDX,EAAa,YAAc"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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