@alma-oss/spirit-web-react 4.5.0 → 4.6.1

package/dist/components/Box/demo/BoxWithAll.js

@@ -0,0 +1,24 @@
+import { jsxs as o, Fragment as e, jsx as r } from "react/jsx-runtime";
+import d from "../Box.js";
+const i = () => /* @__PURE__ */ o(e, { children: [
+  /* @__PURE__ */ r("p", { children: "For demo purposes, the boxes have custom padding." }),
+  /* @__PURE__ */ r(d, { padding: "space-800", backgroundColor: "primary", borderWidth: "100", children: "With primary background, solid border and no radius" }),
+  /* @__PURE__ */ r(d, { padding: "space-800", backgroundColor: "secondary", borderRadius: "300", borderStyle: "dashed", borderWidth: "200", children: "With secondary background, custom radius, dashed thicker border" }),
+  /* @__PURE__ */ r(
+    d,
+    {
+      padding: "space-800",
+      backgroundColor: "tertiary",
+      textColor: "tertiary",
+      borderRadius: "full",
+      borderStyle: "dotted",
+      borderWidth: "200",
+      borderColor: "basic",
+      children: "With tertiary background, tertiary text color, full radius, dotted thicker border"
+    }
+  )
+] });
+export {
+  i as default
+};
+//# sourceMappingURL=BoxWithAll.js.map

package/dist/components/Box/demo/BoxWithAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithAll.js","sources":["../../../../src/components/Box/demo/BoxWithAll.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithAll = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Box padding=\"space-800\" backgroundColor=\"primary\" borderWidth=\"100\">\n      With primary background, solid border and no radius\n    </Box>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\" borderRadius=\"300\" borderStyle=\"dashed\" borderWidth=\"200\">\n      With secondary background, custom radius, dashed thicker border\n    </Box>\n    <Box\n      padding=\"space-800\"\n      backgroundColor=\"tertiary\"\n      textColor=\"tertiary\"\n      borderRadius=\"full\"\n      borderStyle=\"dotted\"\n      borderWidth=\"200\"\n      borderColor=\"basic\"\n    >\n      With tertiary background, tertiary text color, full radius, dotted thicker border\n    </Box>\n  </>\n);\n\nexport default BoxWithAll;\n"],"names":["BoxWithAll","jsxs","Fragment","jsx","Box"],"mappings":";;AAGA,MAAMA,IAAa,MACjB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,EACpD,gBAAAA,EAACC,KAAI,SAAQ,aAAY,iBAAgB,WAAU,aAAY,OAAM,UAAA,sDAAA,CAErE;AAAA,EACA,gBAAAD,EAACC,GAAA,EAAI,SAAQ,aAAY,iBAAgB,aAAY,cAAa,OAAM,aAAY,UAAS,aAAY,OAAM,UAAA,mEAE/G;AAAA,EACA,gBAAAD;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,aAAY;AAAA,MACZ,aAAY;AAAA,MACb,UAAA;AAAA,IAAA;AAAA,EAAA;AAED,EAAA,CACF;"}

package/dist/components/Box/demo/BoxWithBackgroundColor.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("@alma-oss/spirit-design-tokens"),n=require("../../../constants/dictionaries.cjs"),c=require("../../../utils/colorObjectGenerators.cjs"),d=require("../../Grid/Grid.cjs"),t=require("./BoxColorDemoFactory.cjs"),e=require("./complementaryColorHelper.cjs"),C=c.getAccentBackgroundColors(),g=c.getEmotionBackgroundColors(),m=c.getNeutralBackgroundColors(),l=r=>e.getComplementaryColor({sourceColor:r,groups:[...Object.values(s.accentColors),...Object.values(s.emotionColors)],fromPrefix:"background",toPrefix:"content",fallback:n.TextColors.PRIMARY}),b=()=>{const r=e.collectDefinedColorValues(C),a=e.collectDefinedColorValues(m),u=[...Object.values(n.BackgroundColors),...a],i=e.collectDefinedColorValues(g);return o.jsxs(o.Fragment,{children:[o.jsx("p",{children:"For demo purposes, the boxes have custom padding."}),o.jsxs(d.default,{cols:{desktop:3,tablet:1,mobile:1},children:[o.jsx(t.default,{label:"Background colors",demoType:"background",colorList:u,getComplementaryColor:l}),o.jsx(t.default,{label:"Accent colors",demoType:"background",colorList:r,getComplementaryColor:l}),o.jsx(t.default,{label:"Emotion colors",demoType:"background",colorList:i,getComplementaryColor:l})]})]})};exports.default=b;
+//# sourceMappingURL=BoxWithBackgroundColor.cjs.map

