@clubmed/trident-ui 1.3.0-beta.4 → 1.3.0-beta.5

package/molecules/Forms/NumberField.js

@@ -1,121 +1,121 @@
-import { jsx as m, jsxs as C } from "react/jsx-runtime";
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
 import { c as g } from "../../chunks/index.js";
-import { useId as y } from "react";
-import { useValue as I } from "../../hooks/useValue.js";
+import { useId as I } from "react";
+import { useValue as y } from "../../hooks/useValue.js";
 import { Button as v } from "../Buttons/Button.js";
-import { FormControl as w } from "./FormControl.js";
-const F = { width: "28px", height: "28px" };
-function S(o) {
-  const e = y(), {
-    id: n = e,
-    name: r = n,
-    value: d = 0,
-    onChange: c,
-    min: t = 0,
-    max: i = 10,
-    disabled: l = !1,
+import { FormControl as F } from "./FormControl.js";
+const V = { width: "28px", height: "28px" };
+function T(c) {
+  const e = I(), {
+    id: i = e,
+    name: n = i,
+    value: o = 0,
+    onChange: m,
+    min: r = 0,
+    max: a = 10,
+    disabled: s = !1,
     dataTestId: u = "NumberField",
     ...f
-  } = o, { value: a, setValue: s } = I({
-    name: r,
-    defaultValue: d,
+  } = c, { value: t, setValue: l } = y({
+    name: n,
+    defaultValue: o,
     formatter: Number,
-    onChange: c
+    onChange: m
   });
   return {
     ...f,
-    id: n,
-    min: t,
-    max: i,
-    name: r,
-    value: a,
+    id: i,
+    min: r,
+    max: a,
+    name: n,
+    value: t,
     dataTestId: u,
-    disabled: l,
+    disabled: s,
     handleChange: (h) => {
-      const N = Number(h.target.value);
-      N >= t && N <= i && s(Number(N));
+      const x = Number(h.target.value);
+      x >= r && x <= a && l(Number(x));
     },
     increase: () => {
-      a < i && s(a + 1);
+      t < a && l(t + 1);
     },
     decrease: () => {
-      a > t && s(a - 1);
+      t > r && l(t - 1);
     }
   };
 }
-const k = (o) => {
+const M = (c) => {
   const {
     disabled: e,
-    min: n,
-    max: r,
-    label: d,
-    description: c,
-    id: t,
-    dataTestId: i,
-    value: l,
+    min: i,
+    max: n,
+    label: o,
+    description: m,
+    id: r,
+    dataTestId: a,
+    value: s,
     handleChange: u,
     increase: f,
-    decrease: a,
-    errorMessage: s,
-    validationStatus: x,
+    decrease: t,
+    errorMessage: l,
+    validationStatus: N,
     hideRequiredStar: p,
     required: b,
     ...h
-  } = S(o);
-  return /* @__PURE__ */ m(
-    w,
+  } = T(c);
+  return /* @__PURE__ */ d(
+    F,
     {
-      id: t,
-      label: d,
-      description: c,
-      className: g("flex items-center justify-between", o.className),
+      id: r,
+      label: o,
+      description: m,
+      className: g("flex items-center justify-between", c.className),
       dataName: "NumberField",
-      dataTestId: i,
-      errorMessage: s,
-      validationStatus: x,
+      dataTestId: a,
+      errorMessage: l,
+      validationStatus: N,
       disabled: e,
       required: b,
       hideRequiredStar: p,
       layout: "vertical",
       children: /* @__PURE__ */ C("div", { className: "flex items-center gap-x-8", children: [
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ d(
           v,
           {
-            theme: "yellow",
-            onClick: a,
-            variant: "icon",
-            disabled: l <= n || e,
+            onClick: t,
+            variant: "circle",
+            disabled: s <= i || e,
             icon: "MinusDefault",
-            label: "MINUS"
+            "aria-label": "Decrease",
+            "data-testid": `${a}-decrease`
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ d(
           "input",
           {
             ...h,
             className: g("text-b2 text-center font-normal outline-none", {
               "bg-pearl text-grey": e
             }),
-            style: F,
+            style: V,
             type: "number",
-            id: t,
+            id: r,
             onChange: u,
             disabled: e,
             required: b,
-            value: l,
-            min: n,
-            max: r
+            value: s,
+            min: i,
+            max: n
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ d(
           v,
           {
-            theme: "yellow",
             onClick: f,
-            variant: "icon",
-            disabled: l >= r || e,
+            variant: "circle",
+            "aria-label": "Increase",
+            disabled: s >= n || e,
             icon: "PlusDefault",
-            label: "PLUS"
+            "data-testid": `${a}-increase`
           }
         )
       ] })
@@ -123,7 +123,7 @@ const k = (o) => {
   );
 };
 export {
-  k as NumberField,
-  S as useNumberField
+  M as NumberField,
+  T as useNumberField
 };
 //# sourceMappingURL=NumberField.js.map

package/molecules/Forms/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { type ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          theme=\"yellow\"\n          onClick={decrease}\n          variant=\"icon\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          // TODO have this from prop at some time\n          label=\"MINUS\"\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          theme=\"yellow\"\n          onClick={increase}\n          variant=\"icon\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          // TODO have this from prop at some time\n          label=\"PLUS\"\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","hideRequiredStar","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sources":["../../../lib/molecules/Forms/NumberField.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { type ChangeEvent, useId } from 'react';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { Button } from '../Buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={classnames('flex items-center justify-between', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          onClick={decrease}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label=\"Decrease\"\n          data-testid={`${dataTestId}-decrease`}\n        />\n        <input\n          {...rest}\n          className={classnames('text-b2 text-center font-normal outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          onClick={increase}\n          variant=\"circle\"\n          aria-label=\"Increase\"\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["INPUT_STYLE","useNumberField","props","internalId","useId","id","name","initialValue","onChange","min","max","disabled","dataTestId","rest","value","setValue","useValue","e","newValue","NumberField","label","description","handleChange","increase","decrease","errorMessage","validationStatus","hideRequiredStar","required","jsx","FormControl","classnames","jsxs","Button"],"mappings":"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"}

package/molecules/Pagination.d.ts

@@ -1,5 +1,6 @@
 import { type FunctionComponent, type HTMLAttributes } from 'react';
 import { generatePagination } from './Pagination.helper';
+import type { ScrollerLabels } from '../types/ScrollerLabels';
 export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /**
      * The current page number (must be >= 1)
@@ -28,7 +29,7 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onCh
     /**
      * UI Labels
      */
-    labels?: Record<'next' | 'previous', string>;
+    labels: ScrollerLabels;
     /**
      * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).
      */

package/molecules/Pagination.js

@@ -1,36 +1,36 @@
 "use client";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { c as a } from "../chunks/index.js";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { c as l } from "../chunks/index.js";
 import { Fragment as k } from "react";
-import { showMobileEllipsis as b, hidePageButtonForMobile as N, generatePagination as y } from "./Pagination.helper.js";
+import { showMobileEllipsis as b, hidePageButtonForMobile as y, generatePagination as N } from "./Pagination.helper.js";
 import { Button as x } from "./Buttons/Button.js";
 import { Icon as h } from "@clubmed/trident-icons";
-const g = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+const j = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
   "div",
   {
     "aria-controls": "page-content",
-    className: "text-b3 mx-8 ml-4 hidden size-48 items-center justify-center text-base font-semibold text-black md:flex",
+    className: "text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex",
     children: "…"
   }
 ) }, "desktop-ellipsis"), u = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
   "div",
   {
     "aria-controls": "page-content",
-    className: "text-b3 mx-8 ml-4 flex size-48 items-center justify-center text-base font-semibold text-black md:hidden",
+    className: "text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden",
     children: "…"
   }
 ) }, "mobile-ellipsis"), E = ({
   defaultPage: i,
-  buttonClassName: o = "md:mr-32",
-  buttonLabelClassName: c = "md:flex",
+  buttonClassName: c = "md:mr-32",
+  buttonLabelClassName: o = "md:flex",
   className: p,
-  onChange: s,
-  paginationFactory: v = y,
-  count: l,
-  labels: m = {},
+  labels: d = {},
+  onChange: n,
+  paginationFactory: v = N,
+  count: r,
   ...f
 }) => {
-  const d = v(i, l);
+  const m = v(i, r);
   return /* @__PURE__ */ e(
     "nav",
     {
@@ -38,83 +38,105 @@ const g = () => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
       "data-name": "Pagination",
       role: "navigation",
       "aria-label": "pagination navigation",
-      className: a("border-t-sand flex justify-center", p),
-      children: /* @__PURE__ */ e("ul", { className: "mt-12 flex", children: d.map((t, r) => {
+      className: l("flex justify-center border-t-sand", p),
+      children: /* @__PURE__ */ e("ul", { className: "mt-12 flex", children: m.map((t, a) => {
         switch (t.type) {
           case "pageNumber":
-            return /* @__PURE__ */ n(k, { children: [
-              t.value === l && b(t.value, i, l) && /* @__PURE__ */ e(u, {}),
+            return /* @__PURE__ */ s(k, { children: [
+              t.value === r && b(t.value, i, r) && /* @__PURE__ */ e(u, {}),
               /* @__PURE__ */ e(
                 "li",
                 {
-                  className: a("mr-2", {
-                    "hidden md:flex": N(t.value, i, l)
+                  className: l("mr-2", {
+                    "hidden md:flex": y(t.value, i, r)
                   }),
                   children: t.value === i ? /* @__PURE__ */ e(
                     x,
                     {
-                      label: t.value.toString(),
-                      theme: "black",
                       "aria-current": "page",
-                      variant: "monogram",
-                      className: "text-white"
+                      className: "text-white",
+                      color: "black",
+                      variant: "circle",
+                      children: t.value.toString()
                     }
                   ) : /* @__PURE__ */ e(
                     x,
                     {
-                      label: t.value.toString(),
-                      onClick: () => s(t.value),
-                      theme: "white",
-                      variant: "monogram",
-                      className: a("size-48 items-center", {
-                        "mx-8 flex shrink-0 cursor-pointer justify-center self-start": r === d.length - 1
-                      })
+                      className: l("size-48 items-center", {
+                        "mx-8 flex shrink-0 cursor-pointer justify-center self-start": a === m.length - 1
+                      }),
+                      onClick: () => n(t.value),
+                      color: "white",
+                      variant: "circle",
+                      children: t.value.toString()
                     }
                   )
                 }
               ),
-              t.value === 1 && b(t.value, i, l) && /* @__PURE__ */ e(u, {})
-            ] }, `pagination-pageNumber-${r}`);
+              t.value === 1 && b(t.value, i, r) && /* @__PURE__ */ e(u, {})
+            ] }, `pagination-pageNumber-${a}`);
           case "ellipsis":
-            return /* @__PURE__ */ e(g, {}, `pagination-ellipsis-${r}`);
+            return /* @__PURE__ */ e(j, {}, `pagination-ellipsis-${a}`);
           case "previousButton":
-            return /* @__PURE__ */ e("li", { className: a(o), children: /* @__PURE__ */ n(
+            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
               "button",
               {
                 "data-action": "previous",
                 "aria-controls": "page-content",
                 "aria-label": `page ${i - 1}`,
-                className: a(
-                  "text:black hocus:text-black-active active:text-black-active text-b3 disabled:text-grey mx-8 flex h-48 shrink-0 items-center justify-center self-start text-base font-semibold",
+                className: l(
+                  "text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
                   {
-                    "disabled:text-grey": t.disabled
+                    "pointer-events-none disabled:text-grey": t.disabled
                   }
                 ),
-                onClick: () => s(i - 1),
                 disabled: t.disabled,
+                onClick: () => n(i - 1),
+                type: "button",
                 children: [
                   /* @__PURE__ */ e(h, { name: "ArrowDefaultLeft", width: "30px" }),
-                  /* @__PURE__ */ e("span", { className: a("ml-4 hidden border-b", c), children: m.previous || "Previous" })
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: l(
+                        "ml-4 hidden border-b",
+                        { "border-black": !t.disabled },
+                        o
+                      ),
+                      children: d.previous
+                    }
+                  )
                 ]
               }
             ) }, "pagination-labels.previous");
           case "nextButton":
-            return /* @__PURE__ */ e("li", { className: a(o), children: /* @__PURE__ */ n(
+            return /* @__PURE__ */ e("li", { className: l(c), children: /* @__PURE__ */ s(
               "button",
               {
-                "data-action": "next",
                 "aria-controls": "page-content",
                 "aria-label": `page ${i + 1}`,
-                className: a(
-                  "text:black hocus:text-black-active active:text-black-active text-b3 disabled:text-grey mx-8 mb-5 flex h-48 shrink-0 items-center justify-center self-start text-base font-semibold",
+                className: l(
+                  "text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active",
                   {
-                    "disabled:text-grey": t.disabled
+                    "pointer-events-none disabled:text-grey": t.disabled
                   }
                 ),
-                onClick: () => s(i + 1),
+                "data-action": "next",
                 disabled: t.disabled,
+                onClick: () => n(i + 1),
+                type: "button",
                 children: [
-                  /* @__PURE__ */ e("span", { className: a("ml-4 hidden border-b", c), children: m.next || "Next" }),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: l(
+                        "ml-4 hidden border-b",
+                        { "border-black": !t.disabled },
+                        o
+                      ),
+                      children: d.next
+                    }
+                  ),
                   /* @__PURE__ */ e(h, { name: "ArrowDefaultRight", width: "30px" })
                 ]
               }

package/molecules/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../lib/molecules/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from '@/molecules/Buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels?: Record<'next' | 'previous', string>;\n\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-b3 mx-8 ml-4 hidden size-48 items-center justify-center text-base font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-b3 mx-8 ml-4 flex size-48 items-center justify-center text-base font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  labels = {},\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={classnames('border-t-sand flex justify-center', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={classnames('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        label={page.value.toString()}\n                        theme=\"black\"\n                        aria-current=\"page\"\n                        variant=\"monogram\"\n                        className=\"text-white\"\n                      />\n                    ) : (\n                      <Button\n                        label={page.value.toString()}\n                        onClick={() => onChange(page.value)}\n                        theme=\"white\"\n                        variant=\"monogram\"\n                        className={classnames('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                      />\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={classnames(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={classnames(\n                      'text:black hocus:text-black-active active:text-black-active text-b3 disabled:text-grey mx-8 flex h-48 shrink-0 items-center justify-center self-start text-base font-semibold',\n                      {\n                        'disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    onClick={() => onChange(defaultPage - 1)}\n                    disabled={page.disabled}\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span className={classnames('ml-4 hidden border-b', buttonLabelClassName)}>\n                      {labels.previous || 'Previous'}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={classnames(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    data-action=\"next\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={classnames(\n                      'text:black hocus:text-black-active active:text-black-active text-b3 disabled:text-grey mx-8 mb-5 flex h-48 shrink-0 items-center justify-center self-start text-base font-semibold',\n                      {\n                        'disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    onClick={() => onChange(defaultPage + 1)}\n                    disabled={page.disabled}\n                  >\n                    <span className={classnames('ml-4 hidden border-b', buttonLabelClassName)}>\n                      {labels.next || 'Next'}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["EllipsisDesktop","jsx","EllipsisMobile","Pagination","defaultPage","buttonClassName","buttonLabelClassName","className","onChange","paginationFactory","generatePagination","count","labels","props","pagination","classnames","page","index","Fragment","showMobileEllipsis","hidePageButtonForMobile","Button","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../../lib/molecules/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { Fragment, type FunctionComponent, type HTMLAttributes } from 'react';\n\nimport {\n  showMobileEllipsis,\n  generatePagination,\n  hidePageButtonForMobile,\n} from './Pagination.helper';\nimport { Button } from '@/molecules/Buttons/Button';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { ScrollerLabels } from '@/types/ScrollerLabels';\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * The current page number (must be >= 1)\n   */\n  defaultPage: number;\n  /**\n   * The total pages number\n   */\n  count: number;\n  /**\n   * A callback function to handle page changes.\n   */\n  onChange: (page: number) => void;\n  /**\n   * Additional class names for the previous & next buttons\n   */\n  buttonClassName?: string;\n  /**\n   * Additional class names for the label of the previous & next buttons\n   */\n  buttonLabelClassName?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * UI Labels\n   */\n  labels: ScrollerLabels;\n  /**\n   * A pagination factory to generate an array of Pagination elements (pageNumber, ellipsis, next button, previous button).\n   */\n  paginationFactory?: typeof generatePagination;\n}\n\nconst EllipsisDesktop = () => {\n  return (\n    <li key=\"desktop-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 hidden size-48 items-center justify-center text-b3 font-semibold text-black md:flex\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nconst EllipsisMobile = () => {\n  return (\n    <li key=\"mobile-ellipsis\">\n      <div\n        aria-controls=\"page-content\"\n        className=\"text-base mx-8 ml-4 flex size-48 items-center justify-center text-b3 font-semibold text-black md:hidden\"\n      >\n        &#8230;\n      </div>\n    </li>\n  );\n};\n\nexport const Pagination: FunctionComponent<PaginationProps> = ({\n  defaultPage,\n  buttonClassName = 'md:mr-32',\n  buttonLabelClassName = 'md:flex',\n  className,\n  labels = {},\n  onChange,\n  paginationFactory = generatePagination,\n  count,\n  ...props\n}) => {\n  const pagination = paginationFactory(defaultPage, count);\n\n  return (\n    <nav\n      {...props}\n      data-name=\"Pagination\"\n      role=\"navigation\"\n      aria-label=\"pagination navigation\"\n      className={classnames('flex justify-center border-t-sand', className)}\n    >\n      <ul className=\"mt-12 flex\">\n        {pagination.map((page, index) => {\n          switch (page.type) {\n            case 'pageNumber':\n              return (\n                <Fragment key={`pagination-pageNumber-${index}`}>\n                  {page.value === count && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                  <li\n                    className={classnames('mr-2', {\n                      'hidden md:flex': hidePageButtonForMobile(page.value, defaultPage, count),\n                    })}\n                  >\n                    {page.value === defaultPage ? (\n                      <Button\n                        aria-current=\"page\"\n                        className=\"text-white\"\n                        color=\"black\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    ) : (\n                      <Button\n                        className={classnames('size-48 items-center', {\n                          'mx-8 flex shrink-0 cursor-pointer justify-center self-start':\n                            index === pagination.length - 1,\n                        })}\n                        onClick={() => onChange(page.value)}\n                        color=\"white\"\n                        variant=\"circle\"\n                      >\n                        {page.value.toString()}\n                      </Button>\n                    )}\n                  </li>\n                  {page.value === 1 && showMobileEllipsis(page.value, defaultPage, count) && (\n                    <EllipsisMobile />\n                  )}\n                </Fragment>\n              );\n\n            case 'ellipsis':\n              return <EllipsisDesktop key={`pagination-ellipsis-${index}`} />;\n\n            case 'previousButton':\n              return (\n                <li key=\"pagination-labels.previous\" className={classnames(buttonClassName)}>\n                  <button\n                    data-action=\"previous\"\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage - 1}`}\n                    className={classnames(\n                      'text:black text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage - 1)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"ArrowDefaultLeft\" width=\"30px\" />\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.previous}\n                    </span>\n                  </button>\n                </li>\n              );\n\n            case 'nextButton':\n              return (\n                <li className={classnames(buttonClassName)} key=\"pagination-labels.next\">\n                  <button\n                    aria-controls=\"page-content\"\n                    aria-label={`page ${defaultPage + 1}`}\n                    className={classnames(\n                      'text:black mb-5 text-base mx-8 flex h-48 shrink-0 items-center justify-center self-start text-b3 font-semibold active:text-black-active disabled:text-grey hocus:text-black-active',\n                      {\n                        'pointer-events-none disabled:text-grey': page.disabled,\n                      },\n                    )}\n                    data-action=\"next\"\n                    disabled={page.disabled}\n                    onClick={() => onChange(defaultPage + 1)}\n                    type=\"button\"\n                  >\n                    <span\n                      className={classnames(\n                        'ml-4 hidden border-b',\n                        { 'border-black': !page.disabled },\n                        buttonLabelClassName,\n                      )}\n                    >\n                      {labels.next}\n                    </span>\n                    <Icon name=\"ArrowDefaultRight\" width=\"30px\" />\n                  </button>\n                </li>\n              );\n\n            default:\n              return null;\n          }\n        })}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["EllipsisDesktop","jsx","EllipsisMobile","Pagination","defaultPage","buttonClassName","buttonLabelClassName","className","labels","onChange","paginationFactory","generatePagination","count","props","pagination","classnames","page","index","Fragment","showMobileEllipsis","hidePageButtonForMobile","Button","jsxs","Icon"],"mappings":"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"}

package/molecules/Popin.js

@@ -3,44 +3,44 @@ import { useTransition as f, config as p, animated as x } from "@react-spring/we
 import { Backdrop as h } from "./Backdrop.js";
 import { Button as u } from "./Buttons/Button.js";
 import { c as v } from "../chunks/index.js";
-const b = ({ closeLabel: e, onClose: o }) => /* @__PURE__ */ t(
+const b = ({ closeLabel: e, onClose: r }) => /* @__PURE__ */ t(
   u,
   {
-    theme: "black",
-    variant: "icon",
+    color: "black",
+    variant: "circle",
     icon: "CrossDefault",
     className: "mx-auto",
-    label: e,
-    onClick: o
+    "aria-label": e,
+    onClick: r
   }
 ), j = ({
   title: e,
-  children: o,
-  closeLabel: c,
+  children: r,
+  closeLabel: n,
   onClose: a,
-  isVisible: r,
+  isVisible: o,
   className: i = "sm:w-360",
-  Footer: n = b
+  Footer: c = b
 }) => {
-  const s = f(r, {
+  const s = f(o, {
     from: { scale: 0.3, opacity: 0.3 },
     enter: { scale: 1, opacity: 1 },
     leave: { scale: 0, opacity: 0 },
-    config: r ? { tension: 120, friction: 20 } : p.gentle
+    config: o ? { tension: 120, friction: 20 } : p.gentle
   });
-  return /* @__PURE__ */ t(h, { isVisible: r, onClose: a, children: s(
-    (m, l) => l && /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(h, { isVisible: o, onClose: a, children: s(
+    (l, m) => m && /* @__PURE__ */ t(
       x.div,
       {
         className: v(
           "border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white",
           i
         ),
-        style: m,
+        style: l,
         children: /* @__PURE__ */ d("div", { className: "p-40 text-center max-h-[90vh] flex flex-col", children: [
           e && /* @__PURE__ */ t("div", { className: "mt-12 text-h5 text-start font-serif", children: e }),
-          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: o }),
-          n && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(n, { closeLabel: c, onClose: a }) })
+          /* @__PURE__ */ t("div", { className: "mt-12 mb-40 last:mb-0 text-start overflow-auto", children: r }),
+          c && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(c, { closeLabel: n, onClose: a }) })
         ] })
       }
     )

package/molecules/Popin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface PopinFooterProps {\n  closeLabel: string;\n  onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n  return (\n    <Button\n      theme=\"black\"\n      variant=\"icon\"\n      icon=\"CrossDefault\"\n      className=\"mx-auto\"\n      label={closeLabel}\n      onClick={onClose}\n    />\n  );\n};\n\nexport interface PopinProps {\n  title: ReactNode;\n  closeLabel: string;\n  onClose: ClosePopinCallback;\n  isVisible: boolean;\n  className?: string;\n  showCloseButton?: boolean;\n  Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n  title,\n  children,\n  closeLabel,\n  onClose,\n  isVisible,\n  className = 'sm:w-360',\n  Footer = PopinFooter,\n}) => {\n  const transitions = useTransition(isVisible, {\n    from: { scale: 0.3, opacity: 0.3 },\n    enter: { scale: 1, opacity: 1 },\n    leave: { scale: 0, opacity: 0 },\n    config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n  });\n\n  return (\n    <Backdrop isVisible={isVisible} onClose={onClose}>\n      {transitions(\n        (style, item) =>\n          item && (\n            <animated.div\n              className={classnames(\n                'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n                className,\n              )}\n              style={style}\n            >\n              <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n                {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n                <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n                {Footer && (\n                  <div>\n                    <Footer closeLabel={closeLabel} onClose={onClose} />\n                  </div>\n                )}\n              </div>\n            </animated.div>\n          ),\n      )}\n    </Backdrop>\n  );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","jsxs"],"mappings":";;;;;AAcA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAOH;AAAA,IACP,SAASC;AAAA,EAAA;AAAA,GAeFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAASV;AACX,MAAM;AACE,QAAAW,IAAcC,EAAcJ,GAAW;AAAA,IAC3C,MAAM,EAAE,OAAO,KAAK,SAAS,IAAI;AAAA,IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,QAAQA,IAAY,EAAE,SAAS,KAAK,UAAU,GAAA,IAAOK,EAAO;AAAA,EAAA,CAC7D;AAGC,SAAA,gBAAAV,EAACW,GAAS,EAAA,WAAAN,GAAsB,SAAAN,GAC7B,UAAAS;AAAA,IACC,CAACI,GAAOC,MACNA,KACE,gBAAAb;AAAA,MAACc,EAAS;AAAA,MAAT;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAT;AAAA,QACF;AAAA,QACA,OAAAM;AAAA,QAEA,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,+CACZ,UAAA;AAAA,UAAAb,KAAU,gBAAAH,EAAA,OAAA,EAAI,WAAU,uCAAuC,UAAMG,GAAA;AAAA,UACrE,gBAAAH,EAAA,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAS,CAAA;AAAA,UACzEG,KACE,gBAAAP,EAAA,OAAA,EACC,4BAACO,GAAO,EAAA,YAAAT,GAAwB,SAAAC,EAAkB,CAAA,GACpD;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAGR,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Popin.js","sources":["../../lib/molecules/Popin.tsx"],"sourcesContent":["import { animated, config, useTransition } from '@react-spring/web';\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';\n\nimport { Backdrop } from './Backdrop';\nimport { Button } from './Buttons/Button';\nimport classnames from 'classnames';\n\nexport type ClosePopinCallback = () => void;\n\ninterface PopinFooterProps {\n  closeLabel: string;\n  onClose: ClosePopinCallback;\n}\n\nconst PopinFooter = ({ closeLabel, onClose }: PopinFooterProps) => {\n  return (\n    <Button\n      color=\"black\"\n      variant=\"circle\"\n      icon=\"CrossDefault\"\n      className=\"mx-auto\"\n      aria-label={closeLabel}\n      onClick={onClose}\n    />\n  );\n};\n\nexport interface PopinProps {\n  title: ReactNode;\n  closeLabel: string;\n  onClose: ClosePopinCallback;\n  isVisible: boolean;\n  className?: string;\n  showCloseButton?: boolean;\n  Footer?: FunctionComponent<PopinFooterProps> | false;\n}\n\nexport const Popin: FunctionComponent<PropsWithChildren<PopinProps>> = ({\n  title,\n  children,\n  closeLabel,\n  onClose,\n  isVisible,\n  className = 'sm:w-360',\n  Footer = PopinFooter,\n}) => {\n  const transitions = useTransition(isVisible, {\n    from: { scale: 0.3, opacity: 0.3 },\n    enter: { scale: 1, opacity: 1 },\n    leave: { scale: 0, opacity: 0 },\n    config: isVisible ? { tension: 120, friction: 20 } : config.gentle,\n  });\n\n  return (\n    <Backdrop isVisible={isVisible} onClose={onClose}>\n      {transitions(\n        (style, item) =>\n          item && (\n            <animated.div\n              className={classnames(\n                'border-lightGrey rounded-16 pointer-events-auto mx-20 w-full border bg-white',\n                className,\n              )}\n              style={style}\n            >\n              <div className=\"p-40 text-center max-h-[90vh] flex flex-col\">\n                {title && <div className=\"mt-12 text-h5 text-start font-serif\">{title}</div>}\n                <div className=\"mt-12 mb-40 last:mb-0 text-start overflow-auto\">{children}</div>\n                {Footer && (\n                  <div>\n                    <Footer closeLabel={closeLabel} onClose={onClose} />\n                  </div>\n                )}\n              </div>\n            </animated.div>\n          ),\n      )}\n    </Backdrop>\n  );\n};\n"],"names":["PopinFooter","closeLabel","onClose","jsx","Button","Popin","title","children","isVisible","className","Footer","transitions","useTransition","config","Backdrop","style","item","animated","classnames","jsxs"],"mappings":";;;;;AAcA,MAAMA,IAAc,CAAC,EAAE,YAAAC,GAAY,SAAAC,QAE/B,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,cAAYH;AAAA,IACZ,SAASC;AAAA,EAAA;AAAA,GAeFG,IAA0D,CAAC;AAAA,EACtE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAN;AAAA,EACA,SAAAC;AAAA,EACA,WAAAM;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAASV;AACX,MAAM;AACE,QAAAW,IAAcC,EAAcJ,GAAW;AAAA,IAC3C,MAAM,EAAE,OAAO,KAAK,SAAS,IAAI;AAAA,IACjC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,IAC9B,QAAQA,IAAY,EAAE,SAAS,KAAK,UAAU,GAAA,IAAOK,EAAO;AAAA,EAAA,CAC7D;AAGC,SAAA,gBAAAV,EAACW,GAAS,EAAA,WAAAN,GAAsB,SAAAN,GAC7B,UAAAS;AAAA,IACC,CAACI,GAAOC,MACNA,KACE,gBAAAb;AAAA,MAACc,EAAS;AAAA,MAAT;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAT;AAAA,QACF;AAAA,QACA,OAAAM;AAAA,QAEA,UAAA,gBAAAI,EAAC,OAAI,EAAA,WAAU,+CACZ,UAAA;AAAA,UAAAb,KAAU,gBAAAH,EAAA,OAAA,EAAI,WAAU,uCAAuC,UAAMG,GAAA;AAAA,UACrE,gBAAAH,EAAA,OAAA,EAAI,WAAU,kDAAkD,UAAAI,EAAS,CAAA;AAAA,UACzEG,KACE,gBAAAP,EAAA,OAAA,EACC,4BAACO,GAAO,EAAA,YAAAT,GAAwB,SAAAC,EAAkB,CAAA,GACpD;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAGR,EAAA,CAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-beta.4",
+  "version": "1.3.0-beta.5",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -31,16 +31,16 @@
       "import": "./atoms/Icons/index.js",
       "default": "./atoms/Icons/index.js"
     },
-    "./atoms/Icons/svg-use": {
-      "types": "./atoms/Icons/svg-use/index.d.ts",
-      "import": "./atoms/Icons/svg-use/index.js",
-      "default": "./atoms/Icons/svg-use/index.js"
-    },
     "./atoms/Icons/svg": {
       "types": "./atoms/Icons/svg/index.d.ts",
       "import": "./atoms/Icons/svg/index.js",
       "default": "./atoms/Icons/svg/index.js"
     },
+    "./atoms/Icons/svg-use": {
+      "types": "./atoms/Icons/svg-use/index.d.ts",
+      "import": "./atoms/Icons/svg-use/index.js",
+      "default": "./atoms/Icons/svg-use/index.js"
+    },
     "./molecules/Tabs": {
       "types": "./molecules/Tabs/index.d.ts",
       "import": "./molecules/Tabs/index.js",
@@ -51,16 +51,16 @@
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
-    "./molecules/Forms/Radios": {
-      "types": "./molecules/Forms/Radios/index.d.ts",
-      "import": "./molecules/Forms/Radios/index.js",
-      "default": "./molecules/Forms/Radios/index.js"
-    },
     "./molecules/Forms/Password": {
       "types": "./molecules/Forms/Password/index.d.ts",
       "import": "./molecules/Forms/Password/index.js",
       "default": "./molecules/Forms/Password/index.js"
     },
+    "./molecules/Forms/Radios": {
+      "types": "./molecules/Forms/Radios/index.d.ts",
+      "import": "./molecules/Forms/Radios/index.js",
+      "default": "./molecules/Forms/Radios/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",