@solibo/solibo-ui 0.4.10 → 0.5.3

package/dist/components/file/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n  name: string;\n  onClick?: () => void;\n  onDelete?: () => void;\n  url?: string;\n};\n\nexport const File = ({ name, onClick, onDelete, ref, url }: FileProps) => {\n  return (\n    <div\n      className={styles.file}\n      ref={ref}\n    >\n      <a\n        href={url}\n        onClick={(e) => {\n          e.stopPropagation();\n\n          if (onClick || !url) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n        title={name}\n      >\n        <Icon\n          name={'document'}\n          size={'small'}\n          variant={'primary'}\n        />\n        {name}\n      </a>\n      {onDelete && (\n        <a\n          aria-label={'delete document'}\n          className={styles.delete}\n          onClick={() => onDelete()}\n          tabIndex={0}\n        >\n          <Icon\n            name={'trash'}\n            size={'small'}\n            variant={'danger'}\n          />\n        </a>\n      )}\n    </div>\n  );\n};\n"],"names":["File","name","onClick","onDelete","ref","url","styles","file","jsxs","e","stopPropagation","preventDefault","jsx","Icon","delete"],"mappings":"2MAWaA,EAAOA,CAAC,CAAEC,KAAAA,EAAMC,QAAAA,EAASC,SAAAA,EAAUC,IAAAA,EAAKC,IAAAA,CAAe,WAE/D,MAAA,CACC,UAAWC,EAAOC,KAClB,IAAAH,EAAS,iBAAA,OAET,SAAA,CAAAI,EAAAA,KAAC,IAAA,CACC,KAAMH,EACN,QAAUI,GAAM,CACdA,EAAEC,gBAAAA,GAEER,GAAW,CAACG,KACdI,EAAEE,eAAAA,EACFT,GAAAA,MAAAA,IAEJ,EACA,MAAOD,EAEP,SAAA,CAAAW,MAACC,EAAAA,MACC,KAAM,WACN,KAAM,QACN,QAAS,UAAU,EAEpBZ,CAAAA,EACH,EACCE,SACE,IAAA,CACC,aAAY,kBACZ,UAAWG,EAAOQ,OAClB,QAAS,IAAMX,EAAAA,EACf,SAAU,EAEV,eAACU,EAAAA,KAAA,CACC,KAAM,QACN,KAAM,QACN,QAAS,QAAA,CAAS,CAAA,CAEtB,CAAA,EAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n  deleteAccessibleLabel?: string;\n  name: string;\n  onClick?: () => void;\n  onDelete?: () => void;\n  url?: string;\n};\n\nexport const File = ({ deleteAccessibleLabel, name, onClick, onDelete, ref, url }: FileProps) => {\n  return (\n    <div\n      className={styles.file}\n      ref={ref}\n    >\n      <a\n        href={url}\n        onClick={(e) => {\n          e.stopPropagation();\n\n          if (onClick || !url) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n        title={name}\n      >\n        <Icon\n          name={'document'}\n          size={'small'}\n          variant={'primary'}\n        />\n        {name}\n      </a>\n      {onDelete && (\n        <a\n          aria-label={deleteAccessibleLabel ?? `Delete ${name}`}\n          className={styles.delete}\n          onClick={() => onDelete()}\n          tabIndex={0}\n        >\n          <Icon\n            name={'trash'}\n            size={'small'}\n            variant={'danger'}\n          />\n        </a>\n      )}\n    </div>\n  );\n};\n"],"names":["File","deleteAccessibleLabel","name","onClick","onDelete","ref","url","styles","file","jsxs","e","stopPropagation","preventDefault","jsx","Icon","delete"],"mappings":"2MAYaA,EAAOA,CAAC,CAAEC,sBAAAA,EAAuBC,KAAAA,EAAMC,QAAAA,EAASC,SAAAA,EAAUC,IAAAA,EAAKC,IAAAA,CAAe,WAEtF,MAAA,CACC,UAAWC,EAAOC,KAClB,IAAAH,EAAS,iBAAA,OAET,SAAA,CAAAI,EAAAA,KAAC,IAAA,CACC,KAAMH,EACN,QAAUI,GAAM,CACdA,EAAEC,gBAAAA,GAEER,GAAW,CAACG,KACdI,EAAEE,eAAAA,EACFT,GAAAA,MAAAA,IAEJ,EACA,MAAOD,EAEP,SAAA,CAAAW,MAACC,EAAAA,MACC,KAAM,WACN,KAAM,QACN,QAAS,UAAU,EAEpBZ,CAAAA,EACH,EACCE,GACCS,EAAAA,IAAC,IAAA,CACC,aAAYZ,GAAyB,UAAUC,CAAI,GACnD,UAAWK,EAAOQ,OAClB,QAAS,IAAMX,EAAAA,EACf,SAAU,EAEV,SAAAS,EAAAA,IAACC,EAAAA,KAAA,CACC,KAAM,QACN,KAAM,QACN,QAAS,QAAA,CAAS,CAAA,CAEtB,CAAA,EAEJ"}

package/dist/components/file/index.js

@@ -1,24 +1,25 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { Icon as n } from "../icon/index.js";
-import '../../assets/index10.css';const f = "_file_4fkv5_1", d = {
-  file: f,
-  delete: "_delete_4fkv5_50"
-}, p = ({
+import '../../assets/index10.css';const c = "_file_tncrs_1", d = {
+  file: c,
+  delete: "_delete_tncrs_52"
+}, _ = ({
+  deleteAccessibleLabel: m,
   name: t,
   onClick: e,
-  onDelete: l,
-  ref: m,
-  url: r
-}) => /* @__PURE__ */ s("div", { className: d.file, ref: m, "data-component": "file", children: [
-  /* @__PURE__ */ s("a", { href: r, onClick: (i) => {
-    i.stopPropagation(), (e || !r) && (i.preventDefault(), e == null || e());
+  onDelete: r,
+  ref: o,
+  url: s
+}) => /* @__PURE__ */ i("div", { className: d.file, ref: o, "data-component": "file", children: [
+  /* @__PURE__ */ i("a", { href: s, onClick: (l) => {
+    l.stopPropagation(), (e || !s) && (l.preventDefault(), e == null || e());
   }, title: t, children: [
     /* @__PURE__ */ a(n, { name: "document", size: "small", variant: "primary" }),
     t
   ] }),
-  l && /* @__PURE__ */ a("a", { "aria-label": "delete document", className: d.delete, onClick: () => l(), tabIndex: 0, children: /* @__PURE__ */ a(n, { name: "trash", size: "small", variant: "danger" }) })
+  r && /* @__PURE__ */ a("a", { "aria-label": m ?? `Delete ${t}`, className: d.delete, onClick: () => r(), tabIndex: 0, children: /* @__PURE__ */ a(n, { name: "trash", size: "small", variant: "danger" }) })
 ] });
 export {
-  p as File
+  _ as File
 };
 //# sourceMappingURL=index.js.map

package/dist/components/file/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n  name: string;\n  onClick?: () => void;\n  onDelete?: () => void;\n  url?: string;\n};\n\nexport const File = ({ name, onClick, onDelete, ref, url }: FileProps) => {\n  return (\n    <div\n      className={styles.file}\n      ref={ref}\n    >\n      <a\n        href={url}\n        onClick={(e) => {\n          e.stopPropagation();\n\n          if (onClick || !url) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n        title={name}\n      >\n        <Icon\n          name={'document'}\n          size={'small'}\n          variant={'primary'}\n        />\n        {name}\n      </a>\n      {onDelete && (\n        <a\n          aria-label={'delete document'}\n          className={styles.delete}\n          onClick={() => onDelete()}\n          tabIndex={0}\n        >\n          <Icon\n            name={'trash'}\n            size={'small'}\n            variant={'danger'}\n          />\n        </a>\n      )}\n    </div>\n  );\n};\n"],"names":["File","name","onClick","onDelete","ref","url","styles","file","jsxs","e","stopPropagation","preventDefault","jsx","Icon","delete"],"mappings":";;;;;GAWaA,IAAOA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAMC,SAAAA;AAAAA,EAASC,UAAAA;AAAAA,EAAUC,KAAAA;AAAAA,EAAKC,KAAAA;AAAe,wBAE/D,OAAA,EACC,WAAWC,EAAOC,MAClB,KAAAH,GAAS,kBAAA,QAET,UAAA;AAAA,EAAA,gBAAAI,EAAC,KAAA,EACC,MAAMH,GACN,SAAUI,CAAAA,MAAM;AACdA,IAAAA,EAAEC,gBAAAA,IAEER,KAAW,CAACG,OACdI,EAAEE,eAAAA,GACFT,KAAAA,QAAAA;AAAAA,EAEJ,GACA,OAAOD,GAEP,UAAA;AAAA,IAAA,gBAAAW,EAACC,KACC,MAAM,YACN,MAAM,SACN,SAAS,WAAU;AAAA,IAEpBZ;AAAAA,EAAAA,GACH;AAAA,EACCE,uBACE,KAAA,EACC,cAAY,mBACZ,WAAWG,EAAOQ,QAClB,SAAS,MAAMX,EAAAA,GACf,UAAU,GAEV,4BAACU,GAAA,EACC,MAAM,SACN,MAAM,SACN,SAAS,SAAA,CAAS,EAAA,CAEtB;AAAA,GAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n  deleteAccessibleLabel?: string;\n  name: string;\n  onClick?: () => void;\n  onDelete?: () => void;\n  url?: string;\n};\n\nexport const File = ({ deleteAccessibleLabel, name, onClick, onDelete, ref, url }: FileProps) => {\n  return (\n    <div\n      className={styles.file}\n      ref={ref}\n    >\n      <a\n        href={url}\n        onClick={(e) => {\n          e.stopPropagation();\n\n          if (onClick || !url) {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n        title={name}\n      >\n        <Icon\n          name={'document'}\n          size={'small'}\n          variant={'primary'}\n        />\n        {name}\n      </a>\n      {onDelete && (\n        <a\n          aria-label={deleteAccessibleLabel ?? `Delete ${name}`}\n          className={styles.delete}\n          onClick={() => onDelete()}\n          tabIndex={0}\n        >\n          <Icon\n            name={'trash'}\n            size={'small'}\n            variant={'danger'}\n          />\n        </a>\n      )}\n    </div>\n  );\n};\n"],"names":["File","deleteAccessibleLabel","name","onClick","onDelete","ref","url","styles","file","jsxs","e","stopPropagation","preventDefault","jsx","Icon","delete"],"mappings":";;;;;GAYaA,IAAOA,CAAC;AAAA,EAAEC,uBAAAA;AAAAA,EAAuBC,MAAAA;AAAAA,EAAMC,SAAAA;AAAAA,EAASC,UAAAA;AAAAA,EAAUC,KAAAA;AAAAA,EAAKC,KAAAA;AAAe,wBAEtF,OAAA,EACC,WAAWC,EAAOC,MAClB,KAAAH,GAAS,kBAAA,QAET,UAAA;AAAA,EAAA,gBAAAI,EAAC,KAAA,EACC,MAAMH,GACN,SAAUI,CAAAA,MAAM;AACdA,IAAAA,EAAEC,gBAAAA,IAEER,KAAW,CAACG,OACdI,EAAEE,eAAAA,GACFT,KAAAA,QAAAA;AAAAA,EAEJ,GACA,OAAOD,GAEP,UAAA;AAAA,IAAA,gBAAAW,EAACC,KACC,MAAM,YACN,MAAM,SACN,SAAS,WAAU;AAAA,IAEpBZ;AAAAA,EAAAA,GACH;AAAA,EACCE,KACC,gBAAAS,EAAC,KAAA,EACC,cAAYZ,KAAyB,UAAUC,CAAI,IACnD,WAAWK,EAAOQ,QAClB,SAAS,MAAMX,EAAAA,GACf,UAAU,GAEV,UAAA,gBAAAS,EAACC,GAAA,EACC,MAAM,SACN,MAAM,SACN,SAAS,SAAA,CAAS,EAAA,CAEtB;AAAA,GAEJ;"}

package/dist/components/footer/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const r=require("react/jsx-runtime"),n="_footer_uv5cc_1",s={footer:n},a=({animation:t,children:o,...e})=>r.jsx("footer",{className:s.footer,"data-animation":t,...e,"data-component":"footer",children:o&&o});exports.Footer=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const r=require("react/jsx-runtime"),n="_footer_1ktpq_1",s={footer:n},a=({animation:t,children:o,...e})=>r.jsx("footer",{className:s.footer,"data-animation":t,...e,"data-component":"footer",children:o&&o});exports.Footer=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/footer/index.js

@@ -1,12 +1,12 @@
 import { jsx as r } from "react/jsx-runtime";
-import '../../assets/index9.css';const a = "_footer_uv5cc_1", n = {
+import '../../assets/index9.css';const a = "_footer_1ktpq_1", n = {
   footer: a
-}, c = ({
+}, f = ({
   animation: t,
   children: o,
   ...e
 }) => /* @__PURE__ */ r("footer", { className: n.footer, "data-animation": t, ...e, "data-component": "footer", children: o && o });
 export {
-  c as Footer
+  f as Footer
 };
 //# sourceMappingURL=index.js.map

package/dist/components/form/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index35.css');const i=require("react/jsx-runtime"),a=require("../../classix-5H4IWnMA.cjs"),m="_form_fapts_1",c="_inline_fapts_26",t={form:m,inline:c},l=({animation:e,children:n,className:o,inline:s=!1,...r})=>i.jsx("form",{className:a.t(o,s&&t.inline,t.form),"data-animation":e,...r,"data-component":"form",children:n&&n});exports.Form=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index35.css');const r=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),a="_form_1sine_1",c="_inline_1sine_26",e={form:a,inline:c},l=({animation:o,children:n,className:t,inline:i=!1,...s})=>r.jsx("form",{className:m.t(t,i&&e.inline,e.form),"data-animation":o,...s,"data-component":"form",children:n&&n});exports.Form=l;
 //# sourceMappingURL=index.cjs.map

package/dist/components/form/index.js

@@ -1,16 +1,16 @@
-import { jsx as s } from "react/jsx-runtime";
-import { t as a } from "../../classix-DG18itHa.js";
-import '../../assets/index35.css';const f = "_form_fapts_1", e = "_inline_fapts_26", n = {
-  form: f,
-  inline: e
-}, p = ({
-  animation: t,
-  children: o,
+import { jsx as e } from "react/jsx-runtime";
+import { t as s } from "../../classix-DG18itHa.js";
+import '../../assets/index35.css';const a = "_form_1sine_1", f = "_inline_1sine_26", o = {
+  form: a,
+  inline: f
+}, _ = ({
+  animation: i,
+  children: n,
   className: m,
   inline: r = !1,
-  ...i
-}) => /* @__PURE__ */ s("form", { className: a(m, r && n.inline, n.form), "data-animation": t, ...i, "data-component": "form", children: o && o });
+  ...t
+}) => /* @__PURE__ */ e("form", { className: s(m, r && o.inline, o.form), "data-animation": i, ...t, "data-component": "form", children: n && n });
 export {
-  p as Form
+  _ as Form
 };
 //# sourceMappingURL=index.js.map

package/dist/components/graph/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const a=require("react/jsx-runtime"),b=require("../../classix-5H4IWnMA.cjs"),y=require("../loading/index.cjs"),j="_graph_18yw9_11",w="_plot_18yw9_20",v="_item_18yw9_30",N="_column_18yw9_36",f="_value_18yw9_44",M="_track_18yw9_54",V="_bar_18yw9_61",k="_label_18yw9_82",e={graph:j,plot:w,item:v,column:N,value:f,track:M,bar:V,label:k,"is-loading":"_is-loading_18yw9_91"},h=l=>Number.isFinite(l)?Math.max(0,l):0,S=({className:l,height:r,items:n=[],label:o,style:_,valueFormatter:u=c=>c.toLocaleString(),...p})=>{const c=n.reduce((s,t)=>Math.max(s,h(t.value)),0),d={..._,"--graph-columns":Math.max(n.length,1),"--graph-height":r||"calc(var(--unit) * 16)"};return a.jsxs("figure",{className:b.t(e.graph,l),style:d,...p,"data-component":"graph",children:[o&&a.jsx("figcaption",{"data-content":"screen-reader",children:o}),n.length>0?a.jsx("ul",{className:e.plot,children:n.map((s,t)=>{const i=h(s.value),m=c>0?i/c*100:0,g=i>0?Math.max(m,6):0,x={"--bar-color":s.color,"--bar-delay":t*50+"ms","--bar-height":g+"%"};return a.jsxs("li",{className:e.item,"data-component":"graph",children:[a.jsxs("div",{className:e.column,children:[a.jsx("span",{className:e.value,children:u(s.value)}),a.jsx("span",{className:e.track,children:a.jsx("span",{className:e.bar,style:x})})]}),a.jsx("span",{className:e.label,title:s.label,children:s.label})]},s.label+t)})}):a.jsx("div",{className:e["is-loading"],children:a.jsx(y.Loading,{})})]})};exports.Graph=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const a=require("react/jsx-runtime"),x=require("../../classix-5H4IWnMA.cjs"),j=require("../loading/index.cjs"),w="_graph_1web1_11",v="_plot_1web1_20",N="_item_1web1_34",y="_column_1web1_40",f="_value_1web1_48",k="_track_1web1_58",M="_bar_1web1_65",V="_label_1web1_87",e={graph:w,plot:v,item:N,column:y,value:f,track:k,bar:M,label:V,"is-loading":"_is-loading_1web1_96"},i=l=>Number.isFinite(l)?Math.max(0,l):0,S=({accessibleLabel:l,className:h,height:r,items:n=[],style:u,valueFormatter:_=t=>t.toLocaleString(),...p})=>{const t=n.reduce((s,c)=>Math.max(s,i(c.value)),0),b={...u,"--graph-columns":Math.max(n.length,1),"--graph-height":r||"calc(var(--utils-tokens-unit) * 16)"};return a.jsxs("figure",{className:x.t(e.graph,h),style:b,...p,"data-component":"graph",children:[l&&a.jsx("figcaption",{"data-content":"screen-reader",children:l}),n.length>0?a.jsx("ul",{className:e.plot,children:n.map((s,c)=>{const o=i(s.value),d=t>0?o/t*100:0,m=o>0?Math.max(d,6):0,g={"--bar-color":s.color,"--bar-delay":c*50+"ms","--bar-height":m+"%"};return a.jsxs("li",{className:e.item,"data-component":"graph",children:[a.jsxs("div",{className:e.column,children:[a.jsx("span",{className:e.value,children:_(s.value)}),a.jsx("span",{className:e.track,children:a.jsx("span",{className:e.bar,style:g})})]}),a.jsx("span",{className:e.label,title:s.label,children:s.label})]},s.label+c)})}):a.jsx("div",{className:e["is-loading"],children:a.jsx(j.Loading,{})})]})};exports.Graph=S;
 //# sourceMappingURL=index.cjs.map

package/dist/components/graph/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type GraphItem = {\n  color?: string;\n  label: string;\n  value: number;\n};\n\nexport type GraphProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children'> & {\n  height?: string;\n  items?: GraphItem[];\n  label?: string;\n  valueFormatter?: (value: number) => string;\n};\n\nconst toSafeValue = (value: number) => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nexport const Graph = ({\n  className,\n  height,\n  items = [],\n  label,\n  style,\n  valueFormatter = (value) => value.toLocaleString(),\n  ...props\n}: GraphProps) => {\n  type withVars = React.CSSProperties & {\n    '--graph-columns'?: number;\n    '--graph-height'?: string;\n  };\n\n  type withBarVars = React.CSSProperties & {\n    '--bar-color'?: string;\n    '--bar-delay'?: string;\n    '--bar-height'?: string;\n  };\n\n  const maxValue = items.reduce((max, item) => Math.max(max, toSafeValue(item.value)), 0);\n\n  const withVars: withVars = {\n    ...style,\n    '--graph-columns': Math.max(items.length, 1),\n    '--graph-height': height ? height : 'calc(var(--unit) * 16)',\n  };\n\n  return (\n    <figure\n      className={cx(styles.graph, className)}\n      style={withVars}\n      {...props}\n    >\n      {label && <figcaption data-content='screen-reader'>{label}</figcaption>}\n      {items.length > 0 ? (\n        <ul className={styles.plot}>\n          {items.map((item, index) => {\n            const safeValue = toSafeValue(item.value);\n            const rawPercent = maxValue > 0 ? (safeValue / maxValue) * 100 : 0;\n            const percent = safeValue > 0 ? Math.max(rawPercent, 6) : 0;\n\n            const withBarVars: withBarVars = {\n              '--bar-color': item.color,\n              '--bar-delay': index * 50 + 'ms',\n              '--bar-height': percent + '%',\n            };\n\n            return (\n              <li\n                className={styles.item}\n                key={item.label + index}\n              >\n                <div className={styles.column}>\n                  <span className={styles.value}>{valueFormatter(item.value)}</span>\n                  <span className={styles.track}>\n                    <span\n                      className={styles.bar}\n                      style={withBarVars}\n                    />\n                  </span>\n                </div>\n                <span\n                  className={styles.label}\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n      ) : (\n        <div className={styles['is-loading']}>\n          <Loading />\n        </div>\n      )}\n    </figure>\n  );\n};\n"],"names":["toSafeValue","value","Number","isFinite","Math","max","Graph","className","height","items","label","style","valueFormatter","toLocaleString","props","maxValue","reduce","item","withVars","length","jsxs","cx","styles","graph","jsx","plot","map","index","safeValue","rawPercent","percent","withBarVars","color","column","track","bar","Loading"],"mappings":"icAkBMA,EAAeC,GAAmBC,OAAOC,SAASF,CAAK,EAAIG,KAAKC,IAAI,EAAGJ,CAAK,EAAI,EAEzEK,EAAQA,CAAC,CACpBC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQ,CAAA,EACRC,MAAAA,EACAC,MAAAA,EACAC,eAAAA,EAAkBX,GAAUA,EAAMY,eAAAA,EAClC,GAAGC,CACO,IAAM,CAYhB,MAAMC,EAAWN,EAAMO,OAAO,CAACX,EAAKY,IAASb,KAAKC,IAAIA,EAAKL,EAAYiB,EAAKhB,KAAK,CAAC,EAAG,CAAC,EAEhFiB,EAAqB,CACzB,GAAGP,EACH,kBAAmBP,KAAKC,IAAII,EAAMU,OAAQ,CAAC,EAC3C,iBAAkBX,GAAkB,wBAAA,EAGtC,OACEY,EAAAA,KAAC,SAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,MAAOhB,CAAS,EACrC,MAAOW,EACP,GAAIJ,EAAM,iBAAA,QAETJ,SAAAA,CAAAA,GAASc,EAAAA,IAAC,aAAA,CAAW,eAAa,gBAAiBd,SAAAA,EAAM,EACzDD,EAAMU,OAAS,EACdK,EAAAA,IAAC,KAAA,CAAG,UAAWF,EAAOG,KACnBhB,SAAAA,EAAMiB,IAAI,CAACT,EAAMU,IAAU,CAC1B,MAAMC,EAAY5B,EAAYiB,EAAKhB,KAAK,EAClC4B,EAAad,EAAW,EAAKa,EAAYb,EAAY,IAAM,EAC3De,EAAUF,EAAY,EAAIxB,KAAKC,IAAIwB,EAAY,CAAC,EAAI,EAEpDE,EAA2B,CAC/B,cAAed,EAAKe,MACpB,cAAeL,EAAQ,GAAK,KAC5B,eAAgBG,EAAU,GAAA,EAG5B,cACG,KAAA,CACC,UAAWR,EAAOL,KACM,iBAAA,QAExB,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAOW,OACrB,SAAA,CAAAT,EAAAA,IAAC,QAAK,UAAWF,EAAOrB,MAAQW,SAAAA,EAAeK,EAAKhB,KAAK,EAAE,EAC3DuB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAOY,MACtB,SAAAV,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAOa,IAClB,MAAOJ,CAAAA,CAAY,CAAA,CAEvB,CAAA,EACF,EACAP,EAAAA,IAAC,QACC,UAAWF,EAAOZ,MAClB,MAAOO,EAAKP,MAEXO,SAAAA,EAAKP,KAAAA,CACR,CAAA,GAhBKO,EAAKP,MAAQiB,CAiBpB,CAEJ,CAAC,CAAA,CACH,EAEAH,MAAC,MAAA,CAAI,UAAWF,EAAO,YAAY,EACjC,SAAAE,EAAAA,IAACY,EAAAA,QAAA,CAAA,CAAO,CAAA,CACV,CAAA,EAEJ,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type GraphItem = {\n  color?: string;\n  label: string;\n  value: number;\n};\n\nexport type GraphProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children'> & {\n  accessibleLabel?: string;\n  height?: string;\n  items?: GraphItem[];\n  valueFormatter?: (value: number) => string;\n};\n\nconst toSafeValue = (value: number) => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nexport const Graph = ({\n  accessibleLabel,\n  className,\n  height,\n  items = [],\n  style,\n  valueFormatter = (value) => value.toLocaleString(),\n  ...props\n}: GraphProps) => {\n  type withVars = React.CSSProperties & {\n    '--graph-columns'?: number;\n    '--graph-height'?: string;\n  };\n\n  type withBarVars = React.CSSProperties & {\n    '--bar-color'?: string;\n    '--bar-delay'?: string;\n    '--bar-height'?: string;\n  };\n\n  const maxValue = items.reduce((max, item) => Math.max(max, toSafeValue(item.value)), 0);\n\n  const withVars: withVars = {\n    ...style,\n    '--graph-columns': Math.max(items.length, 1),\n    '--graph-height': height ? height : 'calc(var(--utils-tokens-unit) * 16)',\n  };\n\n  return (\n    <figure\n      className={cx(styles.graph, className)}\n      style={withVars}\n      {...props}\n    >\n      {accessibleLabel && <figcaption data-content='screen-reader'>{accessibleLabel}</figcaption>}\n      {items.length > 0 ? (\n        <ul className={styles.plot}>\n          {items.map((item, index) => {\n            const safeValue = toSafeValue(item.value);\n            const rawPercent = maxValue > 0 ? (safeValue / maxValue) * 100 : 0;\n            const percent = safeValue > 0 ? Math.max(rawPercent, 6) : 0;\n\n            const withBarVars: withBarVars = {\n              '--bar-color': item.color,\n              '--bar-delay': index * 50 + 'ms',\n              '--bar-height': percent + '%',\n            };\n\n            return (\n              <li\n                className={styles.item}\n                key={item.label + index}\n              >\n                <div className={styles.column}>\n                  <span className={styles.value}>{valueFormatter(item.value)}</span>\n                  <span className={styles.track}>\n                    <span\n                      className={styles.bar}\n                      style={withBarVars}\n                    />\n                  </span>\n                </div>\n                <span\n                  className={styles.label}\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n      ) : (\n        <div className={styles['is-loading']}>\n          <Loading />\n        </div>\n      )}\n    </figure>\n  );\n};\n"],"names":["toSafeValue","value","Number","isFinite","Math","max","Graph","accessibleLabel","className","height","items","style","valueFormatter","toLocaleString","props","maxValue","reduce","item","withVars","length","jsxs","cx","styles","graph","jsx","plot","map","index","safeValue","rawPercent","percent","withBarVars","color","column","track","bar","label","Loading"],"mappings":"icAkBMA,EAAeC,GAAmBC,OAAOC,SAASF,CAAK,EAAIG,KAAKC,IAAI,EAAGJ,CAAK,EAAI,EAEzEK,EAAQA,CAAC,CACpBC,gBAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQ,CAAA,EACRC,MAAAA,EACAC,eAAAA,EAAkBX,GAAUA,EAAMY,eAAAA,EAClC,GAAGC,CACO,IAAM,CAYhB,MAAMC,EAAWL,EAAMM,OAAO,CAACX,EAAKY,IAASb,KAAKC,IAAIA,EAAKL,EAAYiB,EAAKhB,KAAK,CAAC,EAAG,CAAC,EAEhFiB,EAAqB,CACzB,GAAGP,EACH,kBAAmBP,KAAKC,IAAIK,EAAMS,OAAQ,CAAC,EAC3C,iBAAkBV,GAAkB,qCAAA,EAGtC,OACEW,EAAAA,KAAC,SAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,MAAOf,CAAS,EACrC,MAAOU,EACP,GAAIJ,EAAM,iBAAA,QAETP,SAAAA,CAAAA,GAAmBiB,EAAAA,IAAC,aAAA,CAAW,eAAa,gBAAiBjB,SAAAA,EAAgB,EAC7EG,EAAMS,OAAS,EACdK,EAAAA,IAAC,KAAA,CAAG,UAAWF,EAAOG,KACnBf,SAAAA,EAAMgB,IAAI,CAACT,EAAMU,IAAU,CAC1B,MAAMC,EAAY5B,EAAYiB,EAAKhB,KAAK,EAClC4B,EAAad,EAAW,EAAKa,EAAYb,EAAY,IAAM,EAC3De,EAAUF,EAAY,EAAIxB,KAAKC,IAAIwB,EAAY,CAAC,EAAI,EAEpDE,EAA2B,CAC/B,cAAed,EAAKe,MACpB,cAAeL,EAAQ,GAAK,KAC5B,eAAgBG,EAAU,GAAA,EAG5B,cACG,KAAA,CACC,UAAWR,EAAOL,KACM,iBAAA,QAExB,SAAA,CAAAG,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAOW,OACrB,SAAA,CAAAT,EAAAA,IAAC,QAAK,UAAWF,EAAOrB,MAAQW,SAAAA,EAAeK,EAAKhB,KAAK,EAAE,EAC3DuB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAOY,MACtB,SAAAV,EAAAA,IAAC,OAAA,CACC,UAAWF,EAAOa,IAClB,MAAOJ,CAAAA,CAAY,CAAA,CAEvB,CAAA,EACF,EACAP,EAAAA,IAAC,QACC,UAAWF,EAAOc,MAClB,MAAOnB,EAAKmB,MAEXnB,SAAAA,EAAKmB,KAAAA,CACR,CAAA,GAhBKnB,EAAKmB,MAAQT,CAiBpB,CAEJ,CAAC,CAAA,CACH,EAEAH,MAAC,MAAA,CAAI,UAAWF,EAAO,YAAY,EACjC,SAAAE,EAAAA,IAACa,EAAAA,QAAA,CAAA,CAAO,CAAA,CACV,CAAA,EAEJ,CAEJ"}

package/dist/components/graph/index.js

@@ -1,49 +1,49 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { t as w } from "../../classix-DG18itHa.js";
-import { Loading as N } from "../loading/index.js";
-import '../../assets/index8.css';const v = "_graph_18yw9_11", f = "_plot_18yw9_20", x = "_item_18yw9_30", V = "_column_18yw9_36", k = "_value_18yw9_44", M = "_track_18yw9_54", j = "_bar_18yw9_61", L = "_label_18yw9_82", a = {
-  graph: v,
-  plot: f,
-  item: x,
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { t as N } from "../../classix-DG18itHa.js";
+import { Loading as v } from "../loading/index.js";
+import '../../assets/index8.css';const f = "_graph_1web1_11", x = "_plot_1web1_20", k = "_item_1web1_34", V = "_column_1web1_40", y = "_value_1web1_48", M = "_track_1web1_58", j = "_bar_1web1_65", S = "_label_1web1_87", a = {
+  graph: f,
+  plot: x,
+  item: k,
   column: V,
-  value: k,
+  value: y,
   track: M,
   bar: j,
-  label: L,
-  "is-loading": "_is-loading_18yw9_91"
-}, _ = (c) => Number.isFinite(c) ? Math.max(0, c) : 0, G = ({
-  className: c,
+  label: S,
+  "is-loading": "_is-loading_1web1_96"
+}, h = (t) => Number.isFinite(t) ? Math.max(0, t) : 0, L = ({
+  accessibleLabel: t,
+  className: _,
   height: o,
-  items: t = [],
-  label: i,
+  items: n = [],
   style: m,
   valueFormatter: p = (r) => r.toLocaleString(),
-  ...u
+  ...b
 }) => {
-  const r = t.reduce((l, n) => Math.max(l, _(n.value)), 0), d = {
+  const r = n.reduce((e, c) => Math.max(e, h(c.value)), 0), u = {
     ...m,
-    "--graph-columns": Math.max(t.length, 1),
-    "--graph-height": o || "calc(var(--unit) * 16)"
+    "--graph-columns": Math.max(n.length, 1),
+    "--graph-height": o || "calc(var(--utils-tokens-unit) * 16)"
   };
-  return /* @__PURE__ */ s("figure", { className: w(a.graph, c), style: d, ...u, "data-component": "graph", children: [
-    i && /* @__PURE__ */ e("figcaption", { "data-content": "screen-reader", children: i }),
-    t.length > 0 ? /* @__PURE__ */ e("ul", { className: a.plot, children: t.map((l, n) => {
-      const h = _(l.value), g = r > 0 ? h / r * 100 : 0, b = h > 0 ? Math.max(g, 6) : 0, y = {
-        "--bar-color": l.color,
-        "--bar-delay": n * 50 + "ms",
-        "--bar-height": b + "%"
+  return /* @__PURE__ */ s("figure", { className: N(a.graph, _), style: u, ...b, "data-component": "graph", children: [
+    t && /* @__PURE__ */ l("figcaption", { "data-content": "screen-reader", children: t }),
+    n.length > 0 ? /* @__PURE__ */ l("ul", { className: a.plot, children: n.map((e, c) => {
+      const i = h(e.value), d = r > 0 ? i / r * 100 : 0, g = i > 0 ? Math.max(d, 6) : 0, w = {
+        "--bar-color": e.color,
+        "--bar-delay": c * 50 + "ms",
+        "--bar-height": g + "%"
       };
       return /* @__PURE__ */ s("li", { className: a.item, "data-component": "graph", children: [
         /* @__PURE__ */ s("div", { className: a.column, children: [
-          /* @__PURE__ */ e("span", { className: a.value, children: p(l.value) }),
-          /* @__PURE__ */ e("span", { className: a.track, children: /* @__PURE__ */ e("span", { className: a.bar, style: y }) })
+          /* @__PURE__ */ l("span", { className: a.value, children: p(e.value) }),
+          /* @__PURE__ */ l("span", { className: a.track, children: /* @__PURE__ */ l("span", { className: a.bar, style: w }) })
         ] }),
-        /* @__PURE__ */ e("span", { className: a.label, title: l.label, children: l.label })
-      ] }, l.label + n);
-    }) }) : /* @__PURE__ */ e("div", { className: a["is-loading"], children: /* @__PURE__ */ e(N, {}) })
+        /* @__PURE__ */ l("span", { className: a.label, title: e.label, children: e.label })
+      ] }, e.label + c);
+    }) }) : /* @__PURE__ */ l("div", { className: a["is-loading"], children: /* @__PURE__ */ l(v, {}) })
   ] });
 };
 export {
-  G as Graph
+  L as Graph
 };
 //# sourceMappingURL=index.js.map

package/dist/components/graph/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type GraphItem = {\n  color?: string;\n  label: string;\n  value: number;\n};\n\nexport type GraphProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children'> & {\n  height?: string;\n  items?: GraphItem[];\n  label?: string;\n  valueFormatter?: (value: number) => string;\n};\n\nconst toSafeValue = (value: number) => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nexport const Graph = ({\n  className,\n  height,\n  items = [],\n  label,\n  style,\n  valueFormatter = (value) => value.toLocaleString(),\n  ...props\n}: GraphProps) => {\n  type withVars = React.CSSProperties & {\n    '--graph-columns'?: number;\n    '--graph-height'?: string;\n  };\n\n  type withBarVars = React.CSSProperties & {\n    '--bar-color'?: string;\n    '--bar-delay'?: string;\n    '--bar-height'?: string;\n  };\n\n  const maxValue = items.reduce((max, item) => Math.max(max, toSafeValue(item.value)), 0);\n\n  const withVars: withVars = {\n    ...style,\n    '--graph-columns': Math.max(items.length, 1),\n    '--graph-height': height ? height : 'calc(var(--unit) * 16)',\n  };\n\n  return (\n    <figure\n      className={cx(styles.graph, className)}\n      style={withVars}\n      {...props}\n    >\n      {label && <figcaption data-content='screen-reader'>{label}</figcaption>}\n      {items.length > 0 ? (\n        <ul className={styles.plot}>\n          {items.map((item, index) => {\n            const safeValue = toSafeValue(item.value);\n            const rawPercent = maxValue > 0 ? (safeValue / maxValue) * 100 : 0;\n            const percent = safeValue > 0 ? Math.max(rawPercent, 6) : 0;\n\n            const withBarVars: withBarVars = {\n              '--bar-color': item.color,\n              '--bar-delay': index * 50 + 'ms',\n              '--bar-height': percent + '%',\n            };\n\n            return (\n              <li\n                className={styles.item}\n                key={item.label + index}\n              >\n                <div className={styles.column}>\n                  <span className={styles.value}>{valueFormatter(item.value)}</span>\n                  <span className={styles.track}>\n                    <span\n                      className={styles.bar}\n                      style={withBarVars}\n                    />\n                  </span>\n                </div>\n                <span\n                  className={styles.label}\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n      ) : (\n        <div className={styles['is-loading']}>\n          <Loading />\n        </div>\n      )}\n    </figure>\n  );\n};\n"],"names":["toSafeValue","value","Number","isFinite","Math","max","Graph","className","height","items","label","style","valueFormatter","toLocaleString","props","maxValue","reduce","item","withVars","length","jsxs","cx","styles","graph","jsx","plot","map","index","safeValue","rawPercent","percent","withBarVars","color","column","track","bar","Loading"],"mappings":";;;;;;;;;;;;;GAkBMA,IAAcA,CAACC,MAAmBC,OAAOC,SAASF,CAAK,IAAIG,KAAKC,IAAI,GAAGJ,CAAK,IAAI,GAEzEK,IAAQA,CAAC;AAAA,EACpBC,WAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA,IAAQ,CAAA;AAAA,EACRC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,gBAAAA,IAAkBX,CAAAA,MAAUA,EAAMY,eAAAA;AAAAA,EAClC,GAAGC;AACO,MAAM;AAYhB,QAAMC,IAAWN,EAAMO,OAAO,CAACX,GAAKY,MAASb,KAAKC,IAAIA,GAAKL,EAAYiB,EAAKhB,KAAK,CAAC,GAAG,CAAC,GAEhFiB,IAAqB;AAAA,IACzB,GAAGP;AAAAA,IACH,mBAAmBP,KAAKC,IAAII,EAAMU,QAAQ,CAAC;AAAA,IAC3C,kBAAkBX,KAAkB;AAAA,EAAA;AAGtC,SACE,gBAAAY,EAAC,UAAA,EACC,WAAWC,EAAGC,EAAOC,OAAOhB,CAAS,GACrC,OAAOW,GACP,GAAIJ,GAAM,kBAAA,SAETJ,UAAAA;AAAAA,IAAAA,KAAS,gBAAAc,EAAC,cAAA,EAAW,gBAAa,iBAAiBd,UAAAA,GAAM;AAAA,IACzDD,EAAMU,SAAS,IACd,gBAAAK,EAAC,MAAA,EAAG,WAAWF,EAAOG,MACnBhB,UAAAA,EAAMiB,IAAI,CAACT,GAAMU,MAAU;AAC1B,YAAMC,IAAY5B,EAAYiB,EAAKhB,KAAK,GAClC4B,IAAad,IAAW,IAAKa,IAAYb,IAAY,MAAM,GAC3De,IAAUF,IAAY,IAAIxB,KAAKC,IAAIwB,GAAY,CAAC,IAAI,GAEpDE,IAA2B;AAAA,QAC/B,eAAed,EAAKe;AAAAA,QACpB,eAAeL,IAAQ,KAAK;AAAA,QAC5B,gBAAgBG,IAAU;AAAA,MAAA;AAG5B,+BACG,MAAA,EACC,WAAWR,EAAOL,MACM,kBAAA,SAExB,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWE,EAAOW,QACrB,UAAA;AAAA,UAAA,gBAAAT,EAAC,UAAK,WAAWF,EAAOrB,OAAQW,UAAAA,EAAeK,EAAKhB,KAAK,GAAE;AAAA,UAC3D,gBAAAuB,EAAC,QAAA,EAAK,WAAWF,EAAOY,OACtB,UAAA,gBAAAV,EAAC,QAAA,EACC,WAAWF,EAAOa,KAClB,OAAOJ,EAAAA,CAAY,EAAA,CAEvB;AAAA,QAAA,GACF;AAAA,QACA,gBAAAP,EAAC,UACC,WAAWF,EAAOZ,OAClB,OAAOO,EAAKP,OAEXO,UAAAA,EAAKP,MAAAA,CACR;AAAA,MAAA,KAhBKO,EAAKP,QAAQiB,CAiBpB;AAAA,IAEJ,CAAC,EAAA,CACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAWF,EAAO,YAAY,GACjC,UAAA,gBAAAE,EAACY,GAAA,CAAA,CAAO,EAAA,CACV;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/graph/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type GraphItem = {\n  color?: string;\n  label: string;\n  value: number;\n};\n\nexport type GraphProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children'> & {\n  accessibleLabel?: string;\n  height?: string;\n  items?: GraphItem[];\n  valueFormatter?: (value: number) => string;\n};\n\nconst toSafeValue = (value: number) => (Number.isFinite(value) ? Math.max(0, value) : 0);\n\nexport const Graph = ({\n  accessibleLabel,\n  className,\n  height,\n  items = [],\n  style,\n  valueFormatter = (value) => value.toLocaleString(),\n  ...props\n}: GraphProps) => {\n  type withVars = React.CSSProperties & {\n    '--graph-columns'?: number;\n    '--graph-height'?: string;\n  };\n\n  type withBarVars = React.CSSProperties & {\n    '--bar-color'?: string;\n    '--bar-delay'?: string;\n    '--bar-height'?: string;\n  };\n\n  const maxValue = items.reduce((max, item) => Math.max(max, toSafeValue(item.value)), 0);\n\n  const withVars: withVars = {\n    ...style,\n    '--graph-columns': Math.max(items.length, 1),\n    '--graph-height': height ? height : 'calc(var(--utils-tokens-unit) * 16)',\n  };\n\n  return (\n    <figure\n      className={cx(styles.graph, className)}\n      style={withVars}\n      {...props}\n    >\n      {accessibleLabel && <figcaption data-content='screen-reader'>{accessibleLabel}</figcaption>}\n      {items.length > 0 ? (\n        <ul className={styles.plot}>\n          {items.map((item, index) => {\n            const safeValue = toSafeValue(item.value);\n            const rawPercent = maxValue > 0 ? (safeValue / maxValue) * 100 : 0;\n            const percent = safeValue > 0 ? Math.max(rawPercent, 6) : 0;\n\n            const withBarVars: withBarVars = {\n              '--bar-color': item.color,\n              '--bar-delay': index * 50 + 'ms',\n              '--bar-height': percent + '%',\n            };\n\n            return (\n              <li\n                className={styles.item}\n                key={item.label + index}\n              >\n                <div className={styles.column}>\n                  <span className={styles.value}>{valueFormatter(item.value)}</span>\n                  <span className={styles.track}>\n                    <span\n                      className={styles.bar}\n                      style={withBarVars}\n                    />\n                  </span>\n                </div>\n                <span\n                  className={styles.label}\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n      ) : (\n        <div className={styles['is-loading']}>\n          <Loading />\n        </div>\n      )}\n    </figure>\n  );\n};\n"],"names":["toSafeValue","value","Number","isFinite","Math","max","Graph","accessibleLabel","className","height","items","style","valueFormatter","toLocaleString","props","maxValue","reduce","item","withVars","length","jsxs","cx","styles","graph","jsx","plot","map","index","safeValue","rawPercent","percent","withBarVars","color","column","track","bar","label","Loading"],"mappings":";;;;;;;;;;;;;GAkBMA,IAAcA,CAACC,MAAmBC,OAAOC,SAASF,CAAK,IAAIG,KAAKC,IAAI,GAAGJ,CAAK,IAAI,GAEzEK,IAAQA,CAAC;AAAA,EACpBC,iBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA,IAAQ,CAAA;AAAA,EACRC,OAAAA;AAAAA,EACAC,gBAAAA,IAAkBX,CAAAA,MAAUA,EAAMY,eAAAA;AAAAA,EAClC,GAAGC;AACO,MAAM;AAYhB,QAAMC,IAAWL,EAAMM,OAAO,CAACX,GAAKY,MAASb,KAAKC,IAAIA,GAAKL,EAAYiB,EAAKhB,KAAK,CAAC,GAAG,CAAC,GAEhFiB,IAAqB;AAAA,IACzB,GAAGP;AAAAA,IACH,mBAAmBP,KAAKC,IAAIK,EAAMS,QAAQ,CAAC;AAAA,IAC3C,kBAAkBV,KAAkB;AAAA,EAAA;AAGtC,SACE,gBAAAW,EAAC,UAAA,EACC,WAAWC,EAAGC,EAAOC,OAAOf,CAAS,GACrC,OAAOU,GACP,GAAIJ,GAAM,kBAAA,SAETP,UAAAA;AAAAA,IAAAA,KAAmB,gBAAAiB,EAAC,cAAA,EAAW,gBAAa,iBAAiBjB,UAAAA,GAAgB;AAAA,IAC7EG,EAAMS,SAAS,IACd,gBAAAK,EAAC,MAAA,EAAG,WAAWF,EAAOG,MACnBf,UAAAA,EAAMgB,IAAI,CAACT,GAAMU,MAAU;AAC1B,YAAMC,IAAY5B,EAAYiB,EAAKhB,KAAK,GAClC4B,IAAad,IAAW,IAAKa,IAAYb,IAAY,MAAM,GAC3De,IAAUF,IAAY,IAAIxB,KAAKC,IAAIwB,GAAY,CAAC,IAAI,GAEpDE,IAA2B;AAAA,QAC/B,eAAed,EAAKe;AAAAA,QACpB,eAAeL,IAAQ,KAAK;AAAA,QAC5B,gBAAgBG,IAAU;AAAA,MAAA;AAG5B,+BACG,MAAA,EACC,WAAWR,EAAOL,MACM,kBAAA,SAExB,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWE,EAAOW,QACrB,UAAA;AAAA,UAAA,gBAAAT,EAAC,UAAK,WAAWF,EAAOrB,OAAQW,UAAAA,EAAeK,EAAKhB,KAAK,GAAE;AAAA,UAC3D,gBAAAuB,EAAC,QAAA,EAAK,WAAWF,EAAOY,OACtB,UAAA,gBAAAV,EAAC,QAAA,EACC,WAAWF,EAAOa,KAClB,OAAOJ,EAAAA,CAAY,EAAA,CAEvB;AAAA,QAAA,GACF;AAAA,QACA,gBAAAP,EAAC,UACC,WAAWF,EAAOc,OAClB,OAAOnB,EAAKmB,OAEXnB,UAAAA,EAAKmB,MAAAA,CACR;AAAA,MAAA,KAhBKnB,EAAKmB,QAAQT,CAiBpB;AAAA,IAEJ,CAAC,EAAA,CACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAWF,EAAO,YAAY,GACjC,UAAA,gBAAAE,EAACa,GAAA,CAAA,CAAO,EAAA,CACV;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/header/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index6.css');const r=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),s="_header_1q87f_1",u="_jumbo_1q87f_67",e={header:s,jumbo:u},d={default:e.default,jumbo:e.jumbo},n=({children:t,variant:a="default"})=>r.jsx("header",{className:o.t(e.header,d[a]),"data-component":"header",children:t});exports.Header=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index6.css');const r=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),s="_header_1k1hx_1",u="_jumbo_1k1hx_67",e={header:s,jumbo:u},d={default:e.default,jumbo:e.jumbo},n=({children:t,variant:a="default"})=>r.jsx("header",{className:o.t(e.header,d[a]),"data-component":"header",children:t});exports.Header=n;
 //# sourceMappingURL=index.cjs.map

package/dist/components/header/index.js

@@ -1,16 +1,16 @@
 import { jsx as a } from "react/jsx-runtime";
 import { t as r } from "../../classix-DG18itHa.js";
-import '../../assets/index6.css';const d = "_header_1q87f_1", m = "_jumbo_1q87f_67", e = {
+import '../../assets/index6.css';const d = "_header_1k1hx_1", m = "_jumbo_1k1hx_67", e = {
   header: d,
   jumbo: m
 }, s = {
   default: e.default,
   jumbo: e.jumbo
-}, c = ({
+}, h = ({
   children: o,
   variant: t = "default"
 }) => /* @__PURE__ */ a("header", { className: r(e.header, s[t]), "data-component": "header", children: o });
 export {
-  c as Header
+  h as Header
 };
 //# sourceMappingURL=index.js.map

package/dist/components/icon/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const r=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),i=require("../../icons-C_cX1FYp.cjs"),_="_icon_wciqx_1",m="_small_wciqx_9",u="_medium_wciqx_14",d="_large_wciqx_19",g="_danger_wciqx_24",w="_primary_wciqx_32",q="_white_wciqx_36",e={icon:_,small:m,medium:u,large:d,danger:g,default:"_default_wciqx_28",primary:w,white:q,"gap-right":"_gap-right_wciqx_40","gap-left":"_gap-left_wciqx_44"},x={large:e.large,medium:e.medium,small:e.small},p={danger:e.danger,default:e.default,primary:e.primary,white:e.white},y=({fill:n,gap:t="none",name:c,size:a="medium",variant:s="default"})=>{const o={maskImage:i.iconSVG(c,n??!1)};return r.jsx("span",{className:l.t(t!=="none"&&e[`gap-${t}`],x[a],e.icon,p[s]),style:o,"data-component":"icon"})},f=()=>Object.keys(i.iconPaths);exports.Icon=y;exports.Icons=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index36.css');const c=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),n=require("../../icons-C_cX1FYp.cjs"),_="_icon_1034p_1",m="_small_1034p_9",p="_medium_1034p_14",d="_large_1034p_19",u="_danger_1034p_24",g="_primary_1034p_32",y="_white_1034p_36",e={icon:_,small:m,medium:p,large:d,danger:u,default:"_default_1034p_28",primary:g,white:y,"gap-right":"_gap-right_1034p_40","gap-left":"_gap-left_1034p_44"},f={large:e.large,medium:e.medium,small:e.small},h={danger:e.danger,default:e.default,primary:e.primary,white:e.white},w=({fill:a,gap:t="none",name:s,size:i="medium",variant:r="default"})=>{const o={maskImage:n.iconSVG(s,a??!1)};return c.jsx("span",{"aria-hidden":"true",className:l.t(t!=="none"&&e[`gap-${t}`],f[i],e.icon,h[r]),style:o,"data-component":"icon"})},I=()=>Object.keys(n.iconPaths);exports.Icon=w;exports.Icons=I;
 //# sourceMappingURL=index.cjs.map

package/dist/components/icon/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/icon/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName, iconSVG } from './icons';\nimport { iconPaths } from './icons';\nimport styles from './styles.module.css';\n\nconst sizes = {\n  large: styles.large,\n  medium: styles.medium,\n  small: styles.small,\n};\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  primary: styles.primary,\n  white: styles.white,\n};\n\nexport type IconProps = {\n  fill?: boolean;\n  gap?: 'left' | 'none' | 'right';\n  name: IconName;\n  size?: keyof typeof sizes;\n  variant?: keyof typeof variants;\n};\n\nexport const Icon = ({\n  fill,\n  gap = 'none',\n  name,\n  size = 'medium',\n  variant = 'default',\n}: IconProps) => {\n  const iconStyle = {\n    maskImage: iconSVG(name, fill ?? false),\n  } as React.CSSProperties;\n\n  return (\n    <span\n      className={cx(\n        gap !== 'none' && styles[`gap-${gap}`],\n        sizes[size],\n        styles.icon,\n        variants[variant]\n      )}\n      style={iconStyle}\n    />\n  );\n};\n\nexport const Icons = () => {\n  return Object.keys(iconPaths);\n};\n"],"names":["sizes","large","styles","medium","small","variants","danger","default","primary","white","Icon","fill","gap","name","size","variant","iconStyle","maskImage","iconSVG","jsx","cx","icon","Icons","Object","keys","iconPaths"],"mappings":"6eAMMA,EAAQ,CACZC,MAAOC,EAAOD,MACdE,OAAQD,EAAOC,OACfC,MAAOF,EAAOE,KAChB,EAEMC,EAAW,CACfC,OAAQJ,EAAOI,OACfC,QAASL,EAAOK,QAChBC,QAASN,EAAOM,QAChBC,MAAOP,EAAOO,KAChB,EAUaC,EAAOA,CAAC,CACnBC,KAAAA,EACAC,IAAAA,EAAM,OACNC,KAAAA,EACAC,KAAAA,EAAO,SACPC,QAAAA,EAAU,SACD,IAAM,CACf,MAAMC,EAAY,CAChBC,UAAWC,EAAAA,QAAQL,EAAMF,GAAQ,EAAK,CAAA,EAGxC,OACEQ,MAAC,QACC,UAAWC,EAAAA,EACTR,IAAQ,QAAUV,EAAO,OAAOU,CAAG,EAAE,EACrCZ,EAAMc,CAAI,EACVZ,EAAOmB,KACPhB,EAASU,CAAO,CAClB,EACA,MAAOC,EAAU,iBAAA,MAAA,CAAA,CAGvB,EAEaM,EAAQA,IACZC,OAAOC,KAAKC,WAAS"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/icon/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName, iconSVG } from './icons';\nimport { iconPaths } from './icons';\nimport styles from './styles.module.css';\n\nconst sizes = {\n  large: styles.large,\n  medium: styles.medium,\n  small: styles.small,\n};\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  primary: styles.primary,\n  white: styles.white,\n};\n\nexport type IconProps = {\n  fill?: boolean;\n  gap?: 'left' | 'none' | 'right';\n  name: IconName;\n  size?: keyof typeof sizes;\n  variant?: keyof typeof variants;\n};\n\nexport const Icon = ({\n  fill,\n  gap = 'none',\n  name,\n  size = 'medium',\n  variant = 'default',\n}: IconProps) => {\n  const iconStyle = {\n    maskImage: iconSVG(name, fill ?? false),\n  } as React.CSSProperties;\n\n  return (\n    <span\n      aria-hidden='true'\n      className={cx(\n        gap !== 'none' && styles[`gap-${gap}`],\n        sizes[size],\n        styles.icon,\n        variants[variant]\n      )}\n      style={iconStyle}\n    />\n  );\n};\n\nexport const Icons = () => {\n  return Object.keys(iconPaths);\n};\n"],"names":["sizes","large","styles","medium","small","variants","danger","default","primary","white","Icon","fill","gap","name","size","variant","iconStyle","maskImage","iconSVG","jsx","cx","icon","Icons","Object","keys","iconPaths"],"mappings":"6eAMMA,EAAQ,CACZC,MAAOC,EAAOD,MACdE,OAAQD,EAAOC,OACfC,MAAOF,EAAOE,KAChB,EAEMC,EAAW,CACfC,OAAQJ,EAAOI,OACfC,QAASL,EAAOK,QAChBC,QAASN,EAAOM,QAChBC,MAAOP,EAAOO,KAChB,EAUaC,EAAOA,CAAC,CACnBC,KAAAA,EACAC,IAAAA,EAAM,OACNC,KAAAA,EACAC,KAAAA,EAAO,SACPC,QAAAA,EAAU,SACD,IAAM,CACf,MAAMC,EAAY,CAChBC,UAAWC,EAAAA,QAAQL,EAAMF,GAAQ,EAAK,CAAA,EAGxC,OACEQ,MAAC,OAAA,CACC,cAAY,OACZ,UAAWC,EAAAA,EACTR,IAAQ,QAAUV,EAAO,OAAOU,CAAG,EAAE,EACrCZ,EAAMc,CAAI,EACVZ,EAAOmB,KACPhB,EAASU,CAAO,CAClB,EACA,MAAOC,EAAU,iBAAA,MAAA,CAAA,CAGvB,EAEaM,EAAQA,IACZC,OAAOC,KAAKC,WAAS"}

package/dist/components/icon/index.js

@@ -1,40 +1,40 @@
 import { jsx as o } from "react/jsx-runtime";
-import { t as r } from "../../classix-DG18itHa.js";
-import { i as m, a as _ } from "../../icons-DfmpRbxE.js";
-import '../../assets/index36.css';const l = "_icon_wciqx_1", d = "_small_wciqx_9", g = "_medium_wciqx_14", p = "_large_wciqx_19", w = "_danger_wciqx_24", u = "_primary_wciqx_32", x = "_white_wciqx_36", a = {
-  icon: l,
-  small: d,
-  medium: g,
-  large: p,
-  danger: w,
-  default: "_default_wciqx_28",
-  primary: u,
-  white: x,
-  "gap-right": "_gap-right_wciqx_40",
-  "gap-left": "_gap-left_wciqx_44"
-}, f = {
+import { t as m } from "../../classix-DG18itHa.js";
+import { i as _, a as l } from "../../icons-DfmpRbxE.js";
+import '../../assets/index36.css';const c = "_icon_1034p_1", p = "_small_1034p_9", d = "_medium_1034p_14", g = "_large_1034p_19", u = "_danger_1034p_24", f = "_primary_1034p_32", h = "_white_1034p_36", a = {
+  icon: c,
+  small: p,
+  medium: d,
+  large: g,
+  danger: u,
+  default: "_default_1034p_28",
+  primary: f,
+  white: h,
+  "gap-right": "_gap-right_1034p_40",
+  "gap-left": "_gap-left_1034p_44"
+}, y = {
   large: a.large,
   medium: a.medium,
   small: a.small
-}, q = {
+}, w = {
   danger: a.danger,
   default: a.default,
   primary: a.primary,
   white: a.white
-}, j = ({
-  fill: i,
+}, x = ({
+  fill: t,
   gap: e = "none",
-  name: t,
-  size: n = "medium",
-  variant: c = "default"
+  name: n,
+  size: r = "medium",
+  variant: s = "default"
 }) => {
-  const s = {
-    maskImage: m(t, i ?? !1)
+  const i = {
+    maskImage: _(n, t ?? !1)
   };
-  return /* @__PURE__ */ o("span", { className: r(e !== "none" && a[`gap-${e}`], f[n], a.icon, q[c]), style: s, "data-component": "icon" });
-}, k = () => Object.keys(_);
+  return /* @__PURE__ */ o("span", { "aria-hidden": "true", className: m(e !== "none" && a[`gap-${e}`], y[r], a.icon, w[s]), style: i, "data-component": "icon" });
+}, S = () => Object.keys(l);
 export {
-  j as Icon,
-  k as Icons
+  x as Icon,
+  S as Icons
 };
 //# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/icon/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName, iconSVG } from './icons';\nimport { iconPaths } from './icons';\nimport styles from './styles.module.css';\n\nconst sizes = {\n  large: styles.large,\n  medium: styles.medium,\n  small: styles.small,\n};\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  primary: styles.primary,\n  white: styles.white,\n};\n\nexport type IconProps = {\n  fill?: boolean;\n  gap?: 'left' | 'none' | 'right';\n  name: IconName;\n  size?: keyof typeof sizes;\n  variant?: keyof typeof variants;\n};\n\nexport const Icon = ({\n  fill,\n  gap = 'none',\n  name,\n  size = 'medium',\n  variant = 'default',\n}: IconProps) => {\n  const iconStyle = {\n    maskImage: iconSVG(name, fill ?? false),\n  } as React.CSSProperties;\n\n  return (\n    <span\n      className={cx(\n        gap !== 'none' && styles[`gap-${gap}`],\n        sizes[size],\n        styles.icon,\n        variants[variant]\n      )}\n      style={iconStyle}\n    />\n  );\n};\n\nexport const Icons = () => {\n  return Object.keys(iconPaths);\n};\n"],"names":["sizes","large","styles","medium","small","variants","danger","default","primary","white","Icon","fill","gap","name","size","variant","iconStyle","maskImage","iconSVG","jsx","cx","icon","Icons","Object","keys","iconPaths"],"mappings":";;;;;;;;;;;;;;GAMMA,IAAQ;AAAA,EACZC,OAAOC,EAAOD;AAAAA,EACdE,QAAQD,EAAOC;AAAAA,EACfC,OAAOF,EAAOE;AAChB,GAEMC,IAAW;AAAA,EACfC,QAAQJ,EAAOI;AAAAA,EACfC,SAASL,EAAOK;AAAAA,EAChBC,SAASN,EAAOM;AAAAA,EAChBC,OAAOP,EAAOO;AAChB,GAUaC,IAAOA,CAAC;AAAA,EACnBC,MAAAA;AAAAA,EACAC,KAAAA,IAAM;AAAA,EACNC,MAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,SAAAA,IAAU;AACD,MAAM;AACf,QAAMC,IAAY;AAAA,IAChBC,WAAWC,EAAQL,GAAMF,KAAQ,EAAK;AAAA,EAAA;AAGxC,SACE,gBAAAQ,EAAC,UACC,WAAWC,EACTR,MAAQ,UAAUV,EAAO,OAAOU,CAAG,EAAE,GACrCZ,EAAMc,CAAI,GACVZ,EAAOmB,MACPhB,EAASU,CAAO,CAClB,GACA,OAAOC,GAAU,kBAAA,OAAA,CAAA;AAGvB,GAEaM,IAAQA,MACZC,OAAOC,KAAKC,CAAS;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/icon/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName, iconSVG } from './icons';\nimport { iconPaths } from './icons';\nimport styles from './styles.module.css';\n\nconst sizes = {\n  large: styles.large,\n  medium: styles.medium,\n  small: styles.small,\n};\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  primary: styles.primary,\n  white: styles.white,\n};\n\nexport type IconProps = {\n  fill?: boolean;\n  gap?: 'left' | 'none' | 'right';\n  name: IconName;\n  size?: keyof typeof sizes;\n  variant?: keyof typeof variants;\n};\n\nexport const Icon = ({\n  fill,\n  gap = 'none',\n  name,\n  size = 'medium',\n  variant = 'default',\n}: IconProps) => {\n  const iconStyle = {\n    maskImage: iconSVG(name, fill ?? false),\n  } as React.CSSProperties;\n\n  return (\n    <span\n      aria-hidden='true'\n      className={cx(\n        gap !== 'none' && styles[`gap-${gap}`],\n        sizes[size],\n        styles.icon,\n        variants[variant]\n      )}\n      style={iconStyle}\n    />\n  );\n};\n\nexport const Icons = () => {\n  return Object.keys(iconPaths);\n};\n"],"names":["sizes","large","styles","medium","small","variants","danger","default","primary","white","Icon","fill","gap","name","size","variant","iconStyle","maskImage","iconSVG","jsx","cx","icon","Icons","Object","keys","iconPaths"],"mappings":";;;;;;;;;;;;;;GAMMA,IAAQ;AAAA,EACZC,OAAOC,EAAOD;AAAAA,EACdE,QAAQD,EAAOC;AAAAA,EACfC,OAAOF,EAAOE;AAChB,GAEMC,IAAW;AAAA,EACfC,QAAQJ,EAAOI;AAAAA,EACfC,SAASL,EAAOK;AAAAA,EAChBC,SAASN,EAAOM;AAAAA,EAChBC,OAAOP,EAAOO;AAChB,GAUaC,IAAOA,CAAC;AAAA,EACnBC,MAAAA;AAAAA,EACAC,KAAAA,IAAM;AAAA,EACNC,MAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,SAAAA,IAAU;AACD,MAAM;AACf,QAAMC,IAAY;AAAA,IAChBC,WAAWC,EAAQL,GAAMF,KAAQ,EAAK;AAAA,EAAA;AAGxC,SACE,gBAAAQ,EAAC,QAAA,EACC,eAAY,QACZ,WAAWC,EACTR,MAAQ,UAAUV,EAAO,OAAOU,CAAG,EAAE,GACrCZ,EAAMc,CAAI,GACVZ,EAAOmB,MACPhB,EAASU,CAAO,CAClB,GACA,OAAOC,GAAU,kBAAA,OAAA,CAAA;AAGvB,GAEaM,IAAQA,MACZC,OAAOC,KAAKC,CAAS;"}

package/dist/components/image/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index5.css');const d=require("react/jsx-runtime"),c=require("react"),o="_image_nnuov_1",y={image:o};function S({fadeDurationMs:n=250,showOnError:r=!0,onLoad:a,onError:u,style:l,...t}){const i=c.useRef(null),[m,s]=c.useState(!1);c.useEffect(()=>{s(!1)},[t.src,t.srcSet]),c.useEffect(()=>{const e=i.current;e&&e.complete&&e.naturalWidth>0&&s(!0)},[t.src,t.srcSet]);const f=e=>{s(!0),a==null||a(e)},g=e=>{r&&s(!0),u==null||u(e)};return d.jsx("img",{...t,className:y.image,onLoad:f,onError:g,ref:i,style:{...l,opacity:m?1:0,"--duration-override":`${n}ms`},"data-component":"image"})}exports.Image=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index5.css');const d=require("react/jsx-runtime"),c=require("react"),o="_image_14j8z_1",y={image:o};function S({fadeDurationMs:n=250,showOnError:r=!0,onLoad:a,onError:i,style:l,...t}){const u=c.useRef(null),[m,s]=c.useState(!1);c.useEffect(()=>{s(!1)},[t.src,t.srcSet]),c.useEffect(()=>{const e=u.current;e&&e.complete&&e.naturalWidth>0&&s(!0)},[t.src,t.srcSet]);const f=e=>{s(!0),a==null||a(e)},g=e=>{r&&s(!0),i==null||i(e)};return d.jsx("img",{...t,className:y.image,onLoad:f,onError:g,ref:u,style:{...l,opacity:m?1:0,"--duration-override":`${n}ms`},"data-component":"image"})}exports.Image=S;
 //# sourceMappingURL=index.cjs.map

package/dist/components/image/index.js

@@ -1,32 +1,32 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as o, useState as h, useEffect as m } from "react";
-import '../../assets/index5.css';const y = "_image_nnuov_1", S = {
+import '../../assets/index5.css';const y = "_image_14j8z_1", S = {
   image: y
 };
 function x({
-  fadeDurationMs: n = 250,
+  fadeDurationMs: r = 250,
   showOnError: u = !0,
   onLoad: a,
   onError: c,
-  style: r,
+  style: f,
   ...t
 }) {
-  const i = o(null), [f, s] = h(!1);
+  const i = o(null), [l, s] = h(!1);
   m(() => {
     s(!1);
   }, [t.src, t.srcSet]), m(() => {
     const e = i.current;
     e && e.complete && e.naturalWidth > 0 && s(!0);
   }, [t.src, t.srcSet]);
-  const l = (e) => {
+  const n = (e) => {
     s(!0), a == null || a(e);
   }, d = (e) => {
     u && s(!0), c == null || c(e);
   };
-  return /* @__PURE__ */ g("img", { ...t, className: S.image, onLoad: l, onError: d, ref: i, style: {
-    ...r,
-    opacity: f ? 1 : 0,
-    "--duration-override": `${n}ms`
+  return /* @__PURE__ */ g("img", { ...t, className: S.image, onLoad: n, onError: d, ref: i, style: {
+    ...f,
+    opacity: l ? 1 : 0,
+    "--duration-override": `${r}ms`
   }, "data-component": "image" });
 }
 export {

package/dist/components/input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),c=require("react"),I=require("../../icons-C_cX1FYp.cjs"),P=require("../../utils-DBzf7CFq.cjs"),s=require("../../styles.module-Vt6mmlsz.cjs");function T({className:p,defaultCountryCode:d="+47",disabled:a=!1,icon:i,label:h,placeholder:m,ref:v,type:t="text",...e}){const[l,g]=c.useState(""),[o,x]=c.useState(""),{onChange:y,value:j,...N}=e,{touched:S,onBlur:f}=P.useTouched(j===""),q=i&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":I.iconSVG(i,!0)}:void 0;c.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const u={name:e.name,value:o?(l||d).split(" ").join("")+o.split(" ").join(""):void 0};e.onChange({target:u,currentTarget:u})}},[l,o]),c.useEffect(()=>{t==="tel"&&!e.value&&(x(""),g(""))},[e.value,t]);const C=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:a,hidden:!0,onChange:y,pattern:void 0,placeholder:m,ref:v,type:t,value:j}),n.jsx("input",{type:"text",className:s.inputStyles.input,disabled:a,maxLength:5,onChange:u=>g(u.target.value),placeholder:d,value:l}),n.jsx("input",{type:"tel",className:r.t(s.inputStyles.input,S&&"touched"),"data-icon":i?"true":void 0,disabled:a,maxLength:14,name:void 0,onChange:u=>x(u.target.value),onBlur:f,pattern:e.pattern,style:q,value:o,...N})]});return n.jsxs("label",{className:s.inputStyles.label,"data-component":"input",children:[h&&n.jsx("span",{className:r.t(e.required&&s.inputStyles.required),children:h}),t==="tel"?C:n.jsx("input",{ref:v,className:r.t(s.inputStyles.input,p,S&&"touched"),"data-icon":i?"true":void 0,disabled:a,onBlur:f,placeholder:m,style:q,type:t,...e})]})}exports.Input=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("../../classix-5H4IWnMA.cjs"),l=require("react"),P=require("../../icons-C_cX1FYp.cjs"),T=require("../../utils-DBzf7CFq.cjs"),s=require("../../styles.module-BPvMQa_x.cjs");function b({className:C,defaultCountryCode:h="+47",disabled:a=!1,icon:i,label:d,placeholder:m,ref:v,required:c,type:t="text",...e}){const[r,g]=l.useState(""),[o,x]=l.useState(""),{onChange:N,value:j,...q}=e,{touched:S,onBlur:p}=T.useTouched(j===""),f=i&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":P.iconSVG(i,!0)}:void 0;l.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const u={name:e.name,value:o?(r||h).split(" ").join("")+o.split(" ").join(""):void 0};e.onChange({target:u,currentTarget:u})}},[r,o]),l.useEffect(()=>{t==="tel"&&!e.value&&(x(""),g(""))},[e.value,t]);const I=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:a,hidden:!0,onChange:N,pattern:void 0,placeholder:m,ref:v,type:t,value:j}),n.jsx("input",{type:"text",className:s.inputStyles.input,disabled:a,maxLength:5,onChange:u=>g(u.target.value),placeholder:h,value:r}),n.jsx("input",{type:"tel",className:y.t(s.inputStyles.input,S&&s.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,maxLength:14,name:void 0,onChange:u=>x(u.target.value),onBlur:p,pattern:e.pattern,required:c,style:f,value:o,...q})]});return n.jsxs("label",{className:s.inputStyles.label,"data-component":"input",children:[d&&n.jsx("span",{"data-required":c||void 0,children:d}),t==="tel"?I:n.jsx("input",{ref:v,className:y.t(s.inputStyles.input,C,S&&s.inputStyles.touched),"data-icon":i?"true":void 0,disabled:a,onBlur:p,placeholder:m,required:c,style:f,type:t,...e})]})}exports.Input=b;
 //# sourceMappingURL=index.cjs.map

package/dist/components/input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  icon,\n  label,\n  placeholder,\n  ref,\n  type = 'text',\n  ...props\n}: InputProps) {\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { onChange, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars =\n    icon && type !== 'radio' && type !== 'datetime-local'\n      ? {\n          '--icon-svg': iconSVG(icon, true),\n        }\n      : undefined;\n\n  useEffect(() => {\n    if (typeof props.onChange === 'function' && type === 'tel') {\n      const target = {\n        name: props.name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n      // eslint-disable-next-line\n      (props.onChange as any)({ target, currentTarget: target });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [countryCode, phoneNumber]);\n\n  useEffect(() => {\n    if (type === 'tel' && !props.value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [props.value, type]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={styles.input}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        type='tel'\n        className={cx(styles.input, touched && 'touched')}\n        data-icon={icon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={onBlur}\n        pattern={props.pattern}\n        style={withVars}\n        value={phoneNumber}\n        {...restProps}\n      />\n    </>\n  );\n\n  return (\n    <label className={styles.label}>\n      {label && <span className={cx(props.required && styles.required)}>{label}</span>}\n      {type === 'tel' ? (\n        telephoneInput\n      ) : (\n        <input\n          ref={ref}\n          className={cx(styles.input, className, touched && 'touched')}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          style={withVars}\n          type={type}\n          {...props}\n        />\n      )}\n    </label>\n  );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern","required"],"mappings":"0SA2BO,SAASA,EAAM,CACpBC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,IAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACO,EAAG,CACb,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcR,EACpC,CAAES,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJjB,GAAQI,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAcc,EAAAA,QAAQlB,EAAM,EAAI,CAAA,EAElCmB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOf,EAAMM,UAAa,YAAcP,IAAS,MAAO,CAC1D,MAAMiB,EAAS,CACbC,KAAMjB,EAAMiB,KACZV,MAAOH,GACFH,GAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLd,EAAMM,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVhB,IAAS,OAAS,CAACC,EAAMO,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACF,EAAMO,MAAOR,CAAI,CAAC,EAEtB,MAAMsB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA9B,EACA,OAAM,GACN,SAAAY,EACA,QAASQ,OACT,YAAAjB,EACA,IAAAC,EACA,KAAAC,EACA,MAAAQ,CAAA,CAAa,EAEfiB,MAAC,SACC,KAAK,OACL,UAAWC,EAAAA,YAAOC,MAClB,SAAAhC,EACA,UAAW,EACX,SAAWiC,GAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,EAC9C,YAAad,EACb,MAAOQ,EAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAW2B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOjB,GAAW,SAAS,EAChD,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,UAAW,GACX,KAAMoB,OACN,SAAWa,GAAMtB,EAAesB,EAAEX,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASV,EAAM6B,QACf,MAAOjB,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,cACG,QAAA,CAAM,UAAWiB,EAAAA,YAAO7B,MAAM,iBAAA,QAC5BA,SAAAA,CAAAA,GAAS4B,EAAAA,IAAC,QAAK,UAAWI,EAAAA,EAAG5B,EAAM8B,UAAYL,EAAAA,YAAOK,QAAQ,EAAIlC,SAAAA,CAAAA,CAAM,EACxEG,IAAS,MACRsB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAA1B,EACA,UAAW8B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOlC,EAAWiB,GAAW,SAAS,EAC3D,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,OAAAgB,EACA,YAAAb,EACA,MAAOe,EACP,KAAAb,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  icon,\n  label,\n  placeholder,\n  ref,\n  required,\n  type = 'text',\n  ...props\n}: InputProps) {\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { onChange, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars =\n    icon && type !== 'radio' && type !== 'datetime-local'\n      ? {\n          '--icon-svg': iconSVG(icon, true),\n        }\n      : undefined;\n\n  useEffect(() => {\n    if (typeof props.onChange === 'function' && type === 'tel') {\n      const target = {\n        name: props.name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n      // eslint-disable-next-line\n      (props.onChange as any)({ target, currentTarget: target });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [countryCode, phoneNumber]);\n\n  useEffect(() => {\n    if (type === 'tel' && !props.value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [props.value, type]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={styles.input}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        type='tel'\n        className={cx(styles.input, touched && styles.touched)}\n        data-icon={icon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={onBlur}\n        pattern={props.pattern}\n        required={required}\n        style={withVars}\n        value={phoneNumber}\n        {...restProps}\n      />\n    </>\n  );\n\n  return (\n    <label className={styles.label}>\n      {label && <span data-required={required || undefined}>{label}</span>}\n      {type === 'tel' ? (\n        telephoneInput\n      ) : (\n        <input\n          ref={ref}\n          className={cx(styles.input, className, touched && styles.touched)}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          required={required}\n          style={withVars}\n          type={type}\n          {...props}\n        />\n      )}\n    </label>\n  );\n}\n"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","required","type","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern"],"mappings":"0SA2BO,SAASA,EAAM,CACpBC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACO,EAAG,CACb,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcR,EACpC,CAAES,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJlB,GAAQK,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAcc,EAAAA,QAAQnB,EAAM,EAAI,CAAA,EAElCoB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOf,EAAMM,UAAa,YAAcP,IAAS,MAAO,CAC1D,MAAMiB,EAAS,CACbC,KAAMjB,EAAMiB,KACZV,MAAOH,GACFH,GAAeT,GAAoB0B,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLd,EAAMM,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVhB,IAAS,OAAS,CAACC,EAAMO,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACF,EAAMO,MAAOR,CAAI,CAAC,EAEtB,MAAMsB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA/B,EACA,OAAM,GACN,SAAAa,EACA,QAASQ,OACT,YAAAlB,EACA,IAAAC,EACA,KAAAE,EACA,MAAAQ,CAAA,CAAa,EAEfiB,MAAC,SACC,KAAK,OACL,UAAWC,EAAAA,YAAOC,MAClB,SAAAjC,EACA,UAAW,EACX,SAAWkC,GAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,EAC9C,YAAaf,EACb,MAAOS,EAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAW2B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOjB,GAAWgB,EAAAA,YAAOhB,OAAO,EACrD,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,UAAW,GACX,KAAMqB,OACN,SAAWa,GAAMtB,EAAesB,EAAEX,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASV,EAAM6B,QACf,SAAA/B,EACA,MAAOc,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,cACG,QAAA,CAAM,UAAWiB,EAAAA,YAAO9B,MAAM,iBAAA,QAC5BA,SAAAA,CAAAA,GAAS6B,EAAAA,IAAC,OAAA,CAAK,gBAAe1B,GAAYgB,OAAYnB,SAAAA,EAAM,EAC5DI,IAAS,MACRsB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAA3B,EACA,UAAW+B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOnC,EAAWkB,GAAWgB,EAAAA,YAAOhB,OAAO,EAChE,YAAWf,EAAO,OAASoB,OAC3B,SAAArB,EACA,OAAAiB,EACA,YAAAd,EACA,SAAAE,EACA,MAAOc,EACP,KAAAb,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ"}