@tecsinapse/cortex-react 1.13.1 → 1.13.3

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Progress = require('./Progress.js');
 
 const ProgressBar = ({
@@ -8,7 +8,7 @@ const ProgressBar = ({
   intent = "default",
   infinite = false
 }) => {
-  return /* @__PURE__ */ React.createElement(Progress.Progress, { value, intent, infinite });
+  return /* @__PURE__ */ jsxRuntime.jsx(Progress.Progress, { value, intent, infinite });
 };
 
 exports.ProgressBar = ProgressBar;

package/dist/cjs/components/RadioButton.js

@@ -1,20 +1,23 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 
 const { container, input, label: labelStyle } = cortexCore.radioButtonStyles();
 const RadioButton = React.forwardRef(
   ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: container({ reversed }),
         ref,
-        "data-testid": "radio-button-container"
-      },
-      /* @__PURE__ */ React.createElement("input", { id, type: "radio", className: input(), ...rest }),
-      label ? /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+        "data-testid": "radio-button-container",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { id, type: "radio", className: input(), ...rest }),
+          label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: labelStyle(), children: label }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+        ]
+      }
     );
   }
 );

package/dist/cjs/components/ScrollableDigitSelector.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+
+const formatValue = (val) => {
+  return val.toString().padStart(2, "0");
+};
+const ScrollableDigitSelector = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1
+}) => {
+  const containerRef = React.useRef(null);
+  const values = React.useMemo(() => {
+    const vals = [];
+    for (let i = min; i <= max; i += step) {
+      vals.push(i);
+    }
+    return vals;
+  }, [min, max, step]);
+  const scrollToValue = (targetValue) => {
+    if (containerRef.current) {
+      const index = values.indexOf(targetValue);
+      if (index !== -1) {
+        const itemHeight = 27;
+        const scrollTop = index * itemHeight;
+        containerRef.current.scrollTop = scrollTop;
+        containerRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+      }
+    }
+  };
+  React.useEffect(() => {
+    scrollToValue(value);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex flex-col items-center gap-y-micro p-micro overflow-auto",
+      ref: containerRef,
+      children: values.map((val) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => onChange(val), className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: clsx(
+            "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
+            value === val && "bg-primary-medium text-white"
+          ),
+          children: formatValue(val)
+        }
+      ) }) }, val))
+    }
+  );
+};
+
+exports.ScrollableDigitSelector = ScrollableDigitSelector;

package/dist/cjs/components/Select/Content.js

@@ -1,11 +1,12 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 
 const Content = ({ children, className }) => {
   const ref = React.useRef(null);
-  return /* @__PURE__ */ React.createElement("div", { className: clsx("w-full relative", className), ref }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-full relative", className), ref, children });
 };
 
 exports.Content = Content;

package/dist/cjs/components/Select/CustomMultiOption.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 var useMultiSelectOption = require('./useMultiSelectOption.js');
 
 const SelectCustomMultiOption = ({
@@ -14,24 +14,26 @@ const SelectCustomMultiOption = ({
     option,
     onSelect
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
       onClick: onClickOption,
       className: cortexCore.option({ grouped }),
-      role: "option"
-    },
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: isChecked,
-        className: cortexCore.checkbox({ className: "pointer-events-none" }),
-        onChange: () => false,
-        ref: inputRef
-      }
-    ),
-    children
+      role: "option",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            className: cortexCore.checkbox({ className: "pointer-events-none" }),
+            onChange: () => false,
+            ref: inputRef
+          }
+        ),
+        children
+      ]
+    }
   );
 };
 

package/dist/cjs/components/Select/CustomOption.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var context = require('./context.js');
 var cortexCore = require('@tecsinapse/cortex-core');
@@ -11,7 +12,7 @@ const SelectCustomOption = ({
   children
 }) => {
   const { keyExtractor, value } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
       onClick: (e) => {
@@ -22,9 +23,9 @@ const SelectCustomOption = ({
         selected: value && keyExtractor(value) === keyExtractor(option),
         grouped
       }),
-      role: "option"
-    },
-    children
+      role: "option",
+      children
+    }
   );
 };
 

package/dist/cjs/components/Select/GroupedOptions.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 require('@internationalized/date');
@@ -31,15 +32,18 @@ const SelectGroupedOptions = ({
     },
     [onSelect]
   );
