@agrada_digital/pbm 0.0.113 → 0.0.114

package/dist/index.css

@@ -332,6 +332,9 @@
     .top-1\/2 {
       top: calc(1 / 2 * 100%);
     }
+    .top-3\.5 {
+      top: calc(var(--spacing) * 3.5);
+    }
     .-right-3 {
       right: calc(var(--spacing) * -3);
     }
@@ -344,6 +347,9 @@
     .left-2 {
       left: calc(var(--spacing) * 2);
     }
+    .left-17 {
+      left: calc(var(--spacing) * 17);
+    }
     .z-10 {
       z-index: 10;
     }
@@ -368,9 +374,6 @@
         max-width: 96rem;
       }
     }
-    .mx-1 {
-      margin-inline: calc(var(--spacing) * 1);
-    }
     .mx-4 {
       margin-inline: calc(var(--spacing) * 4);
     }
@@ -431,6 +434,9 @@
     .aspect-auto {
       aspect-ratio: auto;
     }
+    .h-0 {
+      height: calc(var(--spacing) * 0);
+    }
     .h-0\.5 {
       height: calc(var(--spacing) * 0.5);
     }
@@ -503,6 +509,9 @@
     .w-8 {
       width: calc(var(--spacing) * 8);
     }
+    .w-10 {
+      width: calc(var(--spacing) * 10);
+    }
     .w-16 {
       width: calc(var(--spacing) * 16);
     }
@@ -521,6 +530,9 @@
     .max-w-\[var\(--max-container\)\] {
       max-width: var(--max-container);
     }
+    .max-w-max {
+      max-width: max-content;
+    }
     .max-w-md {
       max-width: var(--container-md);
     }
@@ -742,6 +754,9 @@
         border-color: color-mix(in oklab, var(--color-zinc-400) 50%, transparent);
       }
     }
+    .bg-\(--pbm-input-background\) {
+      background-color: var(--pbm-input-background);
+    }
     .bg-\(--pbm-primary\) {
       background-color: var(--pbm-primary);
     }
@@ -1112,6 +1127,9 @@
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
     }
+    .outline-\(--pbm-outline-color\) {
+      outline-color: var(--pbm-outline-color);
+    }
     .outline-red-600 {
       outline-color: var(--color-red-600);
     }
@@ -1399,6 +1417,11 @@
         border-color: var(--color-blue-500);
       }
     }
+    .focus\:bg-\(--pbm-input-focus\) {
+      &:focus {
+        background-color: var(--pbm-input-focus);
+      }
+    }
     .focus\:bg-white {
       &:focus {
         background-color: var(--color-white);
@@ -1429,6 +1452,11 @@
         outline-width: 1px;
       }
     }
