@pismo/marola 2.1.31 → 2.1.33

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

@@ -17,9 +17,12 @@ declare const meta: {
         navigatorInput?: boolean | undefined;
         className?: string | undefined;
         'data-testid'?: string | undefined;
+        error?: boolean | undefined;
         mode: "single";
         value?: Date | undefined;
         placeholder?: string | undefined;
+        infoMessage?: import('react').ReactNode;
+        errorMessage?: import('react').ReactNode;
     } | {
         viewMode: "month" | "day" | "year";
         locale?: string | undefined;
@@ -32,18 +35,25 @@ declare const meta: {
         navigatorInput?: boolean | undefined;
         className?: string | undefined;
         'data-testid'?: string | undefined;
+        error?: boolean | undefined;
         mode: "range";
         values?: [Date, Date] | undefined;
         placeholders?: [string, string] | undefined;
         limit?: number | undefined;
+        infoMessages?: [import('react').ReactNode?, import('react').ReactNode?] | undefined;
+        errorMessages?: [import('react').ReactNode?, import('react').ReactNode?] | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<DatePickerProps>;
 export declare const Single: Story;
 export declare const SingleWithValue: Story;
+export declare const SingleWithInfoMessage: Story;
+export declare const SingleWithErrorMessage: Story;
 export declare const RangePicker: Story;
 export declare const RangeWithValues: Story;
+export declare const RangeWithInfoMessages: Story;
+export declare const RangeWithErrorMessages: Story;
 export declare const RangeWithLimit: Story;
 export declare const MonthView: Story;
 export declare const YearView: Story;

package/dist/components/DatePicker/renderCalendarDays.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as x } from "react/jsx-runtime";
 import { d as E } from "../../dayjs.min-ClQKmc--.js";
-import { s as i } from "../../DatePicker.module-CFu_FsW6.js";
+import { s as i } from "../../DatePicker.module-gd1PqICl.js";
 import { getWeekdayNames as I, getMonthGrid as W, isDateInRange as S, isRangeStart as c, isRangeEnd as y, isDisabled as k, isCurrentDay as h, formatDateForInput as A } from "./dateUtils.js";
 const H = (a, n, s) => {
   if (!n[0] || !s) return !1;

package/dist/components/DatePicker/renderDualCalendarHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { Icon as o } from "../Icon/Icon.js";
-import { s as t } from "../../DatePicker.module-CFu_FsW6.js";
+import { s as t } from "../../DatePicker.module-gd1PqICl.js";
 import { getPreviousMonth as d, getNextMonth as n } from "./dateUtils.js";
 const v = ({ currentMonth: e, locale: r, setCurrentMonth: i }) => /* @__PURE__ */ s("div", { className: t["month-header-row"], "data-testid": "dual-calendar-header", children: [
   /* @__PURE__ */ a(

package/dist/components/DatePicker/renderHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e, Fragment as n } from "react/jsx-runtime";
 import { Icon as o } from "../Icon/Icon.js";
-import { s as t } from "../../DatePicker.module-CFu_FsW6.js";
+import { s as t } from "../../DatePicker.module-gd1PqICl.js";
 const k = ({
   currentViewMode: r,
   currentMonth: a,

package/dist/components/DatePicker/renderNavigatorInput.js

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as n } from "react/jsx-runtime";
 import { Icon as s } from "../Icon/Icon.js";
-import { s as i } from "../../DatePicker.module-CFu_FsW6.js";
+import { s as i } from "../../DatePicker.module-gd1PqICl.js";
 const p = ({
   navigateToPrevious: b,
   navigateToNext: u,

package/dist/components/DatePicker/renderPeriodSelection.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { d as Y } from "../../dayjs.min-ClQKmc--.js";
-import { s } from "../../DatePicker.module-CFu_FsW6.js";
+import { s } from "../../DatePicker.module-gd1PqICl.js";
 const T = ({
   currentViewMode: d,
   currentMonth: i,

package/dist/components/DoubleInput/DoubleInput.js

@@ -1,25 +1,39 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import { Input as r } from "../Input/Input.js";
-import '../../assets/DoubleInput.css';const m = "_container_49u1c_1", _ = "_separator_49u1c_28", a = {
-  container: m,
-  "left-input": "_left-input_49u1c_16",
-  "right-input": "_right-input_49u1c_22",
-  separator: _
-}, v = ({
-  separator: s,
-  leftInputProps: n,
-  rightInputProps: o,
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { Input as a } from "../Input/Input.js";
+import '../../assets/DoubleInput.css';const n = {
+  "double-input-container": "_double-input-container_1sagd_1",
+  "double-input-container__left-input": "_double-input-container__left-input_1sagd_18",
+  "double-input-container__right-input": "_double-input-container__right-input_1sagd_19",
+  "double-input-container__separator": "_double-input-container__separator_1sagd_22"
+}, h = ({
+  separator: o,
+  leftInputProps: u,
+  rightInputProps: r,
   leftWidth: i = "auto",
   rightWidth: e = "auto",
-  separatorStyles: c,
-  className: p,
-  "data-testid": u
-}) => /* @__PURE__ */ l("div", { className: d(a.container, p), "data-testid": u, children: [
-  /* @__PURE__ */ t("div", { style: { minWidth: i, maxWidth: i }, className: a["left-input"], children: /* @__PURE__ */ t(r, { ...n }) }),
-  /* @__PURE__ */ t("div", { className: a.separator, id: "double-input-separator", style: c, children: s }),
-  /* @__PURE__ */ t("div", { style: { minWidth: e, maxWidth: e }, className: a["right-input"], children: /* @__PURE__ */ t(r, { ...o }) })
+  separatorStyles: d,
+  className: s,
+  "data-testid": _
+}) => /* @__PURE__ */ l("div", { className: p(n["double-input-container"], s), "data-testid": _, children: [
+  /* @__PURE__ */ t(
+    "div",
+    {
+      style: { minWidth: i, maxWidth: i },
+      className: n["double-input-container__left-input"],
+      children: /* @__PURE__ */ t(a, { ...u })
+    }
+  ),
+  /* @__PURE__ */ t("div", { className: n["double-input-container__separator"], id: "double-input-separator", style: d, children: o }),
+  /* @__PURE__ */ t(
+    "div",
+    {
+      style: { minWidth: e, maxWidth: e },
+      className: n["double-input-container__right-input"],
+      children: /* @__PURE__ */ t(a, { ...r })
+    }
+  )
 ] });
 export {
-  v as DoubleInput
+  h as DoubleInput
 };

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

@@ -19,3 +19,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithLabels: Story;
 export declare const WithIconAsSeparator: Story;
+export declare const WithInfoMessages: Story;
+export declare const WithErrorMessages: Story;
+export declare const WithErrorState: Story;

package/dist/components/Stepper/Stepper.d.ts

@@ -8,9 +8,15 @@ export type StepperProps = {
     className?: string;
     /** CSS classes to be applied on the item element */
     classNameItem?: string;
-    /** CSS classes to be applied on the counter element */
+    /**
+     * CSS classes to be applied on the counter element
+     * @deprecated This property is deprecated and will be removed in a future version
+     */
     classNameCounter?: string;
-    /** CSS classes to be applied on the name element */
+    /**
+     * CSS classes to be applied on the name element
+     * @deprecated This property is deprecated and will be removed in a future version
+     */
     classNameName?: string;
     /** Id to be applied as `data-testid` on the container element */
     'data-testid'?: string;
@@ -21,5 +27,5 @@ export type StepperProps = {
     /** Id to be applied as `data-testid` on the name element */
     'data-testid-name'?: string;
 };
-declare const Stepper: ({ currentStep, steps, classNameItem, classNameCounter, classNameName, ...rest }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stepper: ({ currentStep, steps, classNameItem, ...rest }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export { Stepper };

package/dist/components/Stepper/Stepper.js

@@ -1,32 +1,36 @@
-import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { c as s } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Stepper.css';const u = "_stepper_1h8au_61", h = "_item_1h8au_61", v = "_name_1h8au_61", N = "_counter_1h8au_65", t = {
-  stepper: u,
-  item: h,
-  name: v,
-  "item--active": "_item--active_1h8au_65",
-  "item--completed": "_item--completed_1h8au_65",
-  counter: N
-}, x = ({ currentStep: c = 0, steps: m, classNameItem: d, classNameCounter: o, classNameName: n, ...e }) => /* @__PURE__ */ i("div", { className: s(t.stepper, e.className), "data-testid": e["data-testid"], children: m.map((_, a) => {
-  const p = a < c, r = a === c;
-  return /* @__PURE__ */ l(
+import { jsx as c, jsxs as m } from "react/jsx-runtime";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import { Icon as n } from "../Icon/Icon.js";
+import '../../assets/Stepper.css';const _ = "_stepper_1c35a_43", v = "_item_1c35a_43", e = {
+  stepper: _,
+  item: v,
+  "item--active": "_item--active_1c35a_65",
+  "item-icon": "_item-icon_1c35a_117",
+  "item--completed": "_item--completed_1c35a_121"
+}, y = ({ currentStep: a = 0, steps: d, classNameItem: r, ...t }) => /* @__PURE__ */ c("div", { className: o(e.stepper, t.className), "data-testid": t["data-testid"], children: d.map((p, i) => {
+  const s = i < a, l = i === a;
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: s(
-        t.item,
-        p && t["item--completed"],
-        r && t["item--active"],
-        d
+      className: o(
+        e.item,
+        s && e["item--completed"],
+        l && e["item--active"],
+        r
       ),
-      "data-testid": e["data-testid-item"],
+      "data-testid": t["data-testid-item"],
       children: [
-        /* @__PURE__ */ i("div", { className: s(t.counter, o), "data-testid": e["data-testid-counter"], children: a + 1 }),
-        /* @__PURE__ */ i("div", { className: s(t.name, n), "data-testid": e["data-testid-name"], children: _ })
+        s && /* @__PURE__ */ c("span", { className: e["item-icon"], children: /* @__PURE__ */ c(n, { icon: "circle-check", color: "var(--colors-brand-primary-color-primary)" }) }),
+        /* @__PURE__ */ m("div", { "data-testid": t["data-testid-counter"], children: [
+          i + 1,
+          "."
+        ] }),
+        /* @__PURE__ */ c("div", { "data-testid": t["data-testid-name"], children: p })
       ]
     },
-    a
+    i
   );
 }) });
 export {
-  x as Stepper
+  y as Stepper
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { StepperProps } from './Stepper';
 declare const meta: {
     title: string;
-    component: ({ currentStep, steps, classNameItem, classNameCounter, classNameName, ...rest }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ currentStep, steps, classNameItem, ...rest }: StepperProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Table/Table.d.ts

@@ -23,7 +23,7 @@ type AlignProps = {
 type ExpandableProps = {
     /** Whether the row should be expandable */
     expandable?: boolean;
-    /** Text label for the expanadable row */
+    /** Text label for the expandable row */
     expandLabel?: string;
     expandedRows?: React.ReactNode[];
     /** Initially expanded state */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.1.31",
+  "version": "2.1.33",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/DatePicker.module-CFu_FsW6.js

@@ -1,45 +0,0 @@
-import './assets/DatePicker.css';const e = "_header_2uhz6_146", a = "_calendar_2uhz6_169", _ = "_weekdayNames_2uhz6_174", t = "_days_2uhz6_175", n = "_weekdayName_2uhz6_174", d = "_day_2uhz6_175", r = "_disabled_2uhz6_197", o = "_selected_2uhz6_197", h = "_faded_2uhz6_206", u = "_months_2uhz6_244", c = "_years_2uhz6_245", s = "_month_2uhz6_112", z = "_year_2uhz6_245", i = "_rotate_2uhz6_325", y = {
-  "datepicker-wrapper": "_datepicker-wrapper_2uhz6_79",
-  "datepicker-input-container": "_datepicker-input-container_2uhz6_88",
-  "datepicker-container": "_datepicker-container_2uhz6_96",
-  "range-mode": "_range-mode_2uhz6_109",
-  "month-header": "_month-header_2uhz6_112",
-  "month-header-row": "_month-header-row_2uhz6_123",
-  "nav-button": "_nav-button_2uhz6_135",
-  header: e,
-  calendar: a,
-  weekdayNames: _,
-  days: t,
-  weekdayName: n,
-  day: d,
-  disabled: r,
-  selected: o,
-  "range-start": "_range-start_2uhz6_197",
-  "range-end": "_range-end_2uhz6_197",
-  "range-selected": "_range-selected_2uhz6_197",
-  faded: h,
-  months: u,
-  years: c,
-  month: s,
-  year: z,
-  "today-footer": "_today-footer_2uhz6_284",
-  "today-button": "_today-button_2uhz6_290",
-  rotate: i,
-  "current-day": "_current-day_2uhz6_329",
-  "hovered-range": "_hovered-range_2uhz6_334",
-  "hovered-date": "_hovered-date_2uhz6_339",
-  "would-be-end-date": "_would-be-end-date_2uhz6_345",
-  "would-be-start-date": "_would-be-start-date_2uhz6_351",
-  "dual-calendar-container": "_dual-calendar-container_2uhz6_358",
-  "navigator-input": "_navigator-input_2uhz6_369",
-  "nav-month-button": "_nav-month-button_2uhz6_398",
-  "nav-year-button": "_nav-year-button_2uhz6_399",
-  "auto-width": "_auto-width_2uhz6_408",
-  "month-selector": "_month-selector_2uhz6_413",
-  "year-selector": "_year-selector_2uhz6_414",
-  "nav-calendar-static": "_nav-calendar-static_2uhz6_446",
-  "datepicker-buttons-container": "_datepicker-buttons-container_2uhz6_465"
-};
-export {
-  y as s
-};