-  return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
-    Option.SelectOption,
-    {
-      grouped: true,
-      option,
-      key: keyExtractor(option),
-      onSelectOption: handleSelect
-    }
-  )))));
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "select", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+    value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.SelectOption,
+      {
+        grouped: true,
+        option,
+        onSelectOption: handleSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }, key)) });
 };
 
 exports.SelectGroupedOptions = SelectGroupedOptions;

package/dist/cjs/components/Select/MultiCheckAllOptions.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var context = require('./context.js');
@@ -36,15 +37,18 @@ const SelectMultiCheckAllOptions = ({
       onSelect?.(updateSelected);
     }
   }, [options, onSelect]);
-  return options?.length ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "checkbox",
-      className: cortexCore.checkbox(),
-      onChange: () => void 0,
-      checked: isChecked
-    }
-  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  return options?.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cortexCore.option(), onClick: checkAll, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: cortexCore.checkbox(),
+        onChange: () => void 0,
+        checked: isChecked
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: checkAllLabel })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 exports.SelectMultiCheckAllOptions = SelectMultiCheckAllOptions;

package/dist/cjs/components/Select/MultiGroupedOptions.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 require('@internationalized/date');
@@ -28,21 +29,26 @@ const SelectMultiGroupedOptions = ({
     () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
     [_options]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     context.SelectMultiOptionsContext.Provider,
     {
-      value: { onSelect, options: flattenMap }
-    },
-    children,
-    isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
-      MultiOption.SelectMultiOption,
-      {
-        grouped: true,
-        option,
-        key: keyExtractor(option),
-        onSelect
-      }
-    )))))
+      value: { onSelect, options: flattenMap },
+      children: [
+        children,
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "select", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+          value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            MultiOption.SelectMultiOption,
+            {
+              grouped: true,
+              option,
+              onSelect
+            },
+            keyExtractor(option)
+          ))
+        ] }, key)) })
+      ]
+    }
   );
 };
 

package/dist/cjs/components/Select/MultiOption.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
-var React = require('react');
 var useMultiSelectOption = require('./useMultiSelectOption.js');
 
 const SelectMultiOption = ({
@@ -10,24 +10,26 @@ const SelectMultiOption = ({
   grouped = false
 }) => {
   const { onClickOption, isChecked, inputRef, labelExtractor } = useMultiSelectOption.useMultiSelectOption(option, onSelect);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
       onClick: onClickOption,
       className: cortexCore.option({ grouped }),
-      role: "option"
-    },
-    /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: isChecked,
-        className: cortexCore.checkbox({ className: "pointer-events-none" }),
-        onChange: () => false,
-        ref: inputRef
-      }
-    ),
-    labelExtractor(option)
+      role: "option",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            className: cortexCore.checkbox({ className: "pointer-events-none" }),
+            onChange: () => false,
+            ref: inputRef
+          }
+        ),
+        labelExtractor(option)
+      ]
+    }
   );
 };
 

package/dist/cjs/components/Select/MultiOptions.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 require('@internationalized/date');
@@ -23,14 +24,17 @@ const SelectMultiOptions = ({
 }) => {
   const { keyExtractor } = React.useContext(context.SelectContext);
   const { options: _options, isLoading } = useSelectOptions.useSelectOptions({ options });
-  return /* @__PURE__ */ React.createElement(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React.createElement(
-    MultiOption.SelectMultiOption,
-    {
-      option,
-      key: keyExtractor(option),
-      onSelect
-    }
-  ))));
+  return /* @__PURE__ */ jsxRuntime.jsx(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options }, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsxs("ul", { role: "select", className: list(), children: [
+    children,
+    _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      MultiOption.SelectMultiOption,
+      {
+        option,
+        onSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }) });
 };
 
 exports.SelectMultiOptions = SelectMultiOptions;

package/dist/cjs/components/Select/Option.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var context = require('./context.js');
@@ -10,7 +11,7 @@ const SelectOption = ({
   grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
       onClick: () => onSelectOption(option),
@@ -18,9 +19,9 @@ const SelectOption = ({
         selected: value && keyExtractor(value) === keyExtractor(option),
         grouped
       }),
-      role: "option"
-    },
-    labelExtractor(option)
+      role: "option",
+      children: labelExtractor(option)
+    }
   );
 };
 

