reactive-bulma 5.0.7 → 5.1.1

package/README.md

@@ -120,6 +120,10 @@ Several quick start options are available:
 - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`.
 - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
   - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=20.10.0` to install packages.
+- Once the package has been installed, add at your's React main application file (`main.jsx/tsx`) the following line to inject bulma's styles:
+```jsx
+import '../node_modules/reactive-bulma/dist/reactive-bulma.css'
+```
 
 ## Folder structure
 
@@ -148,7 +152,7 @@ Reactive Bulma's documentation, included in this repo in the root directory, is
 - Open a console and run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
 - Run `npm start`.
 - Wait until a new tab opens with url <http://localhost:6006/> in your browser. 
-  - If you want to initiate it in the background, you can run `npm run start:cli.`
+  - If you want to initiate it in the background, you can run `npm run start:cli`.
 
 Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 
@@ -199,14 +203,14 @@ Given the mentioned release logic, `main` is the only static branch, and each de
 
 ## Roadmap
 
-From mid-September to the end of November (2025), I updated ReactiveBulma's main tools to their latest major versions ([Bulma v1](https://bulma.io/documentation/start/migrating-to-v1/) and [React v19](https://react.dev/blog/2024/12/05/react-19)), which includes issues and pull requests I wrapped [in version](https://github.com/NicolasOmar/reactive-bulma/milestone/6?closed=1) `v5`.
+From mid-September to the end of November (2025), I updated ReactiveBulma's main tools to their latest major versions ([Bulma v1](https://bulma.io/documentation/start/migrating-to-v1/) and [React v19](https://react.dev/blog/2024/12/05/react-19)), which includes issues and pull requests I wrapped [in version `v5`](https://github.com/NicolasOmar/reactive-bulma/milestone/6?closed=1).
 
