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

package/dist/components/Dialog/Title.js

@@ -1,13 +1,28 @@
 import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { s as r } from "../../Dialog.module-BO0mdB7d.js";
 import { Typography as a } from "../Typography/Typography.js";
-const n = ({
-  title: i,
-  subTitle: t
-}) => /* @__PURE__ */ l(s, { children: [
-  /* @__PURE__ */ e(a, { element: "h1", elementProps: { id: "alert-dialog-title" }, variant: "h4", className: r.dialog__title, children: i }),
+import { s as r } from "../../Dialog.module-CGVM5V_D.js";
+const n = ({ title: i, subTitle: t }) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ e(
+    a,
+    {
+      element: "h1",
+      elementProps: { id: "alert-dialog-title" },
+      variant: "h4",
+      className: r.dialog__title,
+      children: i
+    }
+  ),
   /* @__PURE__ */ e("hr", { className: r.dialog__divider, "aria-hidden": !0 }),
-  t && /* @__PURE__ */ e(a, { element: "h2", elementProps: { id: "alert-dialog-description" }, variant: "h4", className: r.dialog__subtitle, children: t })
+  t && /* @__PURE__ */ e(
+    a,
+    {
+      element: "h2",
+      elementProps: { id: "alert-dialog-description" },
+      variant: "h4",
+      className: r.dialog__subtitle,
+      children: t
+    }
+  )
 ] });
 export {
   n as default

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

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

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,68 @@
+import '../../assets/IconButton.css';
+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 { 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_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_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,
+  "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/LoadingSpinner/LoadingSpinner.js

@@ -1,17 +1,16 @@
 import '../../assets/LoadingSpinner.css';
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { useMemo as e } from "react";
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { useMemo as o } from "react";
 import { c as t } from "../../clsx-DB4S2d7J.js";
 const n = {
-  "ls-ring": "_ls-ring_19dsy_1",
-  "ls-ring--invert": "_ls-ring--invert_19dsy_34"
-}, c = ({ invert: i = !1, classNames: r }) => {
-  const l = e(() => t(
-    [n["ls-ring"]],
-    { [n["ls-ring--invert"]]: i },
-    r
-  ), [r, i]);
-  return /* @__PURE__ */ o("div", { className: l, children: [
+  "ls-ring": "_ls-ring_elvjz_1",
+  "ls-ring--invert": "_ls-ring--invert_elvjz_34"
+}, a = ({ invert: i = !1, classNames: r }) => {
+  const l = o(
+    () => t([n["ls-ring"]], { [n["ls-ring--invert"]]: i }, r),
+    [r, i]
+  );
+  return /* @__PURE__ */ e("div", { className: l, children: [
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
     /* @__PURE__ */ s("div", {}),
@@ -19,6 +18,6 @@ const n = {
   ] });
 };
 export {
-  c as LoadingSpinner,
-  c as default
+  a as LoadingSpinner,
+  a as default
 };

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

@@ -0,0 +1,36 @@
+import { RequireAllOrNone } from '../../types/helpers';
+import { ReactNode } from 'react';
+
+type PageHeaderCommonProps = {
+    /** Title text */
+    title: string;
+    /** Subtitle text */
+    subtitle?: string;
+    /** Back link text */
+    backLinkText?: string;
+    /** Callback called when `back link` is clicked */
+    onBackLinkClick?: () => void;
+    /** 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, 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

@@ -0,0 +1,51 @@
+import '../../assets/PageHeader.css';
+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"
+}, ...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: z,
+  subtitle: b,
+  "page-header__main-right-content": "_page-header__main-right-content_cz9x0_64"
+}, y = ({
+  title: c,
+  subtitle: d,
+  backLinkText: r,
+  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__ */ 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 })
+    ] }),
+    i && /* @__PURE__ */ t("div", { className: e["page-header__main-right-content"], children: i })
+  ] }),
+  o && /* @__PURE__ */ t("div", { className: e["page-header__bottom-content"], children: o })
+] });
+export {
+  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.d.ts

@@ -0,0 +1,36 @@
+export type PaginationParams = {
+    totalItems: number;
+    perPage: number;
+    currentPage: number;
+};
+export type PaginationTranslations = {
+    showing: string;
+    of: string;
+    results: string;
+    previous: string;
+    next: string;
+};
+type PaginationLanguages = 'pt' | 'en';
+type PaginationCommonProps = {
+    className?: string;
+    'data-testid'?: string;
+    classNamePerPage?: string;
+    'data-testid__per-page'?: string;
+    classNamePagesNav?: string;
+    'data-testid__pages-nav'?: string;
+};
+export type PaginationProps = {
+    perPageOptions?: (number | {
+        value: number;
+        label: string;
+    })[] | undefined;
+    onPageChange: (page: number) => void;
+    onRowsPerPageChange: (perPage: number | string) => void;
+    language?: PaginationLanguages;
+    t?: PaginationTranslations;
+} & PaginationParams & PaginationCommonProps;
+export declare const defaultTranslations: {
+    [key in PaginationLanguages]: PaginationTranslations;
+};
+export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,219 @@
+import '../../assets/Pagination.css';
+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-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 = {}) {
+  const {
+    boundaryCount: a = 1,
+    componentName: _ = "usePagination",
+    count: s = 1,
+    defaultPage: b = 1,
+    disabled: h = !1,
+    hideNextButton: c = !1,
+    hidePrevButton: m = !1,
+    onChange: t,
+    page: o,
+    showFirstButton: p = !1,
+    showLastButton: f = !1,
+    siblingCount: u = 1
+  } = e, d = S(e, E), [r, k] = D({
+    controlled: o,
+    default: b,
+    name: _,
+    state: "page"
+  }), N = (n, l) => {
+    o || k(l), t && t(n, l);
+  }, v = (n, l) => {
+    const I = l - n + 1;
+    return Array.from({
+      length: I
+    }, (W, O) => n + O);
+  }, 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,
+      // Lower boundary when page is high
+      s - a - u * 2 - 1
+    ),
+    // Greater than startPages
+    a + 2
+  ), B = Math.min(
+    Math.max(
+      // Natural end
+      r + u,
+      // Upper boundary when page is low
+      a + u * 2 + 2
+    ),
+    // Less than endPages
+    P.length > 0 ? P[0] - 2 : s - 1
+  ), L = [
+    ...p ? ["first"] : [],
+    ...m ? [] : ["previous"],
+    ...j,
+    // Start ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...w > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    // Sibling pages
+    ...v(w, B),
+    // End ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...B < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
+    ...P,
+    ...c ? [] : ["next"],
+    ...f ? ["last"] : []
+  ], y = (n) => {
+    switch (n) {
+      case "first":
+        return 1;
+      case "previous":
+        return r - 1;
+      case "next":
+        return r + 1;
+      case "last":
+        return s;
+      default:
+        return null;
+    }
+  }, F = L.map((n) => typeof n == "number" ? {
+    onClick: (l) => {
+      N(l, n);
+    },
+    type: "page",
+    page: n,
+    selected: n === r,
+    disabled: h,
+    "aria-current": n === r ? "true" : void 0
+  } : {
+    onClick: (l) => {
+      N(l, y(n));
+    },
+    type: n,
+    page: y(n),
+    selected: !1,
+    disabled: h || n.indexOf("ellipsis") === -1 && (n === "next" || n === "last" ? r >= s : r <= 1)
+  });
+  return A({
+    items: F
+  }, d);
+}
+const R = "_pagination_9gf1w_1", g = {
+  pagination: R,
+  "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",
+    of: "de",
+    results: "resultados",
+    previous: "Anterior",
+    next: "Próximo"
+  },
+  en: {
+    showing: "Showing",
+    of: "of",
+    results: "results",
+    previous: "Previous",
+    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"], c = (t) => h[t], { items: m } = $({
+    count: _,
+    hideNextButton: !0,
+    hidePrevButton: !0,
+    page: e.currentPage,
+    onChange: (t, o) => e.onPageChange(o),
+    siblingCount: 1,
+    boundaryCount: 2
+  });
+  return /* @__PURE__ */ x("div", { className: C(g.pagination, e.className), "data-testid": e["data-testid"], children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: C(g["per-page-container"], e.classNamePerPage),
+        "data-testid": e["data-testid__per-page"],
+        children: a && /* @__PURE__ */ x(M, { children: [
+          c`showing`,
+          /* @__PURE__ */ i(
+            "select",
+            {
+              value: e.perPage,
+              name: "per-page-select",
+              id: "per-page-select",
+              onChange: (t) => e.onRowsPerPageChange(t.target.value),
+              children: a.map((t) => {
+                const o = typeof t == "number";
+                return /* @__PURE__ */ i(
+                  "option",
+                  {
+                    value: o ? t : t.value,
+                    children: o ? t : t.label
+                  },
+                  `per-page__${o ? t : t.value}`
+                );
+              })
+            }
+          ),
+          c`of`,
+          " ",
+          /* @__PURE__ */ i("strong", { children: e.totalItems }),
+          " ",
+          c`results`
+        ] })
+      }
+    ),
+    /* @__PURE__ */ x(
+      "div",
+      {
+        className: C(g["pages-navigator-container"], e.classNamePagesNav),
+        "data-testid": e["data-testid__per-page"],
+        children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              className: g["pages-navigator-container__previous-next-btn"],
+              disabled: s,
+              onClick: () => e.onPageChange(e.currentPage - 1),
+              type: "button",
+              children: c`previous`
+            },
+            "page__previous"
+          ),
+          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: g["pages-navigator-container__label"], children: "..." }) : o === "page" ? d = /* @__PURE__ */ i(
+              "button",
+              {
+                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", ...f, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
+          }),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              className: g["pages-navigator-container__previous-next-btn"],
+              disabled: b,
+              onClick: () => e.onPageChange(e.currentPage + 1),
+              type: "button",
+              children: c`next`
+            },
+            "page__next"
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  J as Pagination,
+  T as defaultTranslations
+};

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 };