package/dist/cjs/components/Select/Options.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 require('@internationalized/date');
@@ -32,17 +33,17 @@ const SelectOptions = ({
     [onSelect]
   );
   const defaultOptions = React.useMemo(
-    () => _options?.map((option) => /* @__PURE__ */ React.createElement(
+    () => _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
       Option.SelectOption,
       {
         option,
-        key: keyExtractor(option),
         onSelectOption: handleSelect
-      }
+      },
+      keyExtractor(option)
     )) ?? [],
     [_options, keyExtractor, handleSelect]
   );
-  return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children ?? defaultOptions);
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "select", className: list(), children: children ?? defaultOptions });
 };
 
 exports.SelectOptions = SelectOptions;

package/dist/cjs/components/Select/Popover.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../Popover/index.js');
 var react = require('@floating-ui/react');
@@ -7,17 +8,17 @@ var context = require('./context.js');
 
 const SelectPopover = ({ children }) => {
   const { triggerWidth } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement(react.FloatingPortal, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Content,
     {
       className: "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto",
         zIndex: 9999
-      }
-    },
-    children
-  ));
+      },
+      children
+    }
+  ) });
 };
 
 exports.SelectPopover = SelectPopover;

package/dist/cjs/components/Select/Root.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../Popover/index.js');
 var Content = require('./Content.js');
@@ -13,26 +14,26 @@ const SelectRoot = ({
   className
 }) => {
   const [triggerWidth, setTriggerWidth] = React.useState(0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Root,
     {
       fallbackPlacements: ["bottom", "top"],
       placement: "bottom",
-      trigger: "click"
-    },
-    /* @__PURE__ */ React.createElement(
-      context.SelectContext.Provider,
-      {
-        value: {
-          value,
-          keyExtractor,
-          labelExtractor,
-          triggerWidth,
-          setTriggerWidth
+      trigger: "click",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        context.SelectContext.Provider,
+        {
+          value: {
+            value,
+            keyExtractor,
+            labelExtractor,
+            triggerWidth,
+            setTriggerWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Content.Content, { className, children })
         }
-      },
-      /* @__PURE__ */ React.createElement(Content.Content, { className }, children)
-    )
+      )
+    }
   );
 };
 

package/dist/cjs/components/Select/SkeletonOptions.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Skeleton = require('../Skeleton.js');
 
 const optionSkeletonStyle = "w-full px-deca my-nano h-[30px]";
 const SkeletonOptions = () => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-y-nano" }, Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ React.createElement(Skeleton.Skeleton, { key: value }, /* @__PURE__ */ React.createElement("div", { className: optionSkeletonStyle }))));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-nano", children: Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: optionSkeletonStyle }) }, value)) });
 };
 
 exports.SkeletonOptions = SkeletonOptions;

package/dist/cjs/components/Select/Trigger.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var io5 = require('react-icons/io5');
 var index = require('../Popover/index.js');
@@ -31,36 +32,41 @@ const SelectTrigger = ({
       setTriggerWidth(width);
     }
   }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled }, /* @__PURE__ */ React.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      ref: triggerRef,
-      className: button({ className: rest.className }),
-      disabled,
-      role: "button",
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full gap-mili", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        className: clsx({ "mt-mili": hasValue && label }),
-        "data-testid": "select-placeholder"
-      },
-      _placeholder
+        ref: triggerRef,
+        className: button({ className: rest.className }),
+        disabled,
+        role: "button",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: clsx({ "mt-mili": hasValue && label }),
+              "data-testid": "select-placeholder",
+              children: _placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDownOutline, {})
+        ]
+      }
     ),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ), hasValue && label ? /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: "select-trigger",
-      className: clsx(
-        "ml-centi",
-        cortexCore.labelStyle({ intent: "default", placeholder })
-      ),
-      "data-testid": "input-label"
-    },
-    label
-  ) : null));
+    hasValue && label ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: "select-trigger",
+        className: clsx(
+          "ml-centi",
+          cortexCore.labelStyle({ intent: "default", placeholder })
+        ),
+        "data-testid": "input-label",
+        children: label
+      }
+    ) : null
+  ] }) });
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/components/Skeleton.js

@@ -1,17 +1,17 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var React = require('react');
 
 const Skeleton = ({ className, children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...rest,
       "data-testid": "skeleton",
-      className: clsx("animate-pulse bg-secondary-light", className)
-    },
-    children
+      className: clsx("animate-pulse bg-secondary-light", className),
+      children
+    }
   );
 };