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/components/inputs/pincode-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var b=require("react/jsx-runtime"),E=require("./text-input.js"),k=require("@styled/css"),N=require("@styled/css/cx"),f=require("react");const h=/\D/g,$=({pinLength:n,onComplete:j=o=>o,onChange:m=o=>o,id:v="pin-code-input",autoFocus:C=!0,className:w})=>{const[o,x]=f.useState(()=>Array.from({length:n},()=>"")),c=f.useRef(Array(n).fill(null));f.useEffect(()=>{x(e=>n<e.length?e.slice(0,n):n>e.length?[...e,...Array(n-e.length).fill("")]:e)},[n]),f.useEffect(()=>{var e;C&&c.current[0]&&((e=c.current[0])===null||e===void 0||e.focus())},[C,n]);const d=(e,r)=>{var t;x(r),m(r);const u=r.join("");u.length===n&&((t=c.current[e])===null||t===void 0||t.blur(),j(u))},I=f.useCallback((e,r)=>{const t=[...o];r.replace(h,"").split("").forEach(u=>{var a,l;e>=n||(t[e]=u,e++,(l=(a=c?.current)===null||a===void 0?void 0:a[e])===null||l===void 0||l.focus())}),d(e,t)},[o,d]),q=f.useCallback(e=>{var r,t;const u=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(h,"");if(a.length>1)return I(u,a);const l=[...o];l[u]=a,a.length&&((t=(r=c?.current)===null||r===void 0?void 0:r[u+1])===null||t===void 0||t.focus()),d(u,l)},[d]),A=f.useCallback(e=>{var r,t,u,a,l;const y=e.currentTarget.value.length,i=parseInt(e.currentTarget.dataset.id||"",10),p=[...o];switch(e.key){case"Backspace":{if(y&&(p[i]="",d(i,p)),i){const s=p.reduceRight((g,R,T)=>g!==-1?g:R!==""?T:g,-1);(r=c?.current[s>=0?s:0])===null||r===void 0||r.focus()}return}case"ArrowLeft":{const s=i?i-1:n-1;(t=c?.current[s])===null||t===void 0||t.focus();return}case"ArrowRight":{const s=i===n-1?0:i+1;(u=c?.current[s])===null||u===void 0||u.focus();return}default:{const s=e.key.replace(h,"");y&&s.length&&s!==e.currentTarget.value&&(p[i]=s,d(i,p),(l=(a=c?.current)===null||a===void 0?void 0:a[i+1])===null||l===void 0||l.focus())}}},[m,d]);return b.jsx("form",{id:v,className:k.css({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:o.map((e,r)=>b.jsx(E.TextInput.Char,{id:v?`${v}-${r}`:void 0,"aria-label":`one time password input ${r+1}`,"data-id":r,name:`one time password input ${r+1}`,value:o[r]||"",className:N.cx(k.css({caretColor:"transparent",rounded:"0.5rem",marginRight:n===6&&r===2?4:0}),w),attr:{onChange:q,onKeyUp:A,autoComplete:r===0?"one-time-code":"off",inputMode:"numeric"},ref:t=>{c?.current&&(c.current[r]=t)}},`${v||void 0}-${r}`))})};exports.PinCodeInput=$,exports.default=$;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var w=require("react/jsx-runtime"),R=require("./text-input.js"),E=require("../../lib/cn.js"),f=require("react");const h=/\D/g,x=({pinLength:u,onComplete:$=c=>c,onChange:m=c=>c,id:v="pin-code-input",autoFocus:C=!0,className:j})=>{const[c,y]=f.useState(()=>Array.from({length:u},()=>"")),l=f.useRef(Array(u).fill(null));f.useEffect(()=>{y(e=>u<e.length?e.slice(0,u):u>e.length?[...e,...Array(u-e.length).fill("")]:e)},[u]),f.useEffect(()=>{var e;C&&l.current[0]&&((e=l.current[0])===null||e===void 0||e.focus())},[C,u]);const d=(e,r)=>{var t;y(r),m(r);const n=r.join("");n.length===u&&((t=l.current[e])===null||t===void 0||t.blur(),$(n))},k=f.useCallback((e,r)=>{const t=[...c];r.replace(h,"").split("").forEach(n=>{var a,o;e>=u||(t[e]=n,e++,(o=(a=l?.current)===null||a===void 0?void 0:a[e])===null||o===void 0||o.focus())}),d(e,t)},[c,d]),I=f.useCallback(e=>{var r,t;const n=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(h,"");if(a.length>1)return k(n,a);const o=[...c];o[n]=a,a.length&&((t=(r=l?.current)===null||r===void 0?void 0:r[n+1])===null||t===void 0||t.focus()),d(n,o)},[d]),A=f.useCallback(e=>{var r,t,n,a,o;const b=e.currentTarget.value.length,i=parseInt(e.currentTarget.dataset.id||"",10),p=[...c];switch(e.key){case"Backspace":{if(b&&(p[i]="",d(i,p)),i){const s=p.reduceRight((g,T,q)=>g!==-1?g:T!==""?q:g,-1);(r=l?.current[s>=0?s:0])===null||r===void 0||r.focus()}return}case"ArrowLeft":{const s=i?i-1:u-1;(t=l?.current[s])===null||t===void 0||t.focus();return}case"ArrowRight":{const s=i===u-1?0:i+1;(n=l?.current[s])===null||n===void 0||n.focus();return}default:{const s=e.key.replace(h,"");b&&s.length&&s!==e.currentTarget.value&&(p[i]=s,d(i,p),(o=(a=l?.current)===null||a===void 0?void 0:a[i+1])===null||o===void 0||o.focus())}}},[m,d]);return w.jsx("form",{id:v,className:"m-0 min-w-0 flex w-full justify-between max-w-[30rem] gap-2",children:c.map((e,r)=>w.jsx(R.TextInput.Char,{id:v?`${v}-${r}`:void 0,"aria-label":`one time password input ${r+1}`,"data-id":r,name:`one time password input ${r+1}`,value:c[r]||"",className:E.cn("caret-transparent rounded-[0.5rem]",u===6&&r===2?"mr-4":"mr-0",j),attr:{onChange:I,onKeyUp:A,autoComplete:r===0?"one-time-code":"off",inputMode:"numeric"},ref:t=>{l?.current&&(l.current[r]=t)}},`${v||void 0}-${r}`))})};exports.PinCodeInput=x,exports.default=x;
 //# sourceMappingURL=pincode-input.js.map

package/dist/cjs/components/inputs/pincode-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\~~nimport { cx } from '@styled/css/cx';\~~n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n pinLength: 3 \| 6;\n onComplete: (pins: string) => void;\n onChange: (pins: Array<string>) => void;\n id?: string;\n originName?: string;\n autoFocus?: boolean;\n className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n pinLength,\n onComplete = pins => pins,\n onChange = pins => pins,\n id = 'pin-code-input',\n autoFocus = true,\n className,\n}: PinCodeInputProps) => {\n const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n const inputRefs = useRef<(HTMLInputElement \| null)[]>(Array(pinLength).fill(null));\n\n useEffect(() => {\n setPinNumbers(prevPinNumbers => {\n if (pinLength < prevPinNumbers.length) {\n return prevPinNumbers.slice(0, pinLength);\n } else if (pinLength > prevPinNumbers.length) {\n return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n }\n return prevPinNumbers;\n });\n }, [pinLength]);\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0]) {\n inputRefs.current[0]?.focus();\n }\n }, [autoFocus, pinLength]);\n\n const updatePincode = (currentIndex: number, pins: string[]) => {\n setPinNumbers(pins);\n onChange(pins);\n\n const strPin = pins.join('');\n\n if (strPin.length === pinLength) {\n inputRefs.current[currentIndex]?.blur();\n onComplete(strPin);\n }\n };\n\n const bulkUpdatePincode = useCallback(\n (currentIndex: number, text: string) => {\n const newPins = [...pinNumbers];\n text\n .replace(REGEX_NUMBER_CLEANER, '')\n .split('')\n .forEach(code => {\n if (currentIndex >= pinLength) {\n return;\n }\n newPins[currentIndex] = code;\n currentIndex++;\n inputRefs?.current?.[currentIndex]?.focus();\n });\n\n updatePincode(currentIndex, newPins);\n },\n [pinNumbers, updatePincode],\n );\n\n const onChangeProp = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const currentIndex = parseInt(e.currentTarget.dataset.id \|\| '', 10);\n const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n // handle cases when user pastes multiple characters\n if (value.length > 1) {\n return bulkUpdatePincode(currentIndex, value);\n }\n const newPins = [...pinNumbers];\n\n newPins[currentIndex] = value;\n\n if (value.length) {\n inputRefs?.current?.[currentIndex + 1]?.focus();\n }\n\n updatePincode(currentIndex, newPins);\n },\n [updatePincode],\n );\n\n const onKeyUp = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n const inputHasValue = e.currentTarget.value.length;\n const currentIndex = parseInt(e.currentTarget.dataset.id \|\| '', 10);\n const newPins = [...pinNumbers];\n\n switch (e.key) {\n case 'Backspace': {\n // Always delete value of selected input\n if (inputHasValue) {\n newPins[currentIndex] = '';\n updatePincode(currentIndex, newPins);\n }\n\n // Select the last input with a value\n if (currentIndex) {\n const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n if (acc !== -1) return acc;\n if (current !== '') return index;\n return acc;\n }, -1);\n\n inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n }\n return;\n }\n\n case 'ArrowLeft': {\n // Navigate left in a loop\n const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n inputRefs?.current[newIndex]?.focus();\n return;\n }\n\n case 'ArrowRight': {\n // Navigate right in a loop\n const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n inputRefs?.current[newIndex]?.focus();\n return;\n }\n\n default: {\n // Overwrite existing value if a new number value is pressed\n const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n if (inputHasValue && value.length && value !== e.currentTarget.value) {\n newPins[currentIndex] = value;\n updatePincode(currentIndex, newPins);\n inputRefs?.current?.[currentIndex + 1]?.focus();\n }\n }\n }\n },\n [onChange, updatePincode],\n );\n\n return (\n <form\n id={id}\n className~~={css({\n margin:~~ 0~~,\n minWidth:~~ 0~~,\n display:~~ 'flex~~',\n width:~~ ~~'100%',\n justifyContent:~~ ~~'space~~-between~~',\n maxWidth:~~ '30rem~~',\n~~ gap: 2~~,\n })}~~\n >\n {pinNumbers.map((_, i) => (\n <TextInput.Char\n id={id ? `${id}-${i}` : undefined}\n aria-label={`one time password input ${i + 1}`}\n data-id={i}\n key={`${id \|\| undefined}-${i}`}\n name={`one time password input ${i + 1}`}\n value={pinNumbers[i] \|\| ''}\n className={cx(~~\n css({\n caretColor:~~ 'transparent~~',\n~~ rounded~~: '~~0.5rem'~~,\n marginRight:~~ pinLength === 6 && i === 2 ? 4 : 0~~,\n }),\n~~ className~~,\n~~ )}\n attr={{\n onChange: onChangeProp,\n onKeyUp,\n autoComplete: i === 0 ? 'one-time-code' : 'off',\n inputMode: 'numeric',\n }}\n ref={el => {\n if (inputRefs?.current) {\n inputRefs.current[i] = el;\n }\n }}\n />\n ))}\n </form>\n );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","~~e","~~value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","_jsx","~~css","~~_","i","TextInput","cx","el"],"mappings":"~~4MAgBA~~,MAAMA,EAAuB,MAEhBC,EAAe,CAAC,CAC3B,UAAAC,EACA,WAAAC,EAAaC,GAAQA,EACrB,SAAAC,EAAWD,GAAQA,EACnB,GAAAE,EAAK,iBACL,UAAAC,EAAY,GACZ,UAAAC,CAAS,IACa,CACtB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,IAAM,MAAM,KAAK,CAAE,OAAQT,CAAW,EAAE,IAAM,EAAE,CAAC,EACxFU,EAAYC,~~EAAAA~~,~~OAAoC~~,MAAMX,CAAS,EAAE,KAAK,IAAI,CAAC,EAEjFY,EAAAA,UAAU,IAAK,CACbJ,EAAcK,GACRb,EAAYa,EAAe,OACtBA,EAAe,MAAM,EAAGb,CAAS,EAC/BA,EAAYa,EAAe,OAC7B,CAAC,GAAGA,EAAgB,GAAG,MAAMb,EAAYa,EAAe,MAAM,EAAE,KAAK,EAAE,CAAC,EAE1EA,CACR,CACH,EAAG,CAACb,CAAS,CAAC,EAEdY,~~EAAU~~,~~UAAA~~,IAAK,OACTP,GAAaK,EAAU,QAAQ,CAAC,KAClCI,EAAAJ,EAAU,QAAQ,CAAC,KAAC,MAAAI,IAAA,QAAAA,EAAE,~~MAE1B~~,~~EAAA~~,EAAG,CAACT,EAAWL,CAAS,CAAC,EAEzB,MAAMe,EAAgB,CAACC,EAAsBd,IAAkB,OAC7DM,EAAcN,CAAI,EAClBC,EAASD,CAAI,EAEb,MAAMe,EAASf,EAAK,KAAK,EAAE,EAEvBe,EAAO,SAAWjB,KACpBc,EAAAJ,EAAU,QAAQM,CAAY,KAAC,MAAAF,IAAA,QAAAA,EAAE,~~KACjCb~~,~~EAAAA~~,EAAWgB,CAAM,EAErB,EAEMC,EAAoBC,EAAAA,YACxB,CAACH,EAAsBI,IAAgB,CACrC,MAAMC,EAAU,CAAC,GAAGd,CAAU,EAC9Ba,EACG,QAAQtB,EAAsB,EAAE,EAChC,MAAM,EAAE,EACR,QAAQwB,GAAO,SACVN,GAAgBhB,IAGpBqB,EAAQL,CAAY,EAAIM,EACxBN,KACAO,GAAAT,EAAAJ,GAAW,WAAO,MAAAI,IAAA,OAAA,OAAAA,EAAGE,CAAY,KAAG,MAAAO,IAAA,QAAAA,EAAA,~~MACtC~~,~~EAAA,~~CAAC,EAEHR,EAAcC,EAAcK,CAAO,CACrC,EACA,CAACd,EAAYQ,CAAa,CAAC,EAGvBS,EAAeL,~~EAClBM~~,~~YAAAA~~,GAA0C,SACzC,~~MAAMT~~,EAAe,~~SAASS~~,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,~~EAC5DC~~,~~EAAQD~~,EAAE,OAAO,MAAM,QAAQ3B,EAAsB,EAAE,EAG7D,~~GAAI4B~~,EAAM,OAAS,EACjB,~~OAAOR~~,EAAkBF,~~EAAcU~~,CAAK,EAE9C,~~MAAML~~,EAAU,CAAC,GAAGd,CAAU,EAE9Bc,EAAQL,CAAY,~~EAAIU~~,EAEpBA,EAAM,~~UACRH~~,KAAAb,GAAW,WAAU,MAAAI,IAAA,OAAA,OAAAA,EAAAE,EAAe,CAAC,KAAG,MAAAO,IAAA,QAAAA,EAAA,~~SAG1CR~~,EAAcC,EAAcK,CAAO,CACrC,EACA,CAACN,CAAa,CAAC,~~EAGXY~~,~~EAAUR~~,EAAAA,~~YACbM~~,GAA4C,eAC3C,~~MAAMG~~,~~EAAgBH~~,EAAE,cAAc,MAAM,~~OACtCT~~,EAAe,~~SAASS~~,EAAE,cAAc,QAAQ,IAAM,GAAI,EAAE,~~EAC5DJ~~,EAAU,CAAC,GAAGd,CAAU,EAE9B,~~OAAQkB~~,EAAE,~~IAAA~~,~~CACR~~,IAAK,YAAa,CAQhB,~~GANIG~~,~~IACFP~~,EAAQL,CAAY,EAAI,GACxBD,EAAcC,EAAcK,CAAO,GAIjCL,EAAc,CAChB,~~MAAMa~~,~~EAAqBR~~,EAAQ,YAAY,~~CAACS~~,EAAKC,EAASC,IACxDF,IAAQ,GAAWA,EACnBC,IAAY,GAAWC,EACpBF,EACN,EAAE,~~GAELhB~~,EAAAJ,GAAW,~~QAAQmB~~,GAAsB,EAAIA,EAAqB,CAAC,KAAC,~~MAAAf~~,IAAA,QAAAA,EAAE,~~MAAA~~,~~CACxE,~~CACA,MACF,CAEA,IAAK,YAAa,CAEhB,~~MAAMmB~~,~~EAAWjB~~,EAAeA,EAAe,EAAIhB,EAAY,GAC/DuB,EAAAb,GAAW,~~QAAQuB~~,CAAQ,KAAG,~~MAAAV~~,IAAA,QAAAA,EAAA,~~MAAA~~,~~EAC9B~~,MACF,CAEA,IAAK,aAAc,CAEjB,~~MAAMU~~,~~EAAWjB~~,IAAiBhB,EAAY,EAAI,EAAIgB,EAAe,~~GACrEkB~~,~~EAAAxB~~,GAAW,~~QAAQuB~~,CAAQ,KAAG,MAAAC,IAAA,QAAAA,EAAA,MAAA,EAC9B,MACF,CAEA,QAAS,CAEP,MAAMR,~~EAAQD~~,EAAE,IAAI,QAAQ3B,EAAsB,EAAE,~~EAEhD8B~~,GAAiBF,EAAM,QAAUA,~~IAAUD~~,EAAE,cAAc,QAC7DJ,EAAQL,CAAY,~~EAAIU~~,~~EACxBX~~,EAAcC,EAAcK,CAAO,~~GACnCc~~,~~KAAAzB~~,GAAW,WAAU,~~MAAA0B~~,IAAA,OAAA,OAAAA,~~EAAApB~~,EAAe,CAAC,KAAG,~~MAAAmB~~,IAAA,QAAAA,EAAA,~~QAE5C~~,CACF,CACF,EACA,~~CAAChC~~,EAAUY,CAAa,CAAC,EAG3B,~~OACEsB~~,EAAAA,~~YACE~~,~~GAAIjC~~,~~EACJ~~,~~UAAWkC~~,~~EAAAA~~,~~IAAI~~,~~CACb,OAAQ,EACR,SAAU,EACV,QAAS,OACT,MAAO,OACP,eAAgB,gBAChB,SAAU,QACV,IAAK,CACN,CAAA,EAEA,SAAA/B,~~EAAW,IAAI,~~CAACgC~~,EAAGC,~~IAClBH~~,EAAAA,~~IAACI~~,EAAAA,UAAU,KACT,CAAA,~~GAAIrC~~,EAAK,GAAGA,CAAE,~~IAAIoC~~,CAAC,GAAK,OAAS,aACrB,2BAA2BA,EAAI,CAAC,~~GAAE~~,~~UACrCA~~,EAET,KAAM,2BAA2BA,EAAI,CAAC,GACtC,~~MAAOjC~~,~~EAAWiC~~,CAAC,GAAK,GACxB,UAAWE,~~EAAAA~~,~~GACTJ~~,~~EAAAA~~,~~IAAI,CACF,WAAY,cACZ,QAAS,SACT,YAAatC,~~IAAc,~~GAAKwC~~,IAAM,EAAI,~~EAAI~~,~~CAC/C~~,~~CAAA,EACDlC,~~CAAS,~~EAEX~~,KAAM,CACJ,SAAUkB,EACV,~~QAAAG~~,EACA,~~aAAca~~,IAAM,EAAI,gBAAkB,MAC1C,UAAW,SACZ,EACD,IAAKG,GAAK,~~CACJjC~~,GAAW,UACbA,EAAU,~~QAAQ8B~~,CAAC,EAAIG,EAE3B,~~CArBK~~,EAAA,~~GAAGvC~~,GAAM,MAAS,~~IAAIoC~~,CAAC,EAAE,~~CAuBjC~~,CAAC,CAAA,CAGR"}
1	+ {"version":3,"file":"pincode-input.js","sources":["../../../../src/components/inputs/pincode-input.tsx"],"sourcesContent":["import { TextInput } from '@components/inputs/text-input';\nimport { cn } from '@lib/cn';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nexport type PinCodeInputProps = {\n pinLength: 3 \| 6;\n onComplete: (pins: string) => void;\n onChange: (pins: Array<string>) => void;\n id?: string;\n originName?: string;\n autoFocus?: boolean;\n className?: string;\n};\n\nconst REGEX_NUMBER_CLEANER = /\\D/g;\n\nexport const PinCodeInput = ({\n pinLength,\n onComplete = pins => pins,\n onChange = pins => pins,\n id = 'pin-code-input',\n autoFocus = true,\n className,\n}: PinCodeInputProps) => {\n const [pinNumbers, setPinNumbers] = useState(() => Array.from({ length: pinLength }, () => ''));\n const inputRefs = useRef<(HTMLInputElement \| null)[]>(Array(pinLength).fill(null));\n\n useEffect(() => {\n setPinNumbers(prevPinNumbers => {\n if (pinLength < prevPinNumbers.length) {\n return prevPinNumbers.slice(0, pinLength);\n } else if (pinLength > prevPinNumbers.length) {\n return [...prevPinNumbers, ...Array(pinLength - prevPinNumbers.length).fill('')];\n }\n return prevPinNumbers;\n });\n }, [pinLength]);\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0]) {\n inputRefs.current[0]?.focus();\n }\n }, [autoFocus, pinLength]);\n\n const updatePincode = (currentIndex: number, pins: string[]) => {\n setPinNumbers(pins);\n onChange(pins);\n\n const strPin = pins.join('');\n\n if (strPin.length === pinLength) {\n inputRefs.current[currentIndex]?.blur();\n onComplete(strPin);\n }\n };\n\n const bulkUpdatePincode = useCallback(\n (currentIndex: number, text: string) => {\n const newPins = [...pinNumbers];\n text\n .replace(REGEX_NUMBER_CLEANER, '')\n .split('')\n .forEach(code => {\n if (currentIndex >= pinLength) {\n return;\n }\n newPins[currentIndex] = code;\n currentIndex++;\n inputRefs?.current?.[currentIndex]?.focus();\n });\n\n updatePincode(currentIndex, newPins);\n },\n [pinNumbers, updatePincode],\n );\n\n const onChangeProp = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const currentIndex = parseInt(e.currentTarget.dataset.id \|\| '', 10);\n const value = e.target.value.replace(REGEX_NUMBER_CLEANER, '');\n\n // handle cases when user pastes multiple characters\n if (value.length > 1) {\n return bulkUpdatePincode(currentIndex, value);\n }\n const newPins = [...pinNumbers];\n\n newPins[currentIndex] = value;\n\n if (value.length) {\n inputRefs?.current?.[currentIndex + 1]?.focus();\n }\n\n updatePincode(currentIndex, newPins);\n },\n [updatePincode],\n );\n\n const onKeyUp = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n const inputHasValue = e.currentTarget.value.length;\n const currentIndex = parseInt(e.currentTarget.dataset.id \|\| '', 10);\n const newPins = [...pinNumbers];\n\n switch (e.key) {\n case 'Backspace': {\n // Always delete value of selected input\n if (inputHasValue) {\n newPins[currentIndex] = '';\n updatePincode(currentIndex, newPins);\n }\n\n // Select the last input with a value\n if (currentIndex) {\n const lastIndexWithDigit = newPins.reduceRight((acc, current, index) => {\n if (acc !== -1) return acc;\n if (current !== '') return index;\n return acc;\n }, -1);\n\n inputRefs?.current[lastIndexWithDigit >= 0 ? lastIndexWithDigit : 0]?.focus();\n }\n return;\n }\n\n case 'ArrowLeft': {\n // Navigate left in a loop\n const newIndex = currentIndex ? currentIndex - 1 : pinLength - 1;\n inputRefs?.current[newIndex]?.focus();\n return;\n }\n\n case 'ArrowRight': {\n // Navigate right in a loop\n const newIndex = currentIndex === pinLength - 1 ? 0 : currentIndex + 1;\n inputRefs?.current[newIndex]?.focus();\n return;\n }\n\n default: {\n // Overwrite existing value if a new number value is pressed\n const value = e.key.replace(REGEX_NUMBER_CLEANER, '');\n\n if (inputHasValue && value.length && value !== e.currentTarget.value) {\n newPins[currentIndex] = value;\n updatePincode(currentIndex, newPins);\n inputRefs?.current?.[currentIndex + 1]?.focus();\n }\n }\n }\n },\n [onChange, updatePincode],\n );\n\n return (\n <form id={id} className=\"m-0 min-w-0 flex w-full justify-between max-w-[30rem] gap-2\">\n {pinNumbers.map((_, i) => (\n <TextInput.Char\n id={id ? `${id}-${i}` : undefined}\n aria-label={`one time password input ${i + 1}`}\n data-id={i}\n key={`${id \|\| undefined}-${i}`}\n name={`one time password input ${i + 1}`}\n value={pinNumbers[i] \|\| ''}\n className={cn('caret-transparent rounded-[0.5rem]', pinLength === 6 && i === 2 ? 'mr-4' : 'mr-0', className)}\n attr={{\n onChange: onChangeProp,\n onKeyUp,\n autoComplete: i === 0 ? 'one-time-code' : 'off',\n inputMode: 'numeric',\n }}\n ref={el => {\n if (inputRefs?.current) {\n inputRefs.current[i] = el;\n }\n }}\n />\n ))}\n </form>\n );\n};\n\nexport default PinCodeInput;\n"],"names":["REGEX_NUMBER_CLEANER","PinCodeInput","pinLength","onComplete","pins","onChange","id","autoFocus","className","pinNumbers","setPinNumbers","useState","inputRefs","useRef","useEffect","prevPinNumbers","_a","updatePincode","currentIndex","strPin","bulkUpdatePincode","useCallback","text","newPins","code","_b","onChangeProp","value","onKeyUp","inputHasValue","lastIndexWithDigit","acc","current","index","newIndex","_c","_e","_d","_jsx","_","i","TextInput","cn","el"],"mappings":"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"}

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

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

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

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

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

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