-Nowadays, I am updating the rest of the dependencies every week, creating a PR alongside its related branch and PR to maintain track of those updates. 
-
-For the near future. I will continue with my full-stack app [MyPets](https://github.com/NicolasOmar/my-pets), where I migrated all custom components, leaving me with code I can get rid of and, in the process, finding new opportunities to enhance component usability.
+Nowadays, I am updating the rest of the dependencies every week, creating a PR alongside its related branch and PR to maintain track of those updates.
 
 If you want the actual short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
 
+During 2026, I will continue with my full-stack app [MyPets](https://github.com/NicolasOmar/my-pets), where I use this library to build its UI.
+
 <details>
 <summary>Here is the status table I used to keep track of the worked milestones/versions. (v5 included)</summary>
 

package/dist/components/atoms/Button/index.js

@@ -1,87 +1,69 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { useMemo as L } from "react";
+import { jsx as i } from "react/jsx-runtime";
 import { COMMON_CLASSES as l } from "../../../constants/classes.js";
-import { parseClasses as U, parseTestId as c } from "../../../functions/parsers.js";
-const j = ({
-  testId: s = null,
-  cssClasses: e = null,
-  style: f = null,
-  type: O = "button",
-  isAnAnchor: v = !1,
-  anchorHref: A = null,
-  text: o = null,
-  isDisabled: r = !1,
-  color: n = null,
-  colorMode: u = null,
-  isInvertedColor: m = !1,
-  isOutlined: E = !1,
-  isRounded: I = !1,
-  isLoading: d = !1,
-  isStatic: N = !1,
-  isSelected: S = !1,
-  isFullWidth: T = !1,
-  isResponsive: b = !1,
-  size: t = null,
-  onClick: p = null
+import { parseClasses as v, parseTestId as h } from "../../../functions/parsers.js";
+const B = ({
+  testId: E = null,
+  cssClasses: I = null,
+  style: n = null,
+  type: S = "button",
+  isAnAnchor: C = !1,
+  anchorHref: N = null,
+  text: a = null,
+  isDisabled: t = !1,
+  color: u = null,
+  colorMode: e = null,
+  isInvertedColor: T = !1,
+  isOutlined: m = !1,
+  isRounded: b = !1,
+  isLoading: c = !1,
+  isSkeleton: p = !1,
+  isStatic: L = !1,
+  isSelected: O = !1,
+  isFullWidth: D = !1,
+  isResponsive: $ = !1,
+  size: o = null,
+  onClick: d = null
 }) => {
-  const C = "button", a = L(
-    () => U([
-      C,
-      n ? `${l.IS}${n}` : null,
-      u ? `${l.IS}${u}` : null,
-      m ? l.INVERTED : null,
-      E ? l.OUTLINED : null,
-      I ? l.ROUNDED : null,
-      d ? l.LOADING : null,
-      N ? l.STATIC : null,
-      S ? l.SELECTED : null,
-      T ? l.FULL_WIDTH : null,
-      b ? l.RESPONSIVE : null,
-      t ? `${l.IS}${t}` : null,
-      e
-    ]),
-    [
-      n,
-      u,
-      m,
-      E,
-      I,
-      d,
-      N,
-      S,
-      T,
-      b,
-      t,
-      e
-    ]
-  ), D = L(
-    () => s ?? c({ tag: C, parsedClasses: a }),
-    [s, a]
-  );
-  return v ? /* @__PURE__ */ $(
+  const f = "button", s = v([
+    f,
+    u ? `${l.IS}${u}` : null,
+    e ? `${l.IS}${e}` : null,
+    T ? l.INVERTED : null,
+    m ? l.OUTLINED : null,
+    b ? l.ROUNDED : null,
+    c ? l.LOADING : null,
+    p ? l.SKELETON : null,
+    L ? l.STATIC : null,
+    O ? l.SELECTED : null,
+    D ? l.FULL_WIDTH : null,
+    $ ? l.RESPONSIVE : null,
+    o ? `${l.IS}${o}` : null,
+    I
+  ]), r = E ?? h({ tag: f, parsedClasses: s });
+  return C ? /* @__PURE__ */ i(
     "a",
     {
-      "data-testid": D,
-      className: a,
-      style: f ?? void 0,
-      "aria-disabled": r,
-      href: A ?? void 0,
-      onClick: p ?? void 0,
-      children: o
+      "data-testid": r,
+      className: s,
+      style: n ?? void 0,
+      "aria-disabled": t,
+      href: N ?? void 0,
+      onClick: d ?? void 0,
+      children: a
     }
-  ) : /* @__PURE__ */ $(
+  ) : /* @__PURE__ */ i(
     "button",
     {
-      "data-testid": D,
-      type: O,
-      className: a,
-      style: f ?? void 0,
-      disabled: r,
-      onClick: p ?? void 0,
-      children: o
+      "data-testid": r,
+      type: S,
+      className: s,
+      style: n ?? void 0,
+      disabled: t,
+      onClick: d ?? void 0,
+      children: a
     }
   );
 };
 export {
-  j as default
+  B as default
 };

package/dist/components/atoms/Button/index.stories.d.ts

@@ -12,6 +12,7 @@ export declare const InvertedColor: import('storybook/internal/csf').AnnotatedSt
 export declare const OutlinedColor: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
 export declare const Rounded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
 export declare const LoadingState: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
+export declare const SkeletonState: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
 export declare const LargeSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
 export declare const FullWidth: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;
 export declare const Responsive: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ButtonProps>;

package/dist/components/atoms/Icon/index.js

@@ -1,15 +1,15 @@
-import { jsxs as M, jsx as p } from "react/jsx-runtime";
-import { IconSizeEnum as N } from "../../../types/domTypes.js";
-import { COMMON_CLASSES as e } from "../../../constants/classes.js";
-import { TEST_ID_REGEXP as u } from "../../../constants/regExp.js";
-import { parseClasses as E, parseTestId as T } from "../../../functions/parsers.js";
-const l = "icon", s = "mdi", X = (t, n) => {
-  const r = n ? `${l}-text-${n}` : `${l}-text`, o = T({
-    tag: `${l}-container`,
-    parsedClasses: n ? `${e.HAS_TEXT}${n}` : "",
-    rules: [{ regExp: u.HAS_TEXT, replacer: "" }]
+import { jsxs as M, jsx as u } from "react/jsx-runtime";
+import { IconSizeEnum as X } from "../../../types/domTypes.js";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+import { TEST_ID_REGEXP as p } from "../../../constants/regExp.js";
+import { parseClasses as I, parseTestId as T } from "../../../functions/parsers.js";
+const e = "icon", s = "mdi", h = (t, n) => {
+  const r = n ? `${e}-text-${n}` : `${e}-text`, o = T({
+    tag: `${e}-container`,
+    parsedClasses: n ? `${l.HAS_TEXT}${n}` : "",
+    rules: [{ regExp: p.HAS_TEXT, replacer: "" }]
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ u(
     "span",
     {
       "data-testid": o,
@@ -23,50 +23,52 @@ const l = "icon", s = "mdi", X = (t, n) => {
   cssClasses: r = null,
   containerCssClasses: o = null,
   style: S = null,
-  containerStyle: x = null,
-  iconLabel: f,
+  containerStyle: f = null,
+  iconLabel: x,
   text: c = null,
   color: i = null,
   size: a = null,
   colorMode: $ = null,
   isSpinning: _ = !1,
+  isSkeleton: g = !1,
   position: d = null
 }) => {
-  const g = E([
-    l,
-    i ? `${e.HAS_TEXT}${i}` : null,
-    a ? `${e.IS}${a}` : null,
-    d ? `${e.IS}${d}` : null,
+  const N = I([
+    e,
+    i ? `${l.HAS_TEXT}${i}` : null,
+    a ? `${l.IS}${a}` : null,
+    d ? `${l.IS}${d}` : null,
     o
-  ]), m = E([
+  ]), m = I([
     s,
-    `${s}-${f}`,
-    $ ? `${s}-${e.IS}${$}` : null,
+    `${s}-${x}`,
+    $ ? `${s}-${l.IS}${$}` : null,
     _ ? `${s}-spin` : null,
-    a ? `${s}-${N[a]}px` : `${s}-24px`,
+    g ? l.SKELETON : null,
+    a ? `${s}-${X[a]}px` : `${s}-24px`,
     r
   ]), C = n ?? T({
-    tag: l,
+    tag: e,
     parsedClasses: m,
     rules: [
       {
-        regExp: u.MDI,
+        regExp: p.MDI,
         replacer: ""
       },
       {
-        regExp: u.MDI_EMPTY,
+        regExp: p.MDI_EMPTY,
         replacer: "-"
       }
     ],
     separator: "-"
-  }), A = t ?? `${C}-i`, I = /* @__PURE__ */ M(
+  }), A = t ?? `${C}-i`, E = /* @__PURE__ */ M(
     "span",
     {
       "data-testid": C,
-      className: g,
-      style: x ?? void 0,
+      className: N,
+      style: f ?? void 0,
       children: [
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ u(
           "i",
           {
             "data-testid": A,
@@ -74,11 +76,11 @@ const l = "icon", s = "mdi", X = (t, n) => {
             style: S ?? void 0
           }
         ),
-        c ? /* @__PURE__ */ p("span", { children: c }) : null
+        c ? /* @__PURE__ */ u("span", { children: c }) : null
       ]
     }
   );
-  return c ? X(I, i) : I;
+  return c ? h(E, i) : E;
 };
 export {
   y as default

package/dist/components/atoms/Icon/index.stories.d.ts

@@ -7,6 +7,7 @@ export declare const BasicExample: import('storybook/internal/csf').AnnotatedSto
 export declare const TextIncluded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
 export declare const UsingOtherIcon: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
 export declare const Colored: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
 export declare const WithBigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
 export declare const DarkMode: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;
 export declare const Spinning: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IconProps>;

package/dist/components/atoms/Image/index.js

@@ -1,7 +1,7 @@
-import { jsx as t } from "react/jsx-runtime";
-import { parseClasses as n, parseTestId as N } from "../../../functions/parsers.js";
-import { COMMON_CLASSES as i } from "../../../constants/classes.js";
-const T = ({
+import { jsx as n } from "react/jsx-runtime";
+import { parseClasses as i, parseTestId as E } from "../../../functions/parsers.js";
+import { COMMON_CLASSES as s } from "../../../constants/classes.js";
+const v = ({
   testId: o = null,
   containerTestId: m = null,
   cssClasses: r = null,
@@ -10,28 +10,30 @@ const T = ({
   containerStyle: g = null,
   src: c,
   alt: C = null,
-  fixedSize: s = null,
-  isRounded: p = !1
+  fixedSize: l = null,
+  isSkeleton: p = !1,
+  isRounded: f = !1
 }) => {
-  const l = "image", a = n([
-    l,
-    s ? `${i.IS}${s}` : null,
+  const a = "image", e = i([
+    a,
+    l ? `${s.IS}${l}` : null,
+    p ? s.SKELETON : null,
     u
-  ]), f = n([
-    p ? i.ROUNDED : null,
+  ]), I = i([
+    f ? s.ROUNDED : null,
     r
-  ]), e = m ?? N({ tag: l, parsedClasses: a }), I = o ?? `${e}-img`;
-  return /* @__PURE__ */ t(
+  ]), t = m ?? E({ tag: a, parsedClasses: e }), N = o ?? `${t}-img`;
+  return /* @__PURE__ */ n(
     "figure",
     {
-      "data-testid": e,
-      className: a,
+      "data-testid": t,
+      className: e,
       style: g ?? void 0,
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ n(
         "img",
         {
-          "data-testid": I,
-          className: f,
+          "data-testid": N,
+          className: I,
           style: d ?? void 0,
           src: c,
           alt: C ?? void 0
@@ -41,5 +43,5 @@ const T = ({
   );
 };
 export {
-  T as default
+  v as default
 };

package/dist/components/atoms/Image/index.stories.d.ts

@@ -5,5 +5,6 @@ export default _default;
 export declare const BasicExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;
 export declare const WithFixedStyle: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;
 export declare const FullSized: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;
 export declare const IsRounded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;
 export declare const CustomStyle: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('../../../interfaces/atomProps').ImageProps>;

package/dist/components/atoms/Input/index.js

@@ -1,54 +1,57 @@
-import { jsx as x } from "react/jsx-runtime";
-import { parseClasses as y, parseTestId as T } from "../../../functions/parsers.js";
-const j = ({
-  testId: s = null,
-  cssClasses: e = null,
-  style: n = null,
-  type: u,
-  value: t = null,
-  name: a,
-  placeholder: d = null,
-  isDisabled: i = !1,
-  isReadonly: o = !1,
-  color: r = null,
-  size: p = null,
-  isRounded: c = null,
-  isHovered: f = null,
-  isFocused: m = null,
-  onClick: v,
-  onChange: C,
-  onBlur: I
+import { jsx as N } from "react/jsx-runtime";
+import { parseClasses as I, parseTestId as T } from "../../../functions/parsers.js";
+import { COMMON_CLASSES as l } from "../../../constants/classes.js";
+const M = ({
+  testId: n = null,
+  cssClasses: u = null,
+  style: e = null,
+  type: t,
+  value: a = null,
+  name: o,
+  placeholder: p = null,
+  isDisabled: r = !1,
+  isReadonly: d = !1,
+  isSkeleton: i = !1,
+  color: f = null,
+  size: m = null,
+  isRounded: E = null,
+  isHovered: O = null,
+  isFocused: C = null,
+  onClick: c,
+  onChange: S,
+  onBlur: v
 }) => {
-  const l = y([
+  const s = I([
     "input",
-    r,
-    p,
-    c ? "is-rounded" : null,
-    f ? "is-hovered" : null,
-    m ? "is-focused" : null,
-    e
-  ]), h = s ?? T({
+    f,
+    m,
+    E ? l.ROUNDED : null,
+    O ? l.HOVERED : null,
+    C ? l.FOCUSED : null,
+    i ? l.SKELETON : null,
+    u
+  ]), D = n ?? T({
     tag: "input",
-    parsedClasses: l
+    parsedClasses: s
   });
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ N(
     "input",
     {
-      "data-testid": h,
-      type: u,
-      placeholder: d ?? void 0,
-      value: t ?? void 0,
-      name: a,
-      disabled: i,
-      readOnly: o,
-      className: l,
-      style: n ?? void 0,
-      onClick: v,
-      onChange: C,
-      onBlur: I
+      "data-testid": D,
+      type: t,
+      placeholder: p ?? void 0,
+      value: a ?? void 0,
+      name: o,
+      disabled: r,
+      readOnly: d,
+      className: s,
+      style: e ?? void 0,
+      onClick: c,
+      onChange: S,
+      onBlur: v
     }
   );
 };
 export {
-  j as default
+  M as default
 };

package/dist/components/atoms/Input/index.stories.d.ts

@@ -8,6 +8,7 @@ export declare const WithPlaceholder: import('storybook/internal/csf').Annotated
 export declare const WithText: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
 export declare const Colored: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
 export declare const WithBigSize: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
+export declare const Skeleton: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
 export declare const Rounded: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
 export declare const Hovered: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;
 export declare const Focused: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, InputProps>;

package/dist/components/atoms/Select/index.js

@@ -1,86 +1,87 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { useMemo as s } from "react";
-import { parseClasses as I, parseTestId as q } from "../../../functions/parsers.js";
-const B = ({
-  testId: a = null,
-  containerTestId: o = null,
+import { parseClasses as x, parseTestId as I } from "../../../functions/parsers.js";
+import { COMMON_CLASSES as e } from "../../../constants/classes.js";
+const A = ({
+  testId: o = null,
+  containerTestId: r = null,
   cssClasses: f = null,
   containerCssClasses: u = null,
-  style: v = null,
-  containerStyle: S = null,
-  isDisabled: h,
-  options: $ = [],
-  selectedValues: g,
-  name: y,
-  showOptions: x = 1,
-  isMultiple: e = !1,
-  color: i = null,
-  size: r = null,
-  isRounded: c = null,
+  style: E = null,
+  containerStyle: O = null,
+  isDisabled: v,
+  options: C = [],
+  selectedValues: D,
+  name: N,
+  showOptions: $ = 1,
+  isMultiple: t = !1,
+  color: c = null,
+  size: i = null,
+  isRounded: m = null,
   isHovered: d = null,
-  isFocused: m = null,
-  onClick: N,
-  onChange: T,
-  onBlur: b
+  isFocused: p = null,
+  onClick: g,
+  onChange: h,
+  onBlur: y
 }) => {
-  const t = s(
-    () => I([
+  const n = s(
+    () => x([
       "select",
+      c,
       i,
-      r,
-      e ? "is-multiple" : null,
-      c ? "is-rounded" : null,
-      d ? "is-hovered" : null,
-      m ? "is-focused" : null,
+      t ? e.MULTIPLE : null,
+      m ? e.ROUNDED : null,
+      d ? e.HOVERED : null,
+      p ? e.FOCUSED : null,
       u
     ]),
     [
-      i,
-      r,
-      e,
       c,
-      d,
+      i,
+      t,
       m,
+      d,
+      p,
       u
     ]
   ), l = s(
-    () => a ?? q({
+    () => o ?? I({
       tag: "select",
-      parsedClasses: t
+      parsedClasses: n
     }),
-    [a, t]
-  ), j = s(
-    () => o ?? `${l}-container`,
-    [o, l]
+    [o, n]
+  ), L = s(
+    () => r ?? `${l}-container`,
+    [r, l]
   );
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "section",
     {
-      "data-testid": j,
-      className: t,
-      style: S ?? void 0,
-      children: /* @__PURE__ */ n(
+      "data-testid": L,
+      className: n,
+      style: O ?? void 0,
+      children: /* @__PURE__ */ a(
         "select",
         {
           "data-testid": l,
           className: f ?? void 0,
-          style: v ?? void 0,
-          value: g,
-          name: y,
-          disabled: h ?? !1,
-          multiple: e,
-          size: x,
-          onClick: N,
-          onChange: T,
-          onBlur: b,
-          children: $.map(({ id: p, name: k }, C) => /* @__PURE__ */ n(
+          style: E ?? void 0,
+          value: D,
+          name: N,
+          disabled: v ?? !1,
+          multiple: t,
+          size: $,
+          onClick: g,
+          onChange: h,
+          onBlur: y,
+          children: C.map(({ id: S, name: T }, U) => /* @__PURE__ */ a(
             "option",
             {
-              "data-testid": `${l}-option-${C}`,
-              value: p.toString(),
-              children: k
+              "data-testid": `${l}-option-${U}`,
+              value: S.toString(),
+              children: T
             },
-            `key-option-${p.toString()}`
+            `key-option-${S.toString()}`
           ))
         }
       )
@@ -88,5 +89,5 @@ const B = ({
   );
 };
 export {
-  B as default
+  A as default
 };

package/dist/components/atoms/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SkeletonProps } from '../../../interfaces/atomProps';
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;