package/dist/components/Box/demo/BoxWithBackgroundColor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBackgroundColor.cjs","sources":["../../../../src/components/Box/demo/BoxWithBackgroundColor.tsx"],"sourcesContent":["import { accentColors, emotionColors } from '@alma-oss/spirit-design-tokens';\nimport React from 'react';\nimport { BackgroundColors, TextColors } from '../../../constants';\nimport { getAccentBackgroundColors, getEmotionBackgroundColors, getNeutralBackgroundColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport BoxColorDemoFactory, { type BoxTextColorsType } from './BoxColorDemoFactory';\nimport { collectDefinedColorValues, getComplementaryColor } from './complementaryColorHelper';\n\nconst accentColorsObject = getAccentBackgroundColors();\nconst emotionColorsObject = getEmotionBackgroundColors();\nconst neutralColorsObject = getNeutralBackgroundColors();\n\nconst getComplementaryTextColor = (backgroundColor: string): BoxTextColorsType =>\n  getComplementaryColor({\n    sourceColor: backgroundColor,\n    groups: [...Object.values(accentColors), ...Object.values(emotionColors)],\n    fromPrefix: 'background',\n    toPrefix: 'content',\n    fallback: TextColors.PRIMARY,\n  }) as BoxTextColorsType;\n\nconst BoxWithBackgroundColor = () => {\n  const accentBackgroundColors = collectDefinedColorValues(accentColorsObject);\n  const neutralBackgroundColors = collectDefinedColorValues(neutralColorsObject);\n  const backgroundColors = [...Object.values(BackgroundColors), ...neutralBackgroundColors];\n  const emotionBackgroundColors = collectDefinedColorValues(emotionColorsObject);\n\n  return (\n    <>\n      <p>For demo purposes, the boxes have custom padding.</p>\n      <Grid cols={{ desktop: 3, tablet: 1, mobile: 1 }}>\n        <BoxColorDemoFactory\n          label=\"Background colors\"\n          demoType=\"background\"\n          colorList={backgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Accent colors\"\n          demoType=\"background\"\n          colorList={accentBackgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Emotion colors\"\n          demoType=\"background\"\n          colorList={emotionBackgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n      </Grid>\n    </>\n  );\n};\n\nexport default BoxWithBackgroundColor;\n"],"names":["accentColorsObject","getAccentBackgroundColors","emotionColorsObject","getEmotionBackgroundColors","neutralColorsObject","getNeutralBackgroundColors","getComplementaryTextColor","backgroundColor","getComplementaryColor","accentColors","emotionColors","TextColors","BoxWithBackgroundColor","accentBackgroundColors","collectDefinedColorValues","neutralBackgroundColors","backgroundColors","BackgroundColors","emotionBackgroundColors","jsxs","Fragment","jsx","Grid","BoxColorDemoFactory"],"mappings":"wZAQMA,EAAqBC,EAAAA,0BAAA,EACrBC,EAAsBC,EAAAA,2BAAA,EACtBC,EAAsBC,EAAAA,2BAAA,EAEtBC,EAA6BC,GACjCC,wBAAsB,CACpB,YAAaD,EACb,OAAQ,CAAC,GAAG,OAAO,OAAOE,EAAAA,YAAY,EAAG,GAAG,OAAO,OAAOC,EAAAA,aAAa,CAAC,EACxE,WAAY,aACZ,SAAU,UACV,SAAUC,EAAAA,WAAW,OACvB,CAAC,EAEGC,EAAyB,IAAM,CACnC,MAAMC,EAAyBC,EAAAA,0BAA0Bd,CAAkB,EACrEe,EAA0BD,EAAAA,0BAA0BV,CAAmB,EACvEY,EAAmB,CAAC,GAAG,OAAO,OAAOC,EAAAA,gBAAgB,EAAG,GAAGF,CAAuB,EAClFG,EAA0BJ,EAAAA,0BAA0BZ,CAAmB,EAE7E,OACEiB,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,mDAAA,CAAiD,EACpDF,EAAAA,KAACG,EAAAA,QAAA,CAAK,KAAM,CAAE,QAAS,EAAG,OAAQ,EAAG,OAAQ,CAAA,EAC3C,SAAA,CAAAD,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,oBACN,SAAS,aACT,UAAWP,EACX,sBAAuBV,CAAA,CAAA,EAEzBe,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,gBACN,SAAS,aACT,UAAWV,EACX,sBAAuBP,CAAA,CAAA,EAEzBe,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,iBACN,SAAS,aACT,UAAWL,EACX,sBAAuBZ,CAAA,CAAA,CACzB,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/Box/demo/BoxWithBackgroundColor.js

@@ -0,0 +1,52 @@
+import { jsxs as c, Fragment as m, jsx as o } from "react/jsx-runtime";
+import { accentColors as u, emotionColors as C } from "@alma-oss/spirit-design-tokens";
+import { BackgroundColors as d, TextColors as i } from "../../../constants/dictionaries.js";
+import { getNeutralBackgroundColors as g, getAccentBackgroundColors as p, getEmotionBackgroundColors as b } from "../../../utils/colorObjectGenerators.js";
+import k from "../../Grid/Grid.js";
+import e from "./BoxColorDemoFactory.js";
+import { collectDefinedColorValues as t, getComplementaryColor as f } from "./complementaryColorHelper.js";
+const B = p(), x = b(), y = g(), l = (r) => f({
+  sourceColor: r,
+  groups: [...Object.values(u), ...Object.values(C)],
+  fromPrefix: "background",
+  toPrefix: "content",
+  fallback: i.PRIMARY
+}), L = () => {
+  const r = t(B), n = t(y), s = [...Object.values(d), ...n], a = t(x);
+  return /* @__PURE__ */ c(m, { children: [
+    /* @__PURE__ */ o("p", { children: "For demo purposes, the boxes have custom padding." }),
+    /* @__PURE__ */ c(k, { cols: { desktop: 3, tablet: 1, mobile: 1 }, children: [
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Background colors",
+          demoType: "background",
+          colorList: s,
+          getComplementaryColor: l
+        }
+      ),
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Accent colors",
+          demoType: "background",
+          colorList: r,
+          getComplementaryColor: l
+        }
+      ),
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Emotion colors",
+          demoType: "background",
+          colorList: a,
+          getComplementaryColor: l
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  L as default
+};
+//# sourceMappingURL=BoxWithBackgroundColor.js.map

package/dist/components/Box/demo/BoxWithBackgroundColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBackgroundColor.js","sources":["../../../../src/components/Box/demo/BoxWithBackgroundColor.tsx"],"sourcesContent":["import { accentColors, emotionColors } from '@alma-oss/spirit-design-tokens';\nimport React from 'react';\nimport { BackgroundColors, TextColors } from '../../../constants';\nimport { getAccentBackgroundColors, getEmotionBackgroundColors, getNeutralBackgroundColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport BoxColorDemoFactory, { type BoxTextColorsType } from './BoxColorDemoFactory';\nimport { collectDefinedColorValues, getComplementaryColor } from './complementaryColorHelper';\n\nconst accentColorsObject = getAccentBackgroundColors();\nconst emotionColorsObject = getEmotionBackgroundColors();\nconst neutralColorsObject = getNeutralBackgroundColors();\n\nconst getComplementaryTextColor = (backgroundColor: string): BoxTextColorsType =>\n  getComplementaryColor({\n    sourceColor: backgroundColor,\n    groups: [...Object.values(accentColors), ...Object.values(emotionColors)],\n    fromPrefix: 'background',\n    toPrefix: 'content',\n    fallback: TextColors.PRIMARY,\n  }) as BoxTextColorsType;\n\nconst BoxWithBackgroundColor = () => {\n  const accentBackgroundColors = collectDefinedColorValues(accentColorsObject);\n  const neutralBackgroundColors = collectDefinedColorValues(neutralColorsObject);\n  const backgroundColors = [...Object.values(BackgroundColors), ...neutralBackgroundColors];\n  const emotionBackgroundColors = collectDefinedColorValues(emotionColorsObject);\n\n  return (\n    <>\n      <p>For demo purposes, the boxes have custom padding.</p>\n      <Grid cols={{ desktop: 3, tablet: 1, mobile: 1 }}>\n        <BoxColorDemoFactory\n          label=\"Background colors\"\n          demoType=\"background\"\n          colorList={backgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Accent colors\"\n          demoType=\"background\"\n          colorList={accentBackgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Emotion colors\"\n          demoType=\"background\"\n          colorList={emotionBackgroundColors}\n          getComplementaryColor={getComplementaryTextColor}\n        />\n      </Grid>\n    </>\n  );\n};\n\nexport default BoxWithBackgroundColor;\n"],"names":["accentColorsObject","getAccentBackgroundColors","emotionColorsObject","getEmotionBackgroundColors","neutralColorsObject","getNeutralBackgroundColors","getComplementaryTextColor","backgroundColor","getComplementaryColor","accentColors","emotionColors","TextColors","BoxWithBackgroundColor","accentBackgroundColors","collectDefinedColorValues","neutralBackgroundColors","backgroundColors","BackgroundColors","emotionBackgroundColors","jsxs","Fragment","jsx","Grid","BoxColorDemoFactory"],"mappings":";;;;;;;AAQA,MAAMA,IAAqBC,EAAA,GACrBC,IAAsBC,EAAA,GACtBC,IAAsBC,EAAA,GAEtBC,IAA4B,CAACC,MACjCC,EAAsB;AAAA,EACpB,aAAaD;AAAA,EACb,QAAQ,CAAC,GAAG,OAAO,OAAOE,CAAY,GAAG,GAAG,OAAO,OAAOC,CAAa,CAAC;AAAA,EACxE,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAUC,EAAW;AACvB,CAAC,GAEGC,IAAyB,MAAM;AACnC,QAAMC,IAAyBC,EAA0Bd,CAAkB,GACrEe,IAA0BD,EAA0BV,CAAmB,GACvEY,IAAmB,CAAC,GAAG,OAAO,OAAOC,CAAgB,GAAG,GAAGF,CAAuB,GAClFG,IAA0BJ,EAA0BZ,CAAmB;AAE7E,SACE,gBAAAiB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,IACpD,gBAAAF,EAACG,GAAA,EAAK,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAA,GAC3C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWP;AAAA,UACX,uBAAuBV;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzB,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWV;AAAA,UACX,uBAAuBP;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzB,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWL;AAAA,UACX,uBAAuBZ;AAAA,QAAA;AAAA,MAAA;AAAA,IACzB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Box/demo/BoxWithBackgroundGradient.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Box.cjs"),d=()=>e.jsxs(e.Fragment,{children:[e.jsx("p",{children:"For demo purposes, the boxes have custom padding."}),e.jsx(r.default,{padding:"space-800",backgroundGradient:"primary",children:"Primary background gradient"}),e.jsx(r.default,{padding:"space-800",backgroundGradient:"secondary",children:"Secondary background gradient"}),e.jsx(r.default,{padding:"space-800",backgroundGradient:{mobile:"primary",tablet:"secondary"},children:"Responsive background gradient"})]});exports.default=d;
+//# sourceMappingURL=BoxWithBackgroundGradient.cjs.map

package/dist/components/Box/demo/BoxWithBackgroundGradient.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBackgroundGradient.cjs","sources":["../../../../src/components/Box/demo/BoxWithBackgroundGradient.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithBackgroundGradient = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Box padding=\"space-800\" backgroundGradient=\"primary\">\n      Primary background gradient\n    </Box>\n    <Box padding=\"space-800\" backgroundGradient=\"secondary\">\n      Secondary background gradient\n    </Box>\n    <Box padding=\"space-800\" backgroundGradient={{ mobile: 'primary', tablet: 'secondary' }}>\n      Responsive background gradient\n    </Box>\n  </>\n);\n\nexport default BoxWithBackgroundGradient;\n"],"names":["BoxWithBackgroundGradient","jsxs","Fragment","jsx","Box"],"mappings":"yKAGMA,EAA4B,IAChCC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,mDAAA,CAAiD,QACnDC,EAAAA,QAAA,CAAI,QAAQ,YAAY,mBAAmB,UAAU,SAAA,8BAEtD,QACCA,EAAAA,QAAA,CAAI,QAAQ,YAAY,mBAAmB,YAAY,SAAA,gCAExD,EACAD,EAAAA,IAACC,EAAAA,QAAA,CAAI,QAAQ,YAAY,mBAAoB,CAAE,OAAQ,UAAW,OAAQ,aAAe,SAAA,gCAAA,CAEzF,CAAA,CAAA,CACF"}

package/dist/components/Box/demo/BoxWithBackgroundGradient.js

@@ -0,0 +1,12 @@
+import { jsxs as d, Fragment as e, jsx as r } from "react/jsx-runtime";
+import a from "../Box.js";
+const o = () => /* @__PURE__ */ d(e, { children: [
+  /* @__PURE__ */ r("p", { children: "For demo purposes, the boxes have custom padding." }),
+  /* @__PURE__ */ r(a, { padding: "space-800", backgroundGradient: "primary", children: "Primary background gradient" }),
+  /* @__PURE__ */ r(a, { padding: "space-800", backgroundGradient: "secondary", children: "Secondary background gradient" }),
+  /* @__PURE__ */ r(a, { padding: "space-800", backgroundGradient: { mobile: "primary", tablet: "secondary" }, children: "Responsive background gradient" })
+] });
+export {
+  o as default
+};
+//# sourceMappingURL=BoxWithBackgroundGradient.js.map

package/dist/components/Box/demo/BoxWithBackgroundGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBackgroundGradient.js","sources":["../../../../src/components/Box/demo/BoxWithBackgroundGradient.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithBackgroundGradient = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Box padding=\"space-800\" backgroundGradient=\"primary\">\n      Primary background gradient\n    </Box>\n    <Box padding=\"space-800\" backgroundGradient=\"secondary\">\n      Secondary background gradient\n    </Box>\n    <Box padding=\"space-800\" backgroundGradient={{ mobile: 'primary', tablet: 'secondary' }}>\n      Responsive background gradient\n    </Box>\n  </>\n);\n\nexport default BoxWithBackgroundGradient;\n"],"names":["BoxWithBackgroundGradient","jsxs","Fragment","jsx","Box"],"mappings":";;AAGA,MAAMA,IAA4B,MAChC,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,oBACnDC,GAAA,EAAI,SAAQ,aAAY,oBAAmB,WAAU,UAAA,+BAEtD;AAAA,oBACCA,GAAA,EAAI,SAAQ,aAAY,oBAAmB,aAAY,UAAA,iCAExD;AAAA,EACA,gBAAAD,EAACC,GAAA,EAAI,SAAQ,aAAY,oBAAoB,EAAE,QAAQ,WAAW,QAAQ,eAAe,UAAA,iCAAA,CAEzF;AAAA,EAAA,CACF;"}

package/dist/components/Box/demo/BoxWithBorder.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../../../web-react/docs/DocsStack.cjs"),s=require("../../../utils/colorObjectGenerators.cjs"),o=require("../../Grid/Grid.cjs"),d=require("../Box.cjs"),i=s.getAccentBorderColors(),c=s.getEmotionBorderColors(),l=()=>e.jsxs(e.Fragment,{children:[e.jsx("p",{children:"For demo purposes, the boxes have custom padding."}),e.jsxs(o.default,{cols:{desktop:3,tablet:1,mobile:1},children:[e.jsx("div",{children:e.jsxs(r.default,{stackAlignment:"start",children:[e.jsx("h3",{children:"Border colors"}),e.jsx(d.default,{padding:"space-800",borderWidth:"100",children:"With solid border style"}),e.jsx(d.default,{padding:"space-800",borderWidth:"100",borderStyle:"dotted",children:"With dotted border style"}),e.jsx(d.default,{padding:"space-800",borderWidth:"100",borderStyle:"dashed",children:"With dashed border style"}),e.jsx(d.default,{padding:"space-800",borderWidth:"200",children:"With thicker border"})]})}),e.jsx("div",{children:e.jsxs(r.default,{stackAlignment:"start",children:[e.jsx("h3",{children:"Accent colors"}),Object.values(i).map(t=>e.jsxs(d.default,{padding:"space-800",borderColor:t,borderWidth:"100",children:["With ",t," border color"]},`accent-border-${t}`))]})}),e.jsx("div",{children:e.jsxs(r.default,{stackAlignment:"start",children:[e.jsx("h3",{children:"Emotion colors"}),Object.values(c).map(t=>e.jsxs(d.default,{padding:"space-800",borderColor:t,borderWidth:"100",children:["With ",t," border color"]},`emotion-border-${t}`))]})})]})]});exports.default=l;
+//# sourceMappingURL=BoxWithBorder.cjs.map

package/dist/components/Box/demo/BoxWithBorder.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBorder.cjs","sources":["../../../../src/components/Box/demo/BoxWithBorder.tsx"],"sourcesContent":["import React from 'react';\nimport DocsStack from '../../../../docs/DocsStack';\nimport { getAccentBorderColors, getEmotionBorderColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport Box from '../Box';\n\nconst accentColorsObject = getAccentBorderColors();\nconst emotionColorsObject = getEmotionBorderColors();\n\nconst BoxWithBorder = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Grid cols={{ desktop: 3, tablet: 1, mobile: 1 }}>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Border colors</h3>\n          <Box padding=\"space-800\" borderWidth=\"100\">\n            With solid border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"100\" borderStyle=\"dotted\">\n            With dotted border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"100\" borderStyle=\"dashed\">\n            With dashed border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"200\">\n            With thicker border\n          </Box>\n        </DocsStack>\n      </div>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Accent colors</h3>\n          {Object.values(accentColorsObject).map((borderColor) => (\n            <Box key={`accent-border-${borderColor}`} padding=\"space-800\" borderColor={borderColor} borderWidth=\"100\">\n              With {borderColor} border color\n            </Box>\n          ))}\n        </DocsStack>\n      </div>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Emotion colors</h3>\n          {Object.values(emotionColorsObject).map((borderColor) => (\n            <Box key={`emotion-border-${borderColor}`} padding=\"space-800\" borderColor={borderColor} borderWidth=\"100\">\n              With {borderColor} border color\n            </Box>\n          ))}\n        </DocsStack>\n      </div>\n    </Grid>\n  </>\n);\n\nexport default BoxWithBorder;\n"],"names":["accentColorsObject","getAccentBorderColors","emotionColorsObject","getEmotionBorderColors","BoxWithBorder","jsxs","Fragment","jsx","Grid","DocsStack","Box","borderColor"],"mappings":"mTAMMA,EAAqBC,EAAAA,sBAAA,EACrBC,EAAsBC,EAAAA,uBAAA,EAEtBC,EAAgB,IACpBC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,mDAAA,CAAiD,EACpDF,EAAAA,KAACG,EAAAA,QAAA,CAAK,KAAM,CAAE,QAAS,EAAG,OAAQ,EAAG,OAAQ,CAAA,EAC3C,SAAA,CAAAD,MAAC,MAAA,CACC,SAAAF,EAAAA,KAACI,EAAAA,QAAA,CAAU,eAAe,QACxB,SAAA,CAAAF,EAAAA,IAAC,MAAG,SAAA,eAAA,CAAa,QAChBG,EAAAA,QAAA,CAAI,QAAQ,YAAY,YAAY,MAAM,SAAA,0BAE3C,EACAH,EAAAA,IAACG,EAAAA,SAAI,QAAQ,YAAY,YAAY,MAAM,YAAY,SAAS,SAAA,0BAAA,CAEhE,EACAH,EAAAA,IAACG,EAAAA,SAAI,QAAQ,YAAY,YAAY,MAAM,YAAY,SAAS,SAAA,0BAAA,CAEhE,QACCA,EAAAA,QAAA,CAAI,QAAQ,YAAY,YAAY,MAAM,SAAA,qBAAA,CAE3C,CAAA,CAAA,CACF,CAAA,CACF,EACAH,MAAC,MAAA,CACC,SAAAF,EAAAA,KAACI,EAAAA,QAAA,CAAU,eAAe,QACxB,SAAA,CAAAF,EAAAA,IAAC,MAAG,SAAA,eAAA,CAAa,EAChB,OAAO,OAAOP,CAAkB,EAAE,IAAKW,GACtCN,EAAAA,KAACK,EAAAA,QAAA,CAAyC,QAAQ,YAAY,YAAAC,EAA0B,YAAY,MAAM,SAAA,CAAA,QAClGA,EAAY,eAAA,CAAA,EADV,iBAAiBA,CAAW,EAEtC,CACD,CAAA,CAAA,CACH,CAAA,CACF,EACAJ,MAAC,MAAA,CACC,SAAAF,EAAAA,KAACI,EAAAA,QAAA,CAAU,eAAe,QACxB,SAAA,CAAAF,EAAAA,IAAC,MAAG,SAAA,gBAAA,CAAc,EACjB,OAAO,OAAOL,CAAmB,EAAE,IAAKS,GACvCN,EAAAA,KAACK,EAAAA,QAAA,CAA0C,QAAQ,YAAY,YAAAC,EAA0B,YAAY,MAAM,SAAA,CAAA,QACnGA,EAAY,eAAA,CAAA,EADV,kBAAkBA,CAAW,EAEvC,CACD,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAAA,CACF"}

