@pismo/marola 0.0.1-alpha.5 → 0.0.1-alpha.6

package/dist/components/Dialog/Title.js

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
 import { Typography as a } from "../Typography/Typography.js";
-import { s as r } from "../../Dialog.module-BKWFakxu.js";
+import { s as r } from "../../Dialog.module-CGVM5V_D.js";
 const n = ({ title: i, subTitle: t }) => /* @__PURE__ */ l(s, { children: [
   /* @__PURE__ */ e(
     a,

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+export type IconProps = {
+    iconFamily?: string;
+    icon: string;
+    size?: number | string;
+    color?: string;
+};
+export declare const Icon: ({ iconFamily, icon, size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,9 @@
+import { jsx as s } from "react/jsx-runtime";
+import { W as e } from "../../react-CGNQ6M5x.js";
+const m = ({ iconFamily: o, icon: n, size: r, color: t }) => {
+  const c = `${o ?? "fa/duotone"}/${n}`;
+  return /* @__PURE__ */ s(e, { icon: c, color: t || "", size: r || "" });
+};
+export {
+  m as Icon
+};

package/dist/components/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { Either } from '../../types/helpers';
 import { ReactNode } from 'react';
 
-type variant = "primary" | "square";
+type variant = 'primary' | 'square';
 type IconButtonCoreProps = {
     icon: ReactNode;
     loading?: boolean;
@@ -15,8 +15,8 @@ interface IconButtonPropsWithLink extends IconButtonCoreProps {
 }
 interface IconButtonPropsWithOnClick extends IconButtonCoreProps {
     onClick: () => void;
-    type?: HTMLButtonElement["type"];
+    type?: HTMLButtonElement['type'];
 }
 export type IconButtonProps = Either<IconButtonPropsWithLink, IconButtonPropsWithOnClick>;
-export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -1,78 +1,67 @@
 import '../../assets/IconButton.css';
-import { jsx as n, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as k } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as q, useMemo as a } from "react";
+import { c } from "../../clsx-DB4S2d7J.js";
 import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
-import { c as v } from "../../clsx-DB4S2d7J.js";
-import { B as y } from "../../Button-D--uN90N.js";
-const f = "_h1_1v5kq_1", p = "_h2_1v5kq_11", g = "_h3_1v5kq_21", w = "_h4_1v5kq_31", x = "_body_1v5kq_41", N = "_quote_1v5kq_75", B = "_form__input_1v5kq_86", j = "_form__hint_1v5kq_91", C = "_form__label_1v5kq_96", I = "_form__dropdown_1v5kq_101", L = "_table__header_1v5kq_107", M = "_table__body_1v5kq_112", R = "_button_1v5kq_123", o = {
-  h1: f,
-  "h1--bold": "_h1--bold_1v5kq_7",
+import { B as g } from "../../Button-W6tM-_IT.js";
+const k = "_h1_8qiyf_1", p = "_h2_8qiyf_11", w = "_h3_8qiyf_21", x = "_h4_8qiyf_31", N = "_body_8qiyf_41", v = "_quote_8qiyf_75", B = "_form__input_8qiyf_98", j = "_form__hint_8qiyf_103", C = "_form__label_8qiyf_108", I = "_form__dropdown_8qiyf_113", L = "_table__header_8qiyf_131", M = "_table__body_8qiyf_136", R = "_button_8qiyf_159", o = {
+  h1: k,
+  "h1--bold": "_h1--bold_8qiyf_7",
   h2: p,
-  "h2--bold": "_h2--bold_1v5kq_17",
-  h3: g,
-  "h3--bold": "_h3--bold_1v5kq_27",
-  h4: w,
-  "h4--bold": "_h4--bold_1v5kq_37",
-  body: x,
-  "body--large": "_body--large_1v5kq_46",
-  "body--medium": "_body--medium_1v5kq_50",
-  "body--small": "_body--small_1v5kq_54",
-  "body--tiny": "_body--tiny_1v5kq_58",
-  "body--bold": "_body--bold_1v5kq_62",
-  "body--strikethrough": "_body--strikethrough_1v5kq_65",
-  "body--underlined": "_body--underlined_1v5kq_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_1v5kq_71",
-  quote: N,
-  "quote--large": "_quote--large_1v5kq_80",
+  "h2--bold": "_h2--bold_8qiyf_17",
+  h3: w,
+  "h3--bold": "_h3--bold_8qiyf_27",
+  h4: x,
+  "h4--bold": "_h4--bold_8qiyf_37",
+  body: N,
+  "body--large": "_body--large_8qiyf_46",
+  "body--medium": "_body--medium_8qiyf_50",
+  "body--small": "_body--small_8qiyf_54",
+  "body--tiny": "_body--tiny_8qiyf_58",
+  "body--bold": "_body--bold_8qiyf_62",
+  "body--strikethrough": "_body--strikethrough_8qiyf_65",
+  "body--underlined": "_body--underlined_8qiyf_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_8qiyf_71",
+  quote: v,
+  "quote--large": "_quote--large_8qiyf_80",
+  "quote--bold": "_quote--bold_8qiyf_85",
+  "quote--strikethrough": "_quote--strikethrough_8qiyf_88",
+  "quote--underlined": "_quote--underlined_8qiyf_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_8qiyf_94",
   form__input: B,
   form__hint: j,
   form__label: C,
   form__dropdown: I,
+  "form--bold": "_form--bold_8qiyf_118",
+  "form--strikethrough": "_form--strikethrough_8qiyf_121",
+  "form--underlined": "_form--underlined_8qiyf_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_8qiyf_127",
   table__header: L,
   table__body: M,
-  "table__body--secondary": "_table__body--secondary_1v5kq_117",
+  "table__body--secondary": "_table__body--secondary_8qiyf_141",
+  "table--bold": "_table--bold_8qiyf_146",
+  "table--strikethrough": "_table--strikethrough_8qiyf_149",
+  "table--underlined": "_table--underlined_8qiyf_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_8qiyf_155",
   button: R,
-  "icon-button": "_icon-button_1v5kq_130",
-  "icon-button--primary": "_icon-button--primary_1v5kq_142",
-  "icon-button--square": "_icon-button--square_1v5kq_164",
-  "icon-button__container": "_icon-button__container_1v5kq_180"
-}, E = h(
-  (r, e) => {
-    const {
-      onClick: d,
-      icon: b,
-      link: i,
-      loading: l,
-      children: a,
-      type: s = "button",
-      disabled: c,
-      className: t,
-      variant: _ = "primary"
-    } = r, u = k(
-      () => v([
-        o["icon-button"],
-        o[`icon-button--${_}`],
-        t
-      ]),
-      [t, _]
-    );
-    return /* @__PURE__ */ n(
-      y,
-      {
-        type: s,
-        href: i,
-        onClick: d,
-        disabled: c,
-        className: u,
-        ref: e,
-        children: /* @__PURE__ */ q("div", { className: o["icon-button__container"], children: [
-          l ? /* @__PURE__ */ n(m, { invert: !0 }) : b,
-          _ !== "square" && a
-        ] })
-      }
-    );
-  }
-);
+  "button--bold": "_button--bold_8qiyf_165",
+  "button--strikethrough": "_button--strikethrough_8qiyf_168",
+  "button--underlined": "_button--underlined_8qiyf_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_8qiyf_174",
+  "icon-button": "_icon-button_8qiyf_178",
+  "icon-button--primary": "_icon-button--primary_8qiyf_190",
+  "icon-button--square": "_icon-button--square_8qiyf_212",
+  "icon-button__container": "_icon-button__container_8qiyf_228"
+}, E = q((i, r) => {
+  const { onClick: n, icon: d, link: u, loading: b, children: l, type: y = "button", disabled: f, className: t, variant: _ = "primary" } = i, h = a(
+    () => c([o["icon-button"], o[`icon-button--${_}`], t]),
+    [t, _]
+  );
+  return /* @__PURE__ */ e(g, { type: y, href: u, onClick: n, disabled: f, className: h, ref: r, children: /* @__PURE__ */ s("div", { className: o["icon-button__container"], children: [
+    b ? /* @__PURE__ */ e(m, { invert: !0 }) : d,
+    _ !== "square" && l
+  ] }) });
+});
 export {
   E as IconButton,
   E as default

package/dist/components/PageHeader/PageHeader.d.ts

@@ -2,25 +2,35 @@ import { RequireAllOrNone } from '../../types/helpers';
 import { ReactNode } from 'react';
 
 type PageHeaderCommonProps = {
+    /** Title text */
     title: string;
+    /** Subtitle text */
     subtitle?: string;
-    rightChildren?: ReactNode;
-    bottomChildren?: ReactNode;
+    /** Back link text */
     backLinkText?: string;
+    /** Callback called when `back link` is clicked */
     onBackLinkClick?: () => void;
-    wrapperClassName?: string;
-    backLinkClassName?: string;
-    titleClassName?: string;
-    subtitleClassName?: string;
-    rightChildrenClassName?: string;
-    bottomChildrenClassName?: string;
-    wrapperTestId?: string;
-    backLinkTestId?: string;
-    titleTestId?: string;
-    subtitleTestId?: string;
-    rightChildrenTestId?: string;
-    bottomChildrenTestId?: string;
+    /** Element to be rendered on the right slot of the component */
+    rightChildren?: ReactNode;
+    /** Element to be rendered on the bottom slot of the component */
+    bottomChildren?: ReactNode;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the back link element */
+    classNameBackLink?: string;
+    /** CSS classes to be applied on the title element */
+    classNameTitle?: string;
+    /** CSS classes to be applied on the subtitle element */
+    classNameSubtitle?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid-wrapper'?: string;
+    /** Id to be applied as `data-testid` on the back link element */
+    'data-testid-backLink'?: string;
+    /** Id to be applied as `data-testid` on the title element */
+    'data-testid-title'?: string;
+    /** Id to be applied as `data-testid` on the subtitle element */
+    'data-testid-subtitle'?: string;
 };
 type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'>;
-export declare const PageHeader: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, wrapperClassName, backLinkClassName, titleClassName, subtitleClassName, rightChildrenClassName, bottomChildrenClassName, wrapperTestId, backLinkTestId, titleTestId, subtitleTestId, rightChildrenTestId, bottomChildrenTestId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,69 +1,51 @@
 import '../../assets/PageHeader.css';
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { c as a } from "../../clsx-DB4S2d7J.js";
-import * as i from "react";
-const C = (n) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../clsx-DB4S2d7J.js";
+import * as _ from "react";
+const w = (c) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
   height: "1em"
-}, ...n }, /* @__PURE__ */ i.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), y = C, H = "_title_cz9x0_46", j = "_subtitle_cz9x0_47", e = {
+}, ...c }, /* @__PURE__ */ _.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), z = "_title_cz9x0_46", b = "_subtitle_cz9x0_47", e = {
   "page-header": "_page-header_cz9x0_1",
   "page-header__top-content": "_page-header__top-content_cz9x0_10",
   "page-header__main-content": "_page-header__main-content_cz9x0_13",
   "page-header__bottom-content": "_page-header__bottom-content_cz9x0_13",
   "page-header__main-left-content": "_page-header__main-left-content_cz9x0_40",
-  title: H,
-  subtitle: j,
+  title: z,
+  subtitle: b,
   "page-header__main-right-content": "_page-header__main-right-content_cz9x0_64"
-}, L = ({
-  title: n,
-  subtitle: s,
+}, y = ({
+  title: c,
+  subtitle: d,
   backLinkText: r,
-  onBackLinkClick: d,
-  rightChildren: o,
-  bottomChildren: _,
-  wrapperClassName: l,
-  backLinkClassName: h,
-  titleClassName: m,
-  subtitleClassName: p,
-  rightChildrenClassName: g,
-  bottomChildrenClassName: f,
-  wrapperTestId: x,
-  backLinkTestId: u,
-  titleTestId: v,
-  subtitleTestId: w,
-  rightChildrenTestId: z,
-  bottomChildrenTestId: N,
-  ...b
-}) => /* @__PURE__ */ c("div", { className: a([e["page-header"], l]), "data-testid": x, ...b, children: [
-  r && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ c("button", { type: "button", onClick: d, className: h, "data-testid": u, children: [
-    /* @__PURE__ */ t(y, { fontSize: 16 }),
+  onBackLinkClick: s,
+  rightChildren: i,
+  bottomChildren: o,
+  classNameWrapper: l,
+  classNameBackLink: h,
+  classNameTitle: m,
+  classNameSubtitle: p,
+  "data-testid-wrapper": g,
+  "data-testid-backLink": x,
+  "data-testid-title": f,
+  "data-testid-subtitle": u,
+  ...v
+}) => /* @__PURE__ */ a("div", { className: n([e["page-header"], l]), "data-testid": g, ...v, children: [
+  r && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("button", { type: "button", onClick: s, className: h, "data-testid": x, children: [
+    /* @__PURE__ */ t(w, { fontSize: 16 }),
     r
   ] }) }),
-  /* @__PURE__ */ c("div", { className: e["page-header__main-content"], children: [
-    /* @__PURE__ */ c("div", { className: e["page-header__main-left-content"], children: [
-      /* @__PURE__ */ t("h1", { className: a(e.title, m), "data-testid": v, children: n }),
-      /* @__PURE__ */ t("h3", { className: a(e.subtitle, p), "data-testid": w, children: s })
+  /* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: [
+    /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: [
+      /* @__PURE__ */ t("h1", { className: n(e.title, m), "data-testid": f, children: c }),
+      /* @__PURE__ */ t("h2", { className: n(e.subtitle, p), "data-testid": u, children: d })
     ] }),
-    o && /* @__PURE__ */ t(
-      "div",
-      {
-        className: a(e["page-header__main-right-content"], g),
-        "data-testid": z,
-        children: o
-      }
-    )
+    i && /* @__PURE__ */ t("div", { className: e["page-header__main-right-content"], children: i })
   ] }),
-  _ && /* @__PURE__ */ t(
-    "div",
-    {
-      className: a(e["page-header__bottom-content"], f),
-      "data-testid": N,
-      children: _
-    }
-  )
+  o && /* @__PURE__ */ t("div", { className: e["page-header__bottom-content"], children: o })
 ] });
 export {
-  L as PageHeader
+  y as PageHeader
 };

package/dist/components/PageHeader/PageHeader.stories.d.ts

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: (Required<Pick<{
+        title: string;
+        subtitle?: string | undefined;
+        backLinkText?: string | undefined;
+        onBackLinkClick?: (() => void) | undefined;
+        rightChildren?: import('react').ReactNode;
+        bottomChildren?: import('react').ReactNode;
+        classNameWrapper?: string | undefined;
+        classNameBackLink?: string | undefined;
+        classNameTitle?: string | undefined;
+        classNameSubtitle?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-backLink'?: string | undefined;
+        'data-testid-title'?: string | undefined;
+        'data-testid-subtitle'?: string | undefined;
+    }, "backLinkText" | "onBackLinkClick">> | Partial<Record<"backLinkText" | "onBackLinkClick", never>>) & Omit<{
+        title: string;
+        subtitle?: string | undefined;
+        backLinkText?: string | undefined;
+        onBackLinkClick?: (() => void) | undefined;
+        rightChildren?: import('react').ReactNode;
+        bottomChildren?: import('react').ReactNode;
+        classNameWrapper?: string | undefined;
+        classNameBackLink?: string | undefined;
+        classNameTitle?: string | undefined;
+        classNameSubtitle?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-backLink'?: string | undefined;
+        'data-testid-title'?: string | undefined;
+        'data-testid-subtitle'?: string | undefined;
+    }, "backLinkText" | "onBackLinkClick">) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithBackLink: Story;
+export declare const WithRightChildren: Story;
+export declare const WithBottomChildren: Story;

package/dist/components/PageHeader/PageHeader.stories.js

@@ -0,0 +1,49 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r } from "../Button/Button.js";
+import { Tab as e } from "../Tabs/Tab.js";
+import { TabPanel as a } from "../Tabs/TabPanel.js";
+import { Tabs as o } from "../Tabs/Tabs.js";
+import { PageHeader as l } from "./PageHeader.js";
+const g = {
+  title: "Components/PageHeader",
+  component: l,
+  tags: ["autodocs"]
+}, c = {
+  args: {
+    title: "Marola Design System",
+    subtitle: "A Pismo design system"
+  }
+}, i = {
+  name: "With back link",
+  args: {
+    ...c.args,
+    backLinkText: "Back",
+    onBackLinkClick: () => alert("Back button clicked!")
+  }
+}, u = {
+  name: "With right children",
+  args: {
+    ...i.args,
+    rightChildren: /* @__PURE__ */ t(r, { variant: "quick", onClick: () => alert("button clicked"), children: "Click me!" })
+  }
+}, p = {
+  name: "With bottom children",
+  args: {
+    ...i.args,
+    bottomChildren: /* @__PURE__ */ n(o, { children: [
+      /* @__PURE__ */ t(e, { value: "1", children: "Tab 1" }),
+      /* @__PURE__ */ t(e, { value: "2", children: "Tab 2" }),
+      /* @__PURE__ */ t(e, { value: "3", children: "Tab 3" }),
+      /* @__PURE__ */ t(a, { value: "1", children: "Tab 1 content" }),
+      /* @__PURE__ */ t(a, { value: "2", children: "Tab 2 content" }),
+      /* @__PURE__ */ t(a, { value: "3", children: "Tab 3 content" })
+    ] })
+  }
+};
+export {
+  c as Simple,
+  i as WithBackLink,
+  p as WithBottomChildren,
+  u as WithRightChildren,
+  g as default
+};

package/dist/components/Pagination/Pagination.js

@@ -1,7 +1,7 @@
 import '../../assets/Pagination.css';
-import { jsxs as P, jsx as i, Fragment as M } from "react/jsx-runtime";
+import { jsxs as x, jsx as i, Fragment as M } from "react/jsx-runtime";
 import { c as C } from "../../clsx-DB4S2d7J.js";
-import { _ as S, a as A } from "../../objectWithoutPropertiesLoose-ClNcje2_.js";
+import { _ as S, a as A } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import { u as D } from "../../useControlled-CCMYYdCM.js";
 const E = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 function $(e = {}) {
@@ -11,12 +11,12 @@ function $(e = {}) {
     count: s = 1,
     defaultPage: b = 1,
     disabled: h = !1,
-    hideNextButton: g = !1,
+    hideNextButton: c = !1,
     hidePrevButton: m = !1,
     onChange: t,
     page: o,
     showFirstButton: p = !1,
-    showLastButton: x = !1,
+    showLastButton: f = !1,
     siblingCount: u = 1
   } = e, d = S(e, E), [r, k] = D({
     controlled: o,
@@ -30,7 +30,7 @@ function $(e = {}) {
     return Array.from({
       length: I
     }, (W, O) => n + O);
-  }, j = v(1, Math.min(a, s)), f = v(Math.max(s - a + 1, a + 1), s), y = Math.max(
+  }, j = v(1, Math.min(a, s)), P = v(Math.max(s - a + 1, a + 1), s), w = Math.max(
     Math.min(
       // Natural start
       r - u,
@@ -47,23 +47,23 @@ function $(e = {}) {
       a + u * 2 + 2
     ),
     // Less than endPages
-    f.length > 0 ? f[0] - 2 : s - 1
+    P.length > 0 ? P[0] - 2 : s - 1
   ), L = [
     ...p ? ["first"] : [],
     ...m ? [] : ["previous"],
     ...j,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...y > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    ...w > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
     // Sibling pages
-    ...v(y, B),
+    ...v(w, B),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
     ...B < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
-    ...f,
-    ...g ? [] : ["next"],
-    ...x ? ["last"] : []
-  ], w = (n) => {
+    ...P,
+    ...c ? [] : ["next"],
+    ...f ? ["last"] : []
+  ], y = (n) => {
     switch (n) {
       case "first":
         return 1;
@@ -87,10 +87,10 @@ function $(e = {}) {
     "aria-current": n === r ? "true" : void 0
   } : {
     onClick: (l) => {
-      N(l, w(n));
+      N(l, y(n));
     },
     type: n,
-    page: w(n),
+    page: y(n),
     selected: !1,
     disabled: h || n.indexOf("ellipsis") === -1 && (n === "next" || n === "last" ? r >= s : r <= 1)
   });
@@ -98,14 +98,14 @@ function $(e = {}) {
     items: F
   }, d);
 }
-const R = "_pagination_1exye_1", c = {
+const R = "_pagination_9gf1w_1", g = {
   pagination: R,
-  "per-page-container": "_per-page-container_1exye_8",
-  "pages-navigator-container": "_pages-navigator-container_1exye_20",
-  "pages-navigator-container__label": "_pages-navigator-container__label_1exye_31",
-  "page-number__btn": "_page-number__btn_1exye_31",
-  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_1exye_44",
-  "page-number__btn--selected": "_page-number__btn--selected_1exye_69"
+  "per-page-container": "_per-page-container_9gf1w_8",
+  "pages-navigator-container": "_pages-navigator-container_9gf1w_20",
+  "pages-navigator-container__label": "_pages-navigator-container__label_9gf1w_31",
+  "page-number__btn": "_page-number__btn_9gf1w_31",
+  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_9gf1w_44",
+  "page-number__btn--selected": "_page-number__btn--selected_9gf1w_69"
 }, T = {
   pt: {
     showing: "Exibindo",
@@ -122,7 +122,7 @@ const R = "_pagination_1exye_1", c = {
     next: "Next"
   }
 }, J = (e) => {
-  const a = e.perPageOptions || [5, 10, 25, 50, 100], _ = Math.ceil(e.totalItems / e.perPage), s = e.currentPage <= 1, b = e.currentPage >= _, h = e.t || T[e.language || "en"], g = (t) => h[t], { items: m } = $({
+  const a = e.perPageOptions || [5, 10, 25, 50, 100], _ = Math.ceil(e.totalItems / e.perPage), s = e.currentPage <= 1, b = e.currentPage >= _, h = e.t || T[e.language || "en"], c = (t) => h[t], { items: m } = $({
     count: _,
     hideNextButton: !0,
     hidePrevButton: !0,
@@ -131,14 +131,14 @@ const R = "_pagination_1exye_1", c = {
     siblingCount: 1,
     boundaryCount: 2
   });
-  return /* @__PURE__ */ P("div", { className: C(c.pagination, e.className), "data-testid": e["data-testid"], children: [
+  return /* @__PURE__ */ x("div", { className: C(g.pagination, e.className), "data-testid": e["data-testid"], children: [
     /* @__PURE__ */ i(
       "div",
       {
-        className: C(c["per-page-container"], e.classNamePerPage),
+        className: C(g["per-page-container"], e.classNamePerPage),
         "data-testid": e["data-testid__per-page"],
-        children: a && /* @__PURE__ */ P(M, { children: [
-          g`showing`,
+        children: a && /* @__PURE__ */ x(M, { children: [
+          c`showing`,
           /* @__PURE__ */ i(
             "select",
             {
@@ -159,52 +159,52 @@ const R = "_pagination_1exye_1", c = {
               })
             }
           ),
-          g`of`,
+          c`of`,
           " ",
           /* @__PURE__ */ i("strong", { children: e.totalItems }),
           " ",
-          g`results`
+          c`results`
         ] })
       }
     ),
-    /* @__PURE__ */ P(
+    /* @__PURE__ */ x(
       "div",
       {
-        className: C(c["pages-navigator-container"], e.classNamePagesNav),
+        className: C(g["pages-navigator-container"], e.classNamePagesNav),
         "data-testid": e["data-testid__per-page"],
         children: [
           /* @__PURE__ */ i(
             "button",
             {
-              className: c["pages-navigator-container__previous-next-btn"],
+              className: g["pages-navigator-container__previous-next-btn"],
               disabled: s,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
-              children: g`previous`
+              children: c`previous`
             },
             "page__previous"
           ),
-          m.map(({ page: t, type: o, selected: p, ...x }, u) => {
+          m.map(({ page: t, type: o, selected: p, ...f }, u) => {
             let d = /* @__PURE__ */ i(M, {});
-            return o === "start-ellipsis" || o === "end-ellipsis" ? d = /* @__PURE__ */ i("span", { className: c["pages-navigator-container__label"], children: "..." }) : o === "page" ? d = /* @__PURE__ */ i(
+            return o === "start-ellipsis" || o === "end-ellipsis" ? d = /* @__PURE__ */ i("span", { className: g["pages-navigator-container__label"], children: "..." }) : o === "page" ? d = /* @__PURE__ */ i(
               "button",
               {
-                className: [c["page-number__btn"], p ? c["page-number__btn--selected"] : ""].join(" ").trim(),
+                className: [g["page-number__btn"], p ? g["page-number__btn--selected"] : ""].join(" ").trim(),
                 onClick: () => e.onPageChange(t || 0),
                 type: "button",
                 children: t
               },
               `page__${u}`
-            ) : d = /* @__PURE__ */ i("button", { type: "button", ...x, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
+            ) : d = /* @__PURE__ */ i("button", { type: "button", ...f, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
           }),
           /* @__PURE__ */ i(
             "button",
             {
-              className: c["pages-navigator-container__previous-next-btn"],
+              className: g["pages-navigator-container__previous-next-btn"],
               disabled: b,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
-              children: g`next`
+              children: c`next`
             },
             "page__next"
           )

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type SkeletonProps = {
+    style?: React.CSSProperties | undefined;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+type SkeletonCircleProps = SkeletonProps & {
+    size?: string | number;
+};
+declare const SkeletonCircle: ({ size, ...props }: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
+type SkeletonTableProps = SkeletonProps & {
+    columns?: number;
+    rows?: number;
+    autoWidth?: boolean;
+};
+declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+export { Skeleton, SkeletonCircle, SkeletonTable };