+    .focus\:outline-\(--pbm-outline-focus-color\) {
+      &:focus {
+        outline-color: var(--pbm-outline-focus-color);
+      }
+    }
     .active\:scale-95 {
       &:active {
         --tw-scale-x: 95%;

package/dist/index.d.ts

@@ -6,6 +6,10 @@ interface PBMTheme {
     backgroundColor?: string;
     textColor?: string;
     borderColor?: string;
+    inputOutlineColor?: string;
+    inputOutlineFocusColor?: string;
+    inputBackgroundColor?: string;
+    inputFocusBackgroundColor?: string;
 }
 interface PBMProps {
     original_product_price: number | string;
@@ -33,6 +37,7 @@ interface usePBMTypes {
     campaign: "pbm_campaign";
     targetProduct: IProduct | null;
     isAuthenticatedShopper: boolean;
+    benefitsEnabled: boolean;
     urlAcceptTerms?: string;
     urlRegisterIndustry?: string;
     customLoginUrl?: string;
@@ -70,6 +75,7 @@ interface PBMStore extends usePBMTypes {
     setIsAuthenticatedShopper: (isAuthenticatedShopper: usePBMTypes["isAuthenticatedShopper"]) => void;
     setCustomLoginUrl: (customLoginUrl: usePBMTypes["customLoginUrl"]) => void;
     setCardID: (cardID: usePBMTypes["cardID"]) => void;
+    setBenefitsEnabled: (benefitsEnabled: boolean) => void;
 }
 declare function usePBMStore(): PBMStore;
 declare function usePBMStore<T>(selector: (state: PBMStore) => T): T;

package/dist/index.js

@@ -49,6 +49,7 @@ var initialPBMState = {
     totalPrice: 0,
     grossPrice: 0
   },
+  benefitsEnabled: true,
   targetProduct: null,
   campaign: "pbm_campaign",
   isAuthenticatedShopper: false,
@@ -65,7 +66,8 @@ var createPBMStore = (set) => ({
   setUrlRegisterIndustry: (urlRegisterIndustry) => set({ urlRegisterIndustry }),
   setIsAuthenticatedShopper: (isAuthenticatedShopper) => set({ isAuthenticatedShopper }),
   setCustomLoginUrl: (customLoginUrl) => set({ customLoginUrl }),
-  setCardID: (cardID) => set({ cardID })
+  setCardID: (cardID) => set({ cardID }),
+  setBenefitsEnabled: (benefitsEnabled) => set({ benefitsEnabled })
 });
 var pbmStore = createStore(createPBMStore);
 function usePBMStore(selector) {
@@ -349,7 +351,7 @@ function Form({ startTransition }) {
                   {
                     type: "text",
                     className: classNames2(
-                      "w-full h-10 bg-gray-100 rounded-lg text-sm font-semibold focus:outline focus:bg-white text-zinc-600 placeholder:text-zinc-600 px-4 placeholder:text-sm placeholder:font-semibold",
+                      "w-full h-10 bg-(--pbm-input-background) rounded-lg text-sm font-semibold outline-(--pbm-outline-color) focus:outline focus:bg-(--pbm-input-focus) focus:outline-(--pbm-outline-focus-color) text-zinc-600 placeholder:text-zinc-600 px-4 placeholder:text-sm placeholder:font-semibold",
                       {
                         "outline outline-red-600": errors.securityNumber,
                         "rounded-lg": showCardIDField
@@ -654,7 +656,7 @@ var Icons = {
 // src/components/Header/index.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Header({ originalProductPrice }) {
-  const { targetProduct } = usePBMStore();
+  const { targetProduct, benefitsEnabled, setBenefitsEnabled } = usePBMStore();
   const Price = targetProduct?.listPrice || originalProductPrice;
   const Discount = Price * ((targetProduct?.discountMax || 0) / 100);
   return /* @__PURE__ */ jsxs3(
@@ -664,7 +666,16 @@ function Header({ originalProductPrice }) {
       id: "header_pbm",
       children: [
         /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-          /* @__PURE__ */ jsx4("input", { type: "checkbox", name: "option", className: "peer hidden" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              name: "option",
+              className: "peer hidden",
+              checked: benefitsEnabled,
+              onChange: (e) => setBenefitsEnabled(e.target.checked)
+            }
+          ),
           /* @__PURE__ */ jsx4("div", { className: "w-5 h-5 border border-(--pbm-primary) rounded-full flex items-center justify-center transition-all duration-300 after:content-[''] after:w-2 after:h-2 after:rounded-full after:bg-(--pbm-primary) after:scale-0 after:transition-transform after:duration-200 peer-checked:after:scale-100" }),
           /* @__PURE__ */ jsx4("p", { className: "font-medium text-(--pbm-primary) select-none text-sm", children: "Desconto de Laborat\xF3rio" }),
           /* @__PURE__ */ jsx4(Icons.Pills, { size: 16, color: "var(--pbm-primary)" })
@@ -891,12 +902,14 @@ function Container({
   children,
   variant
 }) {
+  const { benefitsEnabled } = usePBMStore();
   return /* @__PURE__ */ jsx9(
     "main",
     {
       className: classNames6({
-        "border-3 border-(--pbm-border) flex flex-col items-center justify-center min-w-(--min-container) max-w-(--max-container) w-full h-auto rounded-xl p-4 bg-white gap-4 relative": variant === "main",
-        "w-full h-auto relative": variant === "simple"
+        "border-3 border-(--pbm-border) overflow-hidden flex flex-col items-center justify-center min-w-(--min-container) max-w-(--max-container) w-full h-auto rounded-xl p-4 bg-white gap-4 relative": variant === "main",
+        "w-full relative": variant === "simple",
+        "h-0 overflow-hidden": !benefitsEnabled && variant === "simple"
       }),
       "data-testid": "test_id_container",
       "data-variant": variant,
@@ -2441,51 +2454,58 @@ var STEP_LABELS = [
   "M\xE9dico",
   "Aceites"
 ];
-var StepProgress = ({ current }) => /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-1 mb-6", children: STEP_LABELS.map((label, i) => {
+var StepProgress = ({ current }) => /* @__PURE__ */ jsx23("div", { className: "flex items-center w-full justify-center mb-6", children: STEP_LABELS.map((label, i) => {
   const done = i < current;
   const active = i === current;
-  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-1 shrink-0", children: [
-      /* @__PURE__ */ jsx23(
-        "div",
-        {
-          className: classNames12(
-            "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-all",
-            done ? "bg-emerald-600 text-white" : active ? "bg-(--pbm-primary) text-white ring-4 ring-(--pbm-primary)/15" : "bg-zinc-100 text-zinc-400"
-          ),
-          children: done ? /* @__PURE__ */ jsx23("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 12 10", fill: "none", children: /* @__PURE__ */ jsx23(
-            "path",
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: "flex items-center w-full min-w-0 justify-center relative",
+      children: [
+        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx23(
+            "div",
             {
-              d: "M1 5l4 4 6-8",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
+              className: classNames12(
+                "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-all",
+                done ? "bg-emerald-600 text-white" : active ? "bg-(--pbm-primary) text-white ring-4 ring-(--pbm-primary)/15" : "bg-zinc-100 text-zinc-400"
+              ),
+              children: done ? /* @__PURE__ */ jsx23("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 12 10", fill: "none", children: /* @__PURE__ */ jsx23(
+                "path",
+                {
+                  d: "M1 5l4 4 6-8",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) }) : i + 1
             }
-          ) }) : i + 1
-        }
-      ),
-      /* @__PURE__ */ jsx23(
-        "span",
-        {
-          className: classNames12(
-            "text-[10px] font-medium whitespace-nowrap hidden sm:block",
-            active ? "text-(--pbm-primary)" : done ? "text-emerald-600" : "text-zinc-400"
           ),
-          children: label
-        }
-      )
-    ] }),
-    i < STEP_LABELS.length - 1 && /* @__PURE__ */ jsx23(
-      "div",
-      {
-        className: classNames12(
-          "h-0.5 flex-1 rounded transition-all mx-1 mb-4",
-          done ? "bg-(--pbm-primary)" : "bg-zinc-200"
+          /* @__PURE__ */ jsx23(
+            "span",
+            {
+              className: classNames12(
+                "text-[10px] font-medium whitespace-nowrap hidden sm:block",
+                active ? "text-(--pbm-primary)" : done ? "text-emerald-600" : "text-zinc-400"
+              ),
+              children: label
+            }
+          )
+        ] }),
+        i < STEP_LABELS.length - 1 && /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: classNames12(
+              "h-0.5 w-10 rounded transition-all absolute top-3.5 left-17",
+              "bg-zinc-200"
+            )
+          }
         )
-      }
-    )
-  ] }, i);
+      ]
+    },
+    i
+  );
 }) });
 var StepProgress_default = StepProgress;
 
@@ -2582,7 +2602,7 @@ var CustomerNotRegistered = ({ ID }) => {
       ),
       children: [
         /* @__PURE__ */ jsx25("div", { className: "absolute inset-0", onClick: closeModal }),
-        /* @__PURE__ */ jsxs21("section", { className: "z-10 bg-white flex flex-col p-6 rounded-2xl w-full max-w-md mx-4 shadow-xl max-h-[90vh] overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs21("section", { className: "z-10 bg-white flex flex-col p-6 rounded-2xl w-full max-w-max mx-4 shadow-xl max-h-[90vh] overflow-y-auto", children: [
           /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between mb-4", children: [
             /* @__PURE__ */ jsx25(Title_default, { textSize: "18px", textAlign: "start", children: done ? "Tudo pronto!" : "Benef\xEDcio de Farm\xE1cia" }),
             /* @__PURE__ */ jsx25(
@@ -2809,9 +2829,11 @@ var initialThemeState = {
   secondaryColor: "#339c9b",
   backgroundColor: "#ffffff",
   textColor: "#52525b",
-  // zinc-600
-  borderColor: "#44c2c0"
-  // zinc-600
+  borderColor: "#44c2c0",
+  inputOutlineColor: "transparent",
+  inputOutlineFocusColor: "#323232",
+  inputBackgroundColor: "#EDEDED",
+  inputFocusBackgroundColor: "#EDEDED"
 };
 var themeStore = createStore2(
   (set) => ({
@@ -2962,7 +2984,11 @@ function PBM(props) {
         "--pbm-secondary": theme.secondaryColor,
         "--pbm-bg": theme.backgroundColor,
         "--pbm-text": theme.textColor,
-        "--pbm-border": theme.borderColor
+        "--pbm-border": theme.borderColor,
+        "--pbm-outline-color": theme.inputOutlineColor,
+        "--pbm-outline-focus-color": theme.inputOutlineFocusColor,
+        "--pbm-input-focus-background": theme.inputFocusBackgroundColor,
+        "--pbm-input-background": theme.inputBackgroundColor
       },
       children: [
         /* @__PURE__ */ jsxs23(Container_default, { variant: "main", children: [