@pismo/marola 2.1.32 → 2.1.33

package/dist/assets/Stepper.css

@@ -1 +1 @@
-._u-typography-h1_1h8au_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1h8au_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1h8au_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1h8au_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1h8au_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1h8au_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1h8au_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1h8au_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1h8au_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1h8au_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1h8au_61,._stepper_1h8au_61 ._item_1h8au_61 ._name_1h8au_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1h8au_65,._stepper_1h8au_61 ._item--active_1h8au_65 ._name_1h8au_61,._stepper_1h8au_61 ._item--completed_1h8au_65 ._counter_1h8au_65,._stepper_1h8au_61 ._item_1h8au_61 ._counter_1h8au_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1h8au_68{text-decoration:line-through}._u-typography-base--underlined_1h8au_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1h8au_74{text-decoration:underline line-through}._stepper_1h8au_61{display:flex;justify-content:space-between;margin:2.5rem auto}._stepper_1h8au_61 ._item_1h8au_61{position:relative;display:flex;flex:1;flex-direction:column;align-items:center}._stepper_1h8au_61 ._item_1h8au_61:before{position:absolute;top:20px;left:-50%;z-index:2;width:100%;content:"";border-bottom:2px solid var(--gray-50);transition:all var(--transition-long)}._stepper_1h8au_61 ._item_1h8au_61:after{position:absolute;top:20px;left:50%;z-index:2;width:100%;content:"";border-bottom:2px solid var(--gray-50);transition:all var(--transition-long)}._stepper_1h8au_61 ._item_1h8au_61 ._counter_1h8au_65{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-bottom:.5rem;line-height:1rem;color:var(--gray-50);background-color:var(--white-100);border:2px solid var(--gray-50);border-radius:50%;transition:all var(--transition-long)}._stepper_1h8au_61 ._item_1h8au_61 ._name_1h8au_61{color:var(--gray-50);text-align:center;transition:all var(--transition-long)}._stepper_1h8au_61 ._item_1h8au_61:first-child:before,._stepper_1h8au_61 ._item_1h8au_61:last-child:after{content:none}._stepper_1h8au_61 ._item--completed_1h8au_65 ._counter_1h8au_65{color:var(--white-100);background-color:var(--secondary-green-dark);border-color:var(--secondary-green-dark);transition:all var(--transition-long)}._stepper_1h8au_61 ._item--completed_1h8au_65 ._name_1h8au_61{font-weight:900;color:var(--secondary-green-dark);transition:all var(--transition-long)}._stepper_1h8au_61 ._item--completed_1h8au_65:after{position:absolute;top:20px;left:50%;z-index:3;width:100%;content:"";border-bottom:2px solid var(--secondary-green-dark);transition:all var(--transition-long)}._stepper_1h8au_61 ._item--active_1h8au_65 ._counter_1h8au_65{font-weight:700;color:var(--secondary-green-dark);background-color:var(--white-100);border-color:var(--secondary-green-dark);transition:all var(--transition-long)}._stepper_1h8au_61 ._item--active_1h8au_65 ._name_1h8au_61{color:var(--gray-75);transition:all var(--transition-long)}
+._u-typography-h1_1c35a_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1c35a_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1c35a_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1c35a_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1c35a_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1c35a_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1c35a_43,._stepper_1c35a_43 ._item_1c35a_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1c35a_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1c35a_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1c35a_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1c35a_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1c35a_65,._stepper_1c35a_43 ._item_1c35a_43._item--active_1c35a_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1c35a_68{text-decoration:line-through}._u-typography-base--underlined_1c35a_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1c35a_74{text-decoration:underline line-through}._stepper_1c35a_43{display:flex;gap:.3rem;justify-content:space-between;margin:2.5rem auto}._stepper_1c35a_43 ._item_1c35a_43{position:relative;box-sizing:border-box;display:flex;flex:1;gap:.5rem;justify-content:center;align-items:center;padding:.6875rem 0;color:var(--colors-neutral-text-color-text-disabled);transition:color .4s ease}._stepper_1c35a_43 ._item_1c35a_43:before{position:absolute;bottom:0;left:0;width:100%;height:4px;content:" ";background:var(--border-secondary);border-radius:var(--border-radius)}._stepper_1c35a_43 ._item_1c35a_43:after{position:absolute;bottom:0;left:0;width:0%;height:4px;content:" ";background:transparent;border-radius:var(--border-radius);transition:width .4s ease-in-out,background-color .2s ease-in-out}._stepper_1c35a_43 ._item-icon_1c35a_117{animation:_fadeIn_1c35a_1 .6s ease-in-out;line-height:0}._stepper_1c35a_43 ._item_1c35a_43._item--completed_1c35a_121{color:var(--colors-neutral-text-color-text)}._stepper_1c35a_43 ._item_1c35a_43._item--completed_1c35a_121:after{width:100%;color:var(--colors-neutral-text-color-text);background:var(--accent)}._stepper_1c35a_43 ._item_1c35a_43._item--active_1c35a_65{color:var(--colors-neutral-text-color-text)}._stepper_1c35a_43 ._item_1c35a_43._item--active_1c35a_65:after{width:10%;color:var(--colors-neutral-text-color-text);background:var(--accent);transition-delay:.4s}@keyframes _fadeIn_1c35a_1{0%{opacity:0}to{opacity:1}}

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/package.json

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