bonkers-ui 2.0.3 → 2.0.4

package/components/UiSelect/UiSelect.js

@@ -1,28 +1,29 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import d from "react";
-import y from "classnames";
+import b from "classnames";
 import { UiTypography as m } from "../UiTypography/UiTypography.js";
 import { ETypographySizes as u } from "../UiTypography/_types.js";
-import { EColors as b } from "../../_types/colors.js";
-import '../../assets/UiSelect.css';const f = "_UiSelect_1fbno_1", S = {
-  UiSelect: f
-}, _ = ({
+import { EColors as f } from "../../_types/colors.js";
+import '../../assets/UiSelect.css';const S = "_UiSelect_1fbno_1", w = {
+  UiSelect: S
+}, z = ({
   children: p,
   heading: o,
   subLabel: n,
   disabled: s,
   onChange: r,
+  className: h,
   placeholder: a,
   postfixIcon: i,
   ...l
 }) => {
-  const [h, v] = d.useState(l.value || l.defaultValue || ""), x = d.useCallback(
+  const [v, x] = d.useState(l.value || l.defaultValue || ""), y = d.useCallback(
     (c) => {
-      v(c.target.value), r == null || r(c);
+      x(c.target.value), r == null || r(c);
     },
     [r]
   );
-  return /* @__PURE__ */ t("div", { children: [
+  return /* @__PURE__ */ t("div", { className: h, children: [
     o ? /* @__PURE__ */ e(
       m,
       {
@@ -31,8 +32,8 @@ import '../../assets/UiSelect.css';const f = "_UiSelect_1fbno_1", S = {
         children: o
       }
     ) : null,
-    /* @__PURE__ */ t("div", { className: y(
-      S.UiSelect,
+    /* @__PURE__ */ t("div", { className: b(
+      w.UiSelect,
       "relative",
       "rounded-xl",
       "border",
@@ -55,8 +56,8 @@ import '../../assets/UiSelect.css';const f = "_UiSelect_1fbno_1", S = {
 					outline-0
 					`,
           disabled: s,
-          value: h,
-          onChange: x,
+          value: v,
+          onChange: y,
           children: [
             a ? /* @__PURE__ */ e("option", { value: "", disabled: !0, hidden: !0, children: a }) : null,
             p
@@ -85,7 +86,7 @@ import '../../assets/UiSelect.css';const f = "_UiSelect_1fbno_1", S = {
       m,
       {
         size: u.SM,
-        color: b.SECONDARY_ALT,
+        color: f.SECONDARY_ALT,
         className: "mt-xxs",
         children: n
       }
@@ -93,6 +94,6 @@ import '../../assets/UiSelect.css';const f = "_UiSelect_1fbno_1", S = {
   ] });
 };
 export {
-  _ as UiSelect
+  z as UiSelect
 };
 //# sourceMappingURL=UiSelect.js.map

package/components/UiSelect/UiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiSelect.js","sources":["../../../src/components/UiSelect/UiSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiTypography, ETypographySizes, EColors } from \"../UiTypography\";\nimport styles from \"./UiSelect.module.css\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tpostfixIcon?: React.ReactNode;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tplaceholder,\n\tpostfixIcon,\n\t...rest\n}) => {\n\tconst [value, setValue] = React.useState(rest.value || rest.defaultValue || \"\");\n\tconst handleChange = React.useCallback(\n\t\t(event: React.ChangeEvent<HTMLSelectElement>) => {\n\t\t\tsetValue(event.target.value);\n\t\t\tonChange?.(event);\n\t\t},\n\t\t[onChange],\n\t);\n\treturn (\n\t\t<div>\n\t\t\t{ heading\n\t\t\t\t? <UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tclassName=\"mb-xxs\">\n\t\t\t\t\t{ heading }\n\t\t\t\t</UiTypography>\n\t\t\t\t: null\n\t\t\t}\n\t\t\t<div className={ cx(styles.UiSelect, \"relative\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\tdisabled\n\t\t\t\t\t? [\"pointer-events-none\", \"border-secondary-alt-300\", \"bg-secondary-alt-200\"]\n\t\t\t\t\t: [\"border-secondary-alt-500\", \"bg-white\"]\n\t\t\t) }>\n\t\t\t\t<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName=\"m-0\n\t\t\t\t\tw-full\n\t\t\t\t\tcursor-pointer\n\t\t\t\t\tappearance-none\n\t\t\t\t\tborder-0\n\t\t\t\t\tbg-transparent\n\t\t\t\t\tp-sm\n\t\t\t\t\titalic\n\t\t\t\t\ttext-secondary-alt\n\t\t\t\t\toutline-0\n\t\t\t\t\t\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t>\n\t\t\t\t\t{ placeholder ? <option value={ \"\" } disabled hidden>{ placeholder }</option> : null }\n\t\t\t\t\t{ children }\n\t\t\t\t</select>\n\t\t\t\t<div className=\"absolute right-sm top-1/2 -translate-y-1/2\">\n\t\t\t\t\t{ postfixIcon\n\t\t\t\t\t\t? postfixIcon\n\t\t\t\t\t\t: (<svg\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ subLabel\n\t\t\t\t? (<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tcolor={ EColors.SECONDARY_ALT }\n\t\t\t\t\tclassName=\"mt-xxs\"\n\t\t\t\t>\n\t\t\t\t\t{ subLabel }\n\t\t\t\t</UiTypography>)\n\t\t\t\t: null\n\t\t\t}\n\t\t</div>\n\t);\n};\n"],"names":["UiSelect","children","heading","subLabel","disabled","onChange","placeholder","postfixIcon","rest","value","setValue","React","handleChange","event","jsx","UiTypography","ETypographySizes","jsxs","cx","styles","EColors"],"mappings":";;;;;;;;GAeaA,IAAmC,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAASH,EAAK,SAASA,EAAK,gBAAgB,EAAE,GACxEI,IAAeD,EAAM;AAAA,IAC1B,CAACE,MAAgD;AACvC,MAAAH,EAAAG,EAAM,OAAO,KAAK,GAC3BR,KAAA,QAAAA,EAAWQ;AAAA,IACZ;AAAA,IACA,CAACR,CAAQ;AAAA,EACV;AACA,2BACE,OACE,EAAA,UAAA;AAAA,IACCH,IAAA,gBAAAY;AAAA,MAACC;AAAA,MAAA;AAAA,QACF,MAAOC,EAAiB;AAAA,QACxB,WAAU;AAAA,QACR,UAAAd;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IAEH,gBAAAe,EAAC,SAAI,WAAYC;AAAA,MAAGC,EAAO;AAAA,MAAU;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACAf,IACG,CAAC,uBAAuB,4BAA4B,sBAAsB,IAC1E,CAAC,4BAA4B,UAAU;AAAA,IAE1C,GAAA,UAAA;AAAA,MAAA,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGT;AAAA,UACL,WAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWV,UAAAJ;AAAA,UACA,OAAAK;AAAA,UACA,UAAWG;AAAA,UAET,UAAA;AAAA,YAAcN,IAAA,gBAAAQ,EAAC,YAAO,OAAQ,IAAK,UAAQ,IAAC,QAAM,IAAG,UAAAR,EAAA,CAAa,IAAY;AAAA,YAC9EL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,gBAAAa,EAAA,OAAA,EAAI,WAAU,8CACZ,eAEE,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACH,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,EAGH,CAAA;AAAA,IAAA,GACD;AAAA,IACEX,IACE,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACH,MAAOC,EAAiB;AAAA,QACxB,OAAQI,EAAQ;AAAA,QAChB,WAAU;AAAA,QAER,UAAAjB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,EAAA,GAEJ;AAEF;"}
+{"version":3,"file":"UiSelect.js","sources":["../../../src/components/UiSelect/UiSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { UiTypography, ETypographySizes, EColors } from \"../UiTypography\";\nimport styles from \"./UiSelect.module.css\";\n\ntype TSelectProps = {\n\theading?: string\n\tsubLabel?: string;\n\tdisabled?: boolean;\n\tvalue?: string | number | readonly string[];\n\tplaceholder?: string;\n\tpostfixIcon?: React.ReactNode;\n\tclassName?: string;\n\tonChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;\n} & React.SelectHTMLAttributes<HTMLSelectElement>\n\nexport const UiSelect: React.FC<TSelectProps> = ({\n\tchildren,\n\theading,\n\tsubLabel,\n\tdisabled,\n\tonChange,\n\tclassName,\n\tplaceholder,\n\tpostfixIcon,\n\t...rest\n}) => {\n\tconst [value, setValue] = React.useState(rest.value || rest.defaultValue || \"\");\n\tconst handleChange = React.useCallback(\n\t\t(event: React.ChangeEvent<HTMLSelectElement>) => {\n\t\t\tsetValue(event.target.value);\n\t\t\tonChange?.(event);\n\t\t},\n\t\t[onChange],\n\t);\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ heading\n\t\t\t\t? <UiTypography\n\t\t\t\t\tsize={ ETypographySizes.MD }\n\t\t\t\t\tclassName=\"mb-xxs\">\n\t\t\t\t\t{ heading }\n\t\t\t\t</UiTypography>\n\t\t\t\t: null\n\t\t\t}\n\t\t\t<div className={ cx(styles.UiSelect, \"relative\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"border\",\n\t\t\t\t\"hover:border-secondary-alt-700\",\n\t\t\t\tdisabled\n\t\t\t\t\t? [\"pointer-events-none\", \"border-secondary-alt-300\", \"bg-secondary-alt-200\"]\n\t\t\t\t\t: [\"border-secondary-alt-500\", \"bg-white\"]\n\t\t\t) }>\n\t\t\t\t<select\n\t\t\t\t\t{ ...rest }\n\t\t\t\t\tclassName=\"m-0\n\t\t\t\t\tw-full\n\t\t\t\t\tcursor-pointer\n\t\t\t\t\tappearance-none\n\t\t\t\t\tborder-0\n\t\t\t\t\tbg-transparent\n\t\t\t\t\tp-sm\n\t\t\t\t\titalic\n\t\t\t\t\ttext-secondary-alt\n\t\t\t\t\toutline-0\n\t\t\t\t\t\"\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t>\n\t\t\t\t\t{ placeholder ? <option value={ \"\" } disabled hidden>{ placeholder }</option> : null }\n\t\t\t\t\t{ children }\n\t\t\t\t</select>\n\t\t\t\t<div className=\"absolute right-sm top-1/2 -translate-y-1/2\">\n\t\t\t\t\t{ postfixIcon\n\t\t\t\t\t\t? postfixIcon\n\t\t\t\t\t\t: (<svg\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ subLabel\n\t\t\t\t? (<UiTypography\n\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\tcolor={ EColors.SECONDARY_ALT }\n\t\t\t\t\tclassName=\"mt-xxs\"\n\t\t\t\t>\n\t\t\t\t\t{ subLabel }\n\t\t\t\t</UiTypography>)\n\t\t\t\t: null\n\t\t\t}\n\t\t</div>\n\t);\n};\n"],"names":["UiSelect","children","heading","subLabel","disabled","onChange","className","placeholder","postfixIcon","rest","value","setValue","React","handleChange","event","jsxs","jsx","UiTypography","ETypographySizes","cx","styles","EColors"],"mappings":";;;;;;;;GAgBaA,IAAmC,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAASH,EAAK,SAASA,EAAK,gBAAgB,EAAE,GACxEI,IAAeD,EAAM;AAAA,IAC1B,CAACE,MAAgD;AACvC,MAAAH,EAAAG,EAAM,OAAO,KAAK,GAC3BT,KAAA,QAAAA,EAAWS;AAAA,IACZ;AAAA,IACA,CAACT,CAAQ;AAAA,EACV;AAEC,SAAA,gBAAAU,EAAC,SAAI,WAAAT,GACF,UAAA;AAAA,IACCJ,IAAA,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACF,MAAOC,EAAiB;AAAA,QACxB,WAAU;AAAA,QACR,UAAAhB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,IAEH,gBAAAa,EAAC,SAAI,WAAYI;AAAA,MAAGC,EAAO;AAAA,MAAU;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACAhB,IACG,CAAC,uBAAuB,4BAA4B,sBAAsB,IAC1E,CAAC,4BAA4B,UAAU;AAAA,IAE1C,GAAA,UAAA;AAAA,MAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGN;AAAA,UACL,WAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWV,UAAAL;AAAA,UACA,OAAAM;AAAA,UACA,UAAWG;AAAA,UAET,UAAA;AAAA,YAAcN,IAAA,gBAAAS,EAAC,YAAO,OAAQ,IAAK,UAAQ,IAAC,QAAM,IAAG,UAAAT,EAAA,CAAa,IAAY;AAAA,YAC9EN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MACC,gBAAAe,EAAA,OAAA,EAAI,WAAU,8CACZ,eAEE,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACH,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAM;AAAA,UAEN,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,EAGH,CAAA;AAAA,IAAA,GACD;AAAA,IACEb,IACE,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACH,MAAOC,EAAiB;AAAA,QACxB,OAAQG,EAAQ;AAAA,QAChB,WAAU;AAAA,QAER,UAAAlB;AAAA,MAAA;AAAA,IAAA,IAED;AAAA,EAAA,GAEJ;AAEF;"}

package/components/UiSkeleton/UiSkeleton.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { ESkeletonKind } from './_types';
 type UiSkeletonProps = {
     kind: ESkeletonKind;
+    className?: string;
 };
 export declare const UiSkeleton: React.FC<UiSkeletonProps>;
 export {};

package/components/UiSkeleton/UiSkeleton.js

@@ -1,13 +1,14 @@
-import { jsx as s, Fragment as n, jsxs as t } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import "react";
-import e from "classnames";
+import s from "classnames";
 import { ESkeletonKind as o } from "./_types.js";
 const b = ({
-  kind: c
-}) => /* @__PURE__ */ s(n, { children: c === o.RESULT_CARD && /* @__PURE__ */ t(
+  kind: c,
+  className: n
+}) => /* @__PURE__ */ e("div", { className: n, children: c === o.RESULT_CARD && /* @__PURE__ */ t(
   "div",
   {
-    className: e(
+    className: s(
       "ui-skeleton-card",
       "animate-pulse",
       "border-2",
@@ -17,10 +18,10 @@ const b = ({
       "rounded-2xl"
     ),
     children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ e(
         "div",
         {
-          className: e(
+          className: s(
             "ui-skeleton-card__content",
             "bg-secondary-alt-300",
             "gap-xs",
@@ -30,11 +31,11 @@ const b = ({
             "rounded-bl-xl",
             "rounded-tl-xl"
           ),
-          children: /* @__PURE__ */ t("div", { className: e("grid", "grow", "gap-xxs", "justify-items-center"), children: [
-            /* @__PURE__ */ s(
+          children: /* @__PURE__ */ t("div", { className: s("grid", "grow", "gap-xxs", "justify-items-center"), children: [
+            /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: s(
                   "ui-skeleton-card__content",
                   "bg-secondary-alt-400",
                   "h-xl",
@@ -44,10 +45,10 @@ const b = ({
                 )
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: s(
                   "ui-skeleton-card__content",
                   "bg-secondary-alt-400",
                   "h-xxxxl",
@@ -62,20 +63,20 @@ const b = ({
       /* @__PURE__ */ t(
         "div",
         {
-          className: e(
+          className: s(
             "ui-skeleton-main__content",
             "bg-white",
             "col-span-3"
           ),
           children: [
-            /* @__PURE__ */ t("div", { className: e(
+            /* @__PURE__ */ t("div", { className: s(
               "grid",
               "p-sm"
             ), children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e(
+                  className: s(
                     "bg-secondary-alt-400",
                     "h-md",
                     "mb-xxs",
@@ -84,60 +85,60 @@ const b = ({
                   )
                 }
               ),
-              /* @__PURE__ */ s("div", { className: e(
+              /* @__PURE__ */ e("div", { className: s(
                 "flex",
                 "gap-sm",
                 "mb-xxs"
-              ), children: ["w-2/5", "w-1/4"].map((l, a) => /* @__PURE__ */ s(
+              ), children: ["w-2/5", "w-1/4"].map((l, a) => /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e(l, "h-md", "bg-secondary-alt-300", "rounded-sm")
+                  className: s(l, "h-md", "bg-secondary-alt-300", "rounded-sm")
                 },
                 a
               )) }),
-              /* @__PURE__ */ s("div", { className: e(
+              /* @__PURE__ */ e("div", { className: s(
                 "flex",
                 "justify-between"
-              ), children: ["w-1/3", "w-1/4"].map((l, a) => /* @__PURE__ */ s(
+              ), children: ["w-1/3", "w-1/4"].map((l, a) => /* @__PURE__ */ e(
                 "div",
                 {
-                  className: e(l, "h-[20px]", a === 0 ? "bg-secondary-alt-400" : "bg-secondary-alt-300", "rounded-sm", "mb-xxs")
+                  className: s(l, "h-[20px]", a === 0 ? "bg-secondary-alt-400" : "bg-secondary-alt-300", "rounded-sm", "mb-xxs")
                 },
                 a
               )) })
             ] }),
-            /* @__PURE__ */ s("div", { className: e(
+            /* @__PURE__ */ e("div", { className: s(
               "grid",
               "grid-cols-4"
             ), children: Array.from({
               length: 4
-            }).map((l, a) => /* @__PURE__ */ s("div", { className: e(
+            }).map((l, a) => /* @__PURE__ */ e("div", { className: s(
               "border",
               "border-secondary-alt-300",
               "px-xs",
               "py-md"
-            ), children: /* @__PURE__ */ s("div", { className: e(
+            ), children: /* @__PURE__ */ e("div", { className: s(
               "place-items-center"
-            ), children: ["w-2/3", "w-2/4"].map((r, d) => /* @__PURE__ */ s(
+            ), children: ["w-2/3", "w-2/4"].map((d, r) => /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: s(
                   "bg-secondary-alt-300",
                   "mb-xxxs",
                   "rounded-sm",
-                  r,
-                  d === 1 ? "h-[23px]" : "h-[20px]"
+                  d,
+                  r === 1 ? "h-[23px]" : "h-[20px]"
                 )
               },
-              d
+              r
             )) }) }, a)) })
           ]
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ e(
         "div",
         {
-          className: e(
+          className: s(
             "ui-skeleton-cta-cell",
             "bg-secondary-alt-200",
             "flex-col",
@@ -149,11 +150,11 @@ const b = ({
             "rounded-tr-xl"
           ),
           children: ["w-3/4", "w-1/2", "w-3/4", "w-4/5"].map((l, a) => {
-            const r = a === 1 ? "h-lg" : "h-[20px]";
-            return /* @__PURE__ */ s(
+            const d = a === 1 ? "h-lg" : "h-[20px]";
+            return /* @__PURE__ */ e(
               "div",
               {
-                className: e(
+                className: s(
                   "ui-skeleton-cta-cell__content",
                   "bg-secondary-alt-400",
                   "flex-col",
@@ -162,8 +163,8 @@ const b = ({
                   "mb-xxxs",
                   "rounded-sm",
                   l,
-                  r,
-                  a === 3 ? "h-xxl bg-secondary-alt-500 mt-md" : r
+                  d,
+                  a === 3 ? "h-xxl bg-secondary-alt-500 mt-md" : d
                 )
               },
               a

package/components/UiSkeleton/UiSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiSkeleton.js","sources":["../../../src/components/UiSkeleton/UiSkeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { ESkeletonKind } from \"./_types\";\n\ntype UiSkeletonProps ={\n\tkind: ESkeletonKind\n\n}\n\nexport const UiSkeleton: React.FC<UiSkeletonProps> = ({\n\tkind\n}) => {\n\n\treturn (\n\t\t<>\n\t\t\t{ kind === ESkeletonKind.RESULT_CARD && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"ui-skeleton-card\",\n\t\t\t\t\t\t\"animate-pulse\",\n\t\t\t\t\t\t\"border-2\",\n\t\t\t\t\t\t\"border-secondary-alt-300\",\n\t\t\t\t\t\t\"grid-cols-5\",\n\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\"rounded-2xl\"\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\",\n\t\t\t\t\t\t\t\"gap-xs\",\n\t\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\t\"justify-center\",\n\t\t\t\t\t\t\t\"p-md\",\n\t\t\t\t\t\t\t\"rounded-bl-xl\",\n\t\t\t\t\t\t\t\"rounded-tl-xl\"\n\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={ cx(\"grid\", \"grow\", \"gap-xxs\", \"justify-items-center\") }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-xl\",\n\t\t\t\t\t\t\t\t\t\"mb-sm\",\n\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\"w-2/3\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-xxxxl\",\n\t\t\t\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\t\t\t\"w-3/5\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-main__content\",\n\t\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t\t\"col-span-3\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\t\"p-sm\"\n\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\t\t\t\"mb-xxs\",\n\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\"w-3/5\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\"gap-sm\",\n\t\t\t\t\t\t\t\t\"mb-xxs\"\n\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t{ [\"w-2/5\", \"w-1/4\"].map((widthClass, index) => {\n\t\t\t\t\t\t\t\t\tconst bgClass = index === 0 ? \"bg-secondary-alt-300\" : \"bg-secondary-alt-300\";\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(widthClass, \"h-md\", bgClass, \"rounded-sm\") }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\"justify-between\",\n\n\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t{ [\"w-1/3\", \"w-1/4\"].map((widthClass, index) => {\n\t\t\t\t\t\t\t\t\tconst heightClass = \"h-[20px]\";\n\t\t\t\t\t\t\t\t\tconst bgClass = index === 0 ? \"bg-secondary-alt-400\" : \"bg-secondary-alt-300\";\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(widthClass, heightClass, bgClass, \"rounded-sm\", \"mb-xxs\") }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\t\"grid-cols-4\",\n\n\t\t\t\t\t\t) } >\n\t\t\t\t\t\t\t{ Array.from({\n\t\t\t\t\t\t\t\tlength: 4\n\t\t\t\t\t\t\t}).map((_, index)=> (\n\t\t\t\t\t\t\t\t<div key={ index } className={ cx(\n\t\t\t\t\t\t\t\t\t\"border\",\n\t\t\t\t\t\t\t\t\t\"border-secondary-alt-300\",\n\t\t\t\t\t\t\t\t\t\"px-xs\",\n\t\t\t\t\t\t\t\t\t\"py-md\"\n\n\t\t\t\t\t\t\t\t) } >\n\t\t\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\t\t\"place-items-center\"\n\n\t\t\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t\t\t{ [\"w-2/3\", \"w-2/4\"].map((widthClass, index) => {\n\n\t\t\t\t\t\t\t\t\t\t\tconst heightClass = index === 1 ? \"h-[23px]\" : \"h-[20px]\";\n\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-300\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"mb-xxxs\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidthClass,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theightClass\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)) }\n\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-cta-cell\",\n\t\t\t\t\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\t\t\t\t\"flex-col\",\n\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\t\"px-sm\",\n\t\t\t\t\t\t\t\"py-md\",\n\t\t\t\t\t\t\t\"rounded-br-xl\",\n\t\t\t\t\t\t\t\"rounded-tr-xl\"\n\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t{ [\"w-3/4\", \"w-1/2\", \"w-3/4\", \"w-4/5\"].map((widthClass, index) => {\n\n\t\t\t\t\t\t\tconst heightClass = index === 1 ? \"h-lg\" : \"h-[20px]\";\n\t\t\t\t\t\t\tconst lastDivClass = index === 3 ? \"h-xxl bg-secondary-alt-500 mt-md\" : heightClass;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\t\"ui-skeleton-cta-cell__content\",\n\t\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\t\"flex-col\",\n\t\t\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\t\t\"h-[20px]\",\n\t\t\t\t\t\t\t\t\t\t\"mb-xxxs\",\n\t\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\twidthClass,\n\t\t\t\t\t\t\t\t\t\theightClass,\n\t\t\t\t\t\t\t\t\t\tlastDivClass\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}) }\n\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\n\t\t\t) }\n\n\t\t</>\n\t);\n};\n"],"names":["UiSkeleton","kind","jsx","Fragment","ESkeletonKind","jsxs","cx","widthClass","index","_","heightClass"],"mappings":"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"}
+{"version":3,"file":"UiSkeleton.js","sources":["../../../src/components/UiSkeleton/UiSkeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { ESkeletonKind } from \"./_types\";\n\ntype UiSkeletonProps ={\n\tkind: ESkeletonKind\n\tclassName?: string\n}\n\nexport const UiSkeleton: React.FC<UiSkeletonProps> = ({\n\tkind,\n\tclassName\n}) => {\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ kind === ESkeletonKind.RESULT_CARD && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\"ui-skeleton-card\",\n\t\t\t\t\t\t\"animate-pulse\",\n\t\t\t\t\t\t\"border-2\",\n\t\t\t\t\t\t\"border-secondary-alt-300\",\n\t\t\t\t\t\t\"grid-cols-5\",\n\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\"rounded-2xl\",\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\"bg-secondary-alt-300\",\n\t\t\t\t\t\t\t\"gap-xs\",\n\t\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\t\"justify-center\",\n\t\t\t\t\t\t\t\"p-md\",\n\t\t\t\t\t\t\t\"rounded-bl-xl\",\n\t\t\t\t\t\t\t\"rounded-tl-xl\"\n\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={ cx(\"grid\", \"grow\", \"gap-xxs\", \"justify-items-center\") }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-xl\",\n\t\t\t\t\t\t\t\t\t\"mb-sm\",\n\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\"w-2/3\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"ui-skeleton-card__content\",\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-xxxxl\",\n\t\t\t\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\t\t\t\"w-3/5\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-main__content\",\n\t\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t\t\"col-span-3\"\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\t\"p-sm\"\n\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\t\t\t\t\"mb-xxs\",\n\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\"w-3/5\"\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\"gap-sm\",\n\t\t\t\t\t\t\t\t\"mb-xxs\"\n\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t{ [\"w-2/5\", \"w-1/4\"].map((widthClass, index) => {\n\t\t\t\t\t\t\t\t\tconst bgClass = index === 0 ? \"bg-secondary-alt-300\" : \"bg-secondary-alt-300\";\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(widthClass, \"h-md\", bgClass, \"rounded-sm\") }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\"justify-between\",\n\n\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t{ [\"w-1/3\", \"w-1/4\"].map((widthClass, index) => {\n\t\t\t\t\t\t\t\t\tconst heightClass = \"h-[20px]\";\n\t\t\t\t\t\t\t\t\tconst bgClass = index === 0 ? \"bg-secondary-alt-400\" : \"bg-secondary-alt-300\";\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(widthClass, heightClass, bgClass, \"rounded-sm\", \"mb-xxs\") }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\"grid\",\n\t\t\t\t\t\t\t\"grid-cols-4\",\n\n\t\t\t\t\t\t) } >\n\t\t\t\t\t\t\t{ Array.from({\n\t\t\t\t\t\t\t\tlength: 4\n\t\t\t\t\t\t\t}).map((_, index)=> (\n\t\t\t\t\t\t\t\t<div key={ index } className={ cx(\n\t\t\t\t\t\t\t\t\t\"border\",\n\t\t\t\t\t\t\t\t\t\"border-secondary-alt-300\",\n\t\t\t\t\t\t\t\t\t\"px-xs\",\n\t\t\t\t\t\t\t\t\t\"py-md\"\n\n\t\t\t\t\t\t\t\t) } >\n\t\t\t\t\t\t\t\t\t<div className={ cx(\n\t\t\t\t\t\t\t\t\t\t\"place-items-center\"\n\n\t\t\t\t\t\t\t\t\t) }>\n\t\t\t\t\t\t\t\t\t\t{ [\"w-2/3\", \"w-2/4\"].map((widthClass, index) => {\n\n\t\t\t\t\t\t\t\t\t\t\tconst heightClass = index === 1 ? \"h-[23px]\" : \"h-[20px]\";\n\n\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-300\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"mb-xxxs\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidthClass,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theightClass\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)) }\n\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"ui-skeleton-cta-cell\",\n\t\t\t\t\t\t\t\"bg-secondary-alt-200\",\n\t\t\t\t\t\t\t\"flex-col\",\n\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\t\t\"px-sm\",\n\t\t\t\t\t\t\t\"py-md\",\n\t\t\t\t\t\t\t\"rounded-br-xl\",\n\t\t\t\t\t\t\t\"rounded-tr-xl\"\n\n\t\t\t\t\t\t) }>\n\t\t\t\t\t\t{ [\"w-3/4\", \"w-1/2\", \"w-3/4\", \"w-4/5\"].map((widthClass, index) => {\n\n\t\t\t\t\t\t\tconst heightClass = index === 1 ? \"h-lg\" : \"h-[20px]\";\n\t\t\t\t\t\t\tconst lastDivClass = index === 3 ? \"h-xxl bg-secondary-alt-500 mt-md\" : heightClass;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\t\t\t\"ui-skeleton-cta-cell__content\",\n\t\t\t\t\t\t\t\t\t\t\"bg-secondary-alt-400\",\n\t\t\t\t\t\t\t\t\t\t\"flex-col\",\n\t\t\t\t\t\t\t\t\t\t\"flex\",\n\t\t\t\t\t\t\t\t\t\t\"h-[20px]\",\n\t\t\t\t\t\t\t\t\t\t\"mb-xxxs\",\n\t\t\t\t\t\t\t\t\t\t\"rounded-sm\",\n\t\t\t\t\t\t\t\t\t\twidthClass,\n\t\t\t\t\t\t\t\t\t\theightClass,\n\t\t\t\t\t\t\t\t\t\tlastDivClass\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}) }\n\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\n\t\t\t) }\n\n\t\t</div>\n\t);\n};\n"],"names":["UiSkeleton","kind","className","jsx","ESkeletonKind","jsxs","cx","widthClass","index","_","heightClass"],"mappings":"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"}

package/components/UiSnackbar/UiSnackbar.d.ts

@@ -4,6 +4,7 @@ type UiSnackbarProps = {
     kind?: ESnackbarTypes;
     title: React.ReactNode;
     children: React.ReactNode;
+    className?: string;
 };
 export declare const UiSnackbar: React.FC<UiSnackbarProps>;
 export {};

package/components/UiSnackbar/UiSnackbar.js

@@ -1,69 +1,67 @@
-import { jsx as r, Fragment as s, jsxs as n } from "react/jsx-runtime";
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import "react";
-import m from "classnames";
-import { ESnackbarTypes as t } from "./_types.js";
-import { UiButton as a } from "../UiButton/UiButton.js";
-import { EButtonSizes as c, EButtonTypes as x } from "../UiButton/_types.js";
-const l = {
-  [t.DEFAULT]: `
+import n from "classnames";
+import { ESnackbarTypes as e } from "./_types.js";
+const m = {
+  [e.DEFAULT]: `
 		bg-white
 		text-secondary-700
 
 	`,
-  [t.PRIMARY]: `
+  [e.PRIMARY]: `
 		bg-primary-600
 		text-white
 	`,
-  [t.WARNING]: `
+  [e.WARNING]: `
 		bg-warning
 		text-white
 	`,
-  [t.ERROR]: `
+  [e.ERROR]: `
 		bg-error
 		text-white
 	`,
-  [t.SECONDARY]: `
+  [e.SECONDARY]: `
 		bg-secondary
 		text-white
 	`
-}, g = ({
-  kind: e = t.SECONDARY,
-  title: o,
-  children: i
-}) => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ n(
+}, b = ({
+  kind: t = e.SECONDARY,
+  title: r,
+  children: s,
+  className: i
+}) => /* @__PURE__ */ o(
   "div",
   {
-    className: m(
+    className: n(
       "ui-snackbar",
       "flex",
       "w-full",
-      "rounded-xxs",
+      "rounded-lg",
       "items-center",
       "justify-between",
       "shadow-md",
       "p-sm",
       "flex-row-reverse",
       "text-sm",
-      l[e]
+      m[t],
+      i
     ),
     children: [
-      /* @__PURE__ */ r(
-        a,
+      /* @__PURE__ */ a(
+        "div",
         {
-          kind: x.LINK,
-          size: c.SMALL,
           style: {
-            color: e === t.DEFAULT ? "black" : "white",
+            color: t === e.DEFAULT ? "black" : "white",
             fontWeight: "normal"
           },
-          children: i
+          children: s
         }
       ),
-      o
+      r
     ]
   }
-) });
+);
 export {
-  g as UiSnackbar
+  b as UiSnackbar
 };
 //# sourceMappingURL=UiSnackbar.js.map

package/components/UiSnackbar/UiSnackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiSnackbar.js","sources":["../../../src/components/UiSnackbar/UiSnackbar.tsx"],"sourcesContent":["import React  from \"react\";\nimport cx from \"classnames\";\nimport { ESnackbarTypes } from \"./_types\";\nimport { EButtonSizes, EButtonTypes, UiButton } from \"../UiButton\";\n\ntype UiSnackbarProps ={\n\tkind?: ESnackbarTypes;\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n\n}\n\nconst kindClasses = {\n\t[ESnackbarTypes.DEFAULT]: `\n\t\tbg-white\n\t\ttext-secondary-700\n\n\t`,\n\t[ESnackbarTypes.PRIMARY]: `\n\t\tbg-primary-600\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.WARNING]: `\n\t\tbg-warning\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.ERROR]: `\n\t\tbg-error\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.SECONDARY]: `\n\t\tbg-secondary\n\t\ttext-white\n\t`,\n\n};\n\nexport const UiSnackbar: React.FC<UiSnackbarProps> = ({\n\n\tkind= ESnackbarTypes.SECONDARY,\n\ttitle,\n\tchildren\n\n}) => {\n\n\treturn (\n\t\t<>\n\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\t\"ui-snackbar\",\n\t\t\t\t\t\"flex\",\n\t\t\t\t\t\"w-full\",\n\t\t\t\t\t\"rounded-xxs\",\n\t\t\t\t\t\"items-center\",\n\t\t\t\t\t\"justify-between\",\n\t\t\t\t\t\"shadow-md\",\n\t\t\t\t\t\"p-sm\",\n\t\t\t\t\t\"flex-row-reverse\",\n\t\t\t\t\t\"text-sm\",\n\t\t\t\t\tkindClasses[kind]\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<UiButton\n\t\t\t\t\tkind={ EButtonTypes.LINK }\n\t\t\t\t\tsize={ EButtonSizes.SMALL }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tcolor: kind === ESnackbarTypes.DEFAULT ? \"black\" : \"white\",\n\t\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</UiButton>\n\n\t\t\t\t{ title }\n\t\t\t</div>\n\n\t\t</>\n\t);\n};\n"],"names":["kindClasses","ESnackbarTypes","UiSnackbar","kind","title","children","jsx","Fragment","jsxs","cx","UiButton","EButtonTypes","EButtonSizes"],"mappings":";;;;;;AAYA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,EAIxB,CAACA,EAAe,SAAS,GAAG;AAAA;AAAA;AAAA;AAK7B,GAEaC,IAAwC,CAAC;AAAA,EAErD,MAAAC,IAAMF,EAAe;AAAA,EACrB,OAAAG;AAAA,EACA,UAAAC;AAED,MAKG,gBAAAC,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAT,EAAYG,CAAI;AAAA,IACjB;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAACI;AAAA,QAAA;AAAA,UACA,MAAOC,EAAa;AAAA,UACpB,MAAOC,EAAa;AAAA,UACpB,OAAQ;AAAA,YACP,OAAOT,MAASF,EAAe,UAAU,UAAU;AAAA,YACnD,YAAY;AAAA,UACb;AAAA,UAEE,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,MAEED;AAAA,IAAA;AAAA,EAAA;AAAA,GAGJ;"}
+{"version":3,"file":"UiSnackbar.js","sources":["../../../src/components/UiSnackbar/UiSnackbar.tsx"],"sourcesContent":["import React  from \"react\";\nimport cx from \"classnames\";\nimport { ESnackbarTypes } from \"./_types\";\n\ntype UiSnackbarProps ={\n\tkind?: ESnackbarTypes;\n\ttitle: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string\n}\n\nconst kindClasses = {\n\t[ESnackbarTypes.DEFAULT]: `\n\t\tbg-white\n\t\ttext-secondary-700\n\n\t`,\n\t[ESnackbarTypes.PRIMARY]: `\n\t\tbg-primary-600\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.WARNING]: `\n\t\tbg-warning\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.ERROR]: `\n\t\tbg-error\n\t\ttext-white\n\t`,\n\t[ESnackbarTypes.SECONDARY]: `\n\t\tbg-secondary\n\t\ttext-white\n\t`,\n\n};\n\nexport const UiSnackbar: React.FC<UiSnackbarProps> = ({\n\n\tkind= ESnackbarTypes.SECONDARY,\n\ttitle,\n\tchildren,\n\tclassName\n}) => {\n\n\treturn (\n\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"ui-snackbar\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"w-full\",\n\t\t\t\t\"rounded-lg\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"justify-between\",\n\t\t\t\t\"shadow-md\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"flex-row-reverse\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tkindClasses[kind],\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: kind === ESnackbarTypes.DEFAULT ? \"black\" : \"white\",\n\t\t\t\t\tfontWeight: \"normal\",\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\n\t\t\t{ title }\n\t\t</div>\n\n\t);\n};\n"],"names":["kindClasses","ESnackbarTypes","UiSnackbar","kind","title","children","className","jsxs","cx","jsx"],"mappings":";;;;AAWA,MAAMA,IAAc;AAAA,EACnB,CAACC,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,EAI1B,CAACA,EAAe,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,EAIxB,CAACA,EAAe,SAAS,GAAG;AAAA;AAAA;AAAA;AAK7B,GAEaC,IAAwC,CAAC;AAAA,EAErD,MAAAC,IAAMF,EAAe;AAAA,EACrB,OAAAG;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACD,MAIE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAYC;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAR,EAAYG,CAAI;AAAA,MAChBG;AAAA,IACD;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAQ;AAAA,YACP,OAAON,MAASF,EAAe,UAAU,UAAU;AAAA,YACnD,YAAY;AAAA,UACb;AAAA,UAEE,UAAAI;AAAA,QAAA;AAAA,MACH;AAAA,MAEED;AAAA,IAAA;AAAA,EAAA;AACH;"}

package/components/UiStars/UiStars.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { EStarsSize, EStarColors } from './_types';
+export declare const colorClasses: {
+    default: string;
+    primary: string;
+    white: string;
+    black: string;
+    current: string;
+};
+interface IUiStars {
+    starsFilled?: number;
+    size?: EStarsSize;
+    count?: number;
+    color?: EStarColors;
+    className?: string;
+}
+export declare const UiStars: ({ starsFilled, size, count, className, color }: IUiStars) => React.JSX.Element;
+export {};

package/components/UiStars/UiStars.js

@@ -0,0 +1,57 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import m from "classnames";
+import { EStarColors as r, EStarsSize as e } from "./_types.js";
+const p = {
+  [r.DEFAULT]: "text-accent-alt-600",
+  [r.PRIMARY]: "text-primary",
+  [r.WHITE]: "text-white",
+  [r.BLACK]: "text-black",
+  [r.CURRENT]: "text-current"
+}, L = {
+  [e.SM]: "w-sm h-sm",
+  [e.MD]: "w-md h-md",
+  [e.LG]: "w-lg h-lg"
+}, u = ({
+  starsFilled: C = 0,
+  size: f = e.MD,
+  count: i = 5,
+  className: d,
+  color: h = r.DEFAULT
+}) => {
+  const s = Math.min(Math.max(C, 0), i);
+  return /* @__PURE__ */ t("div", { className: m("flex", d), children: Array.from({
+    length: i
+  }, (x, l) => {
+    const c = l < Math.floor(s), o = !c && l === Math.floor(s);
+    let a = 0;
+    return o && (a = s % 1 * 100), /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ n(
+      "svg",
+      {
+        className: m(
+          L[f],
+          p[h]
+        ),
+        viewBox: "0 0 25 23",
+        children: [
+          o && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: `star-fill-${l}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "currentColor" }),
+            /* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "transparent" })
+          ] }) }),
+          /* @__PURE__ */ t(
+            "path",
+            {
+              d: "M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z",
+              fill: c ? "currentColor" : o ? `url(#star-fill-${l})` : "transparent"
+            }
+          )
+        ]
+      }
+    ) }, l);
+  }) });
+};
+export {
+  u as UiStars,
+  p as colorClasses
+};
+//# sourceMappingURL=UiStars.js.map

package/components/UiStars/UiStars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiStars.js","sources":["../../../src/components/UiStars/UiStars.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EStarsSize, EStarColors } from \"./_types\";\n\nexport const colorClasses = {\n\t[EStarColors.DEFAULT]: \"text-accent-alt-600\",\n\t[EStarColors.PRIMARY]: \"text-primary\",\n\t[EStarColors.WHITE]: \"text-white\",\n\t[EStarColors.BLACK]: \"text-black\",\n\t[EStarColors.CURRENT]: \"text-current\",\n};\n\ninterface IUiStars {\n\tstarsFilled?: number\n\tsize?: EStarsSize\n\tcount?: number\n\tcolor?: EStarColors\n\tclassName?: string\n}\n\nconst sizeClasses = {\n\t[EStarsSize.SM]: \"w-sm h-sm\",\n\t[EStarsSize.MD]: \"w-md h-md\",\n\t[EStarsSize.LG]: \"w-lg h-lg\"\n};\n\nexport const UiStars = ({\n\tstarsFilled=0,\n\tsize = EStarsSize.MD,\n\tcount = 5,\n\tclassName,\n\tcolor = EStarColors.DEFAULT\n}: IUiStars) => {\n\tconst filledStars = Math.min(Math.max(starsFilled, 0), count);\n\n\treturn (\n\t\t<div className={ cx(\"flex\", className) }>\n\t\t\t{ Array.from({\n\t\t\t\tlength: count\n\t\t\t}, (_, index) => {\n\t\t\t\tconst isCompletelyFilled = index < Math.floor(filledStars);\n\t\t\t\tconst isPartiallyFilled = !isCompletelyFilled && index === Math.floor(filledStars);\n\n\t\t\t\tlet filledPercentage = 0;\n\n\t\t\t\tif (isPartiallyFilled) {\n\t\t\t\t\tconst decimal = filledStars % 1;\n\t\t\t\t\tfilledPercentage = decimal * 100;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={ index } className=\"relative\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\t\t\tcolorClasses[color]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tviewBox=\"0 0 25 23\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isPartiallyFilled && (\n\t\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t\t<linearGradient id={ `star-fill-${index}` } x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"currentColor\" />\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"transparent\" />\n\t\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z\"\n\t\t\t\t\t\t\t\tfill={ isCompletelyFilled ? \"currentColor\" : (isPartiallyFilled ? `url(#star-fill-${index})` : \"transparent\") }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}) }\n\t\t</div>\n\t);\n};\n"],"names":["colorClasses","EStarColors","sizeClasses","EStarsSize","UiStars","starsFilled","size","count","className","color","filledStars","jsx","cx","_","index","isCompletelyFilled","isPartiallyFilled","filledPercentage","jsxs"],"mappings":";;;;AAIO,MAAMA,IAAe;AAAA,EAC3B,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,OAAO,GAAG;AACxB,GAUMC,IAAc;AAAA,EACnB,CAACC,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAClB,GAEaC,IAAU,CAAC;AAAA,EACvB,aAAAC,IAAY;AAAA,EACZ,MAAAC,IAAOH,EAAW;AAAA,EAClB,OAAAI,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC,IAAQR,EAAY;AACrB,MAAgB;AACT,QAAAS,IAAc,KAAK,IAAI,KAAK,IAAIL,GAAa,CAAC,GAAGE,CAAK;AAG3D,SAAA,gBAAAI,EAAC,SAAI,WAAYC,EAAG,QAAQJ,CAAS,GAClC,gBAAM,KAAK;AAAA,IACZ,QAAQD;AAAA,EAAA,GACN,CAACM,GAAGC,MAAU;AAChB,UAAMC,IAAqBD,IAAQ,KAAK,MAAMJ,CAAW,GACnDM,IAAoB,CAACD,KAAsBD,MAAU,KAAK,MAAMJ,CAAW;AAEjF,QAAIO,IAAmB;AAEvB,WAAID,MAEHC,IADgBP,IAAc,IACD,MAI7B,gBAAAC,EAAC,OAAkB,EAAA,WAAU,YAC5B,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYN;AAAA,UACXV,EAAYI,CAAI;AAAA,UAChBN,EAAaS,CAAK;AAAA,QACnB;AAAA,QACA,SAAQ;AAAA,QAEN,UAAA;AAAA,UAAAO,KACA,gBAAAL,EAAA,QAAA,EACA,UAAC,gBAAAO,EAAA,kBAAA,EAAe,IAAK,aAAaJ,CAAK,IAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KACnE,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,QAAS,GAAGM,CAAgB,KAAM,WAAU,gBAAe;AAAA,8BAChE,QAAK,EAAA,QAAS,GAAGA,CAAgB,KAAM,WAAU,cAAc,CAAA;AAAA,UAAA,EAAA,CACjE,EACD,CAAA;AAAA,UAED,gBAAAN;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAOI,IAAqB,iBAAkBC,IAAoB,kBAAkBF,CAAK,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAChG;AAAA,MAAA;AAAA,SAnBSA,CAqBX;AAAA,EAED,CAAA,GACF;AAEF;"}

package/components/UiStars/_types.d.ts

@@ -0,0 +1,12 @@
+export declare enum EStarsSize {
+    SM = "SM",
+    MD = "MD",
+    LG = "LG"
+}
+export declare enum EStarColors {
+    DEFAULT = "default",
+    WHITE = "white",
+    BLACK = "black",
+    CURRENT = "current",
+    PRIMARY = "primary"
+}

package/components/UiStars/_types.js

@@ -0,0 +1,6 @@
+var e = /* @__PURE__ */ ((M) => (M.SM = "SM", M.MD = "MD", M.LG = "LG", M))(e || {}), u = /* @__PURE__ */ ((M) => (M.DEFAULT = "default", M.WHITE = "white", M.BLACK = "black", M.CURRENT = "current", M.PRIMARY = "primary", M))(u || {});
+export {
+  u as EStarColors,
+  e as EStarsSize
+};
+//# sourceMappingURL=_types.js.map

package/components/UiStars/_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_types.js","sources":["../../../src/components/UiStars/_types.ts"],"sourcesContent":["export enum EStarsSize {\n\tSM = \"SM\",\n\tMD = \"MD\",\n\tLG = \"LG\"\n}\n\nexport enum EStarColors {\n\tDEFAULT = \"default\",\n\tWHITE = \"white\",\n\tBLACK = \"black\",\n\tCURRENT = \"current\",\n\tPRIMARY = \"primary\"\n}\n"],"names":["EStarsSize","EStarColors"],"mappings":"AAAY,IAAAA,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,KAAK,MACLA,EAAA,KAAK,MAHMA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACXA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WALCA,IAAAA,KAAA,CAAA,CAAA;"}

package/components/UiStars/index.d.ts

@@ -0,0 +1,3 @@
+export { UiStars } from './UiStars';
+export type { EStarsSize } from './_types';
+export { EStarColors } from './_types';

package/components/UiStars/index.js

@@ -0,0 +1,7 @@
+import { UiStars as t } from "./UiStars.js";
+import { EStarColors as e } from "./_types.js";
+export {
+  e as EStarColors,
+  t as UiStars
+};
+//# sourceMappingURL=index.js.map

package/components/UiStars/index.js.map

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