package/dist/cjs/components/layouts/error.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error.js","sources":["../../../../src/components/layouts/error.tsx"],"sourcesContent":["import { IcoCode } from '@components/icons';\nimport { Page, PageProps } from '@components/layouts/page';\nimport Text from '@components/primitives/text';\nimport { ~~css } from '@styled/css';\nimport { Center } from '@styled/jsx';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nexport interface ErrorProps extends PageProps {\n title: string;\n message: string;\n detailTitle?: string;\n detailMessage?: string;\n}\n\nconst Icon = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\nconst Button = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\nexport const Component = ({ children, detailTitle, detailMessage, title, message, ...props }: ErrorProps) => {\n return createHost(children, slots => {\n const icon = slots.get(Icon);\n const button = slots.get(Button);\n\n return (\n <Page {...props}>\n <Page.Icon>{icon ? icon : <IcoCode />}</Page.Icon>\n <Page.Content>\n <Text.H3 styles={{ textAlign: 'center' }}>{title}</Text.H3>\n <Text size=\"md\" styles={{ textAlign: 'center' }}>\n {message}\n </Text>\n {detailMessage && (\n <div\n className~~={css({\n background: '~~negative.lightest~~',\n borderRadius:~~ ~~'0.5rem',\n~~ my: ~~4,\n~~ p: 4~~,\n width:~~ 'full~~',\n })}~~\n >\n {detailTitle && (\n <Text variant=\"error\">\n <b className~~={css({ textTransform: '~~uppercase~~' })}~~>{detailTitle}</b>\n </Text>\n )}\n <Text variant=\"error\">{detailMessage}</Text>\n </div>\n )}\n {button}\n </Page.Content>\n <Page.Footer />\n </Page>\n );\n });\n};\n\nexport const Error = Object.assign(Component, {\n Icon,\n Button,\n});\n"],"names":["Icon","createSlot","children","props","_jsx","~~Center","~~Children","child","cloneElement","Button","Component","detailTitle","detailMessage","title","message","createHost","slots","icon","button","_jsxs","Page","IcoCode","Text","~~css","~~Error"],"mappings":"~~yQAeA~~,MAAMA,EAAOC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE3CC,~~MAACC,~~EAAAA,~~OAAM~~,~~CAAA~~,~~SACJC~~,~~EAAAA~~,~~SAAS~~,~~IAAIJ~~,~~EAAUK~~,GACfC,~~EAAaD~~,~~aAAAA~~,~~EAAOJ,~~CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAEKM~~,~~EAASR~~,~~EAAAA~~,~~WAAW,~~CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE7CC,EAAAA,~~IAACC~~,~~EAAM~~,~~OAAA~~,~~CAAA~~,~~SACJC~~,~~WAAS~~,~~IAAIJ~~,~~EAAUK~~,GACfC,eAAaD,~~EAAOJ~~,CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAEYO~~,EAAY,CAAC,CAAE,~~SAAAR~~,EAAU,~~YAAAS~~,EAAa,cAAAC,EAAe,MAAAC,EAAO,QAAAC,EAAS,~~GAAGX~~,CAAK,~~IACjFY~~,EAAAA,~~WAAWb~~,~~EAAUc~~,GAAQ,CAClC,MAAMC,EAAOD,EAAM,~~IAAIhB~~,CAAI,~~EACrBkB~~,EAASF,EAAM,IAAIP,CAAM,EAE/B,OACEU,~~EAACC~~,~~KAAAA~~,~~OAAI~~,CAAA,~~GAAKjB~~,~~EACR~~,~~SAAA~~,~~CAAAC~~,~~EAAAA,IAACgB,~~OAAK,~~KAAI~~,CAAA,~~SAAEH~~,~~GAAcb~~,~~EAAAA~~,~~IAACiB~~,~~UAAO~~,CAAA,CAAA,~~IAClCF~~,~~EAAAA~~,~~KAACC,~~EAAAA,KAAK,QACJ,CAAA,SAAA,~~CAAAhB~~,~~EAACkB~~,~~IAAAA~~,~~UAAK~~,~~GAAG~~,~~CAAA~~,OAAQ,CAAE,UAAW,QAAQ,WAAKT,CAAK,CAAA,~~EAChDT~~,~~MAACkB~~,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAQ,~~WAC1CR~~,~~CAAO~~,CAAA,~~EAETF~~,GACCO,~~OAAA~~,MAAA,~~CACE~~,~~UAAWI~~,~~EAAAA~~,~~IAAI~~,~~CACb,WAAY,oBACZ,aAAc,SACd,GAAI,EACJ,EAAG,EACH,MAAO,OACR,EAAC,SAAA,CAEDZ,GACCP,~~EAAAA,~~IAACkB~~,~~EAAI~~,~~QAAA,~~CAAC,QAAQ,QAAO,~~SACnBlB~~,EAAAA,~~SAAG~~,~~UAAWmB~~,~~MAAI~~,~~CAAE~~,~~cAAe~~,~~WAAW~~,~~CAAE~~,~~EAAC~~,~~SAAGZ~~,~~CAAW~~,~~CAAA~~,~~IAGnEP~~,EAAAA,~~IAACkB~~,~~UAAI,~~CAAC,QAAQ,~~QAAS~~,~~SAAAV~~,~~CAAqB~~,CAAA,~~CAAA~~,~~CAAA,CAAA,EAG~~/CM,CAAM,~~CACM~~,CAAA,~~EACfd~~,EAAAA,~~IAACgB~~,~~EAAK~~,~~KAAA,~~OAAM,CAAA,CAAA,CAAG,CACV,CAAA,CAEX,CAAC,~~EAGUI~~,EAAQ,OAAO,~~OAAOd~~,EAAW,CAC5C,~~KAAAV~~,EACA,~~OAAAS~~,CACD,CAAA"}
1	+ {"version":3,"file":"error.js","sources":["../../../../src/components/layouts/error.tsx"],"sourcesContent":["import { IcoCode } from '@components/icons';\nimport { Page, PageProps } from '@components/layouts/page';\nimport Text from '@components/primitives/text';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement } from 'react';\n\nexport interface ErrorProps extends PageProps {\n title: string;\n message: string;\n detailTitle?: string;\n detailMessage?: string;\n}\n\nconst Icon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst Button = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nexport const Component = ({ children, detailTitle, detailMessage, title, message, ...props }: ErrorProps) => {\n return createHost(children, slots => {\n const icon = slots.get(Icon);\n const button = slots.get(Button);\n\n return (\n <Page {...props}>\n <Page.Icon>{icon ? icon : <IcoCode />}</Page.Icon>\n <Page.Content>\n <Text.H3 styles={{ textAlign: 'center' }}>{title}</Text.H3>\n <Text size=\"md\" styles={{ textAlign: 'center' }}>\n {message}\n </Text>\n {detailMessage && (\n <div className=\"bg-negative-lightest rounded-lg my-4 p-4 w-full\">\n {detailTitle && (\n <Text variant=\"error\">\n <b className=\"uppercase\">{detailTitle}</b>\n </Text>\n )}\n <Text variant=\"error\">{detailMessage}</Text>\n </div>\n )}\n {button}\n </Page.Content>\n <Page.Footer />\n </Page>\n );\n });\n};\n\nexport const Error = Object.assign(Component, {\n Icon,\n Button,\n});\n"],"names":["Icon","createSlot","children","props","_jsx","Children","child","cloneElement","Button","Component","detailTitle","detailMessage","title","message","createHost","slots","icon","button","_jsxs","Page","IcoCode","Text","Error"],"mappings":"yLAaA,MAAMA,EAAOC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE3CC,EAAAA,IAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,WAAS,IAAIH,EAAUI,GACfC,eAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEKK,EAASP,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAE7CC,EAAAA,IAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAS,SAAA,IAAIH,EAAUI,GACfC,eAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEYM,EAAY,CAAC,CAAE,SAAAP,EAAU,YAAAQ,EAAa,cAAAC,EAAe,MAAAC,EAAO,QAAAC,EAAS,GAAGV,CAAK,IACjFW,EAAAA,WAAWZ,EAAUa,GAAQ,CAClC,MAAMC,EAAOD,EAAM,IAAIf,CAAI,EACrBiB,EAASF,EAAM,IAAIP,CAAM,EAE/B,OACEU,OAACC,EAAAA,KAAS,CAAA,GAAAhB,YACRC,EAACe,IAAAA,OAAK,KAAM,CAAA,SAAAH,GAAcZ,MAACgB,EAAU,QAAA,EAAA,CAAA,CAAA,EACrCF,OAACC,EAAAA,KAAK,QACJ,CAAA,SAAA,CAAAf,MAACiB,EAAAA,QAAK,GAAE,CAAC,OAAQ,CAAE,UAAW,QAAQ,WAAKT,CAAK,CAAA,EAChDR,MAACiB,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,UAAW,QAAQ,EAC1C,SAAAR,CACI,CAAA,EACNF,GACCO,OAAK,MAAA,CAAA,UAAU,4DACZR,GACCN,EAAAA,IAACiB,UAAI,CAAC,QAAQ,QAAO,SACnBjB,EAAAA,IAAG,IAAA,CAAA,UAAU,qBAAaM,CAAW,CAAA,CAChC,CAAA,EAETN,EAACiB,IAAAA,EAAAA,QAAI,CAAC,QAAQ,QAAO,SAAEV,CAAa,CAAA,CAAQ,IAG/CM,CAAM,CAAA,CAAA,EAETb,EAAAA,IAACe,OAAK,OAAM,CAAA,CAAA,CAAG,CACV,CAAA,CAEX,CAAC,EAGUG,EAAQ,OAAO,OAAOb,EAAW,CAC5C,KAAAT,EACA,OAAAQ,CACD,CAAA"}

package/dist/cjs/components/layouts/page.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),x=require("../containers/content.js"),d=require("../containers/drawer.js"),u=require("../containers/footer.js"),y=require("../containers/header.js"),w=require("../containers/modal.js"),S=require("../containers/overlay.js"),f=require("@styled/css"),b=require("@styled/jsx"),k=require("@styled/tokens"),i=require("create-slots"),h=require("react");const v="2.625rem",s=i.createSlot(({children:t})=>r.jsx(y.Header,{children:t})),g=i.createSlot(({children:t})=>h.Children.map(t,a=>{var n,e,o;return h.cloneElement(a,{color:(n=a.props.color)!==null&&n!==void 0?n:k.token("colors.brand.base"),width:(e=a.props.width)!==null&&e!==void 0?e:v,height:(o=a.props.height)!==null&&o!==void 0?o:v})})),p=i.createSlot(x.Content),m=i.createSlot(u.Footer),q=i.createSlot(d.Drawer),H=({children:t,overlay:a,...n})=>{if(a){const{animate:e,backgroundType:o,isOpen:l=!0,onHidden:c,fullscreen:j=!1}=n;return r.jsx(S.Overlay,{animate:e,backgroundType:o,hide:!l,onHidden:c,fullscreen:j,children:t})}return r.jsx(r.Fragment,{children:t})},P=({children:t,overlay:a=!0,...n})=>i.createHost(t,e=>{const o=e.get(s)?8:4,l=e.getProps(m),c=e.getProps(q);return r.jsx(H,{overlay:a,...n,children:r.jsx(w.Modal,{paddingType:"md",...n,children:r.jsxs(b.VStack,{alignItems:"center",gap:0,width:"full",className:f.css({mt:o}),children:[e.get(s),e.get(g),e.get(p),l&&r.jsx(u.Footer,{...l}),c&&r.jsx(d.Drawer,{...c})]})})})}),D=Object.assign(P,{Header:s,Icon:g,Content:p,Footer:m,Drawer:q});exports.Page=D;
+"use strict";var r=require("react/jsx-runtime"),q=require("../containers/content.js"),s=require("../containers/drawer.js"),u=require("../containers/footer.js"),f=require("../containers/header.js"),y=require("../containers/modal.js"),w=require("../containers/overlay.js"),S=require("../../lib/cn.js"),o=require("create-slots"),v=require("react");const h="2.625rem",d=o.createSlot(({children:t})=>r.jsx(f.Header,{children:t})),g=o.createSlot(({children:t})=>v.Children.map(t,n=>{var a,e,l;return v.cloneElement(n,{color:(a=n.props.color)!==null&&a!==void 0?a:"var(--color-brand-base)",width:(e=n.props.width)!==null&&e!==void 0?e:h,height:(l=n.props.height)!==null&&l!==void 0?l:h})})),m=o.createSlot(q.Content),p=o.createSlot(u.Footer),x=o.createSlot(s.Drawer),b=({children:t,overlay:n,...a})=>{if(n){const{animate:e,backgroundType:l,isOpen:i=!0,onHidden:c,fullscreen:j=!1}=a;return r.jsx(w.Overlay,{animate:e,backgroundType:l,hide:!i,onHidden:c,fullscreen:j,children:t})}return r.jsx(r.Fragment,{children:t})},H=({children:t,overlay:n=!0,...a})=>o.createHost(t,e=>{const l=e.get(d)?8:4,i=e.getProps(p),c=e.getProps(x);return r.jsx(b,{overlay:n,...a,children:r.jsx(y.Modal,{paddingType:"md",...a,children:r.jsxs("div",{className:S.cn("flex flex-col items-center gap-0 w-full",l===8?"mt-8":"mt-4"),children:[e.get(d),e.get(g),e.get(m),i&&r.jsx(u.Footer,{...i}),c&&r.jsx(s.Drawer,{...c})]})})})}),P=Object.assign(H,{Header:d,Icon:g,Content:m,Footer:p,Drawer:x});exports.Page=P;
 //# sourceMappingURL=page.js.map

package/dist/cjs/components/layouts/page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n return Children.map(children, child => {\n return cloneElement(child, {\n color: child.props.color ?? ~~token~~(~~'colors.~~brand.base'),\n width: child.props.width ?? DEFAULT_ICON_SIZE,\n height: child.props.height ?? DEFAULT_ICON_SIZE,\n });\n });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n if (overlay) {\n const { animate, backgroundType, isOpen = true, onHidden, fullscreen = false } = props;\n return (\n <Overlay\n animate={animate}\n backgroundType={backgroundType}\n hide={!isOpen}\n onHidden={onHidden}\n fullscreen={fullscreen}\n >\n {children}\n </Overlay>\n );\n }\n return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n return createHost(children, slots => {\n const buffer = slots.get(PageHeader) ? 8 : 4;\n const footerProps = slots.getProps(PageFooter);\n const drawerProps = slots.getProps(PageDrawer);\n\n return (\n <Container overlay={overlay} {...props}>\n <Modal paddingType=\"md\" {...props}>\n <~~VStack~~ ~~alignItems=\"~~center\" gap={0} ~~width=\"~~full\" ~~className={css({~~ mt: ~~buffer }~~)}>\n {slots.get(PageHeader)}\n {slots.get(PageIcon)}\n {slots.get(PageContent)}\n {footerProps && <Footer {...footerProps} />}\n {drawerProps && <Drawer {...drawerProps} />}\n </~~VStack~~>\n </Modal>\n </Container>\n );\n });\n};\n\nexport const Page = Object.assign(PageHost, {\n Header: PageHeader,\n Icon: PageIcon,\n Content: PageContent,\n Footer: PageFooter,\n Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","~~_a","token","~~PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","fullscreen","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","~~VStack~~","~~css","~~Page"],"mappings":"~~0YAYA~~,MAAMA,EAAoB,WAEpBC,EAAaC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,~~MAACC~~,~~mBAAQF~~,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,~~EAAW~~,~~WAAA~~,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAAA,SAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,~~eAAaD~~,EAAO,CACzB,~~OAAOE~~,~~EAAAF,~~EAAM,MAAM,~~SAAS~~,~~MAAAE~~,~~IAAA~~,~~OAAAA,EAAAC,EAAAA,MAAM,mBAAmB,EACrD,SAAOH,~~EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,~~EACKY~~,~~EAAcV~~,~~EAAAA~~,~~WAAWW~~,EAAO,OAAA,EAChCC,~~EAAaZ~~,~~EAAWa~~,~~WAAAA,~~EAAM,MAAA,EAC9BC,~~EAAad~~,EAAAA,~~WAAWe~~,EAAM,MAAA,EAM9BC,EAAY,CAAC,CAAE,~~SAAAf~~,EAAU,~~QAAAgB~~,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,EAAU,WAAAC,EAAa,EAAO,EAAGL,EACjF,~~OACEhB~~,~~MAACsB~~,~~EAAO~~,~~QAAA~~,CACN,QAASL,EACT,eAAgBC,EAChB,KAAM,CAACC,EACP,SAAUC,EACV,WAAYC,EAEX,~~SAAAtB~~,CACO,CAAA,CAEd,CACA,OAAOC,~~MAAAuB,~~EAAAA,~~SAAA~~,CAAA,~~SAAGxB~~,CAAQ,CAAA,CACpB,~~EAEMyB~~,EAAW,CAAC,CAAE,~~SAAAzB~~,EAAU,~~QAAAgB~~,EAAU,GAAM,GAAGC,CAAK,IAC7CS,EAAAA,~~WAAW1B~~,~~EAAU2B~~,GAAQ,CAClC,MAAMC,EAASD,EAAM,~~IAAI7B~~,CAAU,EAAI,EAAI,~~EACrC+B~~,EAAcF,EAAM,SAAShB,CAAU,EACvCmB,EAAcH,EAAM,SAASd,CAAU,EAE7C,~~OACEZ~~,~~MAACc~~,~~GAAU~~,QAASC,~~EAAa~~,~~GAAAC~~,~~EAC/B~~,~~SAAAhB~~,~~MAAC8B~~,EAAAA,~~MAAM~~,~~CAAA~~,YAAY,~~KAAI~~,~~GAAKd~~,EAC1B,SAAAe,EAAAA,~~KAACC~~,~~EAAM~~,~~OAAA~~,~~CAAC~~,~~WAAW~~,~~SAAS~~,~~IAAK~~,~~EAAG~~,~~MAAM~~,~~OAAO~~,~~UAAWC~~,~~EAAAA~~,~~IAAI~~,~~CAAE~~,~~GAAIN,CAAQ,CAAA,YAC3ED,~~EAAM,~~IAAI7B~~,CAAU,~~EACpB6B~~,EAAM,~~IAAIxB~~,CAAQ,~~EAClBwB~~,EAAM,IAAIlB,CAAW,EACrBoB,~~GAAe5B~~,~~EAAAA~~,~~IAACW~~,~~EAAW,~~OAAA,CAAA,~~GAAAiB~~,~~IAC3BC~~,~~GAAe7B~~,~~MAACa~~,aAAWgB,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,~~EAGUK~~,EAAO,OAAO,~~OAAOV~~,EAAU,CAC1C,~~OAAQ3B~~,EACR,KAAMK,EACN,~~QAASM~~,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}
1	+ {"version":3,"file":"page.js","sources":["../../../../src/components/layouts/page.tsx"],"sourcesContent":["import { Content } from '@components/containers/content';\nimport { Drawer } from '@components/containers/drawer';\nimport { Footer } from '@components/containers/footer';\nimport { Header } from '@components/containers/header';\nimport { Modal, ModalProps } from '@components/containers/modal';\nimport { Overlay, OverlayProps } from '@components/containers/overlay';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, ComponentProps, cloneElement } from 'react';\n\nconst DEFAULT_ICON_SIZE = '2.625rem';\n\nconst PageHeader = createSlot(({ children }) => <Header>{children}</Header>);\nconst PageIcon = createSlot(({ children }) => {\n return Children.map(children, child => {\n return cloneElement(child, {\n color: child.props.color ?? 'var(--color-brand-base)',\n width: child.props.width ?? DEFAULT_ICON_SIZE,\n height: child.props.height ?? DEFAULT_ICON_SIZE,\n });\n });\n});\nconst PageContent = createSlot(Content);\nconst PageFooter = createSlot(Footer);\nconst PageDrawer = createSlot(Drawer);\n\nexport interface PageProps extends ModalProps, Omit<OverlayProps, 'hide'>, ComponentProps<'div'> {\n overlay?: boolean;\n}\n\nconst Container = ({ children, overlay, ...props }: PageProps) => {\n if (overlay) {\n const { animate, backgroundType, isOpen = true, onHidden, fullscreen = false } = props;\n return (\n <Overlay\n animate={animate}\n backgroundType={backgroundType}\n hide={!isOpen}\n onHidden={onHidden}\n fullscreen={fullscreen}\n >\n {children}\n </Overlay>\n );\n }\n return <>{children}</>;\n};\n\nconst PageHost = ({ children, overlay = true, ...props }: PageProps) => {\n return createHost(children, slots => {\n const buffer = slots.get(PageHeader) ? 8 : 4;\n const footerProps = slots.getProps(PageFooter);\n const drawerProps = slots.getProps(PageDrawer);\n\n return (\n <Container overlay={overlay} {...props}>\n <Modal paddingType=\"md\" {...props}>\n <div className={cn('flex flex-col items-center gap-0 w-full', buffer === 8 ? 'mt-8' : 'mt-4')}>\n {slots.get(PageHeader)}\n {slots.get(PageIcon)}\n {slots.get(PageContent)}\n {footerProps && <Footer {...footerProps} />}\n {drawerProps && <Drawer {...drawerProps} />}\n </div>\n </Modal>\n </Container>\n );\n });\n};\n\nexport const Page = Object.assign(PageHost, {\n Header: PageHeader,\n Icon: PageIcon,\n Content: PageContent,\n Footer: PageFooter,\n Drawer: PageDrawer,\n});\n"],"names":["DEFAULT_ICON_SIZE","PageHeader","createSlot","children","_jsx","Header","PageIcon","Children","child","cloneElement","PageContent","Content","PageFooter","Footer","PageDrawer","Drawer","Container","overlay","props","animate","backgroundType","isOpen","onHidden","fullscreen","Overlay","_Fragment","PageHost","createHost","slots","buffer","footerProps","drawerProps","Modal","_jsxs","cn","Page"],"mappings":"yVAUA,MAAMA,EAAoB,WAEpBC,EAAaC,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAQ,IAAOC,EAAAA,IAACC,EAAAA,iBAAQF,CAAQ,CAAA,CAAU,EACrEG,EAAWJ,EAAAA,WAAW,CAAC,CAAE,SAAAC,CAAU,IAChCI,EAAAA,SAAS,IAAIJ,EAAUK,GAAQ,WACpC,OAAOC,EAAAA,aAAaD,EAAO,CACzB,SAAOA,EAAM,MAAM,4BAAS,0BAC5B,SAAOA,EAAM,MAAM,4BAASR,EAC5B,UAAQQ,EAAM,MAAM,6BAAUR,CAC/B,CAAA,CACH,CAAC,CACF,EACKU,EAAcR,EAAWS,WAAAA,EAAO,OAAA,EAChCC,EAAaV,aAAWW,EAAM,MAAA,EAC9BC,EAAaZ,EAAAA,WAAWa,EAAM,MAAA,EAM9BC,EAAY,CAAC,CAAE,SAAAb,EAAU,QAAAc,EAAS,GAAGC,CAAkB,IAAI,CAC/D,GAAID,EAAS,CACX,KAAM,CAAE,QAAAE,EAAS,eAAAC,EAAgB,OAAAC,EAAS,GAAM,SAAAC,EAAU,WAAAC,EAAa,EAAO,EAAGL,EACjF,OACEd,EAAAA,IAACoB,UAAO,CACN,QAASL,EACT,eAAgBC,EAChB,KAAM,CAACC,EACP,SAAUC,EACV,WAAYC,EAEX,SAAApB,CACO,CAAA,CAEd,CACA,OAAOC,EAAAA,IAAAqB,WAAA,CAAA,SAAGtB,CAAQ,CAAA,CACpB,EAEMuB,EAAW,CAAC,CAAE,SAAAvB,EAAU,QAAAc,EAAU,GAAM,GAAGC,CAAK,IAC7CS,EAAAA,WAAWxB,EAAUyB,GAAQ,CAClC,MAAMC,EAASD,EAAM,IAAI3B,CAAU,EAAI,EAAI,EACrC6B,EAAcF,EAAM,SAAShB,CAAU,EACvCmB,EAAcH,EAAM,SAASd,CAAU,EAE7C,OACEV,EAAAA,IAACY,EAAU,CAAA,QAASC,EAAO,GAAMC,EAAK,SACpCd,EAAAA,IAAC4B,EAAAA,MAAK,CAAC,YAAY,KAAS,GAAAd,EAC1B,SAAAe,EAAAA,KAAA,MAAA,CAAK,UAAWC,EAAAA,GAAG,0CAA2CL,IAAW,EAAI,OAAS,MAAM,EAAC,SAAA,CAC1FD,EAAM,IAAI3B,CAAU,EACpB2B,EAAM,IAAItB,CAAQ,EAClBsB,EAAM,IAAIlB,CAAW,EACrBoB,GAAe1B,MAACS,EAAM,OAAA,CAAA,GAAKiB,CAAW,CAAA,EACtCC,GAAe3B,EAAAA,IAACW,aAAWgB,CAAW,CAAA,CAAI,GAEvC,CAAA,CAAA,CAAA,CAGd,CAAC,EAGUI,EAAO,OAAO,OAAOT,EAAU,CAC1C,OAAQzB,EACR,KAAMK,EACN,QAASI,EACT,OAAQE,EACR,OAAQE,CACT,CAAA"}

package/dist/cjs/components/list-items/activity-list-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),o=require("react"),r=require("@styled/jsx"),n=require("create-slots"),l=require("../primitives/text.js"),g=require("@styled/css"),f=require("../containers/button.js");require("../containers/card.js"),require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const x=n.createSlot(({backgroundColor:i,children:t})=>e.jsx(r.Center,{borderRadius:60,height:11,width:11,backgroundColor:i,overflow:"hidden",children:o.cloneElement(o.Children.only(t),{height:24,width:24})})),b=n.createSlot(({backgroundColor:i,children:t})=>e.jsxs(r.Box,{height:10,width:10,position:"relative",children:[e.jsx(r.Flex,{alignItems:"center",justifyContent:"center",position:"absolute",backgroundColor:i,height:7,width:7,borderRadius:30,children:o.cloneElement(t[0],{height:20,width:20})}),e.jsx(r.Flex,{alignItems:"center",justifyContent:"center",position:"absolute",backgroundColor:i,borderRadius:30,height:7,width:7,bottom:0,right:0,children:o.cloneElement(t[1],{height:20,width:20})})]})),m=n.createSlot(({backgroundColor:i,children:t})=>e.jsx(r.Flex,{backgroundColor:i,borderRadius:30,alignItems:"center",justifyContent:"center",borderWidth:"2",borderColor:"neutral.tertiary",width:"5",height:"5",children:o.cloneElement(o.Children.only(t),{height:10,width:10})})),v=({title:i,subtitle:t,primaryValue:q,primaryValueColor:j,secondaryValue:c,children:y,onPress:C,...a})=>n.createHost(y,s=>{const d=s.get(b),u=s.get(x),h=s.get(m);return e.jsx(f.ButtonContainer,{borderRadius:"0.375rem",expand:!0,onPress:C,children:e.jsxs(r.HStack,{p:3,gap:2,w:"full",pos:"relative",className:g.cx(g.css({_active:{transform:"scale(0.95)"},_hover:{bgColor:"neutral.secondary"},bgColor:"neutral.tertiary"})),borderRadius:"md",justify:"space-between",alignItems:"center",...a,children:[e.jsxs(r.HStack,{children:[d&&d,u&&u,h&&e.jsx(r.Box,{position:"absolute",left:9,top:11,children:h}),e.jsxs(r.Box,{children:[e.jsx(l.default,{truncate:!0,size:"md",fontWeight:"bold",children:i})," ",t&&e.jsx(l.default,{truncate:!0,size:"sm",fontColor:"text.secondary",children:t})]})]}),e.jsxs(r.Box,{children:[e.jsx(l.default,{truncate:!0,size:"md",styles:{textAlign:"end",color:j},...a,children:q}),c&&e.jsx(l.default,{truncate:!0,size:"sm",styles:{textAlign:"end"},fontColor:"text.secondary",children:c})]})]})})}),p=Object.assign(v,{DoubleIcon:b,PrimaryIcon:x,SecondaryIcon:m});exports.ActivityListItem=p;
+"use strict";var e=require("react/jsx-runtime"),b=require("../containers/button.js");require("../containers/card.js");var j=require("../../lib/cn.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var l=require("../primitives/text.js"),i=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var n=require("create-slots");const h=n.createSlot(({backgroundColor:t,children:r})=>e.jsx("div",{className:"flex items-center justify-center rounded-[60px] h-11 w-11 overflow-hidden",style:{backgroundColor:t},children:i.cloneElement(i.Children.only(r),{height:24,width:24})})),x=n.createSlot(({backgroundColor:t,children:r})=>e.jsxs("div",{className:"h-10 w-10 relative",children:[e.jsx("div",{className:"flex items-center justify-center absolute h-7 w-7 rounded-[30px]",style:{backgroundColor:t},children:i.cloneElement(r[0],{height:20,width:20})}),e.jsx("div",{className:"flex items-center justify-center absolute rounded-[30px] h-7 w-7 bottom-0 right-0",style:{backgroundColor:t},children:i.cloneElement(r[1],{height:20,width:20})})]})),m=n.createSlot(({backgroundColor:t,children:r})=>e.jsx("div",{className:"flex items-center justify-center rounded-[30px] border-2 border-neutral-tertiary w-5 h-5",style:{backgroundColor:t},children:i.cloneElement(i.Children.only(r),{height:10,width:10})})),q=({title:t,subtitle:r,primaryValue:y,primaryValueColor:f,secondaryValue:c,children:g,onPress:v,...o})=>n.createHost(g,s=>{const a=s.get(x),d=s.get(h),u=s.get(m);return e.jsx(b.ButtonContainer,{borderRadius:"0.375rem",expand:!0,onPress:v,children:e.jsxs("div",{className:j.cn("flex flex-row items-center p-3 gap-2 w-full relative rounded-md justify-between","active:scale-95 hover:bg-neutral-secondary bg-neutral-tertiary"),...o,children:[e.jsxs("div",{className:"flex flex-row items-center gap-2.5",children:[a&&a,d&&d,u&&e.jsx("div",{className:"absolute left-9 top-11",children:u}),e.jsxs("div",{children:[e.jsx(l.default,{truncate:!0,size:"md",fontWeight:"bold",children:t})," ",r&&e.jsx(l.default,{truncate:!0,size:"sm",fontColor:"text.secondary",children:r})]})]}),e.jsxs("div",{children:[e.jsx(l.default,{truncate:!0,size:"md",styles:{textAlign:"end",color:f},...o,children:y}),c&&e.jsx(l.default,{truncate:!0,size:"sm",styles:{textAlign:"end"},fontColor:"text.secondary",children:c})]})]})})}),w=Object.assign(q,{DoubleIcon:x,PrimaryIcon:h,SecondaryIcon:m});exports.ActivityListItem=w;
 //# sourceMappingURL=activity-list-item.js.map

package/dist/cjs/components/list-items/activity-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-list-item.js","sources":["../../../../src/components/list-items/activity-list-item.tsx"],"sourcesContent":["import { ~~Children,~~ ~~cloneElement,~~ ~~PropsWithChildren,~~ ~~ReactElement~~ } from '~~react~~';\nimport { ~~Box,~~ ~~Center, Flex, HStack~~ } from '@~~styled~~/~~jsx~~';\nimport { createHost, createSlot } from 'create-slots';\nimport ~~Text from '@components/primitives/text';\nimport~~ { ~~css~~, cx } ~~from~~ ~~'@styled/css';\nimport { ButtonContainer~~ } from '~~@components/containers~~';\n\nexport interface ActivityListItemProps extends PropsWithChildren {\n onPress?: () => void;\n title: string;\n subtitle?: string;\n primaryValue: string;\n primaryValueColor?: string;\n secondaryValue?: string;\n}\n\nexport interface IconProps extends PropsWithChildren {\n backgroundColor?: string;\n}\n\nexport interface DoubleIconProps {\n backgroundColor?: string;\n children: ReactElement[];\n}\n\nconst PrimaryIcon = createSlot(({ backgroundColor, children }: IconProps) => (\n <~~Center~~ ~~borderRadius={60}~~ ~~height={~~11} ~~width={~~11} ~~backgroundColor~~={backgroundColor} ~~overflow=\"hidden~~\">\n {cloneElement(Children.only(children) as ReactElement, { height: 24, width: 24 })}\n </~~Center~~>\n));\n\nconst DoubleIcon = createSlot(({ backgroundColor, children }: DoubleIconProps) => {\n return (\n <~~Box~~ ~~height={~~10} ~~width={~~10} ~~position=\"~~relative\">\n <~~Flex\n alignItems~~=\"center~~\"\n justifyContent=\"~~center~~\"\n position=\"~~absolute\"~~\n backgroundColor~~={backgroundColor}~~\n height={7~~}~~\n width={7}\n borderRadius={30}\n~~ >\n {cloneElement(children[0] as ReactElement, { height: 20, width: 20 })}\n </~~Flex~~>\n <~~Flex~~\n ~~alignItems~~=\"center~~\"\n justifyContent=\"~~center~~\"\n position=\"~~absolute\"\n ~~backgroundColor~~={backgroundColor}~~\n borderRadius={30~~}\n ~~height={7}\n width={7}\n bottom={0}\n right={0}\n~~ >\n {cloneElement(children[1] as ReactElement, { height: 20, width: 20 })}\n </~~Flex~~>\n </~~Box~~>\n );\n});\n\nconst SecondaryIcon = createSlot(({ backgroundColor, children }: IconProps) => (\n <~~Flex~~\n ~~backgroundColor={backgroundColor}\n borderRadius={30}\n alignItems~~=\"center~~\"\n justifyContent=\"~~center~~\"\n borderWidth=\"~~2~~\"\n borderColor=\"~~neutral.tertiary~~\"\n width=\"~~5\"\n ~~height=\"5~~\"\n >\n {cloneElement(Children.only(children) as ReactElement, { height: 10, width: 10 })}\n </~~Flex~~>\n));\n\nconst ActivityListItemHost = ({\n title,\n subtitle,\n primaryValue,\n primaryValueColor,\n secondaryValue,\n children,\n onPress,\n ...props\n}: ActivityListItemProps) => {\n return createHost(children, slots => {\n const doubleIcon = slots.get(DoubleIcon);\n const primaryIcon = slots.get(PrimaryIcon);\n const secondaryIcon = slots.get(SecondaryIcon);\n\n return (\n <ButtonContainer borderRadius=\"0.375rem\" expand onPress={onPress}>\n <~~HStack~~\n p={3}\n gap={2~~}\n~~ w~~=\"~~full~~\"\n pos=\"~~relative~~\"\n className={cx(\n css({\n _active:~~ { ~~transform:~~ '~~scale(0.95)' }~~,\n ~~_hover~~: ~~{ bgColor~~: 'neutral.secondary' ~~},\n bgColor: '~~neutral.tertiary',\n ~~}),\n~~ )}\n ~~borderRadius=\"md\"\n justify=\"space-between\"\n alignItems=\"center\"\n~~ {...props}\n >\n <~~HStack~~>\n {doubleIcon && doubleIcon}\n {primaryIcon && primaryIcon}\n {secondaryIcon && ~~(\n~~ <~~Box~~ ~~position~~=\"absolute\" left={9} top={11~~}>\n~~ {secondaryIcon}\n </~~Box>\n )~~}\n <~~Box~~>\n <Text truncate={true} size=\"md\" fontWeight=\"bold\">\n {title}\n </Text>{' '}\n {subtitle && (\n <Text truncate={true} size=\"sm\" fontColor=\"text.secondary\">\n {subtitle}\n </Text>\n )}\n </~~Box~~>\n </~~HStack~~>\n\n <~~Box~~>\n <Text truncate={true} size=\"md\" styles={{ textAlign: 'end', color: primaryValueColor }} {...props}>\n {primaryValue}\n </Text>\n {secondaryValue && (\n <Text truncate={true} size=\"sm\" styles={{ textAlign: 'end' }} fontColor=\"text.secondary\">\n {secondaryValue}\n </Text>\n )}\n </~~Box~~>\n </~~HStack~~>\n </ButtonContainer>\n );\n });\n};\n\nexport const ActivityListItem = Object.assign(ActivityListItemHost, {\n DoubleIcon,\n PrimaryIcon,\n SecondaryIcon,\n});\n"],"names":["PrimaryIcon","createSlot","backgroundColor","children","_jsx","~~Center","~~cloneElement","Children","DoubleIcon","_jsxs","~~Box","Flex","~~SecondaryIcon","ActivityListItemHost","title","subtitle","primaryValue","primaryValueColor","secondaryValue","onPress","props","createHost","slots","doubleIcon","primaryIcon","secondaryIcon","ButtonContainer","~~HStack~~","~~cx","css","~~Text","ActivityListItem"],"mappings":"~~uxBAyBA~~,MAAMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,~~CAAqB~~,~~IACtEC~~,~~EAAAA~~,~~IAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAC~~,~~aAAc~~,~~GAAI,OAAQ,GAAI,~~MAAO,~~GAAI~~,~~gBAAiBH~~,~~EAAiB~~,~~SAAS~~,~~SAAQ~~,~~SACjGI~~,~~eAAaC,~~EAAAA,SAAS,~~KAAKJ~~,CAAQ,EAAmB,CAAE,OAAQ,GAAI,MAAO,~~EAAE~~,~~CAAE,~~CAAC,CAAA,CAEpF,~~EAEKK~~,~~EAAaP~~,~~EAAAA~~,~~WAAW~~,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,CAA2B,~~IAEzEM~~,~~EAAAA~~,~~KAACC~~,~~EAAG~~,~~IAAA~~,~~CAAC~~,~~OAAQ,GAAI,MAAO,GAAI,SAAS,WAAU,~~SAAA,~~CAC7CN~~,~~MAACO,~~EAAAA,~~KACC~~,CAAA,~~WAAW~~,~~SACX~~,~~eAAe~~,~~SACf~~,~~SAAS~~,~~WACT~~,~~gBAAiBT~~,~~EACjB~~,~~OAAQ,EACR,MAAO,EACP,aAAc,GAEb,SAAAI,~~EAAAA,~~aAAaH~~,EAAS,CAAC,EAAmB,CAAE,OAAQ,GAAI,MAAO,~~EAAI~~,~~CAAA~~,~~CAC/D~~,CAAA,~~EACPC~~,~~EAAAA~~,~~IAACO~~,~~EAAAA~~,~~KACC~~,~~CAAA~~,~~WAAW,SACX,eAAe,SACf,SAAS,WACT,gBAAiBT,EACjB,aAAc,GACd,OAAQ,EACR,~~MAAO,~~EACP~~,~~OAAQ~~,~~EACR~~,~~MAAO~~,~~EAEN~~,~~SAAAI~~,~~EAAaH~~,~~aAAAA,~~EAAS,CAAC,EAAmB,CAAE,OAAQ,GAAI,MAAO,EAAI,CAAA,~~CAC/D~~,CAAA,CAAA,CAAA,CAAA,~~CAGZ~~,~~EAEKS~~,~~EAAgBX~~,~~aAAW~~,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,~~CAAqB~~,~~IACxEC~~,~~EAAAA~~,~~IAACO~~,~~EACC,KAAA,~~CAAA,~~gBAAiBT~~,~~EACjB~~,~~aAAc~~,~~GACd~~,~~WAAW~~,~~SACX~~,~~eAAe~~,~~SACf~~,~~YAAY~~,~~IACZ~~,~~YAAY~~,~~mBACZ~~,~~MAAM,IACN,OAAO,IAAG,SAETI,EAAaC,aAAAA,EAAAA,SAAS,KAAKJ,~~CAAQ,EAAmB,CAAE,OAAQ,GAAI,MAAO,~~EAAI~~,~~CAAA~~,~~CAC3E,~~CAAA,~~CACR~~,~~EAEKU~~,EAAuB,CAAC,CAC5B,MAAAC,EACA,SAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,eAAAC,EACA,~~SAAAf~~,EACA,~~QAAAgB~~,EACA,GAAGC,CACmB,IACfC,~~EAAAA~~,~~WAAWlB~~,~~EAAUmB~~,GAAQ,CAClC,MAAMC,EAAaD,EAAM,~~IAAId~~,CAAU,~~EACjCgB~~,EAAcF,EAAM,~~IAAItB~~,CAAW,~~EACnCyB~~,EAAgBH,EAAM,IAAIV,CAAa,EAE7C,~~OACER~~,~~EAACsB~~,~~IAAAA~~,~~kBAAgB~~,CAAA,aAAa,WAAW,OAAM,GAAC,QAASP,~~WACvDV~~,~~OAACkB~~,~~EAAAA~~,~~QACC~~,~~EAAG~~,~~EACH~~,~~IAAK~~,~~EACL~~,~~EAAE~~,~~OACF~~,~~IAAI~~,~~WACJ~~,~~UAAWC~~,~~KACTC~~,~~MAAI,CACF,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CAAE,QAAS,mBAAqB,EACxC,QAAS,kBACV,CAAA,CAAC,EAEJ,aAAa,KACb,QAAQ,gBACR,WAAW,SACP,GAAAT,YAEJX,~~EAAAA,~~KAACkB~~,~~EACE~~,~~OAAA,~~CAAA,~~SAAA~~,~~CAAAJ,~~GAAcA,EACdC,GAAeA,EACfC,~~GACCrB~~,EAAAA,~~IAACM~~,~~EAAAA~~,~~IAAG~~,~~CAAC~~,~~SAAS~~,~~WAAW~~,~~KAAM~~,~~EAAG~~,~~IAAK~~,~~GACpC~~,~~SAAAe~~,~~IAGLhB~~,~~OAACC~~,EAAAA,~~eACCN~~,~~MAAC0B,~~EAAAA,~~QAAK~~,~~CAAA~~,SAAU,GAAM,KAAK,KAAK,WAAW,~~gBACxChB~~,~~CAAK~~,CAAA,~~EACA~~,IACPC,~~GACCX~~,~~EAAAA~~,~~IAAC0B~~,EAAAA,SAAK,SAAU,GAAM,KAAK,KAAK,UAAU,iBAAgB,~~SACvDf~~,CAAQ,CAAA,CAEZ,CACG,CAAA,CAAA,CAAA,CAAA,~~EAGRN~~,~~OAACC,~~EAAAA,~~IACC~~,CAAA,SAAA,~~CAAAN~~,~~MAAC0B~~,~~EAAAA~~,~~QAAI~~,CAAC,SAAU,GAAM,KAAK,KAAK,OAAQ,CAAE,UAAW,MAAO,~~MAAOb~~,~~CAAiB~~,~~EAAQ~~,~~GAAAG~~,~~WACzFJ~~,~~CAAY~~,CAAA,~~EAEdE~~,~~GACCd~~,~~EAAAA~~,~~IAAC0B~~,EAAAA,~~QAAI~~,~~CAAC~~,SAAU,GAAM,KAAK,KAAK,OAAQ,CAAE,UAAW,~~KAAK~~,~~EAAI~~,UAAU,~~iBAAgB~~,~~SACrFZ~~,~~CACI~~,CAAA,~~CACR~~,~~GACG~~,~~CACC~~,CAAA,CAAA,CAAA,~~CAGf~~,CAAC,~~EAGUa~~,EAAmB,OAAO,~~OAAOlB~~,EAAsB,CAClE,~~WAAAL~~,EACA,~~YAAAR~~,EACA,~~cAAAY~~,CACD,CAAA"}
1	+ {"version":3,"file":"activity-list-item.js","sources":["../../../../src/components/list-items/activity-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport Text from '@components/primitives/text';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, PropsWithChildren, ReactElement } from 'react';\n\nexport interface ActivityListItemProps extends PropsWithChildren {\n onPress?: () => void;\n title: string;\n subtitle?: string;\n primaryValue: string;\n primaryValueColor?: string;\n secondaryValue?: string;\n}\n\nexport interface IconProps extends PropsWithChildren {\n backgroundColor?: string;\n}\n\nexport interface DoubleIconProps {\n backgroundColor?: string;\n children: ReactElement[];\n}\n\nconst PrimaryIcon = createSlot(({ backgroundColor, children }: IconProps) => (\n <div\n className=\"flex items-center justify-center rounded-[60px] h-11 w-11 overflow-hidden\"\n style={{ backgroundColor }}\n >\n {cloneElement(Children.only(children) as ReactElement, { height: 24, width: 24 })}\n </div>\n));\n\nconst DoubleIcon = createSlot(({ backgroundColor, children }: DoubleIconProps) => {\n return (\n <div className=\"h-10 w-10 relative\">\n <div className=\"flex items-center justify-center absolute h-7 w-7 rounded-[30px]\" style={{ backgroundColor }}>\n {cloneElement(children[0] as ReactElement, { height: 20, width: 20 })}\n </div>\n <div\n className=\"flex items-center justify-center absolute rounded-[30px] h-7 w-7 bottom-0 right-0\"\n style={{ backgroundColor }}\n >\n {cloneElement(children[1] as ReactElement, { height: 20, width: 20 })}\n </div>\n </div>\n );\n});\n\nconst SecondaryIcon = createSlot(({ backgroundColor, children }: IconProps) => (\n <div\n className=\"flex items-center justify-center rounded-[30px] border-2 border-neutral-tertiary w-5 h-5\"\n style={{ backgroundColor }}\n >\n {cloneElement(Children.only(children) as ReactElement, { height: 10, width: 10 })}\n </div>\n));\n\nconst ActivityListItemHost = ({\n title,\n subtitle,\n primaryValue,\n primaryValueColor,\n secondaryValue,\n children,\n onPress,\n ...props\n}: ActivityListItemProps) => {\n return createHost(children, slots => {\n const doubleIcon = slots.get(DoubleIcon);\n const primaryIcon = slots.get(PrimaryIcon);\n const secondaryIcon = slots.get(SecondaryIcon);\n\n return (\n <ButtonContainer borderRadius=\"0.375rem\" expand onPress={onPress}>\n <div\n className={cn(\n 'flex flex-row items-center p-3 gap-2 w-full relative rounded-md justify-between',\n 'active:scale-95 hover:bg-neutral-secondary bg-neutral-tertiary',\n )}\n {...props}\n >\n <div className=\"flex flex-row items-center gap-2.5\">\n {doubleIcon && doubleIcon}\n {primaryIcon && primaryIcon}\n {secondaryIcon && <div className=\"absolute left-9 top-11\">{secondaryIcon}</div>}\n <div>\n <Text truncate={true} size=\"md\" fontWeight=\"bold\">\n {title}\n </Text>{' '}\n {subtitle && (\n <Text truncate={true} size=\"sm\" fontColor=\"text.secondary\">\n {subtitle}\n </Text>\n )}\n </div>\n </div>\n\n <div>\n <Text truncate={true} size=\"md\" styles={{ textAlign: 'end', color: primaryValueColor }} {...props}>\n {primaryValue}\n </Text>\n {secondaryValue && (\n <Text truncate={true} size=\"sm\" styles={{ textAlign: 'end' }} fontColor=\"text.secondary\">\n {secondaryValue}\n </Text>\n )}\n </div>\n </div>\n </ButtonContainer>\n );\n });\n};\n\nexport const ActivityListItem = Object.assign(ActivityListItemHost, {\n DoubleIcon,\n PrimaryIcon,\n SecondaryIcon,\n});\n"],"names":["PrimaryIcon","createSlot","backgroundColor","children","_jsx","cloneElement","Children","DoubleIcon","_jsxs","SecondaryIcon","ActivityListItemHost","title","subtitle","primaryValue","primaryValueColor","secondaryValue","onPress","props","createHost","slots","doubleIcon","primaryIcon","secondaryIcon","ButtonContainer","cn","Text","ActivityListItem"],"mappings":"ovBAwBA,MAAMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,CAAQ,IACzDC,EACE,IAAA,MAAA,CAAA,UAAU,4EACV,MAAO,CAAE,gBAAAF,GAER,SAAAG,EAAaC,aAAAA,EAAAA,SAAS,KAAKH,CAAQ,EAAmB,CAAE,OAAQ,GAAI,MAAO,GAAI,CAAC,CAAA,CAEpF,EAEKI,EAAaN,EAAW,WAAA,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,CAA2B,IAEzEK,OAAA,MAAA,CAAK,UAAU,qBAAoB,SAAA,CACjCJ,EAAAA,IAAK,MAAA,CAAA,UAAU,mEAAmE,MAAO,CAAE,gBAAAF,CAAiB,EAAA,SACzGG,EAAAA,aAAaF,EAAS,CAAC,EAAmB,CAAE,OAAQ,GAAI,MAAO,EAAE,CAAE,CAAC,CAAA,EAEvEC,MAAA,MAAA,CACE,UAAU,oFACV,MAAO,CAAE,gBAAAF,CAAe,EAEvB,SAAAG,EAAAA,aAAaF,EAAS,CAAC,EAAmB,CAAE,OAAQ,GAAI,MAAO,EAAI,CAAA,CAChE,CAAA,CAAA,CAAA,CAAA,CAGX,EAEKM,EAAgBR,EAAAA,WAAW,CAAC,CAAE,gBAAAC,EAAiB,SAAAC,CAAQ,IAC3DC,MACE,MAAA,CAAA,UAAU,2FACV,MAAO,CAAE,gBAAAF,GAER,SAAAG,EAAAA,aAAaC,EAAS,SAAA,KAAKH,CAAQ,EAAmB,CAAE,OAAQ,GAAI,MAAO,GAAI,CAAC,CAAA,CAEpF,EAEKO,EAAuB,CAAC,CAC5B,MAAAC,EACA,SAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,eAAAC,EACA,SAAAZ,EACA,QAAAa,EACA,GAAGC,CACmB,IACfC,EAAWf,WAAAA,EAAUgB,GAAQ,CAClC,MAAMC,EAAaD,EAAM,IAAIZ,CAAU,EACjCc,EAAcF,EAAM,IAAInB,CAAW,EACnCsB,EAAgBH,EAAM,IAAIV,CAAa,EAE7C,OACEL,EAAAA,IAACmB,EAAAA,gBAAgB,CAAA,aAAa,WAAW,OAAM,GAAC,QAASP,EACvD,SAAAR,EAAA,KAAA,MAAA,CACE,UAAWgB,EAAAA,GACT,kFACA,gEAAgE,EAE9D,GAAAP,YAEJT,EAAAA,KAAK,MAAA,CAAA,UAAU,+CACZY,GAAcA,EACdC,GAAeA,EACfC,GAAiBlB,EAAAA,IAAK,MAAA,CAAA,UAAU,kCAA0BkB,CAAa,CAAA,EACxEd,OAAA,MAAA,CAAA,SAAA,CACEJ,EAAAA,IAACqB,EAAAA,QAAI,CAAC,SAAU,GAAM,KAAK,KAAK,WAAW,OAAM,SAC9Cd,CACI,CAAA,EAAC,IACPC,GACCR,EAACqB,IAAAA,EAAAA,SAAK,SAAU,GAAM,KAAK,KAAK,UAAU,iBAAgB,SACvDb,CAAQ,CAAA,CAEZ,CACG,CAAA,CAAA,CAAA,CAAA,EAGRJ,EAAAA,KAAA,MAAA,CAAA,SAAA,CACEJ,MAACqB,EAAI,QAAA,CAAC,SAAU,GAAM,KAAK,KAAK,OAAQ,CAAE,UAAW,MAAO,MAAOX,CAAmB,EAAA,GAAMG,EAAK,SAC9FJ,CACI,CAAA,EACNE,GACCX,EAACqB,IAAAA,EAAAA,QAAK,CAAA,SAAU,GAAM,KAAK,KAAK,OAAQ,CAAE,UAAW,KAAO,EAAE,UAAU,iBACrE,SAAAV,GAEJ,CAAA,CAAA,CACG,CACF,CAAA,CAAA,CAAA,CAGZ,CAAC,EAGUW,EAAmB,OAAO,OAAOhB,EAAsB,CAClE,WAAAH,EACA,YAAAP,EACA,cAAAS,CACD,CAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),g=require("../containers/button.js");require("../containers/card.js");var o=require("@styled/css"),t=require("@styled/jsx"),v=require("@styled/tokens"),f=require("../icons/ico-external-link.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var q=require("../primitives/text.js"),s=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var u=require("create-slots");const p=u.createSlot(({children:i,...r})=>e.jsx(t.Center,{children:s.Children.map(i,a=>s.cloneElement(a,r))})),x=u.createSlot(({children:i,...r})=>e.jsx(t.Center,{children:s.Children.map(i,a=>s.cloneElement(a,r))})),m=s.forwardRef(({className:i,...r},a)=>{const{primaryLabel:l,secondaryLabel:d,isExternalLink:j}=r;return u.createHost(r.children,h=>{const n=h.get(p),c=h.get(x);return e.jsx(g.ButtonContainer,{ref:a,className:o.cx(o.css({p:4,bg:"neutral.quaternary",_hover:{bg:"neutral.secondary"}}),i),borderRadius:"0.5rem",expand:!0,...r,children:e.jsxs(t.HStack,{justify:"space-between",w:"full",children:[e.jsxs(t.HStack,{children:[n&&{...n,props:{height:24,...n.props,className:n.props.color?void 0:o.css({color:"brand.base"})}},e.jsxs(t.VStack,{gap:0,alignItems:"start",children:[e.jsxs(t.HStack,{children:[typeof l=="string"?e.jsx(q.default,{fontWeight:"medium",children:l}):l,j&&e.jsx(f.default,{width:14,height:14,color:v.token("colors.neutral.primary")})]}),d&&e.jsx(q.default,{size:"sm",fontColor:"text.tertiary",children:d})]})]}),e.jsx(t.HStack,{children:c&&{...c,props:{...c.props,className:c.props.color?void 0:o.css({color:"neutral.primary"}),width:16,height:16}}})]})})})});m.displayName="NavigationButton";const b=Object.assign(m,{LeadingIcon:p,TrailingIcon:x});exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),p=require("../containers/button.js");require("../containers/card.js");var q=require("../../lib/cn.js"),v=require("../icons/ico-external-link.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var d=require("../primitives/text.js"),a=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");var c=require("create-slots");const x=c.createSlot(({children:i,...r})=>e.jsx("div",{className:"flex items-center justify-center",children:a.Children.map(i,t=>a.cloneElement(t,r))})),m=c.createSlot(({children:i,...r})=>e.jsx("div",{className:"flex items-center justify-center",children:a.Children.map(i,t=>a.cloneElement(t,r))})),f=a.forwardRef(({className:i,...r},t)=>{const{primaryLabel:n,secondaryLabel:o,isExternalLink:h}=r;return c.createHost(r.children,u=>{const s=u.get(x),l=u.get(m);return e.jsx(p.ButtonContainer,{ref:t,className:q.cn("p-4 bg-neutral-quaternary hover:bg-neutral-secondary",i),borderRadius:"0.5rem",expand:!0,...r,children:e.jsxs("div",{className:"flex flex-row items-center justify-between w-full",children:[e.jsxs("div",{className:"flex flex-row items-center gap-2.5",children:[s&&{...s,props:{height:24,...s.props,className:s.props.color?void 0:"text-brand-base"}},e.jsxs("div",{className:"flex flex-col gap-0 items-start",children:[e.jsxs("div",{className:"flex flex-row items-center gap-2.5",children:[typeof n=="string"?e.jsx(d.default,{fontWeight:"medium",children:n}):n,h&&e.jsx(v.default,{width:14,height:14,color:"var(--color-neutral-primary)"})]}),o&&e.jsx(d.default,{size:"sm",fontColor:"text.tertiary",children:o})]})]}),e.jsx("div",{className:"flex flex-row items-center gap-2.5",children:l&&{...l,props:{...l.props,className:l.props.color?void 0:"text-neutral-primary",width:16,height:16}}})]})})})});f.displayName="NavigationButton";const g=Object.assign(f,{LeadingIcon:x,TrailingIcon:m});exports.default=g;
 //# sourceMappingURL=navigation-button.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer, ButtonContainerProps } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { ~~css,~~ cx } from '@~~styled~~/~~css~~';\nimport { ~~Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef, ReactNode } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps, ButtonContainerProps {\n primaryLabel: string \| ReactNode;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={cx(~~\n css({\n~~ p: ~~4,\n~~ bg~~: '~~neutral.quaternary~~',\n _hover~~: { bg~~: '~~neutral.secondary' ~~},\n }),\n~~ className~~,\n~~ )}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <~~HStack~~ ~~justify~~=\"~~space~~-between\" w~~=\"~~full\">\n <~~HStack~~>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? ~~css({ color:~~ 'brand.base' }) : undefined,\n },\n }}\n <~~VStack~~ gap={0} ~~alignItems=\"~~start\">\n <~~HStack~~>\n {typeof primaryLabel === 'string' ? <Text fontWeight=\"medium\">{primaryLabel}</Text> : primaryLabel}\n {isExternalLink && <IcoExternalLink width={14} height={14} color={~~token~~(~~'colors.~~neutral.primary')} />}\n </~~HStack~~>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </~~VStack~~>\n </~~HStack~~>\n <~~HStack~~>\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? ~~css({ color:~~ 'neutral.primary' }) : undefined,\n width: 16,\n height: 16,\n },\n }}\n </~~HStack~~>\n </~~HStack~~>\n </ButtonContainer>\n );\n });\n },\n);\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","~~Center","~~Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","className","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","cx","~~css","~~_jsxs","~~HStack","VStack","~~Text","IcoExternalLink","~~token","~~NavigationButton"],"mappings":"~~u4BAiBA~~,MAAMA,EAAcC,~~EAAAA~~,~~WAAW~~,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,~~EAAAA~~,~~IAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAA~~,~~SACJC~~,~~EAAAA~~,~~SAAS~~,~~IAAIJ~~,~~EAAUK~~,GACfC,EAAaD,aAAAA,~~EAAOJ~~,CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAEKM~~,~~EAAeR~~,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,~~MAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAA~~,~~SACJC~~,~~WAAS~~,~~IAAIJ~~,~~EAAUK~~,GACfC,eAAaD,~~EAAOJ~~,CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAEKO~~,EAAuBC,aAC3B,CAAC,CAAE,UAAAC,EAAW,~~GAAGT~~,CAAK,~~EAAIU~~,IAAgB,CACxC,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,~~EAAKb~~,EAEzD,~~OAAOc~~,~~EAAAA~~,~~WAAWd,~~EAAM,~~SAAUe~~,GAAQ,CACxC,MAAMC,EAAcD,EAAM,~~IAAIlB~~,CAAW,~~EACnCoB~~,EAAeF,EAAM,IAAIT,CAAY,EAE3C,~~OACEL~~,EAAAA,~~IAACiB~~,EAAAA,~~gBAAe~~,~~CACd~~,IAAKR,EACL,UAAWS,~~EAAAA~~,~~GACTC~~,~~EAAI,IAAA,CACF,EAAG,EACH,GAAI,qBACJ,OAAQ,CAAE,GAAI,mBAAqB,EACpC,EACDX,~~CAAS,~~EAEX~~,aAAa,SACb,~~OACI~~,GAAA,~~GAAAT~~,~~EAEJ~~,~~SAAAqB~~,~~EAAAA~~,~~KAACC~~,~~SAAM~~,~~CAAC,QAAQ,gBAAgB,EAAE,OAAM,~~SAAA,~~CACtCD~~,~~EAACC~~,~~KAAAA~~,~~EAAAA~~,~~OACE,CAAA,~~SAAA,~~CAAAN~~,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,~~MAAuC~~,~~OAA/BI~~,~~EAAI~~,~~IAAA,CAAE,MAAO,aAAc,CAClE,~~CACF,~~EACDC~~,EAAAA,~~KAACE~~,~~EAAAA~~,~~OAAM~~,~~CAAC~~,~~IAAK~~,~~EAAG~~,~~WAAW~~,~~kBACzBF~~,~~EAAAA~~,~~KAACC~~,~~EAAAA~~,~~kBACE~~,~~OAAOX,~~GAAiB,~~SAAWV~~,~~EAACuB~~,IAAAA,EAAAA,QAAI,CAAC,WAAW,SAAU,~~SAAAb~~,~~CAAoB~~,~~CAAA~~,~~EAAGA~~,~~EACrFE~~,~~GAAkBZ,~~EAAAA,~~IAACwB~~,~~UAAe,CAAC,~~MAAO,GAAI,OAAQ,GAAI,~~MAAOC~~,~~EAAAA~~,~~MAAM~~,~~wBAAwB~~,~~CAAC~~,CAAA,~~CAAI~~,~~IAEtGd~~,~~GACCX~~,~~MAACuB~~,EAAAA,~~QAAI~~,~~CAAC,~~KAAK,KAAK,UAAU,gBACvB,~~SAAAZ~~,~~CACI~~,CAAA,~~CACR~~,~~GACM~~,CACF,CAAA,~~EACTX~~,EAAAA,~~IAACqB~~,~~EAAAA~~,~~OAAM~~,~~CAAA~~,~~SACJL,~~GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,~~MAA4C~~,~~OAApCG~~,~~EAAAA~~,~~IAAI,CAAE,~~MAAO,~~kBAAmB,EACvE,MAAO,~~GACP,OAAQ,EACT,~~EAEI~~,CAAA,CAAA,CAAA,CAAA,~~CAEK~~,CAAA,CAEtB,CAAC,CACH,CAAC,~~EAGHb~~,EAAqB,YAAc,~~yBAE7BoB~~,EAAmB,OAAO,~~OAAOpB~~,EAAsB,CAAE,~~YAAAV~~,EAAa,~~aAAAS~~,CAAY,CAAE"}
1	+ {"version":3,"file":"navigation-button.js","sources":["../../../../src/components/list-items/navigation-button.tsx"],"sourcesContent":["import { ButtonContainer, ButtonContainerProps } from '@components/containers';\nimport { IcoExternalLink } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, forwardRef, ReactNode } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NavigationButtonProps extends AriaButtonProps, ButtonContainerProps {\n primaryLabel: string \| ReactNode;\n secondaryLabel?: string;\n isExternalLink?: boolean;\n disabled?: boolean;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\nconst NavigationButtonBase = forwardRef<HTMLButtonElement, NavigationButtonProps>(\n ({ className, ...props }, forwardedRef) => {\n const { primaryLabel, secondaryLabel, isExternalLink } = props;\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n\n return (\n <ButtonContainer\n ref={forwardedRef}\n className={cn('p-4 bg-neutral-quaternary hover:bg-neutral-secondary', className)}\n borderRadius=\"0.5rem\"\n expand\n {...props}\n >\n <div className=\"flex flex-row items-center justify-between w-full\">\n <div className=\"flex flex-row items-center gap-2.5\">\n {leadingIcon && {\n ...leadingIcon,\n props: {\n height: 24,\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? 'text-brand-base' : undefined,\n },\n }}\n <div className=\"flex flex-col gap-0 items-start\">\n <div className=\"flex flex-row items-center gap-2.5\">\n {typeof primaryLabel === 'string' ? <Text fontWeight=\"medium\">{primaryLabel}</Text> : primaryLabel}\n {isExternalLink && <IcoExternalLink width={14} height={14} color={'var(--color-neutral-primary)'} />}\n </div>\n {secondaryLabel && (\n <Text size=\"sm\" fontColor=\"text.tertiary\">\n {secondaryLabel}\n </Text>\n )}\n </div>\n </div>\n <div className=\"flex flex-row items-center gap-2.5\">\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? 'text-neutral-primary' : undefined,\n width: 16,\n height: 16,\n },\n }}\n </div>\n </div>\n </ButtonContainer>\n );\n });\n },\n);\n\nNavigationButtonBase.displayName = 'NavigationButton';\n\nconst NavigationButton = Object.assign(NavigationButtonBase, { LeadingIcon, TrailingIcon });\n\nexport default NavigationButton;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Children","child","cloneElement","TrailingIcon","NavigationButtonBase","forwardRef","className","forwardedRef","primaryLabel","secondaryLabel","isExternalLink","createHost","slots","leadingIcon","trailingIcon","ButtonContainer","cn","_jsxs","Text","IcoExternalLink","NavigationButton"],"mappings":"s1BAeA,MAAMA,EAAcC,EAAW,WAAA,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,MAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAS,SAAA,IAAIH,EAAUI,GACfC,EAAaD,aAAAA,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEKK,EAAeP,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAAA,IAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAAA,SAAS,IAAIH,EAAUI,GACfC,eAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAEKM,EAAuBC,aAC3B,CAAC,CAAE,UAAAC,EAAW,GAAGR,CAAK,EAAIS,IAAgB,CACxC,KAAM,CAAE,aAAAC,EAAc,eAAAC,EAAgB,eAAAC,CAAc,EAAKZ,EAEzD,OAAOa,aAAWb,EAAM,SAAUc,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIjB,CAAW,EACnCmB,EAAeF,EAAM,IAAIT,CAAY,EAE3C,OACEJ,EAAAA,IAACgB,EAAAA,gBACC,CAAA,IAAKR,EACL,UAAWS,KAAG,uDAAwDV,CAAS,EAC/E,aAAa,SACb,OAAM,GAAA,GACFR,EAAK,SAETmB,cAAK,UAAU,oDAAmD,SAAA,CAChEA,cAAK,UAAU,qCAAoC,SAAA,CAChDJ,GAAe,CACd,GAAGA,EACH,MAAO,CACL,OAAQ,GACR,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAA4B,OAApB,iBACvC,CACF,EACDI,EAAAA,YAAK,UAAU,kCAAiC,SAAA,CAC9CA,EAAAA,YAAK,UAAU,qCAAoC,SAAA,CAChD,OAAOT,GAAiB,SAAWT,EAACmB,IAAAA,EAAAA,QAAI,CAAC,WAAW,SAAU,SAAAV,IAAuBA,EACrFE,GAAkBX,MAACoB,EAAAA,SAAgB,MAAO,GAAI,OAAQ,GAAI,MAAO,8BAA8B,CAAA,CAAI,CAChG,CAAA,EACLV,GACCV,EAAAA,IAACmB,EAAAA,SAAK,KAAK,KAAK,UAAU,gBACvB,SAAAT,GAEJ,CAAA,CAAA,CACG,CACF,CAAA,EACNV,EAAAA,WAAK,UAAU,qCAAoC,SAChDe,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAAiC,OAAzB,uBACvC,MAAO,GACP,OAAQ,EACT,EAEC,CAAA,CAAA,CAAA,CAAA,CAEQ,CAAA,CAEtB,CAAC,CACH,CAAC,EAGHV,EAAqB,YAAc,mBAEnC,MAAMgB,EAAmB,OAAO,OAAOhB,EAAsB,CAAE,YAAAT,EAAa,aAAAQ,CAAY,CAAE"}

package/dist/cjs/components/list-items/nft-tile.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),c=require("../containers/button.js");require("../containers/card.js");var a=require("@styled/css"),o=require("@styled/jsx");require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var l=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const q=({src:e,alt:i})=>r.jsx(o.Box,{rounded:"2xl",overflow:"hidden",children:r.jsx("img",{src:e,alt:i,className:a.css({objectFit:"cover"})})}),n=e=>{const{src:i,onPress:s,alt:u}=e,t=l.useCallback(()=>{s?.()},[s]);return s?r.jsx(c.ButtonContainer,{className:a.css({_hover:{boxShadow:"0 6px 8px 2px rgba(0, 0, 0, .18)"}}),borderRadius:"1rem",onPress:t,...e,children:r.jsx(q,{src:i,alt:u})}):r.jsx(q,{src:i,alt:u})};exports.NFTTile=n;
+"use strict";var r=require("react/jsx-runtime"),t=require("../containers/button.js");require("../containers/card.js"),require("../../lib/cn.js"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var c=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js");const a=({src:e,alt:i})=>r.jsx("div",{className:"rounded-2xl overflow-hidden",children:r.jsx("img",{src:e,alt:i,className:"object-cover"})}),l=e=>{const{src:i,onPress:s,alt:u}=e,q=c.useCallback(()=>{s?.()},[s]);return s?r.jsx(t.ButtonContainer,{className:"hover:shadow-[0_6px_8px_2px_rgba(0,0,0,.18)]",borderRadius:"1rem",onPress:q,...e,children:r.jsx(a,{src:i,alt:u})}):r.jsx(a,{src:i,alt:u})};exports.NFTTile=l;
 //# sourceMappingURL=nft-tile.js.map

package/dist/cjs/components/list-items/nft-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nft-tile.js","sources":["../../../../src/components/list-items/nft-tile.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { ~~css } from '@styled/css';\nimport { Box } from '@styled/jsx';\nimport {~~ useCallback } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NFTTileProps extends AriaButtonProps {\n src: string;\n onPress?: () => void;\n alt: string;\n}\n\ninterface ImageContainerProps {\n src: string;\n alt: string;\n}\n\nconst ImageContainer = ({ src, alt }: ImageContainerProps) => {\n return (\n <~~Box~~ ~~rounded~~=\"2xl\" overflow~~=\"~~hidden\">\n <img src={src} alt={alt} className~~={css({ objectFit: '~~cover' ~~})}~~ />\n </~~Box~~>\n );\n};\n\nexport const NFTTile = (props: NFTTileProps) => {\n const { src, onPress, alt } = props;\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n if (onPress)\n return (\n <ButtonContainer\n className~~={css({\n _hover~~: ~~{\n boxShadow: '0 6px 8px 2px rgba~~(0, 0, 0~~, .~~18)~~',\n },\n })}~~\n borderRadius=\"1rem\"\n onPress={handlePress}\n {...props}\n >\n <ImageContainer src={src} alt={alt} />\n </ButtonContainer>\n );\n\n return <ImageContainer src={src} alt={alt} />;\n};\n"],"names":["ImageContainer","src","alt","_jsx","~~Box","css","~~NFTTile","props","onPress","handlePress","useCallback","ButtonContainer"],"mappings":"~~mwBAiBA~~,MAAMA,EAAiB,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAA0B,IAErDC,EAAAA,~~IAACC~~,~~MAAG~~,~~CAAC~~,~~QAAQ~~,~~MAAM~~,~~SAAS,SAAQ,SAClCD,EAAK,IAAA,~~MAAA,~~CAAA~~,IAAKF,EAAK,IAAKC,EAAK,~~UAAWG~~,~~EAAAA~~,~~IAAI,CAAE,UAAW,OAAS,~~CAAA,~~CAAK~~,CAAA,~~CAAA~~,~~CAAA,EAK5DC,~~EAAWC,GAAuB,CAC7C,KAAM,CAAE,~~IAAAN~~,EAAK,~~QAAAO~~,EAAS,~~IAAAN~~,CAAG,~~EAAKK~~,EAExBE,EAAcC,EAAAA,YAAY,IAAK,CACnCF,~~IAAAA~~,~~CACF~~,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAIA,~~EAEAL~~,~~MAACQ~~,~~EAAAA~~,~~iBACC~~,~~UAAWN~~,~~EAAAA~~,~~IAAI,CACb,OAAQ,CACN,UAAW,kCACZ,EACF,EACD,~~aAAa,OACb,~~QAASI~~,EACL,GAAAF,EAEJ,~~SAAAJ~~,EAAAA,IAACH,~~EAAe~~,~~CAAA~~,IAAKC,EAAK,IAAKC,~~CAAG~~,CAAA,~~CAClB~~,CAAA,~~EAGfC~~,EAAAA,IAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAG,CAAA,CAC3C"}
1	+ {"version":3,"file":"nft-tile.js","sources":["../../../../src/components/list-items/nft-tile.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { useCallback } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface NFTTileProps extends AriaButtonProps {\n src: string;\n onPress?: () => void;\n alt: string;\n}\n\ninterface ImageContainerProps {\n src: string;\n alt: string;\n}\n\nconst ImageContainer = ({ src, alt }: ImageContainerProps) => {\n return (\n <div className=\"rounded-2xl overflow-hidden\">\n <img src={src} alt={alt} className=\"object-cover\" />\n </div>\n );\n};\n\nexport const NFTTile = (props: NFTTileProps) => {\n const { src, onPress, alt } = props;\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n if (onPress)\n return (\n <ButtonContainer\n className=\"hover:shadow-[0_6px_8px_2px_rgba(0,0,0,.18)]\"\n borderRadius=\"1rem\"\n onPress={handlePress}\n {...props}\n >\n <ImageContainer src={src} alt={alt} />\n </ButtonContainer>\n );\n\n return <ImageContainer src={src} alt={alt} />;\n};\n"],"names":["ImageContainer","src","alt","_jsx","NFTTile","props","onPress","handlePress","useCallback","ButtonContainer"],"mappings":"8sBAeA,MAAMA,EAAiB,CAAC,CAAE,IAAAC,EAAK,IAAAC,CAA0B,IAErDC,EAAAA,WAAK,UAAU,8BACb,SAAAA,MAAA,MAAA,CAAK,IAAKF,EAAK,IAAKC,EAAK,UAAU,cAAc,CAAA,CAC7C,CAAA,EAIGE,EAAWC,GAAuB,CAC7C,KAAM,CAAE,IAAAJ,EAAK,QAAAK,EAAS,IAAAJ,CAAG,EAAKG,EAExBE,EAAcC,EAAAA,YAAY,IAAK,CACnCF,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAIA,EAEAH,MAACM,EAAe,gBAAA,CACd,UAAU,+CACV,aAAa,OACb,QAASF,EACL,GAAAF,EAEJ,SAAAF,EAAAA,IAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAO,CAAA,CAAA,CAAA,EAIrCC,EAAAA,IAACH,EAAc,CAAC,IAAKC,EAAK,IAAKC,CAAG,CAAA,CAC3C"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),f=require("../containers/button.js");require("../containers/card.js");var p=require("@styled/css"),u=require("@styled/jsx");require("@styled/tokens"),require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var h=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var S=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var g=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var q=require("create-slots");const x=q.createSlot(({children:t,...r})=>e.jsx(u.Center,{children:d.Children.map(t,i=>d.cloneElement(i,r))})),k=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:s,tokenBalanceFirst:l,disabled:c=!1,isLoading:a=!1})=>{const o=l||!r;return e.jsxs(u.HStack,{w:"full",justify:"space-between",opacity:c?"0.5":"1",children:[e.jsxs(u.HStack,{gap:4,children:[n?{...n,props:{...n.props,width:40,height:40}}:s?e.jsx("img",{width:40,height:40,src:s,alt:`${t} logo`}):e.jsx(S.default,{width:40,height:40}),e.jsx(h.default,{fontWeight:"medium",styles:{textTransform:"capitalize",textAlign:"left"},children:t})]}),e.jsx(u.VStack,{gap:0,alignItems:"flex-end",children:a?e.jsxs(e.Fragment,{children:[e.jsx(g.Skeleton,{height:"1rem",width:"6rem"}),i&&r&&e.jsx("div",{style:{marginTop:"4px"},children:e.jsx(g.Skeleton,{height:"1rem",width:"4rem"})})]}):e.jsxs(e.Fragment,{children:[e.jsx(h.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?i:r}),e.jsx(h.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?r:i})]})})]})},v=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:s,onPress:l,tokenBalanceFirst:c,disabled:a,isLoading:o}=t,b=d.useRef(null),j=d.useCallback(()=>{l?.()},[l]);return q.createHost(t.children,y=>{const m=y.get(x);return l?e.jsx(f.ButtonContainer,{ref:b,className:p.css({_dark:{bg:"surface.tertiary"},_hover:{bg:"neutral.secondary"},bg:"neutral.quaternary",px:4,py:2,minH:16}),borderRadius:"0.5rem",expand:!0,onPress:a?void 0:j,disabled:a,children:e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})}):e.jsx(k,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:m,logoUrl:s,tokenBalanceFirst:c,disabled:a,isLoading:o})})},B=Object.assign(v,{TokenIcon:x});exports.TokenListItem=B;
+"use strict";var e=require("react/jsx-runtime"),j=require("../containers/button.js");require("../containers/card.js");var k=require("../../lib/cn.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var u=require("../primitives/text.js"),d=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js");var p=require("../logos/icon-generic-token.js");require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js");var m=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../feedback/tooltip.js");var x=require("create-slots");const g=x.createSlot(({children:t,...r})=>e.jsx("div",{className:"flex items-center justify-center",children:d.Children.map(t,i=>d.cloneElement(i,r))})),q=({name:t,fiatBalanceWithSymbol:r,tokenBalanceWithSymbol:i,tokenIcon:n,logoUrl:l,tokenBalanceFirst:s,disabled:c=!1,isLoading:a=!1})=>{const o=s||!r;return e.jsxs("div",{className:k.cn("flex flex-row items-center w-full justify-between",c?"opacity-50":"opacity-100"),children:[e.jsxs("div",{className:"flex flex-row items-center gap-4",children:[n?{...n,props:{...n.props,width:40,height:40}}:l?e.jsx("img",{width:40,height:40,src:l,alt:`${t} logo`}):e.jsx(p.default,{width:40,height:40}),e.jsx(u.default,{fontWeight:"medium",styles:{textTransform:"capitalize",textAlign:"left"},children:t})]}),e.jsx("div",{className:"flex flex-col gap-0 items-end",children:a?e.jsxs(e.Fragment,{children:[e.jsx(m.Skeleton,{height:"1rem",width:"6rem"}),i&&r&&e.jsx("div",{style:{marginTop:"4px"},children:e.jsx(m.Skeleton,{height:"1rem",width:"4rem"})})]}):e.jsxs(e.Fragment,{children:[e.jsx(u.default,{size:"sm",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?i:r}),e.jsx(u.default,{size:"sm",fontColor:"text.secondary",styles:{lineHeight:"1.5rem",textAlign:"right"},children:o?r:i})]})})]})},v=t=>{const{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,logoUrl:l,onPress:s,tokenBalanceFirst:c,disabled:a,isLoading:o}=t,f=d.useRef(null),y=d.useCallback(()=>{s?.()},[s]);return x.createHost(t.children,b=>{const h=b.get(g);return s?e.jsx(j.ButtonContainer,{ref:f,className:"dark:bg-surface-tertiary hover:bg-neutral-secondary bg-neutral-quaternary px-4 py-2 min-h-[4rem]",borderRadius:"0.5rem",expand:!0,onPress:a?void 0:y,disabled:a,children:e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:c,disabled:a,isLoading:o})}):e.jsx(q,{name:r,fiatBalanceWithSymbol:i,tokenBalanceWithSymbol:n,tokenIcon:h,logoUrl:l,tokenBalanceFirst:c,disabled:a,isLoading:o})})},B=Object.assign(v,{TokenIcon:g});exports.TokenListItem=B;
 //# sourceMappingURL=token-list-item.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { ~~css~~ } from '@~~styled~~/~~css~~';\nimport { ~~Center, HStack, VStack } from '@styled/jsx';\nimport {~~ createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <~~Center~~>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </~~Center~~>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst \|\| !fiatBalanceWithSymbol;\n return (\n <~~HStack~~ w~~=\"~~full\" justify~~=\"space~~-between\" ~~opacity={~~disabled ? '~~0.5~~' : '1'}>\n <~~HStack~~ gap={4}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize', textAlign: 'left' }}>\n {name}\n </Text>\n </~~HStack~~>\n <~~VStack~~ ~~gap={0} alignItems~~=\"flex-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </~~VStack~~>\n </~~HStack~~>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className~~={css({\n _dark~~: { bg~~: '~~surface.tertiary' ~~},\n _hover~~: { bg~~: '~~neutral.secondary' ~~},\n~~ bg~~: '~~neutral.quaternary~~',\n~~ px: ~~4,\n~~ py: 2~~,\n minH:~~ ~~16,\n })}~~\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","~~Center","~~Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","~~HStack~~","IconGenericToken","Text","~~VStack","~~_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","~~css","~~TokenListItem"],"mappings":"~~+kCAqBA~~,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,~~EAAAA~~,~~IAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAA~~,~~SACJC~~,~~WAAS~~,~~IAAIJ~~,~~EAAUK~~,GACfC,~~EAAAA~~,~~aAAaD~~,~~EAAOJ,~~CAAK,CACjC,~~CACM~~,CAAA,~~CAEZ~~,~~EAMKM~~,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,~~EAAAA~~,~~KAACC~~,~~EAAAA~~,~~OAAM~~,~~CAAC~~,~~EAAE~~,~~OAAO~~,~~QAAQ~~,~~gBAAgB~~,~~QAASJ~~,~~EAAW~~,~~MAAQ,IAAG,~~SAAA,~~CACtEG~~,~~OAACC~~,~~EAAM~~,~~OAAA~~,~~CAAC~~,~~IAAK~~,~~EACV,~~SAAA,~~CAAAP~~,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAEDC,~~EACFV~~,~~EAAK~~,~~IAAA,~~MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,~~IAAKU~~,EAAS,IAAK,GAAGJ,CAAI,~~UAEtDN~~,EAAAA,~~IAACiB~~,~~EAAgB~~,~~QAAA~~,~~CAAC,~~MAAO,GAAI,OAAQ,~~EAAM~~,CAAA,~~EAE7CjB~~,~~MAACkB~~,~~EAAI~~,~~QAAA~~,~~CAAC,~~WAAW,SAAS,OAAQ,CAAE,cAAe,aAAc,UAAW,~~MAAM~~,~~WAC/EZ~~,~~CAAI~~,CAAA,~~CACA~~,~~IAETN,EAACmB,IAAAA,~~EAAAA,~~OAAM~~,~~CAAC~~,~~IAAK~~,~~EAAG~~,~~WAAW,WAAU,SAClCN,~~EACCE,~~EAAAA~~,~~KACEK,~~EAAAA,SAAA,CAAA,SAAA,~~CAAApB~~,~~MAACqB,~~EAAAA,~~SAAS~~,CAAA,OAAQ,OAAQ,MAAO,~~MAAU~~,~~CAAA,EAC1Cb,~~GAA0BD,~~GACzBP~~,EAAAA,WAAK,MAAO,CAAE,UAAW,KAAO,EAAA,SAC9BA,EAAAA,~~IAACqB~~,EAAAA,SAAQ,CAAC,OAAQ,OAAQ,MAAO,~~MAAM~~,CAAA,~~CACnC~~,CAAA,~~CACP~~,~~IAGHN~~,~~EAAAA~~,~~2BACEf~~,EAAAA,~~IAACkB~~,EAAAA,~~QAAK~~,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,~~OAAS~~,~~EAAA~~,~~SACjEJ~~,EAAeN,EAAyBD,~~IAE3CP~~,~~EAAAA~~,~~IAACkB~~,EAAAA,~~QAAK~~,~~CAAA~~,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,~~OAAS~~,~~EAAA~~,~~SAC5FJ,~~EAAeP,EAAwBC,CAAsB,CAAA,CACzD,GAEV,CAAA,~~CACM~~,CACF,CAAA,~~CAEb~~,~~EAEMc~~,EAA+~~DvB~~,GAAQ,CAC3E,KAAM,CACJ,~~KAAAO~~,EACA,sBAAAC,EACA,uBAAAC,EACA,QAAAE,EACA,~~QAAAa~~,EACA,~~kBAAAZ~~,EACA,SAAAC,EACA,UAAAC,CACD,~~EAAGd~~,~~EAEEyB~~,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,~~EAAY~~,~~YAAA,~~IAAK,CACnCJ,~~IACF~~,~~CAAA,~~EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,~~aAAW7B~~,EAAM,~~SAAU8B~~,GAAQ,CACxC,~~MAAMpB~~,~~EAAYoB~~,EAAM,~~IAAIjC~~,CAAS,EAErC,~~OAAI2B~~,~~EAEAvB~~,EAAAA,~~IAAC8B~~,~~EACC~~,~~gBAAA~~,~~CAAA~~,IAAKN,EACL,~~UAAWO~~,~~EAAAA~~,~~IAAI,CACb,MAAO,CAAE,GAAI,kBAAoB,EACjC,OAAQ,CAAE,GAAI,mBAAqB,EACnC,GAAI,qBACJ,GAAI,EACJ,GAAI,EACJ,KAAM,EACP,CAAA,EACD,~~aAAa,SACb,~~OACA~~,~~GAAA~~,~~QAASnB~~,EAAW,~~OAAYc~~,EAChC,~~SAAUd~~,EAEV,~~SAAAZ~~,~~EAACK~~,IAAAA,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,~~CAAS~~,CAAA,~~CAEN~~,CAAA,~~EAIpBb~~,~~EAACK~~,~~IAAAA~~,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAG1B,CAAC,CACH,~~EAEamB~~,EAAgB,OAAO,~~OAAOV~~,EAAmB,CAAE,~~UAAA1B~~,CAAS,CAAE"}
