@pismo/marola 1.0.0-beta.9 → 1.0.0

package/dist/components/InputSearch/InputSearch.d.ts

@@ -1,9 +1,39 @@
-import { Input } from '../Input/Input';
-import { ComponentProps } from 'react';
+import { ForwardedRef } from 'react';
 
-type InputSearchProps = {
+export declare const InputSearch: import('react').ForwardRefExoticComponent<(Omit<{
     /** How many milliseconds to wait before trigger the onChange event */
-    triggerDelay?: number;
-} & ComponentProps<typeof Input>;
-export declare const InputSearch: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: InputSearchProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    triggerDelay?: number | undefined;
+    ref?: ForwardedRef<HTMLInputElement> | undefined;
+} & import('react').InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | undefined;
+    infoMessage?: string | undefined;
+    error?: boolean | undefined;
+    errorMessage?: string | undefined;
+    multiline?: false | undefined;
+    leftIcon?: import('react').ReactNode;
+    rightIcon?: import('react').ReactNode;
+    type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | undefined;
+    decimalLength?: number | undefined;
+    hideCharsCounter?: boolean | undefined;
+    classNameWrapper?: string | undefined;
+    classNameLabel?: string | undefined;
+    classNameInput?: string | undefined;
+    classNameInfoMessage?: string | undefined;
+    classNameErrorMessage?: string | undefined;
+    classNameCharsCounter?: string | undefined;
+    'data-testid-wrapper'?: string | undefined;
+    'data-testid-label'?: string | undefined;
+    'data-testid-input'?: string | undefined;
+    'data-testid-infoMessage'?: string | undefined;
+    'data-testid-errorMessage'?: string | undefined;
+    'data-testid-charsCounter'?: string | undefined;
+} & import('react').RefAttributes<HTMLInputElement>, "ref"> | Omit<{
+    /** How many milliseconds to wait before trigger the onChange event */
+    triggerDelay?: number | undefined;
+    ref?: ForwardedRef<HTMLInputElement> | undefined;
+} & Omit<import('../Input/Input').SingleInputProps, "multiline"> & {
+    multiline: true;
+    minRows?: number | undefined;
+    maxRows?: number | undefined;
+    rows?: number | undefined;
+} & import('react').RefAttributes<HTMLInputElement>, "ref">) & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/InputSearch/InputSearch.js

@@ -1,34 +1,32 @@
 import '../../assets/InputSearch.css';
 import { jsx as e } from "react/jsx-runtime";
-import { c as m } from "../../clsx-DB4S2d7J.js";
-import { Icon as p } from "../Icon/Icon.js";
-import { Input as u } from "../Input/Input.js";
-const l = "_inputSearch_114e1_1", h = {
-  inputSearch: l
-};
-let n;
-const d = ({
-  classNameWrapper: r,
-  triggerDelay: o = 500,
-  value: c,
-  onChange: i = () => {
-  },
-  ...a
-}) => {
-  const s = (t) => {
-    n && clearTimeout(n), n = setTimeout(() => i(t), o);
-  };
-  return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
-    u,
-    {
-      type: "search",
-      ...a,
-      leftIcon: /* @__PURE__ */ e(p, { icon: "magnifying-glass" }),
-      defaultValue: c,
-      onChange: (t) => s(t)
-    }
-  ) });
+import { forwardRef as p } from "react";
+import { c as u } from "../../clsx-DB4S2d7J.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { Input as l } from "../Input/Input.js";
+const h = "_inputSearch_114e1_1", g = {
+  inputSearch: h
 };
+let r;
+const _ = p(
+  ({ classNameWrapper: n, triggerDelay: o = 500, value: c, onChange: i = () => {
+  }, ...a }, s) => {
+    const m = (t) => {
+      r && clearTimeout(r), r = setTimeout(() => i(t), o);
+    };
+    return /* @__PURE__ */ e("div", { className: u(g.inputSearch, n), children: /* @__PURE__ */ e(
+      l,
+      {
+        type: "search",
+        ref: s,
+        ...a,
+        leftIcon: /* @__PURE__ */ e(f, { icon: "magnifying-glass" }),
+        defaultValue: c,
+        onChange: (t) => m(t)
+      }
+    ) });
+  }
+);
 export {
-  d as InputSearch
+  _ as InputSearch
 };

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