package/dist/components/Box/demo/BoxWithBorder.js

@@ -0,0 +1,37 @@
+import { jsxs as d, Fragment as i, jsx as e } from "react/jsx-runtime";
+import o from "../../../web-react/docs/DocsStack.js";
+import { getAccentBorderColors as c, getEmotionBorderColors as n } from "../../../utils/colorObjectGenerators.js";
+import s from "../../Grid/Grid.js";
+import t from "../Box.js";
+const h = c(), l = n(), W = () => /* @__PURE__ */ d(i, { children: [
+  /* @__PURE__ */ e("p", { children: "For demo purposes, the boxes have custom padding." }),
+  /* @__PURE__ */ d(s, { cols: { desktop: 3, tablet: 1, mobile: 1 }, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d(o, { stackAlignment: "start", children: [
+      /* @__PURE__ */ e("h3", { children: "Border colors" }),
+      /* @__PURE__ */ e(t, { padding: "space-800", borderWidth: "100", children: "With solid border style" }),
+      /* @__PURE__ */ e(t, { padding: "space-800", borderWidth: "100", borderStyle: "dotted", children: "With dotted border style" }),
+      /* @__PURE__ */ e(t, { padding: "space-800", borderWidth: "100", borderStyle: "dashed", children: "With dashed border style" }),
+      /* @__PURE__ */ e(t, { padding: "space-800", borderWidth: "200", children: "With thicker border" })
+    ] }) }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d(o, { stackAlignment: "start", children: [
+      /* @__PURE__ */ e("h3", { children: "Accent colors" }),
+      Object.values(h).map((r) => /* @__PURE__ */ d(t, { padding: "space-800", borderColor: r, borderWidth: "100", children: [
+        "With ",
+        r,
+        " border color"
+      ] }, `accent-border-${r}`))
+    ] }) }),
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d(o, { stackAlignment: "start", children: [
+      /* @__PURE__ */ e("h3", { children: "Emotion colors" }),
+      Object.values(l).map((r) => /* @__PURE__ */ d(t, { padding: "space-800", borderColor: r, borderWidth: "100", children: [
+        "With ",
+        r,
+        " border color"
+      ] }, `emotion-border-${r}`))
+    ] }) })
+  ] })
+] });
+export {
+  W as default
+};
+//# sourceMappingURL=BoxWithBorder.js.map

package/dist/components/Box/demo/BoxWithBorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBorder.js","sources":["../../../../src/components/Box/demo/BoxWithBorder.tsx"],"sourcesContent":["import React from 'react';\nimport DocsStack from '../../../../docs/DocsStack';\nimport { getAccentBorderColors, getEmotionBorderColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport Box from '../Box';\n\nconst accentColorsObject = getAccentBorderColors();\nconst emotionColorsObject = getEmotionBorderColors();\n\nconst BoxWithBorder = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Grid cols={{ desktop: 3, tablet: 1, mobile: 1 }}>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Border colors</h3>\n          <Box padding=\"space-800\" borderWidth=\"100\">\n            With solid border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"100\" borderStyle=\"dotted\">\n            With dotted border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"100\" borderStyle=\"dashed\">\n            With dashed border style\n          </Box>\n          <Box padding=\"space-800\" borderWidth=\"200\">\n            With thicker border\n          </Box>\n        </DocsStack>\n      </div>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Accent colors</h3>\n          {Object.values(accentColorsObject).map((borderColor) => (\n            <Box key={`accent-border-${borderColor}`} padding=\"space-800\" borderColor={borderColor} borderWidth=\"100\">\n              With {borderColor} border color\n            </Box>\n          ))}\n        </DocsStack>\n      </div>\n      <div>\n        <DocsStack stackAlignment=\"start\">\n          <h3>Emotion colors</h3>\n          {Object.values(emotionColorsObject).map((borderColor) => (\n            <Box key={`emotion-border-${borderColor}`} padding=\"space-800\" borderColor={borderColor} borderWidth=\"100\">\n              With {borderColor} border color\n            </Box>\n          ))}\n        </DocsStack>\n      </div>\n    </Grid>\n  </>\n);\n\nexport default BoxWithBorder;\n"],"names":["accentColorsObject","getAccentBorderColors","emotionColorsObject","getEmotionBorderColors","BoxWithBorder","jsxs","Fragment","jsx","Grid","DocsStack","Box","borderColor"],"mappings":";;;;;AAMA,MAAMA,IAAqBC,EAAA,GACrBC,IAAsBC,EAAA,GAEtBC,IAAgB,MACpB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,EACpD,gBAAAF,EAACG,GAAA,EAAK,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAA,GAC3C,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EACC,UAAA,gBAAAF,EAACI,GAAA,EAAU,gBAAe,SACxB,UAAA;AAAA,MAAA,gBAAAF,EAAC,QAAG,UAAA,gBAAA,CAAa;AAAA,wBAChBG,GAAA,EAAI,SAAQ,aAAY,aAAY,OAAM,UAAA,2BAE3C;AAAA,MACA,gBAAAH,EAACG,KAAI,SAAQ,aAAY,aAAY,OAAM,aAAY,UAAS,UAAA,2BAAA,CAEhE;AAAA,MACA,gBAAAH,EAACG,KAAI,SAAQ,aAAY,aAAY,OAAM,aAAY,UAAS,UAAA,2BAAA,CAEhE;AAAA,wBACCA,GAAA,EAAI,SAAQ,aAAY,aAAY,OAAM,UAAA,sBAAA,CAE3C;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAAH,EAAC,OAAA,EACC,UAAA,gBAAAF,EAACI,GAAA,EAAU,gBAAe,SACxB,UAAA;AAAA,MAAA,gBAAAF,EAAC,QAAG,UAAA,gBAAA,CAAa;AAAA,MAChB,OAAO,OAAOP,CAAkB,EAAE,IAAI,CAACW,MACtC,gBAAAN,EAACK,GAAA,EAAyC,SAAQ,aAAY,aAAAC,GAA0B,aAAY,OAAM,UAAA;AAAA,QAAA;AAAA,QAClGA;AAAA,QAAY;AAAA,MAAA,EAAA,GADV,iBAAiBA,CAAW,EAEtC,CACD;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAJ,EAAC,OAAA,EACC,UAAA,gBAAAF,EAACI,GAAA,EAAU,gBAAe,SACxB,UAAA;AAAA,MAAA,gBAAAF,EAAC,QAAG,UAAA,iBAAA,CAAc;AAAA,MACjB,OAAO,OAAOL,CAAmB,EAAE,IAAI,CAACS,MACvC,gBAAAN,EAACK,GAAA,EAA0C,SAAQ,aAAY,aAAAC,GAA0B,aAAY,OAAM,UAAA;AAAA,QAAA;AAAA,QACnGA;AAAA,QAAY;AAAA,MAAA,EAAA,GADV,kBAAkBA,CAAW,EAEvC,CACD;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAAA,EAAA,CACF;"}