1	+ {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { ButtonContainer } from '@components/containers';\nimport { Skeleton } from '@components/feedback';\nimport { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { cn } from '@lib/cn';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, FC, PropsWithChildren, useCallback, useRef } from 'react';\nimport { AriaButtonProps } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol?: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n tokenBalanceFirst?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <div className=\"flex items-center justify-center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </div>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n tokenIcon,\n logoUrl,\n tokenBalanceFirst,\n disabled = false,\n isLoading = false,\n}: ListContentProps) => {\n const balanceFirst = tokenBalanceFirst \|\| !fiatBalanceWithSymbol;\n return (\n <div className={cn('flex flex-row items-center w-full justify-between', disabled ? 'opacity-50' : 'opacity-100')}>\n <div className=\"flex flex-row items-center gap-4\">\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 40,\n height: 40,\n },\n }\n ) : logoUrl ? (\n <img width={40} height={40} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={40} height={40} />\n )}\n <Text fontWeight=\"medium\" styles={{ textTransform: 'capitalize', textAlign: 'left' }}>\n {name}\n </Text>\n </div>\n <div className=\"flex flex-col gap-0 items-end\">\n {isLoading ? (\n <>\n <Skeleton height={'1rem'} width={'6rem'} />\n {tokenBalanceWithSymbol && fiatBalanceWithSymbol && (\n <div style={{ marginTop: '4px' }}>\n <Skeleton height={'1rem'} width={'4rem'} />\n </div>\n )}\n </>\n ) : (\n <>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? tokenBalanceWithSymbol : fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" fontColor=\"text.secondary\" styles={{ lineHeight: '1.5rem', textAlign: 'right' }}>\n {balanceFirst ? fiatBalanceWithSymbol : tokenBalanceWithSymbol}\n </Text>\n </>\n )}\n </div>\n </div>\n );\n};\n\nconst TokenListItemBase: FC<PropsWithChildren<TokenListItemProps>> = props => {\n const {\n name,\n fiatBalanceWithSymbol,\n tokenBalanceWithSymbol,\n logoUrl,\n onPress,\n tokenBalanceFirst,\n disabled,\n isLoading,\n } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <ButtonContainer\n ref={ref}\n className=\"dark:bg-surface-tertiary hover:bg-neutral-secondary bg-neutral-quaternary px-4 py-2 min-h-[4rem]\"\n borderRadius=\"0.5rem\"\n expand\n onPress={disabled ? undefined : handlePress}\n disabled={disabled}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n </ButtonContainer>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n tokenBalanceFirst={tokenBalanceFirst}\n disabled={disabled}\n isLoading={isLoading}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","tokenBalanceFirst","disabled","isLoading","balanceFirst","_jsxs","cn","IconGenericToken","Text","_Fragment","Skeleton","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","createHost","slots","ButtonContainer","TokenListItem"],"mappings":"u9BAoBA,MAAMA,EAAYC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,MAAA,MAAA,CAAK,UAAU,mCACZ,SAAAC,EAAAA,SAAS,IAAIH,EAAUI,GACfC,eAAaD,EAAOH,CAAK,CACjC,CACG,CAAA,CAET,EAMKK,EAAc,CAAC,CACnB,KAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,kBAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACK,IAAI,CACrB,MAAMC,EAAeH,GAAqB,CAACJ,EAC3C,OACEQ,EAAA,KAAA,MAAA,CAAK,UAAWC,KAAG,oDAAqDJ,EAAW,aAAe,aAAa,EAC7G,SAAA,CAAAG,OAAA,MAAA,CAAK,UAAU,mCAAkC,SAAA,CAC9CN,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,GAEDC,EACFT,MAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKS,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEL,EAAAA,IAACgB,EAAAA,SAAiB,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzChB,MAACiB,EAAAA,SAAK,WAAW,SAAS,OAAQ,CAAE,cAAe,aAAc,UAAW,QACzE,SAAAZ,GACI,CACH,CAAA,EACNL,EAAAA,WAAK,UAAU,gCACZ,SAAAY,EACCE,OACEI,EAAAA,SAAA,CAAA,SAAA,CAAAlB,EAAAA,IAACmB,EAAS,SAAA,CAAA,OAAQ,OAAQ,MAAO,SAChCZ,GAA0BD,GACzBN,EAAAA,WAAK,MAAO,CAAE,UAAW,KAAO,EAAA,SAC9BA,EAAAA,IAACmB,EAAAA,SAAQ,CAAC,OAAQ,OAAQ,MAAO,MAAU,CAAA,CAAA,CAAA,CAE9C,CACA,CAAA,EAEHL,EAAAA,KACEI,EAAAA,SAAA,CAAA,SAAA,CAAAlB,EAACiB,IAAAA,UAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,UAAW,OAAO,EAC/D,SAAAJ,EAAeN,EAAyBD,CAAqB,CAAA,EAEhEN,EAAAA,IAACiB,WAAK,KAAK,KAAK,UAAU,iBAAiB,OAAQ,CAAE,WAAY,SAAU,UAAW,SACnF,SAAAJ,EAAeP,EAAwBC,CAAsB,CAAA,CACzD,GAEV,CAAA,CACG,CACF,CAAA,CAEV,EAEMa,EAA+DrB,GAAQ,CAC3E,KAAM,CACJ,KAAAM,EACA,sBAAAC,EACA,uBAAAC,EACA,QAAAE,EACA,QAAAY,EACA,kBAAAX,EACA,SAAAC,EACA,UAAAC,CACD,EAAGb,EAEEuB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,cAAY,IAAK,CACnCJ,KACF,EAAG,CAACA,CAAO,CAAC,EAEZ,OAAOK,EAAAA,WAAW3B,EAAM,SAAU4B,GAAQ,CACxC,MAAMnB,EAAYmB,EAAM,IAAI/B,CAAS,EAErC,OAAIyB,EAEArB,EAAAA,IAAC4B,EAAAA,gBAAe,CACd,IAAKN,EACL,UAAU,mGACV,aAAa,SACb,OAAM,GACN,QAASX,EAAW,OAAYa,EAChC,SAAUb,EAEV,SAAAX,EAACI,IAAAA,EAAW,CACV,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CACX,CAAA,CAAA,CAAA,EAKNZ,EAAAA,IAACI,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,EACT,kBAAmBC,EACnB,SAAUC,EACV,UAAWC,CAAS,CAAA,CAG1B,CAAC,CACH,EAEaiB,EAAgB,OAAO,OAAOT,EAAmB,CAAE,UAAAxB,CAAS,CAAE"}