@@ -2,15 +2,19 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
+    component: import('react').ForwardRefExoticComponent<(Omit<{
         triggerDelay?: number | undefined;
+        ref?: import('react').ForwardedRef<HTMLInputElement> | undefined;
     } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
         infoMessage?: string | undefined;
+        error?: boolean | undefined;
         errorMessage?: string | undefined;
+        multiline?: false | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
+        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | undefined;
+        decimalLength?: number | undefined;
         hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
         classNameLabel?: string | undefined;
@@ -24,7 +28,15 @@ declare const meta: {
         'data-testid-infoMessage'?: string | undefined;
         'data-testid-errorMessage'?: string | undefined;
         'data-testid-charsCounter'?: string | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
+    } & import('react').RefAttributes<HTMLInputElement>, "ref"> | Omit<{
+        triggerDelay?: number | undefined;
+        ref?: import('react').ForwardedRef<HTMLInputElement> | undefined;
+    } & Omit<import('../Input/Input').SingleInputProps, "multiline"> & {
+        multiline: true;
+        minRows?: number | undefined;
+        maxRows?: number | undefined;
+        rows?: number | undefined;
+    } & import('react').RefAttributes<HTMLInputElement>, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -17,9 +17,11 @@ type LastBreadcrumbItem = Omit<BreadcrumbItem, 'onClick'> & {
 };
 type PageHeaderCommonProps = {
     /** Title text */
-    title: string;
+    title?: string;
     /** Subtitle text */
     subtitle?: string;
+    /** component to be rendered in the place of title and subtitle */
+    headerBubble?: ReactNode;
     /** Back link text
      * @deprecated Use breadcrumb prop instead.
      */
@@ -55,6 +57,8 @@ type PageHeaderCommonProps = {
     'data-testid-title'?: string;
     /** Id to be applied as `data-testid` on the subtitle element */
     'data-testid-subtitle'?: string;
+    /** Id to be applied as `data-testid` on the headerBubble element */
+    'data-testid-account-header'?: string;
     breadcrumb?: never;
 };
 type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
@@ -62,5 +66,5 @@ type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'on
     breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
 };
 export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
-export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,87 +1,94 @@
 import '../../assets/PageHeader.css';
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useMemo as L } from "react";
-import { c as h } from "../../clsx-DB4S2d7J.js";
-import { Icon as B } from "../Icon/Icon.js";
-import { IconButton as C } from "../IconButton/IconButton.js";
-const j = "_title_1qpkd_22", w = "_subtitle_1qpkd_43", e = {
-  "u-typography-h1": "_u-typography-h1_1qpkd_1",
-  "u-typography-h2": "_u-typography-h2_1qpkd_8",
-  "u-typography-h3": "_u-typography-h3_1qpkd_15",
-  "u-typography-h4": "_u-typography-h4_1qpkd_22",
-  "page-header__main-left-content": "_page-header__main-left-content_1qpkd_22",
-  title: j,
-  "u-typography-h5": "_u-typography-h5_1qpkd_29",
-  "u-typography-h6": "_u-typography-h6_1qpkd_36",
-  "u-typography-base": "_u-typography-base_1qpkd_43",
-  subtitle: w,
-  "u-typography-base--xxl": "_u-typography-base--xxl_1qpkd_49",
-  "u-typography-base--xl": "_u-typography-base--xl_1qpkd_53",
-  "u-typography-base--lg": "_u-typography-base--lg_1qpkd_57",
-  "u-typography-base--sm": "_u-typography-base--sm_1qpkd_61",
-  "u-typography-base--bold": "_u-typography-base--bold_1qpkd_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qpkd_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1qpkd_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qpkd_74",
-  "page-header": "_page-header_1qpkd_22",
-  "page-header__top-content": "_page-header__top-content_1qpkd_87",
-  "page-header__main-content": "_page-header__main-content_1qpkd_90",
-  "page-header__bottom-content": "_page-header__bottom-content_1qpkd_90",
-  "page-header__breadcrumb": "_page-header__breadcrumb_1qpkd_104",
-  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1qpkd_109",
-  "page-header__main-right-content": "_page-header__main-right-content_1qpkd_132"
-}, P = ({
-  title: g,
+import { jsx as e, Fragment as l, jsxs as i } from "react/jsx-runtime";
+import { useMemo as H } from "react";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
+import { Icon as I } from "../Icon/Icon.js";
+import { IconButton as T } from "../IconButton/IconButton.js";
+const $ = "_title_1loyf_22", q = "_subtitle_1loyf_43", a = {
+  "u-typography-h1": "_u-typography-h1_1loyf_1",
+  "u-typography-h2": "_u-typography-h2_1loyf_8",
+  "u-typography-h3": "_u-typography-h3_1loyf_15",
+  "u-typography-h4": "_u-typography-h4_1loyf_22",
+  "page-header__main-left-content": "_page-header__main-left-content_1loyf_22",
+  title: $,
+  "u-typography-h5": "_u-typography-h5_1loyf_29",
+  "u-typography-h6": "_u-typography-h6_1loyf_36",
+  "u-typography-base": "_u-typography-base_1loyf_43",
+  subtitle: q,
+  "u-typography-base--xxl": "_u-typography-base--xxl_1loyf_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1loyf_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1loyf_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1loyf_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1loyf_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1loyf_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1loyf_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1loyf_74",
+  "page-header": "_page-header_1loyf_22",
+  "page-header__top-content": "_page-header__top-content_1loyf_87",
+  "page-header__main-content": "_page-header__main-content_1loyf_90",
+  "page-header__bottom-content": "_page-header__bottom-content_1loyf_90",
+  "page-header__breadcrumb": "_page-header__breadcrumb_1loyf_104",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1loyf_115",
+  "account-header": "_account-header_1loyf_139",
+  "account-header--container": "_account-header--container_1loyf_142",
+  "page-header__main-right-content": "_page-header__main-right-content_1loyf_150",
+  "account-header-margin": "_account-header-margin_1loyf_159"
+}, D = ({
+  title: n,
   subtitle: y,
-  rightChildren: n,
-  bottomChildren: c,
+  rightChildren: g,
+  bottomChildren: h,
   classNameWrapper: u,
-  classNameTitle: b,
+  classNameTitle: f,
   classNameSubtitle: k,
-  "data-testid-wrapper": m,
-  "data-testid-title": q,
-  "data-testid-subtitle": N,
-  ...f
+  headerBubble: r,
+  "data-testid-wrapper": N,
+  "data-testid-title": v,
+  "data-testid-subtitle": x,
+  "data-testid-account-header": C,
+  ...L
 }) => {
   const {
-    breadcrumb: _,
-    backLinkText: r,
-    onBackLinkClick: d,
-    classNameBackLink: i,
-    "data-testid-backLink": l,
-    ...x
-  } = f, v = L(() => {
-    const p = [];
-    return r && d && p.push({
-      label: r,
-      className: i,
-      "data-testid": l,
-      onClick: d
-    }), _ && p.push(..._), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: p.map((t, s) => /* @__PURE__ */ a(
-      C,
+    breadcrumb: s,
+    backLinkText: p,
+    onBackLinkClick: c,
+    classNameBackLink: m,
+    "data-testid-backLink": b,
+    ...w
+  } = L;
+  r && (n || y || h) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
+  const j = r ? _([a["page-header"], u, a["account-header-margin"]]) : _([a["page-header"], u]), B = H(() => {
+    const o = [];
+    return p && c && o.push({
+      label: p,
+      className: m,
+      "data-testid": b,
+      onClick: c
+    }), s && o.push(...s), /* @__PURE__ */ e("div", { className: a["page-header__top-content"], children: /* @__PURE__ */ e("div", { className: a["page-header__breadcrumb"], children: o.map((t, d) => /* @__PURE__ */ e(
+      T,
       {
-        icon: s === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
+        icon: d === 0 ? /* @__PURE__ */ e(I, { icon: "house-blank" }) : /* @__PURE__ */ e("span", { className: a["page-header__breadcrumb__separator"], children: "/" }),
         onClick: () => t.onClick && t.onClick(),
         className: t.className,
         "data-testid": t["data-testid"],
-        disabled: p.length === 1 ? !1 : s === p.length - 1,
+        disabled: o.length === 1 ? !1 : d === o.length - 1,
         children: t.label
       },
-      `${t.label}_${s}`
+      `${t.label}_${d}`
     )) }) });
-  }, [_, r, i, l, d]);
-  return /* @__PURE__ */ o("div", { className: h([e["page-header"], u]), "data-testid": m, ...x, children: [
-    v,
-    /* @__PURE__ */ o("div", { className: e["page-header__main-content"], children: [
-      /* @__PURE__ */ o("div", { className: e["page-header__main-left-content"], children: [
-        /* @__PURE__ */ a("h1", { className: h(e.title, b), "data-testid": q, children: g }),
-        /* @__PURE__ */ a("h2", { className: h(e.subtitle, k), "data-testid": N, children: y })
-      ] }),
-      n && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: n })
+  }, [s, p, m, b, c]);
+  return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ i("div", { className: j, "data-testid": N, ...w, children: [
+    B,
+    /* @__PURE__ */ i("div", { className: a["page-header__main-content"], children: [
+      /* @__PURE__ */ e("div", { className: a["page-header__main-left-content"], children: r ? /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: a["account-header"], children: /* @__PURE__ */ e("div", { className: a["account-header--container"], "data-testid": C, children: r }) }) }) : /* @__PURE__ */ i(l, { children: [
+        /* @__PURE__ */ e("h1", { className: _(a.title, f), "data-testid": v, children: n }),
+        /* @__PURE__ */ e("h2", { className: _(a.subtitle, k), "data-testid": x, children: y })
+      ] }) }),
+      g && /* @__PURE__ */ e("div", { className: a["page-header__main-right-content"], children: g })
     ] }),
-    c && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: c })
-  ] });
+    h && /* @__PURE__ */ e("div", { className: a["page-header__bottom-content"], children: h })
+  ] }) });
 };
 export {
-  P as PageHeader
+  D as PageHeader
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;
@@ -12,3 +12,5 @@ export declare const WithBackLink: Story;
 export declare const WithBreadcrumb: Story;
 export declare const WithRightChildren: Story;
 export declare const WithBottomChildren: Story;
+export declare const WithHeaderBubble: Story;
+export declare const WithLargeHeaderBubble: Story;

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

@@ -0,0 +1 @@
+export {};

package/dist/components/Pagination/Pagination.d.ts

@@ -1,3 +1,5 @@
+import { UsePaginationProps } from './usePagination';
+
 export type PaginationParams = {
     /** Total number of items to paginate */
     totalItems: number;
@@ -53,9 +55,11 @@ export type PaginationProps = {
     language?: PaginationLanguages;
     /** Custom translation object to be used for texts. */
     t?: Partial<PaginationTranslations>;
+    /** usePagination hook props */
+    usePaginationProps?: UsePaginationProps;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
-export declare const Pagination: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Pagination/Pagination.js

@@ -1,9 +1,9 @@
 import '../../assets/Pagination.css';
 import { jsxs as s, Fragment as p, jsx as t } from "react/jsx-runtime";
-import { c as o } from "../../clsx-DB4S2d7J.js";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
 import { Select as d } from "../Select/Select.js";
-import I from "./usePagination.js";
-const C = "_pagination_2n0nk_43", a = {
+import C from "./usePagination.js";
+const w = "_pagination_2n0nk_43", a = {
   "u-typography-h1": "_u-typography-h1_2n0nk_1",
   "u-typography-h2": "_u-typography-h2_2n0nk_8",
   "u-typography-h3": "_u-typography-h3_2n0nk_15",
@@ -11,7 +11,7 @@ const C = "_pagination_2n0nk_43", a = {
   "u-typography-h5": "_u-typography-h5_2n0nk_29",
   "u-typography-h6": "_u-typography-h6_2n0nk_36",
   "u-typography-base": "_u-typography-base_2n0nk_43",
-  pagination: C,
+  pagination: w,
   "per-page-container": "_per-page-container_2n0nk_43",
   "u-typography-base--xxl": "_u-typography-base--xxl_2n0nk_49",
   "u-typography-base--xl": "_u-typography-base--xl_2n0nk_53",
@@ -27,7 +27,7 @@ const C = "_pagination_2n0nk_43", a = {
   "page-number__btn": "_page-number__btn_2n0nk_115",
   "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_2n0nk_134",
   "page-number__btn--selected": "_page-number__btn--selected_2n0nk_159"
-}, w = {
+}, B = {
   pt: {
     showing: "Exibindo",
     of: "de",
@@ -44,23 +44,29 @@ const C = "_pagination_2n0nk_43", a = {
     next: "Next",
     perPage: "Items per page"
   }
-}, j = ({ perPageOptions: g = [5, 10, 25, 50, 100], language: y = "en", ...e }) => {
-  const l = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, m = e.currentPage >= l, k = { ...w[y], ...e.t || {} }, i = (n) => k[n], { items: v } = I({
+}, $ = ({
+  perPageOptions: o = [5, 10, 25, 50, 100],
+  language: y = "en",
+  usePaginationProps: b = {},
+  ...e
+}) => {
+  const l = Math.ceil(e.totalItems / e.perPage), m = e.currentPage <= 1, k = e.currentPage >= l, v = { ...B[y], ...e.t || {} }, i = (n) => v[n], { items: x } = C({
     count: l,
+    page: e.currentPage,
     hideNextButton: !0,
     hidePrevButton: !0,
-    page: e.currentPage,
     siblingCount: 1,
-    boundaryCount: 2
-  }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, x = u > e.totalItems ? u - e.totalItems : 0, P = u - x;
-  return /* @__PURE__ */ s("div", { className: o(a.pagination, e.className), "data-testid": e["data-testid"], children: [
+    boundaryCount: 2,
+    ...b
+  }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, P = u > e.totalItems ? u - e.totalItems : 0, N = u - P;
+  return /* @__PURE__ */ s("div", { className: _(a.pagination, e.className), "data-testid": e["data-testid"], children: [
     /* @__PURE__ */ s(
       "div",
       {
-        className: o(a["per-page-container"], e.classNamePerPage),
+        className: _(a["per-page-container"], e.classNamePerPage),
         "data-testid": e["data-testid-per-page"],
         children: [
-          g && /* @__PURE__ */ s(p, { children: [
+          o && /* @__PURE__ */ s(p, { children: [
             /* @__PURE__ */ t("span", { children: i`perPage` }),
             /* @__PURE__ */ t(
               d,
@@ -68,7 +74,7 @@ const C = "_pagination_2n0nk_43", a = {
                 className: a["per-page-container__select"],
                 value: String(e.perPage),
                 onChange: (n) => e.onRowsPerPageChange(Number(n)),
-                children: g == null ? void 0 : g.map((n) => {
+                children: o == null ? void 0 : o.map((n) => {
                   const r = typeof n == "number";
                   return /* @__PURE__ */ t(
                     d.Option,
@@ -82,66 +88,59 @@ const C = "_pagination_2n0nk_43", a = {
               }
             )
           ] }),
-          /* @__PURE__ */ s(
-            "div",
-            {
-              className: o(a["page-infos"], e.classNamePagesInfo),
-              "data-testid": e["data-testid-pages-info"],
-              children: [
-                /* @__PURE__ */ s("span", { children: [
-                  c,
-                  " - ",
-                  P
-                ] }),
-                " ",
-                /* @__PURE__ */ s("span", { children: [
-                  i`of`,
-                  " ",
-                  /* @__PURE__ */ t("strong", { children: e.totalItems }),
-                  " ",
-                  i`results`
-                ] })
-              ]
-            }
-          )
+          /* @__PURE__ */ s("div", { className: e.classNamePagesInfo, "data-testid": e["data-testid-pages-info"], children: [
+            /* @__PURE__ */ s("span", { children: [
+              c,
+              " - ",
+              N
+            ] }),
+            " ",
+            /* @__PURE__ */ s("span", { children: [
+              i`of`,
+              " ",
+              /* @__PURE__ */ t("strong", { children: e.totalItems }),
+              " ",
+              i`results`
+            ] })
+          ] })
         ]
       }
     ),
     /* @__PURE__ */ s(
       "div",
       {
-        className: o(a["pages-navigator-container"], e.classNamePagesNav),
+        className: _(a["pages-navigator-container"], e.classNamePagesNav),
         "data-testid": e["data-testid-pages-nav"],
         children: [
           /* @__PURE__ */ t(
             "button",
             {
               className: a["pages-navigator-container__previous-next-btn"],
-              disabled: b,
+              disabled: m,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
               children: i`previous`
             },
             "page__previous"
           ),
-          /* @__PURE__ */ t("ul", { children: v.map(({ page: n, type: r, selected: N, ...f }, h) => {
-            let _ = /* @__PURE__ */ t(p, {});
-            return r === "start-ellipsis" || r === "end-ellipsis" ? _ = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? _ = /* @__PURE__ */ t(
+          /* @__PURE__ */ t("ul", { children: x.map(({ page: n, type: r, selected: f, ...I }, h) => {
+            let g = /* @__PURE__ */ t(p, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? g = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? g = /* @__PURE__ */ t(
               "button",
               {
-                className: o(a["page-number__btn"], N && a["page-number__btn--selected"]),
+                className: _(a["page-number__btn"], f && a["page-number__btn--selected"]),
                 onClick: () => e.onPageChange(n || 0),
                 type: "button",
                 children: n
               },
               `page__${h}`
-            ) : _ = /* @__PURE__ */ t("button", { type: "button", ...f, children: r }), /* @__PURE__ */ t("li", { children: _ }, h);
+            ) : g = /* @__PURE__ */ t("button", { type: "button", ...I, children: r }), /* @__PURE__ */ t("li", { children: g }, h);
           }) }),
           /* @__PURE__ */ t(
             "button",
             {
               className: a["pages-navigator-container__previous-next-btn"],
-              disabled: m,
+              disabled: k,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
               children: i`next`
@@ -154,6 +153,6 @@ const C = "_pagination_2n0nk_43", a = {
   ] });
 };
 export {
-  j as Pagination,
-  w as paginationDefaultTranslations
+  $ as Pagination,
+  B as paginationDefaultTranslations
 };

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,32 @@
+import { PopupOffsetOptions, PopupPlacement } from '@mui/base/Unstable_Popup';
+
+export type PopoverProps = {
+    /** An HTML element or a function that returns either. */
+    anchorRef?: Element;
+    /** Boolean to open. */
+    open?: boolean;
+    /** React Node. */
+    children: React.ReactNode;
+    /** Determines where to place the popup relative to the trigger element. */
+    placement?: PopupPlacement;
+    /** Distance between a popup and the trigger element */
+    offset?: PopupOffsetOptions;
+    /** Class name */
+    className?: string;
+    /** Id to be applied as `data-testid` on the root element */
+    'data-testid'?: string;
+    /** Callback fired when a "click away" event is detected. */
+    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+};
+export declare const Popover: {
+    ({ anchorRef, open, children, placement, className, offset, "data-testid": dataTestId, onClickAway, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: {
+        children: import('react').ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children }: {
+        children: import('react').ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children }: {
+        children: import('react').ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as f } from "../../clsx-DB4S2d7J.js";
+import { s as v } from "../../Popover.module-B4boCutS.js";
+import { PopoverBody as l } from "./PopoverBody.js";
+import { PopoverFooter as n } from "./PopoverFooter.js";
+import { PopoverHeader as P } from "./PopoverHeader.js";
+import { P as y } from "../../Popup-Ck3XlWMq.js";
+import { C as h } from "../../ClickAwayListener-DbEYZpyh.js";
+const r = ({
+  anchorRef: t,
+  open: m,
+  children: p,
+  placement: i,
+  className: s,
+  offset: a,
+  "data-testid": d,
+  onClickAway: e
+}) => /* @__PURE__ */ o(h, { onClickAway: (c) => e ? e(c) : void 0, children: /* @__PURE__ */ o(y, { offset: a, placement: i, open: m, anchor: t, children: /* @__PURE__ */ o("div", { "data-testid": d, className: f(v.popover, s), children: p }) }) });
+r.Header = P;
+r.Footer = n;
+r.Body = l;
+export {
+  r as Popover
+};