package/dist/components/Box/demo/BoxWithCustomPadding.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../Box.cjs"),t=()=>e.jsxs(e.Fragment,{children:[e.jsx("p",{children:"For demo purposes, the boxes are bordered."}),e.jsx(d.default,{padding:"space-800",borderWidth:"100",children:"With custom padding"}),e.jsx(d.default,{paddingX:"space-800",paddingY:"space-400",borderWidth:"100",children:"With custom vertical and horizontal padding"}),e.jsx(d.default,{paddingTop:"space-200",paddingBottom:"space-800",paddingLeft:"space-600",paddingRight:"space-1200",borderWidth:"100",children:"With custom padding for each direction"}),e.jsx(d.default,{paddingX:{mobile:"space-400",tablet:"space-800",desktop:"space-1200"},paddingY:{mobile:"space-200",tablet:"space-400",desktop:"space-600"},borderWidth:"100",children:"With responsive padding"})]});exports.default=t;
+//# sourceMappingURL=BoxWithCustomPadding.cjs.map

package/dist/components/Box/demo/BoxWithCustomPadding.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithCustomPadding.cjs","sources":["../../../../src/components/Box/demo/BoxWithCustomPadding.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithCustomPadding = () => (\n  <>\n    <p>For demo purposes, the boxes are bordered.</p>\n    <Box padding=\"space-800\" borderWidth=\"100\">\n      With custom padding\n    </Box>\n    <Box paddingX=\"space-800\" paddingY=\"space-400\" borderWidth=\"100\">\n      With custom vertical and horizontal padding\n    </Box>\n    <Box\n      paddingTop=\"space-200\"\n      paddingBottom=\"space-800\"\n      paddingLeft=\"space-600\"\n      paddingRight=\"space-1200\"\n      borderWidth=\"100\"\n    >\n      With custom padding for each direction\n    </Box>\n    <Box\n      paddingX={{ mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' }}\n      paddingY={{ mobile: 'space-200', tablet: 'space-400', desktop: 'space-600' }}\n      borderWidth=\"100\"\n    >\n      With responsive padding\n    </Box>\n  </>\n);\n\nexport default BoxWithCustomPadding;\n"],"names":["BoxWithCustomPadding","jsxs","Fragment","jsx","Box"],"mappings":"yKAGMA,EAAuB,IAC3BC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,4CAAA,CAA0C,QAC5CC,EAAAA,QAAA,CAAI,QAAQ,YAAY,YAAY,MAAM,SAAA,sBAE3C,EACAD,EAAAA,IAACC,EAAAA,SAAI,SAAS,YAAY,SAAS,YAAY,YAAY,MAAM,SAAA,6CAAA,CAEjE,EACAD,EAAAA,IAACC,EAAAA,QAAA,CACC,WAAW,YACX,cAAc,YACd,YAAY,YACZ,aAAa,aACb,YAAY,MACb,SAAA,wCAAA,CAAA,EAGDD,EAAAA,IAACC,EAAAA,QAAA,CACC,SAAU,CAAE,OAAQ,YAAa,OAAQ,YAAa,QAAS,YAAA,EAC/D,SAAU,CAAE,OAAQ,YAAa,OAAQ,YAAa,QAAS,WAAA,EAC/D,YAAY,MACb,SAAA,yBAAA,CAAA,CAED,CAAA,CACF"}

package/dist/components/Box/demo/BoxWithCustomPadding.js

@@ -0,0 +1,31 @@
+import { jsxs as i, Fragment as a, jsx as d } from "react/jsx-runtime";
+import e from "../Box.js";
+const o = () => /* @__PURE__ */ i(a, { children: [
+  /* @__PURE__ */ d("p", { children: "For demo purposes, the boxes are bordered." }),
+  /* @__PURE__ */ d(e, { padding: "space-800", borderWidth: "100", children: "With custom padding" }),
+  /* @__PURE__ */ d(e, { paddingX: "space-800", paddingY: "space-400", borderWidth: "100", children: "With custom vertical and horizontal padding" }),
+  /* @__PURE__ */ d(
+    e,
+    {
+      paddingTop: "space-200",
+      paddingBottom: "space-800",
+      paddingLeft: "space-600",
+      paddingRight: "space-1200",
+      borderWidth: "100",
+      children: "With custom padding for each direction"
+    }
+  ),
+  /* @__PURE__ */ d(
+    e,
+    {
+      paddingX: { mobile: "space-400", tablet: "space-800", desktop: "space-1200" },
+      paddingY: { mobile: "space-200", tablet: "space-400", desktop: "space-600" },
+      borderWidth: "100",
+      children: "With responsive padding"
+    }
+  )
+] });
+export {
+  o as default
+};
+//# sourceMappingURL=BoxWithCustomPadding.js.map

package/dist/components/Box/demo/BoxWithCustomPadding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithCustomPadding.js","sources":["../../../../src/components/Box/demo/BoxWithCustomPadding.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithCustomPadding = () => (\n  <>\n    <p>For demo purposes, the boxes are bordered.</p>\n    <Box padding=\"space-800\" borderWidth=\"100\">\n      With custom padding\n    </Box>\n    <Box paddingX=\"space-800\" paddingY=\"space-400\" borderWidth=\"100\">\n      With custom vertical and horizontal padding\n    </Box>\n    <Box\n      paddingTop=\"space-200\"\n      paddingBottom=\"space-800\"\n      paddingLeft=\"space-600\"\n      paddingRight=\"space-1200\"\n      borderWidth=\"100\"\n    >\n      With custom padding for each direction\n    </Box>\n    <Box\n      paddingX={{ mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' }}\n      paddingY={{ mobile: 'space-200', tablet: 'space-400', desktop: 'space-600' }}\n      borderWidth=\"100\"\n    >\n      With responsive padding\n    </Box>\n  </>\n);\n\nexport default BoxWithCustomPadding;\n"],"names":["BoxWithCustomPadding","jsxs","Fragment","jsx","Box"],"mappings":";;AAGA,MAAMA,IAAuB,MAC3B,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,6CAAA,CAA0C;AAAA,oBAC5CC,GAAA,EAAI,SAAQ,aAAY,aAAY,OAAM,UAAA,uBAE3C;AAAA,EACA,gBAAAD,EAACC,KAAI,UAAS,aAAY,UAAS,aAAY,aAAY,OAAM,UAAA,8CAAA,CAEjE;AAAA,EACA,gBAAAD;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,eAAc;AAAA,MACd,aAAY;AAAA,MACZ,cAAa;AAAA,MACb,aAAY;AAAA,MACb,UAAA;AAAA,IAAA;AAAA,EAAA;AAAA,EAGD,gBAAAD;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU,EAAE,QAAQ,aAAa,QAAQ,aAAa,SAAS,aAAA;AAAA,MAC/D,UAAU,EAAE,QAAQ,aAAa,QAAQ,aAAa,SAAS,YAAA;AAAA,MAC/D,aAAY;AAAA,MACb,UAAA;AAAA,IAAA;AAAA,EAAA;AAED,EAAA,CACF;"}

package/dist/components/Box/demo/BoxWithRadius.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../Box.cjs"),r=()=>e.jsxs(e.Fragment,{children:[e.jsx("p",{children:"For demo purposes, the boxes have custom padding."}),e.jsx(d.default,{padding:"space-800",backgroundColor:"secondary",children:"Without radius"}),e.jsx(d.default,{padding:"space-800",backgroundColor:"secondary",borderRadius:"300",children:"With custom radius"}),e.jsx(d.default,{padding:"space-800",backgroundColor:"secondary",borderRadius:"full",children:"With full radius"}),e.jsx(d.default,{padding:"space-800",backgroundColor:"secondary",borderRadius:{mobile:"100",tablet:"200",desktop:"400"},children:"With responsive radius"})]});exports.default=r;
+//# sourceMappingURL=BoxWithRadius.cjs.map

package/dist/components/Box/demo/BoxWithRadius.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithRadius.cjs","sources":["../../../../src/components/Box/demo/BoxWithRadius.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithRadius = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\">\n      Without radius\n    </Box>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\" borderRadius=\"300\">\n      With custom radius\n    </Box>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\" borderRadius=\"full\">\n      With full radius\n    </Box>\n    <Box\n      padding=\"space-800\"\n      backgroundColor=\"secondary\"\n      borderRadius={{ mobile: '100', tablet: '200', desktop: '400' }}\n    >\n      With responsive radius\n    </Box>\n  </>\n);\n\nexport default BoxWithRadius;\n"],"names":["BoxWithRadius","jsxs","Fragment","jsx","Box"],"mappings":"yKAGMA,EAAgB,IACpBC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,mDAAA,CAAiD,QACnDC,EAAAA,QAAA,CAAI,QAAQ,YAAY,gBAAgB,YAAY,SAAA,iBAErD,EACAD,EAAAA,IAACC,EAAAA,SAAI,QAAQ,YAAY,gBAAgB,YAAY,aAAa,MAAM,SAAA,oBAAA,CAExE,EACAD,EAAAA,IAACC,EAAAA,SAAI,QAAQ,YAAY,gBAAgB,YAAY,aAAa,OAAO,SAAA,kBAAA,CAEzE,EACAD,EAAAA,IAACC,EAAAA,QAAA,CACC,QAAQ,YACR,gBAAgB,YAChB,aAAc,CAAE,OAAQ,MAAO,OAAQ,MAAO,QAAS,KAAA,EACxD,SAAA,wBAAA,CAAA,CAED,CAAA,CACF"}

package/dist/components/Box/demo/BoxWithRadius.js