package/dist/cjs/components/list-items/transaction-row.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),S=require("../containers/button.js");require("../containers/card.js");var H=require("@styled/css"),t=require("@styled/jsx"),r=require("@styled/tokens"),R=require("../icons/ico-arrow-down.js"),W=require("../icons/ico-arrow-up.js"),F=require("../icons/ico-lightning-fill.js"),z=require("../icons/ico-lock-unlocked-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var l=require("../primitives/text.js"),a=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js"),require("../feedback/progress-bar.js");var h=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../../recipes/toast.js"),require("../feedback/tooltip.js");var k=require("create-slots");const A={send:{title:"Send",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:W.default,iconColor:r.token("colors.negative.darker"),skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:r.token("colors.positive.base"),secondaryTextColor:`${r.token("colors.positive.lighter")}`,icon:R.default,iconColor:r.token("colors.positive.base"),skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:r.token("colors.text.primary"),secondaryTextColor:r.token("colors.text.secondary"),icon:F.default,iconColor:r.token("colors.brand.base"),skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:r.token("colors.warning.base"),secondaryTextColor:r.token("colors.warning.base"),icon:z.default,iconColor:r.token("colors.warning.base"),skeletonWidth:"89px"}},q=k.createSlot(({children:n,...i})=>e.jsx(t.Center,{children:a.Children.map(n,s=>a.cloneElement(s,i))})),L=n=>{const{variant:i,primaryText:s,secondaryText:c,children:y,onPress:u,loading:d,showTitle:g=!0}=n,{title:C,primaryTextColor:x,secondaryTextColor:v,icon:w,iconColor:j,skeletonWidth:p}=A[i],m=i==="send"||i==="networkFee",T=a.useRef(null),f=a.useCallback(()=>{u?.()},[u]);return k.createHost(y,b=>{const o=b.get(q);return e.jsxs(t.HStack,{w:"full",justify:"space-between",children:[e.jsxs(t.HStack,{gap:2,children:[e.jsx(w,{width:16,height:16,color:j}),g&&e.jsx(l.default,{size:"sm",fontWeight:"medium",children:C})]}),e.jsxs(t.HStack,{gap:4,children:[c&&e.jsx(l.default,{styles:{color:v},children:c}),m?e.jsx(S.ButtonContainer,{ref:T,className:H.css({px:4,py:2.5,bg:"surface.secondary"}),borderRadius:"0.75rem",onPress:f,...n,children:e.jsxs(t.HStack,{gap:3,children:[d?e.jsx(h.Skeleton,{width:p}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})}):e.jsxs(t.HStack,{gap:3,children:[d?e.jsx(h.Skeleton,{width:p}):e.jsx(l.default,{styles:{color:x},children:s}),o&&{...o,props:{...o.props,width:32,height:32}}]})]})]})})},N=Object.assign(L,{TokenIcon:q});exports.TransactionRow=N;
+"use strict";var e=require("react/jsx-runtime"),k=require("../containers/button.js");require("../containers/card.js"),require("../../lib/cn.js");var b=require("../icons/ico-arrow-down.js"),N=require("../icons/ico-arrow-up.js"),R=require("../icons/ico-lightning-fill.js"),S=require("../icons/ico-lock-unlocked-fill.js");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var l=require("../primitives/text.js"),s=require("react");require("../utils/client-asset-logo.js"),require("react-qrcode-logo"),require("../utils/secured-by-magic.js"),require("../containers/header.js"),require("../containers/menu.js"),require("../containers/modal.js"),require("../containers/overlay.js"),require("../feedback/callout.js");var x=require("../feedback/skeleton.js");require("../primitives/portal.js"),require("../../hooks/useToast.js"),require("../feedback/tooltip.js");var v=require("create-slots");const W={send:{title:"Send",primaryTextColor:"var(--color-text-primary)",secondaryTextColor:"var(--color-text-secondary)",icon:N.default,iconColor:"var(--color-negative-darker)",skeletonWidth:"89px"},receive:{title:"Receive",primaryTextColor:"var(--color-positive-base)",secondaryTextColor:"var(--color-positive-lighter)",icon:b.default,iconColor:"var(--color-positive-base)",skeletonWidth:"89px"},networkFee:{title:"Network Fee",primaryTextColor:"var(--color-text-primary)",secondaryTextColor:"var(--color-text-secondary)",icon:R.default,iconColor:"var(--color-brand-base)",skeletonWidth:"54px"},spendingCap:{title:"Spending Cap",primaryTextColor:"var(--color-warning-base)",secondaryTextColor:"var(--color-warning-base)",icon:S.default,iconColor:"var(--color-warning-base)",skeletonWidth:"89px"}},h=v.createSlot(({children:i,...o})=>e.jsx("div",{className:"flex items-center justify-center",children:s.Children.map(i,t=>s.cloneElement(t,o))})),F=i=>{const{variant:o,primaryText:t,secondaryText:a,children:p,onPress:n,loading:c,showTitle:q=!0}=i,{title:m,primaryTextColor:d,secondaryTextColor:f,icon:w,iconColor:y,skeletonWidth:u}=W[o],g=o==="send"||o==="networkFee",C=s.useRef(null),j=s.useCallback(()=>{n?.()},[n]);return v.createHost(p,T=>{const r=T.get(h);return e.jsxs("div",{className:"flex flex-row items-center w-full justify-between",children:[e.jsxs("div",{className:"flex flex-row items-center gap-2",children:[e.jsx(w,{width:16,height:16,color:y}),q&&e.jsx(l.default,{size:"sm",fontWeight:"medium",children:m})]}),e.jsxs("div",{className:"flex flex-row items-center gap-4",children:[a&&e.jsx(l.default,{styles:{color:f},children:a}),g?e.jsx(k.ButtonContainer,{ref:C,className:"px-4 py-2.5 bg-surface-secondary",borderRadius:"0.75rem",onPress:j,...i,children:e.jsxs("div",{className:"flex flex-row items-center gap-3",children:[c?e.jsx(x.Skeleton,{width:u}):e.jsx(l.default,{styles:{color:d},children:t}),r&&{...r,props:{...r.props,width:32,height:32}}]})}):e.jsxs("div",{className:"flex flex-row items-center gap-3",children:[c?e.jsx(x.Skeleton,{width:u}):e.jsx(l.default,{styles:{color:d},children:t}),r&&{...r,props:{...r.props,width:32,height:32}}]})]})]})})},L=Object.assign(F,{TokenIcon:h});exports.TransactionRow=L;
 //# sourceMappingURL=transaction-row.js.map