@@ -0,0 +1,21 @@
+import { jsxs as o, Fragment as e, jsx as d } from "react/jsx-runtime";
+import r from "../Box.js";
+const i = () => /* @__PURE__ */ o(e, { children: [
+  /* @__PURE__ */ d("p", { children: "For demo purposes, the boxes have custom padding." }),
+  /* @__PURE__ */ d(r, { padding: "space-800", backgroundColor: "secondary", children: "Without radius" }),
+  /* @__PURE__ */ d(r, { padding: "space-800", backgroundColor: "secondary", borderRadius: "300", children: "With custom radius" }),
+  /* @__PURE__ */ d(r, { padding: "space-800", backgroundColor: "secondary", borderRadius: "full", children: "With full radius" }),
+  /* @__PURE__ */ d(
+    r,
+    {
+      padding: "space-800",
+      backgroundColor: "secondary",
+      borderRadius: { mobile: "100", tablet: "200", desktop: "400" },
+      children: "With responsive radius"
+    }
+  )
+] });
+export {
+  i as default
+};
+//# sourceMappingURL=BoxWithRadius.js.map

package/dist/components/Box/demo/BoxWithRadius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithRadius.js","sources":["../../../../src/components/Box/demo/BoxWithRadius.tsx"],"sourcesContent":["import React from 'react';\nimport Box from '../Box';\n\nconst BoxWithRadius = () => (\n  <>\n    <p>For demo purposes, the boxes have custom padding.</p>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\">\n      Without radius\n    </Box>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\" borderRadius=\"300\">\n      With custom radius\n    </Box>\n    <Box padding=\"space-800\" backgroundColor=\"secondary\" borderRadius=\"full\">\n      With full radius\n    </Box>\n    <Box\n      padding=\"space-800\"\n      backgroundColor=\"secondary\"\n      borderRadius={{ mobile: '100', tablet: '200', desktop: '400' }}\n    >\n      With responsive radius\n    </Box>\n  </>\n);\n\nexport default BoxWithRadius;\n"],"names":["BoxWithRadius","jsxs","Fragment","jsx","Box"],"mappings":";;AAGA,MAAMA,IAAgB,MACpB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,oBACnDC,GAAA,EAAI,SAAQ,aAAY,iBAAgB,aAAY,UAAA,kBAErD;AAAA,EACA,gBAAAD,EAACC,KAAI,SAAQ,aAAY,iBAAgB,aAAY,cAAa,OAAM,UAAA,qBAAA,CAExE;AAAA,EACA,gBAAAD,EAACC,KAAI,SAAQ,aAAY,iBAAgB,aAAY,cAAa,QAAO,UAAA,mBAAA,CAEzE;AAAA,EACA,gBAAAD;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAgB;AAAA,MAChB,cAAc,EAAE,QAAQ,OAAO,QAAQ,OAAO,SAAS,MAAA;AAAA,MACxD,UAAA;AAAA,IAAA;AAAA,EAAA;AAED,EAAA,CACF;"}

package/dist/components/Box/demo/BoxWithTextColor.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("@alma-oss/spirit-design-tokens"),n=require("../../../constants/dictionaries.cjs"),s=require("../../../utils/colorObjectGenerators.cjs"),C=require("../../Grid/Grid.cjs"),r=require("./BoxColorDemoFactory.cjs"),o=require("./complementaryColorHelper.cjs"),m=s.getAccentTextColors(),x=s.getEmotionTextColors(),d=s.getNeutralTextColors(),l=t=>o.getComplementaryColor({sourceColor:t,groups:[...Object.values(c.accentColors),...Object.values(c.emotionColors)],fromPrefix:"content",toPrefix:"background",fallback:n.BackgroundColors.SECONDARY}),p=()=>{const t=o.collectDefinedColorValues(m),a=o.collectDefinedColorValues(x),i=o.collectDefinedColorValues(d),u=[...Object.values(n.TextColors),...i];return e.jsxs(e.Fragment,{children:[e.jsx("p",{children:"For demo purposes, the boxes have custom padding."}),e.jsxs(C.default,{cols:{mobile:1,tablet:1,desktop:3},children:[e.jsx(r.default,{label:"Text colors",demoType:"text",colorList:u,getComplementaryColor:l}),e.jsx(r.default,{label:"Accent text colors",demoType:"text",colorList:t,getComplementaryColor:l}),e.jsx(r.default,{label:"Emotion text colors",demoType:"text",colorList:a,getComplementaryColor:l})]})]})};exports.default=p;
+//# sourceMappingURL=BoxWithTextColor.cjs.map

package/dist/components/Box/demo/BoxWithTextColor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithTextColor.cjs","sources":["../../../../src/components/Box/demo/BoxWithTextColor.tsx"],"sourcesContent":["import { accentColors, emotionColors } from '@alma-oss/spirit-design-tokens';\nimport React from 'react';\nimport { BackgroundColors, TextColors } from '../../../constants';\nimport { type BoxBackgroundColorsType } from '../../../types';\nimport { getAccentTextColors, getEmotionTextColors, getNeutralTextColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport BoxColorDemoFactory from './BoxColorDemoFactory';\nimport { collectDefinedColorValues, getComplementaryColor } from './complementaryColorHelper';\n\nconst accentColorsObject = getAccentTextColors();\nconst emotionColorsObject = getEmotionTextColors();\nconst neutralColorsObject = getNeutralTextColors();\n\nconst getComplementaryBackgroundColor = (textColor: string): BoxBackgroundColorsType =>\n  getComplementaryColor({\n    sourceColor: textColor,\n    groups: [...Object.values(accentColors), ...Object.values(emotionColors)],\n    fromPrefix: 'content',\n    toPrefix: 'background',\n    fallback: BackgroundColors.SECONDARY,\n  }) as BoxBackgroundColorsType;\n\nconst BoxWithTextColor = () => {\n  const accentTextColors = collectDefinedColorValues(accentColorsObject);\n  const emotionTextColors = collectDefinedColorValues(emotionColorsObject);\n  const neutralTextColors = collectDefinedColorValues(neutralColorsObject);\n  const textColors = [...Object.values(TextColors), ...neutralTextColors];\n\n  return (\n    <>\n      <p>For demo purposes, the boxes have custom padding.</p>\n      <Grid cols={{ mobile: 1, tablet: 1, desktop: 3 }}>\n        <BoxColorDemoFactory\n          label=\"Text colors\"\n          demoType=\"text\"\n          colorList={textColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Accent text colors\"\n          demoType=\"text\"\n          colorList={accentTextColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Emotion text colors\"\n          demoType=\"text\"\n          colorList={emotionTextColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n      </Grid>\n    </>\n  );\n};\n\nexport default BoxWithTextColor;\n"],"names":["accentColorsObject","getAccentTextColors","emotionColorsObject","getEmotionTextColors","neutralColorsObject","getNeutralTextColors","getComplementaryBackgroundColor","textColor","getComplementaryColor","accentColors","emotionColors","BackgroundColors","BoxWithTextColor","accentTextColors","collectDefinedColorValues","emotionTextColors","neutralTextColors","textColors","TextColors","jsxs","Fragment","jsx","Grid","BoxColorDemoFactory"],"mappings":"wZASMA,EAAqBC,EAAAA,oBAAA,EACrBC,EAAsBC,EAAAA,qBAAA,EACtBC,EAAsBC,EAAAA,qBAAA,EAEtBC,EAAmCC,GACvCC,wBAAsB,CACpB,YAAaD,EACb,OAAQ,CAAC,GAAG,OAAO,OAAOE,EAAAA,YAAY,EAAG,GAAG,OAAO,OAAOC,EAAAA,aAAa,CAAC,EACxE,WAAY,UACZ,SAAU,aACV,SAAUC,EAAAA,iBAAiB,SAC7B,CAAC,EAEGC,EAAmB,IAAM,CAC7B,MAAMC,EAAmBC,EAAAA,0BAA0Bd,CAAkB,EAC/De,EAAoBD,EAAAA,0BAA0BZ,CAAmB,EACjEc,EAAoBF,EAAAA,0BAA0BV,CAAmB,EACjEa,EAAa,CAAC,GAAG,OAAO,OAAOC,EAAAA,UAAU,EAAG,GAAGF,CAAiB,EAEtE,OACEG,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,KAAE,SAAA,mDAAA,CAAiD,EACpDF,EAAAA,KAACG,EAAAA,QAAA,CAAK,KAAM,CAAE,OAAQ,EAAG,OAAQ,EAAG,QAAS,CAAA,EAC3C,SAAA,CAAAD,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,cACN,SAAS,OACT,UAAWN,EACX,sBAAuBX,CAAA,CAAA,EAEzBe,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,qBACN,SAAS,OACT,UAAWV,EACX,sBAAuBP,CAAA,CAAA,EAEzBe,EAAAA,IAACE,EAAAA,QAAA,CACC,MAAM,sBACN,SAAS,OACT,UAAWR,EACX,sBAAuBT,CAAA,CAAA,CACzB,CAAA,CACF,CAAA,EACF,CAEJ"}

package/dist/components/Box/demo/BoxWithTextColor.js

@@ -0,0 +1,52 @@
+import { jsxs as s, Fragment as a, jsx as o } from "react/jsx-runtime";
+import { accentColors as C, emotionColors as i } from "@alma-oss/spirit-design-tokens";
+import { TextColors as x, BackgroundColors as p } from "../../../constants/dictionaries.js";
+import { getNeutralTextColors as u, getAccentTextColors as d, getEmotionTextColors as b } from "../../../utils/colorObjectGenerators.js";
+import g from "../../Grid/Grid.js";
+import e from "./BoxColorDemoFactory.js";
+import { collectDefinedColorValues as r, getComplementaryColor as f } from "./complementaryColorHelper.js";
+const T = d(), y = b(), j = u(), l = (t) => f({
+  sourceColor: t,
+  groups: [...Object.values(C), ...Object.values(i)],
+  fromPrefix: "content",
+  toPrefix: "background",
+  fallback: p.SECONDARY
+}), E = () => {
+  const t = r(T), c = r(y), m = r(j), n = [...Object.values(x), ...m];
+  return /* @__PURE__ */ s(a, { children: [
+    /* @__PURE__ */ o("p", { children: "For demo purposes, the boxes have custom padding." }),
+    /* @__PURE__ */ s(g, { cols: { mobile: 1, tablet: 1, desktop: 3 }, children: [
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Text colors",
+          demoType: "text",
+          colorList: n,
+          getComplementaryColor: l
+        }
+      ),
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Accent text colors",
+          demoType: "text",
+          colorList: t,
+          getComplementaryColor: l
+        }
+      ),
+      /* @__PURE__ */ o(
+        e,
+        {
+          label: "Emotion text colors",
+          demoType: "text",
+          colorList: c,
+          getComplementaryColor: l
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  E as default
+};
+//# sourceMappingURL=BoxWithTextColor.js.map

package/dist/components/Box/demo/BoxWithTextColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithTextColor.js","sources":["../../../../src/components/Box/demo/BoxWithTextColor.tsx"],"sourcesContent":["import { accentColors, emotionColors } from '@alma-oss/spirit-design-tokens';\nimport React from 'react';\nimport { BackgroundColors, TextColors } from '../../../constants';\nimport { type BoxBackgroundColorsType } from '../../../types';\nimport { getAccentTextColors, getEmotionTextColors, getNeutralTextColors } from '../../../utils';\nimport { Grid } from '../../Grid';\nimport BoxColorDemoFactory from './BoxColorDemoFactory';\nimport { collectDefinedColorValues, getComplementaryColor } from './complementaryColorHelper';\n\nconst accentColorsObject = getAccentTextColors();\nconst emotionColorsObject = getEmotionTextColors();\nconst neutralColorsObject = getNeutralTextColors();\n\nconst getComplementaryBackgroundColor = (textColor: string): BoxBackgroundColorsType =>\n  getComplementaryColor({\n    sourceColor: textColor,\n    groups: [...Object.values(accentColors), ...Object.values(emotionColors)],\n    fromPrefix: 'content',\n    toPrefix: 'background',\n    fallback: BackgroundColors.SECONDARY,\n  }) as BoxBackgroundColorsType;\n\nconst BoxWithTextColor = () => {\n  const accentTextColors = collectDefinedColorValues(accentColorsObject);\n  const emotionTextColors = collectDefinedColorValues(emotionColorsObject);\n  const neutralTextColors = collectDefinedColorValues(neutralColorsObject);\n  const textColors = [...Object.values(TextColors), ...neutralTextColors];\n\n  return (\n    <>\n      <p>For demo purposes, the boxes have custom padding.</p>\n      <Grid cols={{ mobile: 1, tablet: 1, desktop: 3 }}>\n        <BoxColorDemoFactory\n          label=\"Text colors\"\n          demoType=\"text\"\n          colorList={textColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Accent text colors\"\n          demoType=\"text\"\n          colorList={accentTextColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n        <BoxColorDemoFactory\n          label=\"Emotion text colors\"\n          demoType=\"text\"\n          colorList={emotionTextColors}\n          getComplementaryColor={getComplementaryBackgroundColor}\n        />\n      </Grid>\n    </>\n  );\n};\n\nexport default BoxWithTextColor;\n"],"names":["accentColorsObject","getAccentTextColors","emotionColorsObject","getEmotionTextColors","neutralColorsObject","getNeutralTextColors","getComplementaryBackgroundColor","textColor","getComplementaryColor","accentColors","emotionColors","BackgroundColors","BoxWithTextColor","accentTextColors","collectDefinedColorValues","emotionTextColors","neutralTextColors","textColors","TextColors","jsxs","Fragment","jsx","Grid","BoxColorDemoFactory"],"mappings":";;;;;;;AASA,MAAMA,IAAqBC,EAAA,GACrBC,IAAsBC,EAAA,GACtBC,IAAsBC,EAAA,GAEtBC,IAAkC,CAACC,MACvCC,EAAsB;AAAA,EACpB,aAAaD;AAAA,EACb,QAAQ,CAAC,GAAG,OAAO,OAAOE,CAAY,GAAG,GAAG,OAAO,OAAOC,CAAa,CAAC;AAAA,EACxE,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAUC,EAAiB;AAC7B,CAAC,GAEGC,IAAmB,MAAM;AAC7B,QAAMC,IAAmBC,EAA0Bd,CAAkB,GAC/De,IAAoBD,EAA0BZ,CAAmB,GACjEc,IAAoBF,EAA0BV,CAAmB,GACjEa,IAAa,CAAC,GAAG,OAAO,OAAOC,CAAU,GAAG,GAAGF,CAAiB;AAEtE,SACE,gBAAAG,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAE,UAAA,oDAAA,CAAiD;AAAA,IACpD,gBAAAF,EAACG,GAAA,EAAK,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA,GAC3C,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWN;AAAA,UACX,uBAAuBX;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzB,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWV;AAAA,UACX,uBAAuBP;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzB,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAS;AAAA,UACT,WAAWR;AAAA,UACX,uBAAuBT;AAAA,QAAA;AAAA,MAAA;AAAA,IACzB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Box/demo/complementaryColorHelper.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=(...e)=>e.flatMap(Object.values).filter(n=>typeof n=="string"),i=e=>e.charAt(0).toUpperCase()+e.slice(1),d=({sourceColor:e,groups:n,fromPrefix:l,toPrefix:f,fallback:a})=>{const s=["basic","subtle"],o=s.find(t=>e.endsWith(t));if(!o)return a;const c=s.find(t=>t!==o),r=`${l}${i(o)}`,u=`${f}${i(c)}`;return n.find(t=>t[r]===e)?.[u]??e.replace(o,c)};exports.collectDefinedColorValues=p;exports.getComplementaryColor=d;
+//# sourceMappingURL=complementaryColorHelper.cjs.map

package/dist/components/Box/demo/complementaryColorHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"complementaryColorHelper.cjs","sources":["../../../../src/components/Box/demo/complementaryColorHelper.ts"],"sourcesContent":["type ColorGroup = Record<string, string>;\n\nexport const collectDefinedColorValues = <T extends string>(...colorObjects: Record<string, T | undefined>[]): T[] =>\n  colorObjects.flatMap(Object.values).filter((value): value is T => typeof value === 'string');\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const getComplementaryColor = ({\n  sourceColor,\n  groups,\n  fromPrefix,\n  toPrefix,\n  fallback,\n}: {\n  sourceColor: string;\n  groups: ColorGroup[];\n  fromPrefix: string;\n  toPrefix: string;\n  fallback: string;\n}): string => {\n  const suffixes = ['basic', 'subtle'] as const;\n\n  const matchSuffix = suffixes.find((suffix) => sourceColor.endsWith(suffix));\n  if (!matchSuffix) {\n    return fallback;\n  }\n\n  const oppositeSuffix = suffixes.find((s) => s !== matchSuffix)!;\n  const fromKey = `${fromPrefix}${capitalize(matchSuffix)}`;\n  const toKey = `${toPrefix}${capitalize(oppositeSuffix)}`;\n\n  const found = groups.find((group) => group[fromKey] === sourceColor);\n\n  return found?.[toKey] ?? sourceColor.replace(matchSuffix, oppositeSuffix);\n};\n"],"names":["collectDefinedColorValues","colorObjects","value","capitalize","str","getComplementaryColor","sourceColor","groups","fromPrefix","toPrefix","fallback","suffixes","matchSuffix","suffix","oppositeSuffix","s","fromKey","toKey","group"],"mappings":"gFAEO,MAAMA,EAA4B,IAAsBC,IAC7DA,EAAa,QAAQ,OAAO,MAAM,EAAE,OAAQC,GAAsB,OAAOA,GAAU,QAAQ,EAEvFC,EAAcC,GAAgBA,EAAI,OAAO,CAAC,EAAE,cAAgBA,EAAI,MAAM,CAAC,EAEhEC,EAAwB,CAAC,CACpC,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,CACF,IAMc,CACZ,MAAMC,EAAW,CAAC,QAAS,QAAQ,EAE7BC,EAAcD,EAAS,KAAME,GAAWP,EAAY,SAASO,CAAM,CAAC,EAC1E,GAAI,CAACD,EACH,OAAOF,EAGT,MAAMI,EAAiBH,EAAS,KAAMI,GAAMA,IAAMH,CAAW,EACvDI,EAAU,GAAGR,CAAU,GAAGL,EAAWS,CAAW,CAAC,GACjDK,EAAQ,GAAGR,CAAQ,GAAGN,EAAWW,CAAc,CAAC,GAItD,OAFcP,EAAO,KAAMW,GAAUA,EAAMF,CAAO,IAAMV,CAAW,IAEpDW,CAAK,GAAKX,EAAY,QAAQM,EAAaE,CAAc,CAC1E"}

package/dist/components/Box/demo/complementaryColorHelper.js

@@ -0,0 +1,18 @@
+const d = (...t) => t.flatMap(Object.values).filter((s) => typeof s == "string"), f = (t) => t.charAt(0).toUpperCase() + t.slice(1), m = ({
+  sourceColor: t,
+  groups: s,
+  fromPrefix: i,
+  toPrefix: a,
+  fallback: l
+}) => {
+  const o = ["basic", "subtle"], n = o.find((e) => t.endsWith(e));
+  if (!n)
+    return l;
+  const c = o.find((e) => e !== n), p = `${i}${f(n)}`, r = `${a}${f(c)}`;
+  return s.find((e) => e[p] === t)?.[r] ?? t.replace(n, c);
+};
+export {
+  d as collectDefinedColorValues,
+  m as getComplementaryColor
+};
+//# sourceMappingURL=complementaryColorHelper.js.map

package/dist/components/Box/demo/complementaryColorHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"complementaryColorHelper.js","sources":["../../../../src/components/Box/demo/complementaryColorHelper.ts"],"sourcesContent":["type ColorGroup = Record<string, string>;\n\nexport const collectDefinedColorValues = <T extends string>(...colorObjects: Record<string, T | undefined>[]): T[] =>\n  colorObjects.flatMap(Object.values).filter((value): value is T => typeof value === 'string');\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const getComplementaryColor = ({\n  sourceColor,\n  groups,\n  fromPrefix,\n  toPrefix,\n  fallback,\n}: {\n  sourceColor: string;\n  groups: ColorGroup[];\n  fromPrefix: string;\n  toPrefix: string;\n  fallback: string;\n}): string => {\n  const suffixes = ['basic', 'subtle'] as const;\n\n  const matchSuffix = suffixes.find((suffix) => sourceColor.endsWith(suffix));\n  if (!matchSuffix) {\n    return fallback;\n  }\n\n  const oppositeSuffix = suffixes.find((s) => s !== matchSuffix)!;\n  const fromKey = `${fromPrefix}${capitalize(matchSuffix)}`;\n  const toKey = `${toPrefix}${capitalize(oppositeSuffix)}`;\n\n  const found = groups.find((group) => group[fromKey] === sourceColor);\n\n  return found?.[toKey] ?? sourceColor.replace(matchSuffix, oppositeSuffix);\n};\n"],"names":["collectDefinedColorValues","colorObjects","value","capitalize","str","getComplementaryColor","sourceColor","groups","fromPrefix","toPrefix","fallback","suffixes","matchSuffix","suffix","oppositeSuffix","s","fromKey","toKey","group"],"mappings":"AAEO,MAAMA,IAA4B,IAAsBC,MAC7DA,EAAa,QAAQ,OAAO,MAAM,EAAE,OAAO,CAACC,MAAsB,OAAOA,KAAU,QAAQ,GAEvFC,IAAa,CAACC,MAAgBA,EAAI,OAAO,CAAC,EAAE,gBAAgBA,EAAI,MAAM,CAAC,GAEhEC,IAAwB,CAAC;AAAA,EACpC,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAMc;AACZ,QAAMC,IAAW,CAAC,SAAS,QAAQ,GAE7BC,IAAcD,EAAS,KAAK,CAACE,MAAWP,EAAY,SAASO,CAAM,CAAC;AAC1E,MAAI,CAACD;AACH,WAAOF;AAGT,QAAMI,IAAiBH,EAAS,KAAK,CAACI,MAAMA,MAAMH,CAAW,GACvDI,IAAU,GAAGR,CAAU,GAAGL,EAAWS,CAAW,CAAC,IACjDK,IAAQ,GAAGR,CAAQ,GAAGN,EAAWW,CAAc,CAAC;AAItD,SAFcP,EAAO,KAAK,CAACW,MAAUA,EAAMF,CAAO,MAAMV,CAAW,IAEpDW,CAAK,KAAKX,EAAY,QAAQM,GAAaE,CAAc;AAC1E;"}

package/dist/components/Box/demo/preview.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../../../web-react/docs/DocsSection.cjs"),r=require("./BoxDefault.cjs"),l=require("./BoxWithAll.cjs"),o=require("./BoxWithBackgroundColor.cjs"),u=require("./BoxWithBackgroundGradient.cjs"),d=require("./BoxWithBorder.cjs"),s=require("./BoxWithCustomPadding.cjs"),n=require("./BoxWithRadius.cjs"),c=require("./BoxWithTextColor.cjs"),a=()=>e.jsxs(i.StrictMode,{children:[e.jsx(t.default,{title:"Default",children:e.jsx(r.default,{})}),e.jsx(t.default,{title:"With Custom Padding",children:e.jsx(s.default,{})}),e.jsx(t.default,{title:"With Border",children:e.jsx(d.default,{})}),e.jsx(t.default,{title:"With Background Color",children:e.jsx(o.default,{})}),e.jsx(t.default,{title:"With Background Gradient",children:e.jsx(u.default,{})}),e.jsx(t.default,{title:"With Radius",children:e.jsx(n.default,{})}),e.jsx(t.default,{title:"With Text Color",children:e.jsx(c.default,{})}),e.jsx(t.default,{title:"With All",children:e.jsx(l.default,{})})]});exports.Preview=a;
+//# sourceMappingURL=preview.cjs.map

package/dist/components/Box/demo/preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.cjs","sources":["../../../../src/components/Box/demo/preview.tsx"],"sourcesContent":["'use client';\n\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport BoxDefault from './BoxDefault';\nimport BoxWithAll from './BoxWithAll';\nimport BoxWithBackgroundColor from './BoxWithBackgroundColor';\nimport BoxWithBackgroundGradient from './BoxWithBackgroundGradient';\nimport BoxWithBorder from './BoxWithBorder';\nimport BoxWithCustomPadding from './BoxWithCustomPadding';\nimport BoxWithRadius from './BoxWithRadius';\nimport BoxWithTextColor from './BoxWithTextColor';\n\nexport const Preview = () => (\n  <StrictMode>\n    <DocsSection title=\"Default\">\n      <BoxDefault />\n    </DocsSection>\n    <DocsSection title=\"With Custom Padding\">\n      <BoxWithCustomPadding />\n    </DocsSection>\n    <DocsSection title=\"With Border\">\n      <BoxWithBorder />\n    </DocsSection>\n    <DocsSection title=\"With Background Color\">\n      <BoxWithBackgroundColor />\n    </DocsSection>\n    <DocsSection title=\"With Background Gradient\">\n      <BoxWithBackgroundGradient />\n    </DocsSection>\n    <DocsSection title=\"With Radius\">\n      <BoxWithRadius />\n    </DocsSection>\n    <DocsSection title=\"With Text Color\">\n      <BoxWithTextColor />\n    </DocsSection>\n    <DocsSection title=\"With All\">\n      <BoxWithAll />\n    </DocsSection>\n  </StrictMode>\n);\n"],"names":["Preview","jsxs","StrictMode","jsx","DocsSection","BoxDefault","BoxWithCustomPadding","BoxWithBorder","BoxWithBackgroundColor","BoxWithBackgroundGradient","BoxWithRadius","BoxWithTextColor","BoxWithAll"],"mappings":"2eAaaA,EAAU,IACrBC,EAAAA,KAACC,EAAAA,WAAA,CACC,SAAA,CAAAC,MAACC,EAAAA,QAAA,CAAY,MAAM,UACjB,SAAAD,MAACE,EAAAA,UAAW,EACd,QACCD,EAAAA,QAAA,CAAY,MAAM,sBACjB,SAAAD,MAACG,EAAAA,UAAqB,EACxB,QACCF,EAAAA,QAAA,CAAY,MAAM,cACjB,SAAAD,MAACI,EAAAA,UAAc,EACjB,QACCH,EAAAA,QAAA,CAAY,MAAM,wBACjB,SAAAD,MAACK,EAAAA,UAAuB,EAC1B,QACCJ,EAAAA,QAAA,CAAY,MAAM,2BACjB,SAAAD,MAACM,EAAAA,UAA0B,EAC7B,QACCL,EAAAA,QAAA,CAAY,MAAM,cACjB,SAAAD,MAACO,EAAAA,UAAc,EACjB,QACCN,EAAAA,QAAA,CAAY,MAAM,kBACjB,SAAAD,MAACQ,EAAAA,UAAiB,EACpB,QACCP,EAAAA,QAAA,CAAY,MAAM,WACjB,SAAAD,EAAAA,IAACS,YAAW,CAAA,CACd,CAAA,CAAA,CACF"}

package/dist/components/Box/demo/preview.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { StrictMode as r } from "react";
+import i from "../../../web-react/docs/DocsSection.js";
+import e from "./BoxDefault.js";
+import l from "./BoxWithAll.js";
+import d from "./BoxWithBackgroundColor.js";
+import m from "./BoxWithBackgroundGradient.js";
+import h from "./BoxWithBorder.js";
+import n from "./BoxWithCustomPadding.js";
+import c from "./BoxWithRadius.js";
+import B from "./BoxWithTextColor.js";
+const P = () => /* @__PURE__ */ o(r, { children: [
+  /* @__PURE__ */ t(i, { title: "Default", children: /* @__PURE__ */ t(e, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Custom Padding", children: /* @__PURE__ */ t(n, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Border", children: /* @__PURE__ */ t(h, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Background Color", children: /* @__PURE__ */ t(d, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Background Gradient", children: /* @__PURE__ */ t(m, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Radius", children: /* @__PURE__ */ t(c, {}) }),
+  /* @__PURE__ */ t(i, { title: "With Text Color", children: /* @__PURE__ */ t(B, {}) }),
+  /* @__PURE__ */ t(i, { title: "With All", children: /* @__PURE__ */ t(l, {}) })
+] });
+export {
+  P as Preview
+};
+//# sourceMappingURL=preview.js.map

package/dist/components/Box/demo/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sources":["../../../../src/components/Box/demo/preview.tsx"],"sourcesContent":["'use client';\n\nimport React, { StrictMode } from 'react';\nimport DocsSection from '../../../../docs/DocsSection';\nimport BoxDefault from './BoxDefault';\nimport BoxWithAll from './BoxWithAll';\nimport BoxWithBackgroundColor from './BoxWithBackgroundColor';\nimport BoxWithBackgroundGradient from './BoxWithBackgroundGradient';\nimport BoxWithBorder from './BoxWithBorder';\nimport BoxWithCustomPadding from './BoxWithCustomPadding';\nimport BoxWithRadius from './BoxWithRadius';\nimport BoxWithTextColor from './BoxWithTextColor';\n\nexport const Preview = () => (\n  <StrictMode>\n    <DocsSection title=\"Default\">\n      <BoxDefault />\n    </DocsSection>\n    <DocsSection title=\"With Custom Padding\">\n      <BoxWithCustomPadding />\n    </DocsSection>\n    <DocsSection title=\"With Border\">\n      <BoxWithBorder />\n    </DocsSection>\n    <DocsSection title=\"With Background Color\">\n      <BoxWithBackgroundColor />\n    </DocsSection>\n    <DocsSection title=\"With Background Gradient\">\n      <BoxWithBackgroundGradient />\n    </DocsSection>\n    <DocsSection title=\"With Radius\">\n      <BoxWithRadius />\n    </DocsSection>\n    <DocsSection title=\"With Text Color\">\n      <BoxWithTextColor />\n    </DocsSection>\n    <DocsSection title=\"With All\">\n      <BoxWithAll />\n    </DocsSection>\n  </StrictMode>\n);\n"],"names":["Preview","jsxs","StrictMode","jsx","DocsSection","BoxDefault","BoxWithCustomPadding","BoxWithBorder","BoxWithBackgroundColor","BoxWithBackgroundGradient","BoxWithRadius","BoxWithTextColor","BoxWithAll"],"mappings":";;;;;;;;;;;;AAaO,MAAMA,IAAU,MACrB,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAY,OAAM,WACjB,UAAA,gBAAAD,EAACE,KAAW,GACd;AAAA,oBACCD,GAAA,EAAY,OAAM,uBACjB,UAAA,gBAAAD,EAACG,KAAqB,GACxB;AAAA,oBACCF,GAAA,EAAY,OAAM,eACjB,UAAA,gBAAAD,EAACI,KAAc,GACjB;AAAA,oBACCH,GAAA,EAAY,OAAM,yBACjB,UAAA,gBAAAD,EAACK,KAAuB,GAC1B;AAAA,oBACCJ,GAAA,EAAY,OAAM,4BACjB,UAAA,gBAAAD,EAACM,KAA0B,GAC7B;AAAA,oBACCL,GAAA,EAAY,OAAM,eACjB,UAAA,gBAAAD,EAACO,KAAc,GACjB;AAAA,oBACCN,GAAA,EAAY,OAAM,mBACjB,UAAA,gBAAAD,EAACQ,KAAiB,GACpB;AAAA,oBACCP,GAAA,EAAY,OAAM,YACjB,UAAA,gBAAAD,EAACS,KAAW,EAAA,CACd;AAAA,EAAA,CACF;"}

package/dist/components/Box/preview/index.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../demo/preview.cjs");exports.default=e.Preview;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Box/preview/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Box/preview/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Preview as t } from "../demo/preview.js";
+export {
+  t as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Box/preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/Box/preview.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from '../../src/components/Box/preview/index'
+export default _default
+export {}

package/dist/components/Box.d.ts

@@ -1,2 +1,2 @@
-export * from './Box/index'
+export * from '../src/components/Box/index'
 export {}

package/dist/components/Breadcrumbs/Breadcrumbs.cjs

@@ -1,2 +1,2 @@
-"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),g=require("react"),f=require("../../hooks/styleProps.cjs"),B=require("../../utils/mergeStyleProps.cjs"),c=require("./BreadcrumbsItem.cjs"),S=require("./useBreadcrumbsStyleProps.cjs"),j={elementType:"nav",items:[]},n=u=>{const i={...j,...u},{children:a,elementType:o="nav",goBackTitle:l,items:t,...p}=i,{classProps:d,props:m}=S.useBreadcrumbsStyleProps({...p}),{styleProps:P,props:y}=f.useStyleProps(m),h=B.mergeStyleProps(o,{classProps:d.root,styleProps:P}),b=(e,s)=>e===s-1;return r.jsx(o,{...y,...h,"aria-label":"Breadcrumb",children:r.jsx("ol",{children:a||t?.map((e,s)=>r.jsxs(g.Fragment,{children:[s===t.length-2&&l&&r.jsx(c.default,{href:e.url||void 0,isGoBackOnly:!0,children:l}),r.jsx(c.default,{href:e.url||void 0,isCurrent:b(s,t?.length),children:e.title})]},`BreadcrumbsItem_${e.title}`))})})};n.spiritComponent="Breadcrumbs";exports.default=n;
+"use strict";"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),f=require("react"),g=require("../../hooks/styleProps.cjs"),S=require("../../utils/mergeStyleProps.cjs"),n=require("./BreadcrumbsItem.cjs"),j=require("./useBreadcrumbsStyleProps.cjs"),q={elementType:"nav",items:[]},o=u=>{const i={...q,...u},{children:a,elementType:p,goBackTitle:l,items:t,...d}=i,c=p,{classProps:m,props:P}=j.useBreadcrumbsStyleProps({...d}),{styleProps:y,props:h}=g.useStyleProps(P),b=S.mergeStyleProps(c,{classProps:m.root,styleProps:y}),B=(e,s)=>e===s-1;return r.jsx(c,{...h,...b,"aria-label":"Breadcrumb",children:r.jsx("ol",{children:a||t?.map((e,s)=>r.jsxs(f.Fragment,{children:[s===t.length-2&&l&&r.jsx(n.default,{href:e.url||void 0,isGoBackOnly:!0,children:l}),r.jsx(n.default,{href:e.url||void 0,isCurrent:B(s,t?.length),children:e.title})]},`BreadcrumbsItem_${e.title}`))})})};o.spiritComponent="Breadcrumbs";o.displayName="Breadcrumbs";exports.default=o;
 //# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/components/Breadcrumbs/Breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ElementType, Fragment } from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type SpiritBreadcrumbsProps } from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport BreadcrumbsItem from './BreadcrumbsItem';\nimport { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';\n\nconst defaultProps: Partial<SpiritBreadcrumbsProps> = {\n  elementType: 'nav',\n  items: [],\n};\n\nconst Breadcrumbs = <E extends ElementType = 'nav'>(props: SpiritBreadcrumbsProps<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { children, elementType: ElementTag = 'nav', goBackTitle, items, ...restProps } = propsWithDefaults;\n  const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const mergedStyleProps = mergeStyleProps(ElementTag, { classProps: classProps.root, styleProps });\n\n  const isLast = (index: number, itemsCount: number) => index === itemsCount - 1;\n\n  return (\n    <ElementTag {...otherProps} {...mergedStyleProps} aria-label=\"Breadcrumb\">\n      <ol>\n        {children ||\n          items?.map((item, index) => (\n            <Fragment key={`BreadcrumbsItem_${item.title}`}>\n              {index === items.length - 2 && goBackTitle && (\n                <BreadcrumbsItem href={item.url || undefined} isGoBackOnly>\n                  {goBackTitle}\n                </BreadcrumbsItem>\n              )}\n              <BreadcrumbsItem href={item.url || undefined} isCurrent={isLast(index, items?.length)}>\n                {item.title}\n              </BreadcrumbsItem>\n            </Fragment>\n          ))}\n      </ol>\n    </ElementTag>\n  );\n};\n\nBreadcrumbs.spiritComponent = 'Breadcrumbs';\n\nexport default Breadcrumbs;\n"],"names":["defaultProps","Breadcrumbs","props","propsWithDefaults","children","ElementTag","goBackTitle","items","restProps","classProps","modifiedProps","useBreadcrumbsStyleProps","styleProps","otherProps","useStyleProps","mergedStyleProps","mergeStyleProps","isLast","index","itemsCount","jsx","item","Fragment","BreadcrumbsItem"],"mappings":"qVASMA,EAAgD,CACpD,YAAa,MACb,MAAO,CAAA,CACT,EAEMC,EAA8CC,GAAkD,CACpG,MAAMC,EAAoB,CAAE,GAAGH,EAAc,GAAGE,CAAA,EAC1C,CAAE,SAAAE,EAAU,YAAaC,EAAa,MAAO,YAAAC,EAAa,MAAAC,EAAO,GAAGC,CAAA,EAAcL,EAClF,CAAE,WAAAM,EAAY,MAAOC,CAAA,EAAkBC,2BAAyB,CAAE,GAAGH,EAAW,EAChF,CAAA,WAAEI,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/DK,EAAmBC,EAAAA,gBAAgBX,EAAY,CAAE,WAAYI,EAAW,KAAA,WAAMG,EAAY,EAE1FK,EAAS,CAACC,EAAeC,IAAuBD,IAAUC,EAAa,EAE7E,aACGd,EAAA,CAAY,GAAGQ,EAAa,GAAGE,EAAkB,aAAW,aAC3D,SAAAK,MAAC,KAAA,CACE,YACCb,GAAO,IAAI,CAACc,EAAMH,WACfI,WAAA,CACE,SAAA,CAAAJ,IAAUX,EAAM,OAAS,GAAKD,GAC7Bc,EAAAA,IAACG,UAAA,CAAgB,KAAMF,EAAK,KAAO,OAAW,aAAY,GACvD,SAAAf,EACH,EAEFc,EAAAA,IAACG,EAAAA,QAAA,CAAgB,KAAMF,EAAK,KAAO,OAAW,UAAWJ,EAAOC,EAAOX,GAAO,MAAM,EACjF,WAAK,KAAA,CACR,CAAA,CAAA,EARa,mBAAmBc,EAAK,KAAK,EAS5C,CACD,EACL,EACF,CAEJ,EAEApB,EAAY,gBAAkB"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ElementType, Fragment } from 'react';\nimport { useStyleProps } from '../../hooks';\nimport { type SpiritBreadcrumbsProps } from '../../types';\nimport { mergeStyleProps } from '../../utils';\nimport BreadcrumbsItem from './BreadcrumbsItem';\nimport { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';\n\nconst defaultProps: Partial<SpiritBreadcrumbsProps> = {\n  elementType: 'nav',\n  items: [],\n};\n\nconst Breadcrumbs = <E extends ElementType = 'nav'>(props: SpiritBreadcrumbsProps<E>): JSX.Element => {\n  const propsWithDefaults = { ...defaultProps, ...props };\n  const { children, elementType, goBackTitle, items, ...restProps } = propsWithDefaults;\n  const Component = elementType as ElementType;\n  const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });\n  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);\n  const mergedStyleProps = mergeStyleProps(Component, { classProps: classProps.root, styleProps });\n\n  const isLast = (index: number, itemsCount: number) => index === itemsCount - 1;\n\n  return (\n    <Component {...otherProps} {...mergedStyleProps} aria-label=\"Breadcrumb\">\n      <ol>\n        {children ||\n          items?.map((item, index) => (\n            <Fragment key={`BreadcrumbsItem_${item.title}`}>\n              {index === items.length - 2 && goBackTitle && (\n                <BreadcrumbsItem href={item.url || undefined} isGoBackOnly>\n                  {goBackTitle}\n                </BreadcrumbsItem>\n              )}\n              <BreadcrumbsItem href={item.url || undefined} isCurrent={isLast(index, items?.length)}>\n                {item.title}\n              </BreadcrumbsItem>\n            </Fragment>\n          ))}\n      </ol>\n    </Component>\n  );\n};\n\nBreadcrumbs.spiritComponent = 'Breadcrumbs';\nBreadcrumbs.displayName = 'Breadcrumbs';\n\nexport default Breadcrumbs;\n"],"names":["defaultProps","Breadcrumbs","props","propsWithDefaults","children","elementType","goBackTitle","items","restProps","Component","classProps","modifiedProps","useBreadcrumbsStyleProps","styleProps","otherProps","useStyleProps","mergedStyleProps","mergeStyleProps","isLast","index","itemsCount","jsx","item","Fragment","BreadcrumbsItem"],"mappings":"qVASMA,EAAgD,CACpD,YAAa,MACb,MAAO,CAAA,CACT,EAEMC,EAA8CC,GAAkD,CACpG,MAAMC,EAAoB,CAAE,GAAGH,EAAc,GAAGE,CAAA,EAC1C,CAAE,SAAAE,EAAU,YAAAC,EAAa,YAAAC,EAAa,MAAAC,EAAO,GAAGC,GAAcL,EAC9DM,EAAYJ,EACZ,CAAE,WAAAK,EAAY,MAAOC,CAAA,EAAkBC,2BAAyB,CAAE,GAAGJ,EAAW,EAChF,CAAA,WAAEK,EAAY,MAAOC,CAAA,EAAeC,EAAAA,cAAcJ,CAAa,EAC/DK,EAAmBC,EAAAA,gBAAgBR,EAAW,CAAE,WAAYC,EAAW,KAAA,WAAMG,EAAY,EAEzFK,EAAS,CAACC,EAAeC,IAAuBD,IAAUC,EAAa,EAE7E,aACGX,EAAA,CAAW,GAAGK,EAAa,GAAGE,EAAkB,aAAW,aAC1D,SAAAK,MAAC,KAAA,CACE,YACCd,GAAO,IAAI,CAACe,EAAMH,WACfI,WAAA,CACE,SAAA,CAAAJ,IAAUZ,EAAM,OAAS,GAAKD,GAC7Be,EAAAA,IAACG,UAAA,CAAgB,KAAMF,EAAK,KAAO,OAAW,aAAY,GACvD,SAAAhB,EACH,EAEFe,EAAAA,IAACG,EAAAA,QAAA,CAAgB,KAAMF,EAAK,KAAO,OAAW,UAAWJ,EAAOC,EAAOZ,GAAO,MAAM,EACjF,WAAK,KAAA,CACR,CAAA,CAAA,EARa,mBAAmBe,EAAK,KAAK,EAS5C,CACD,EACL,EACF,CAEJ,EAEArB,EAAY,gBAAkB,cAC9BA,EAAY,YAAc"}