1mpacto-react-ui 2.0.26 → 2.0.27

package/dist/components/Textarea/TextareaFloatingInner.cjs

@@ -1,6 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),e=require("./TextareaFloatingInner.module.scss.cjs"),C=require("../../hooks/useMergeRefs.cjs"),O=require("../../hooks/useCombinedResizeObserver.cjs"),P=require("./TextareaFloatingInner.config.cjs"),p=n.forwardRef((l,R)=>{const{isRequired:v,classNameContainer:y,className:N,classNameLabel:T,classNameLabelError:I,name:c,id:f,label:d,error:i,height:j,minHeight:h=94,maxHeight:F=150,style:q,sizeInput:H="medium",translateLabel:L=20,autoTranslateLabel:S=!1,...u}=l,t=n.useRef(null),w=C.useMergeRefs(t,R),g=n.useRef(null),E={...q??{},maxHeight:F,height:j??h,minHeight:h},[m,x]=n.useState(!1),[M,b]=n.useState(!1),[V,Y]=n.useState(L),$=()=>{["",void 0,null].includes(u.value)||["",void 0,null].includes(t.current?.value)?(b(!1),S&&setTimeout(()=>{const a=t.current?.offsetHeight??0,r=g.current?.offsetHeight??0,B=(a-r)/2;Y(B)},100)):b(!0)},_=function(a){x(!0),$(),l.onFocus?.(a)},z=function(a){x(!1),l.onBlur?.(a)},o=function(a){$();const r=a?.target??t.current;r.style.height="0px",r.style.height=r.scrollHeight+"px"};return O.useIsomorphicLayoutEffect(()=>(m&&t.current?t.current.addEventListener("input",o):o(),()=>{t.current?.removeEventListener("input",o)}),[m]),s.jsxs("div",{className:`${e.default.container} 
-      ${P.configTextareaFloatingInner.size[H]} 
-      ${y??""}`,children:[s.jsxs("div",{className:`${e.default["container-textarea"]}`,children:[s.jsx("textarea",{id:f??c,className:`${M?"":e.default["placeholder-shown"]} ${i?e.default.error:""} 
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),e=require("./TextareaFloatingInner.module.scss.cjs"),P=require("../../hooks/useMergeRefs.cjs"),k=require("../../hooks/useCombinedResizeObserver.cjs"),v=require("./TextareaFloatingInner.config.cjs"),p=n.forwardRef((l,R)=>{const{isRequired:y,classNameContainer:N,className:T,classNameLabel:I,classNameLabelError:F,name:c,id:f,label:d,error:i,height:j,minHeight:g=94,maxHeight:q=150,style:H,sizeInput:L="medium",translateLabel:S=20,autoTranslateLabel:w=!1,variant:E="laba-white",...u}=l,t=n.useRef(null),M=P.useMergeRefs(t,R),h=n.useRef(null),V={...H??{},maxHeight:q,height:j??g,minHeight:g},[m,x]=n.useState(!1),[Y,b]=n.useState(!1),[_,z]=n.useState(S),$=()=>{["",void 0,null].includes(u.value)||["",void 0,null].includes(t.current?.value)?(b(!1),w&&setTimeout(()=>{const a=t.current?.offsetHeight??0,r=h.current?.offsetHeight??0,O=(a-r)/2;z(O)},100)):b(!0)},B=function(a){x(!0),$(),l.onFocus?.(a)},C=function(a){x(!1),l.onBlur?.(a)},o=function(a){$();const r=a?.target??t.current;r.style.height="0px",r.style.height=r.scrollHeight+"px"};return k.useIsomorphicLayoutEffect(()=>(m&&t.current?t.current.addEventListener("input",o):o(),()=>{t.current?.removeEventListener("input",o)}),[m]),s.jsxs("div",{className:`${e.default.container} 
+      ${v.configTextareaFloatingInner.size[L]} 
+      ${v.configTextareaFloatingInner.variants[E]}
+      ${N??""}`,children:[s.jsxs("div",{className:`${e.default["container-textarea"]}`,children:[s.jsx("textarea",{id:f??c,className:`${Y?"":e.default["placeholder-shown"]} ${i?e.default.error:""} 
           ${e.default.textarea} 
-          ${N??""}`,ref:w,style:E,...u,onFocus:_,onBlur:z}),d&&s.jsxs("label",{htmlFor:f??c,ref:g,style:{transform:`translateY(${V}px)`},className:`${e.default.label} ${T??""}`,children:[d," ",v&&s.jsx("span",{className:"iru-text-laba-red-08",children:"*"})]})]}),i&&s.jsx("label",{className:`${e.default["label-error"]} 
-          ${u.disabled?e.default.disabled:""} ${I??""}`,children:i})]})});p.displayName="TextareaFloatingInner";exports.default=p;
+          ${T??""}`,ref:M,style:V,...u,onFocus:B,onBlur:C}),d&&s.jsxs("label",{htmlFor:f??c,ref:h,style:{transform:`translateY(${_}px)`},className:`${e.default.label} ${I??""}`,children:[d," ",y&&s.jsx("span",{className:"iru-text-laba-red-08",children:"*"})]})]}),i&&s.jsx("label",{className:`${e.default["label-error"]} 
+          ${u.disabled?e.default.disabled:""} ${F??""}`,children:i})]})});p.displayName="TextareaFloatingInner";exports.default=p;

package/dist/components/Textarea/TextareaFloatingInner.config.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TextareaFloatingInner.module.scss.cjs"),n={size:{medium:e.default["size-medium"]}};exports.configTextareaFloatingInner=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TextareaFloatingInner.module.scss.cjs"),a={size:{medium:e.default["size-medium"]},variants:{"laba-white":e.default["laba-white"],"fin-blue-gray-50":e.default["fin-blue-gray-50"]}};exports.configTextareaFloatingInner=a;

package/dist/components/Textarea/TextareaFloatingInner.config.mjs

@@ -1,9 +1,13 @@
 import e from "./TextareaFloatingInner.module.scss.mjs";
-const m = {
+const a = {
   size: {
     medium: e["size-medium"]
+  },
+  variants: {
+    "laba-white": e["laba-white"],
+    "fin-blue-gray-50": e["fin-blue-gray-50"]
   }
 };
 export {
-  m as configTextareaFloatingInner
+  a as configTextareaFloatingInner
 };

package/dist/components/Textarea/TextareaFloatingInner.mjs

@@ -1,49 +1,51 @@
 import { jsxs as c, jsx as u } from "react/jsx-runtime";
 import s from "react";
 import e from "./TextareaFloatingInner.module.scss.mjs";
-import { useMergeRefs as M } from "../../hooks/useMergeRefs.mjs";
-import { useIsomorphicLayoutEffect as P } from "../../hooks/useCombinedResizeObserver.mjs";
-import { configTextareaFloatingInner as A } from "./TextareaFloatingInner.config.mjs";
-const D = s.forwardRef((n, y) => {
+import { useMergeRefs as A } from "../../hooks/useMergeRefs.mjs";
+import { useIsomorphicLayoutEffect as D } from "../../hooks/useCombinedResizeObserver.mjs";
+import { configTextareaFloatingInner as y } from "./TextareaFloatingInner.config.mjs";
+const G = s.forwardRef((n, v) => {
   const {
     isRequired: N,
     classNameContainer: R,
-    className: v,
-    classNameLabel: H,
-    classNameLabelError: I,
+    className: H,
+    classNameLabel: I,
+    classNameLabelError: L,
     name: f,
     id: m,
     label: d,
     error: l,
-    height: L,
+    height: T,
     minHeight: h = 94,
-    maxHeight: T = 150,
-    style: F,
-    sizeInput: w = "medium",
-    translateLabel: E = 20,
-    autoTranslateLabel: S = !1,
-    ...o
-  } = n, t = s.useRef(null), V = M(t, y), g = s.useRef(null), Y = { ...F ?? {}, maxHeight: T, height: L ?? h, minHeight: h }, [p, x] = s.useState(!1), [j, b] = s.useState(!1), [z, B] = s.useState(E), $ = () => {
-    ["", void 0, null].includes(o.value) || ["", void 0, null].includes(t.current?.value) ? (b(!1), S && setTimeout(() => {
-      const a = t.current?.offsetHeight ?? 0, r = g.current?.offsetHeight ?? 0, C = (a - r) / 2;
-      B(C);
+    maxHeight: F = 150,
+    style: w,
+    sizeInput: E = "medium",
+    translateLabel: S = 20,
+    autoTranslateLabel: V = !1,
+    variant: Y = "laba-white",
+    ...i
+  } = n, t = s.useRef(null), j = A(t, v), g = s.useRef(null), z = { ...w ?? {}, maxHeight: F, height: T ?? h, minHeight: h }, [p, x] = s.useState(!1), [B, b] = s.useState(!1), [k, q] = s.useState(S), $ = () => {
+    ["", void 0, null].includes(i.value) || ["", void 0, null].includes(t.current?.value) ? (b(!1), V && setTimeout(() => {
+      const a = t.current?.offsetHeight ?? 0, r = g.current?.offsetHeight ?? 0, P = (a - r) / 2;
+      q(P);
     }, 100)) : b(!0);
-  }, k = function(a) {
+  }, C = function(a) {
     x(!0), $(), n.onFocus?.(a);
-  }, q = function(a) {
+  }, M = function(a) {
     x(!1), n.onBlur?.(a);
-  }, i = function(a) {
+  }, o = function(a) {
     $();
     const r = a?.target ?? t.current;
     r.style.height = "0px", r.style.height = r.scrollHeight + "px";
   };
-  return P(() => (p && t.current ? t.current.addEventListener("input", i) : i(), () => {
-    t.current?.removeEventListener("input", i);
+  return D(() => (p && t.current ? t.current.addEventListener("input", o) : o(), () => {
+    t.current?.removeEventListener("input", o);
   }), [p]), /* @__PURE__ */ c(
     "div",
     {
       className: `${e.container} 
-      ${A.size[w]} 
+      ${y.size[E]} 
+      ${y.variants[Y]}
       ${R ?? ""}`,
       children: [
         /* @__PURE__ */ c("div", { className: `${e["container-textarea"]}`, children: [
@@ -51,14 +53,14 @@ const D = s.forwardRef((n, y) => {
             "textarea",
             {
               id: m ?? f,
-              className: `${j ? "" : e["placeholder-shown"]} ${l ? e.error : ""} 
+              className: `${B ? "" : e["placeholder-shown"]} ${l ? e.error : ""} 
           ${e.textarea} 
-          ${v ?? ""}`,
-              ref: V,
-              style: Y,
-              ...o,
-              onFocus: k,
-              onBlur: q
+          ${H ?? ""}`,
+              ref: j,
+              style: z,
+              ...i,
+              onFocus: C,
+              onBlur: M
             }
           ),
           d && /* @__PURE__ */ c(
@@ -67,9 +69,9 @@ const D = s.forwardRef((n, y) => {
               htmlFor: m ?? f,
               ref: g,
               style: {
-                transform: `translateY(${z}px)`
+                transform: `translateY(${k}px)`
               },
-              className: `${e.label} ${H ?? ""}`,
+              className: `${e.label} ${I ?? ""}`,
               children: [
                 d,
                 " ",
@@ -82,7 +84,7 @@ const D = s.forwardRef((n, y) => {
           "label",
           {
             className: `${e["label-error"]} 
-          ${o.disabled ? e.disabled : ""} ${I ?? ""}`,
+          ${i.disabled ? e.disabled : ""} ${L ?? ""}`,
             children: l
           }
         )
@@ -90,7 +92,7 @@ const D = s.forwardRef((n, y) => {
     }
   );
 });
-D.displayName = "TextareaFloatingInner";
+G.displayName = "TextareaFloatingInner";
 export {
-  D as default
+  G as default
 };

package/dist/components/Textarea/TextareaFloatingInner.module.scss.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_container_1k2ib_1",r="_textarea_1k2ib_12",t="_label_1k2ib_63",a="_error_1k2ib_79",o={container:e,"size-medium":"_size-medium_1k2ib_1","container-textarea":"_container-textarea_1k2ib_6",textarea:r,"placeholder-shown":"_placeholder-shown_1k2ib_47",label:t,error:a,"label-error":"_label-error_1k2ib_117"};exports.container=e;exports.default=o;exports.error=a;exports.label=t;exports.textarea=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_container_ml8mj_1",r="_textarea_ml8mj_12",l="_label_ml8mj_58",a="_error_ml8mj_67",t={container:e,"size-medium":"_size-medium_ml8mj_1","container-textarea":"_container-textarea_ml8mj_6",textarea:r,"placeholder-shown":"_placeholder-shown_ml8mj_43",label:l,error:a,"label-error":"_label-error_ml8mj_99","laba-white":"_laba-white_ml8mj_111","fin-blue-gray-50":"_fin-blue-gray-50_ml8mj_147"};exports.container=e;exports.default=t;exports.error=a;exports.label=l;exports.textarea=r;

package/dist/components/Textarea/TextareaFloatingInner.module.scss.mjs

@@ -1,17 +1,19 @@
-const e = "_container_1k2ib_1", r = "_textarea_1k2ib_12", a = "_label_1k2ib_63", _ = "_error_1k2ib_79", t = {
+const e = "_container_ml8mj_1", a = "_textarea_ml8mj_12", l = "_label_ml8mj_58", r = "_error_ml8mj_67", _ = {
   container: e,
-  "size-medium": "_size-medium_1k2ib_1",
-  "container-textarea": "_container-textarea_1k2ib_6",
-  textarea: r,
-  "placeholder-shown": "_placeholder-shown_1k2ib_47",
-  label: a,
-  error: _,
-  "label-error": "_label-error_1k2ib_117"
+  "size-medium": "_size-medium_ml8mj_1",
+  "container-textarea": "_container-textarea_ml8mj_6",
+  textarea: a,
+  "placeholder-shown": "_placeholder-shown_ml8mj_43",
+  label: l,
+  error: r,
+  "label-error": "_label-error_ml8mj_99",
+  "laba-white": "_laba-white_ml8mj_111",
+  "fin-blue-gray-50": "_fin-blue-gray-50_ml8mj_147"
 };
 export {
   e as container,
-  t as default,
-  _ as error,
-  a as label,
-  r as textarea
+  _ as default,
+  r as error,
+  l as label,
+  a as textarea
 };

package/dist/config/tailwind/typography.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"payhere-h1":["60px",{lineHeight:"72px",fontWeight:700}],"payhere-h2":["48px",{lineHeight:"58px",fontWeight:700}],"payhere-h3":["40px",{lineHeight:"48px",fontWeight:700}],"payhere-h4":["30px",{lineHeight:"38px",fontWeight:700}],"payhere-h5":["28px",{lineHeight:"40px",fontWeight:600}],"payhere-h6":["24px",{lineHeight:"30px",fontWeight:600}],"payhere-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"payhere-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"payhere-body-ls":["18px",{lineHeight:"26px",fontWeight:600}],"payhere-body-lb":["18px",{lineHeight:"26px",fontWeight:700}],"payhere-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"payhere-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"payhere-body-ms":["16px",{lineHeight:"24px",fontWeight:600}],"payhere-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"payhere-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"payhere-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"payhere-label-sb":["15px",{lineHeight:"26px",fontWeight:600}],"payhere-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"payhere-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"payhere-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"payhere-body-smb":["14px",{lineHeight:"22px",fontWeight:600}],"payhere-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"payhere-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"payhere-body-esm":["12px",{lineHeight:"20px",fontWeight:500}],"payhere-body-esmb":["12px",{lineHeight:"20px",fontWeight:600}],"payhere-body-esb":["12px",{lineHeight:"20px",fontWeight:700}]},i={"laba-title-lb":["36px",{lineHeight:"44px",fontWeight:700}],"laba-title-ls":["36px",{lineHeight:"44px",fontWeight:600}],"laba-title-lr":["36px",{lineHeight:"44px",fontWeight:400}],"laba-title-mb":["32px",{lineHeight:"40px",fontWeight:700}],"laba-title-ms":["32px",{lineHeight:"40px",fontWeight:600}],"laba-title-mr":["32px",{lineHeight:"40px",fontWeight:400}],"laba-h1":["24px",{lineHeight:"30px",fontWeight:700}],"laba-h1-b":["24px",{lineHeight:"30px",fontWeight:700}],"laba-h1-sb":["24px",{lineHeight:"30px",fontWeight:600}],"laba-h1-r":["24px",{lineHeight:"30px",fontWeight:400}],"laba-h2":["18px",{lineHeight:"26px",fontWeight:700}],"laba-h2-b":["18px",{lineHeight:"26px",fontWeight:700}],"laba-h2-sb":["18px",{lineHeight:"26px",fontWeight:600}],"laba-h2-r":["18px",{lineHeight:"26px",fontWeight:400}],"laba-base-rb":["16px",{lineHeight:"24px",fontWeight:700}],"laba-base-rs":["16px",{lineHeight:"24px",fontWeight:600}],"laba-base-rr":["16px",{lineHeight:"24px",fontWeight:400}],"laba-base-sb":["14px",{lineHeight:"20px",fontWeight:700}],"laba-base-ss":["14px",{lineHeight:"20px",fontWeight:600}],"laba-base-sr":["14px",{lineHeight:"20px",fontWeight:400}],"laba-subtitle-rb":["12px",{lineHeight:"16px",fontWeight:700}],"laba-subtitle-rs":["12px",{lineHeight:"16px",fontWeight:600}],"laba-subtitle-rr":["12px",{lineHeight:"16px",fontWeight:400}],"laba-subtitle-sb":["10px",{lineHeight:"12px",fontWeight:700}],"laba-subtitle-ss":["10px",{lineHeight:"12px",fontWeight:600}],"laba-subtitle-sr":["10px",{lineHeight:"12px",fontWeight:400}]},t={"bill-h1":["60px",{lineHeight:"72px",fontWeight:700}],"bill-h2":["48px",{lineHeight:"58px",fontWeight:700}],"bill-h3":["40px",{lineHeight:"48px",fontWeight:700}],"bill-h4":["30px",{lineHeight:"38px",fontWeight:700}],"bill-h5":["28px",{lineHeight:"40px",fontWeight:600}],"bill-h6":["24px",{lineHeight:"30px",fontWeight:600}],"bill-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"bill-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"bill-body-lsm":["18px",{lineHeight:"26px",fontWeight:600}],"bill-body-blb":["18px",{lineHeight:"26px",fontWeight:700}],"bill-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"bill-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"bill-body-msm":["16px",{lineHeight:"24px",fontWeight:600}],"bill-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"bill-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"bill-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"bill-label-sm":["15px",{lineHeight:"26px",fontWeight:600}],"bill-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"bill-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"bill-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"bill-body-ssm":["14px",{lineHeight:"22px",fontWeight:600}],"bill-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"bill-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"bill-body-ems":["12px",{lineHeight:"20px",fontWeight:500}],"bill-body-essm":["12px",{lineHeight:"20px",fontWeight:600}],"bill-body-esb":["12px",{lineHeight:"20px",fontWeight:700}]},h={"fin-h1":["60px",{lineHeight:"72px",fontWeight:700}],"fin-h2":["48px",{lineHeight:"58px",fontWeight:700}],"fin-h3":["40px",{lineHeight:"48px",fontWeight:700}],"fin-h4":["30px",{lineHeight:"38px",fontWeight:700}],"fin-h5":["28px",{lineHeight:"40px",fontWeight:600}],"fin-h6":["24px",{lineHeight:"30px",fontWeight:600}],"fin-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"fin-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"fin-body-lsm":["18px",{lineHeight:"26px",fontWeight:600}],"fin-body-blb":["18px",{lineHeight:"26px",fontWeight:700}],"fin-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"fin-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"fin-body-msm":["16px",{lineHeight:"24px",fontWeight:600}],"fin-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"fin-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"fin-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"fin-label-sm":["15px",{lineHeight:"26px",fontWeight:600}],"fin-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"fin-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"fin-body-sr-lh_24":["14px",{lineHeight:"24px",fontWeight:400}],"fin-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"fin-body-sm-lh_24":["14px",{lineHeight:"24px",fontWeight:500}],"fin-body-ssm":["14px",{lineHeight:"22px",fontWeight:600}],"fin-body-ssm-lh_24":["14px",{lineHeight:"22px",fontWeight:600}],"fin-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"fin-body-sb-lh_24":["14px",{lineHeight:"24px",fontWeight:700}],"fin-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"fin-body-ems":["12px",{lineHeight:"20px",fontWeight:500}],"fin-body-essm":["12px",{lineHeight:"20px",fontWeight:600}],"fin-body-esb":["12px",{lineHeight:"20px",fontWeight:700}]},n={...e,...i,...t,...h};exports.configTypographyBillId=t;exports.configTypographyFinAgent=h;exports.configTypographyLabaBisnis=i;exports.configTypographyPayhere=e;exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"payhere-h1":["60px",{lineHeight:"72px",fontWeight:700}],"payhere-h2":["48px",{lineHeight:"58px",fontWeight:700}],"payhere-h3":["40px",{lineHeight:"48px",fontWeight:700}],"payhere-h4":["30px",{lineHeight:"38px",fontWeight:700}],"payhere-h5":["28px",{lineHeight:"40px",fontWeight:600}],"payhere-h6":["24px",{lineHeight:"30px",fontWeight:600}],"payhere-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"payhere-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"payhere-body-ls":["18px",{lineHeight:"26px",fontWeight:600}],"payhere-body-lb":["18px",{lineHeight:"26px",fontWeight:700}],"payhere-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"payhere-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"payhere-body-ms":["16px",{lineHeight:"24px",fontWeight:600}],"payhere-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"payhere-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"payhere-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"payhere-label-sb":["15px",{lineHeight:"26px",fontWeight:600}],"payhere-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"payhere-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"payhere-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"payhere-body-smb":["14px",{lineHeight:"22px",fontWeight:600}],"payhere-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"payhere-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"payhere-body-esm":["12px",{lineHeight:"20px",fontWeight:500}],"payhere-body-esmb":["12px",{lineHeight:"20px",fontWeight:600}],"payhere-body-esb":["12px",{lineHeight:"20px",fontWeight:700}]},i={"laba-title-lb":["36px",{lineHeight:"44px",fontWeight:700}],"laba-title-ls":["36px",{lineHeight:"44px",fontWeight:600}],"laba-title-lr":["36px",{lineHeight:"44px",fontWeight:400}],"laba-title-mb":["32px",{lineHeight:"40px",fontWeight:700}],"laba-title-ms":["32px",{lineHeight:"40px",fontWeight:600}],"laba-title-mr":["32px",{lineHeight:"40px",fontWeight:400}],"laba-h1":["24px",{lineHeight:"30px",fontWeight:700}],"laba-h1-b":["24px",{lineHeight:"30px",fontWeight:700}],"laba-h1-sb":["24px",{lineHeight:"30px",fontWeight:600}],"laba-h1-r":["24px",{lineHeight:"30px",fontWeight:400}],"laba-h2":["18px",{lineHeight:"26px",fontWeight:700}],"laba-h2-b":["18px",{lineHeight:"26px",fontWeight:700}],"laba-h2-sb":["18px",{lineHeight:"26px",fontWeight:600}],"laba-h2-r":["18px",{lineHeight:"26px",fontWeight:400}],"laba-base-rb":["16px",{lineHeight:"24px",fontWeight:700}],"laba-base-rs":["16px",{lineHeight:"24px",fontWeight:600}],"laba-base-rr":["16px",{lineHeight:"24px",fontWeight:400}],"laba-base-sb":["14px",{lineHeight:"20px",fontWeight:700}],"laba-base-ss":["14px",{lineHeight:"20px",fontWeight:600}],"laba-base-sr":["14px",{lineHeight:"20px",fontWeight:400}],"laba-subtitle-rb":["12px",{lineHeight:"16px",fontWeight:700}],"laba-subtitle-rs":["12px",{lineHeight:"16px",fontWeight:600}],"laba-subtitle-rr":["12px",{lineHeight:"16px",fontWeight:400}],"laba-subtitle-sb":["10px",{lineHeight:"12px",fontWeight:700}],"laba-subtitle-ss":["10px",{lineHeight:"12px",fontWeight:600}],"laba-subtitle-sr":["10px",{lineHeight:"12px",fontWeight:400}]},t={"bill-h1":["60px",{lineHeight:"72px",fontWeight:700}],"bill-h2":["48px",{lineHeight:"58px",fontWeight:700}],"bill-h3":["40px",{lineHeight:"48px",fontWeight:700}],"bill-h4":["30px",{lineHeight:"38px",fontWeight:700}],"bill-h5":["28px",{lineHeight:"40px",fontWeight:600}],"bill-h6":["24px",{lineHeight:"30px",fontWeight:600}],"bill-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"bill-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"bill-body-lsm":["18px",{lineHeight:"26px",fontWeight:600}],"bill-body-blb":["18px",{lineHeight:"26px",fontWeight:700}],"bill-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"bill-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"bill-body-msm":["16px",{lineHeight:"24px",fontWeight:600}],"bill-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"bill-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"bill-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"bill-label-sm":["15px",{lineHeight:"26px",fontWeight:600}],"bill-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"bill-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"bill-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"bill-body-ssm":["14px",{lineHeight:"22px",fontWeight:600}],"bill-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"bill-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"bill-body-ems":["12px",{lineHeight:"20px",fontWeight:500}],"bill-body-essb":["12px",{lineHeight:"20px",fontWeight:600}],"bill-body-esb":["12px",{lineHeight:"20px",fontWeight:700}]},h={"fin-h1":["60px",{lineHeight:"72px",fontWeight:700}],"fin-h2":["48px",{lineHeight:"58px",fontWeight:700}],"fin-h3":["40px",{lineHeight:"48px",fontWeight:700}],"fin-h4":["30px",{lineHeight:"38px",fontWeight:700}],"fin-h5":["28px",{lineHeight:"40px",fontWeight:600}],"fin-h6":["24px",{lineHeight:"30px",fontWeight:600}],"fin-body-lr":["18px",{lineHeight:"26px",fontWeight:400}],"fin-body-lm":["18px",{lineHeight:"26px",fontWeight:500}],"fin-body-lsm":["18px",{lineHeight:"26px",fontWeight:600}],"fin-body-blb":["18px",{lineHeight:"26px",fontWeight:700}],"fin-body-mr":["16px",{lineHeight:"24px",fontWeight:400}],"fin-body-mm":["16px",{lineHeight:"24px",fontWeight:500}],"fin-body-msm":["16px",{lineHeight:"24px",fontWeight:600}],"fin-body-mb":["16px",{lineHeight:"24px",fontWeight:700}],"fin-label-r":["15px",{lineHeight:"26px",fontWeight:400}],"fin-label-m":["15px",{lineHeight:"26px",fontWeight:500}],"fin-label-sm":["15px",{lineHeight:"26px",fontWeight:600}],"fin-label-b":["15px",{lineHeight:"26px",fontWeight:700}],"fin-body-sr":["14px",{lineHeight:"22px",fontWeight:400}],"fin-body-sr-lh_24":["14px",{lineHeight:"24px",fontWeight:400}],"fin-body-sm":["14px",{lineHeight:"22px",fontWeight:500}],"fin-body-sm-lh_24":["14px",{lineHeight:"24px",fontWeight:500}],"fin-body-ssm":["14px",{lineHeight:"22px",fontWeight:600}],"fin-body-ssm-lh_24":["14px",{lineHeight:"22px",fontWeight:600}],"fin-body-sb":["14px",{lineHeight:"22px",fontWeight:700}],"fin-body-sb-lh_24":["14px",{lineHeight:"24px",fontWeight:700}],"fin-body-esr":["12px",{lineHeight:"20px",fontWeight:400}],"fin-body-ems":["12px",{lineHeight:"20px",fontWeight:500}],"fin-body-essb":["12px",{lineHeight:"20px",fontWeight:600}],"fin-body-esb":["12px",{lineHeight:"20px",fontWeight:700}],"fin-tiny-r":["10px",{lineHeight:"20px",fontWeight:400}],"fin-tiny-m":["10px",{lineHeight:"20px",fontWeight:500}],"fin-tiny-sm":["10px",{lineHeight:"20px",fontWeight:600}],"fin-tiny-b":["10px",{lineHeight:"20px",fontWeight:700}]},n={...e,...i,...t,...h};exports.configTypographyBillId=t;exports.configTypographyFinAgent=h;exports.configTypographyLabaBisnis=i;exports.configTypographyPayhere=e;exports.default=n;

package/dist/config/tailwind/typography.mjs

@@ -145,7 +145,7 @@ const e = {
   // Body Extra Small Regular
   "bill-body-ems": ["12px", { lineHeight: "20px", fontWeight: 500 }],
   // Body Extra Small Medium
-  "bill-body-essm": ["12px", { lineHeight: "20px", fontWeight: 600 }],
+  "bill-body-essb": ["12px", { lineHeight: "20px", fontWeight: 600 }],
   // Body Extra Small SemiBold
   "bill-body-esb": ["12px", { lineHeight: "20px", fontWeight: 700 }]
   // Body Extra Small Bold
@@ -206,10 +206,18 @@ const e = {
   // Body Extra Small Regular
   "fin-body-ems": ["12px", { lineHeight: "20px", fontWeight: 500 }],
   // Body Extra Small Medium
-  "fin-body-essm": ["12px", { lineHeight: "20px", fontWeight: 600 }],
+  "fin-body-essb": ["12px", { lineHeight: "20px", fontWeight: 600 }],
   // Body Extra Small SemiBold
-  "fin-body-esb": ["12px", { lineHeight: "20px", fontWeight: 700 }]
+  "fin-body-esb": ["12px", { lineHeight: "20px", fontWeight: 700 }],
   // Body Extra Small Bold
+  "fin-tiny-r": ["10px", { lineHeight: "20px", fontWeight: 400 }],
+  // Label Regular
+  "fin-tiny-m": ["10px", { lineHeight: "20px", fontWeight: 500 }],
+  // Label Medium
+  "fin-tiny-sm": ["10px", { lineHeight: "20px", fontWeight: 600 }],
+  // Label SemiBold
+  "fin-tiny-b": ["10px", { lineHeight: "20px", fontWeight: 700 }]
+  // Label Bold
 }, n = {
   ...e,
   ...i,

package/dist/package.json.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.26",o={version:e};exports.default=o;exports.version=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.27",o={version:e};exports.default=o;exports.version=e;

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "2.0.26",
+  "version": "2.0.27",
   "type": "module",
   "engines": {
     "node": ">=22.22.3",

package/dist/package.json.mjs

@@ -1,4 +1,4 @@
-const o = "2.0.26", s = {
+const o = "2.0.27", s = {
   version: o
 };
 export {

package/dist/src/components/Breadcrumbs/Breadcrumbs.config.d.ts

@@ -8,6 +8,7 @@ export declare const configBreadcrumbs: {
         'laba-blue-10': string;
         'blue-700': string;
         'bill-secondary-800': string;
+        'fin-blue-gray-500': string;
     };
     gapAction: {
         'gap-0': string;

package/dist/src/components/Button/Button.config.d.ts

@@ -13,6 +13,10 @@ export declare const configButton: {
         'bill-s': string;
         'bill-xs': string;
         'bill-xxs': string;
+        'fin-l': string;
+        'fin-m': string;
+        'fin-s': string;
+        'fin-xs': string;
     };
     loadingSize: {
         large: string;
@@ -28,6 +32,10 @@ export declare const configButton: {
         'bill-s': string;
         'bill-xs': string;
         'bill-xxs': string;
+        'fin-l': string;
+        'fin-m': string;
+        'fin-s': string;
+        'fin-xs': string;
     };
     variants: {
         'primary-laba-blue-10': string;

package/dist/src/components/ButtonIcon/ButtonIcon.config.d.ts

@@ -13,6 +13,10 @@ export declare const configButton: {
         'bill-s': string;
         'bill-xs': string;
         'bill-xxs': string;
+        'fin-l': string;
+        'fin-m': string;
+        'fin-s': string;
+        'fin-xs': string;
     };
     loadingSize: {
         large: string;
@@ -28,6 +32,10 @@ export declare const configButton: {
         'bill-s': string;
         'bill-xs': string;
         'bill-xxs': string;
+        'fin-l': string;
+        'fin-m': string;
+        'fin-s': string;
+        'fin-xs': string;
     };
     variants: {
         'primary-laba-blue-10': string;
@@ -60,6 +68,9 @@ export declare const configButton: {
         'secondary-bill-secondary-800': string;
         'tertiary-bill-secondary-800': string;
         'primary-bill-red-700': string;
+        'primary-fin-primary-500': string;
+        'secondary-fin-primary-500': string;
+        'tertiary-fin-primary-500': string;
     };
 };
 export declare const keysConfigButtonVariant: string[];

package/dist/src/components/Modal/ModalDialog.config.d.ts

@@ -5,5 +5,9 @@ export declare const configModal: {
         regular: string;
         large: string;
     };
+    brand: {
+        '': string;
+        fin: string;
+    };
 };
 export declare const keysConfigModalSize: string[];

package/dist/src/components/Modal/ModalDialog.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
 import { IModalDialog } from '../../interfaces/components/Modal';
-declare const ModalDialog: <T extends ElementType = "div">({ as, children, id, idModal, withOverlay, show, size, className, classNameContainer, onClose, ...props }: IModalDialog<T>) => import("react/jsx-runtime").JSX.Element;
+declare const ModalDialog: <T extends ElementType = "div">({ as, children, id, idModal, withOverlay, show, size, className, classNameContainer, onClose, brand, ...props }: IModalDialog<T>) => import("react/jsx-runtime").JSX.Element;
 export default ModalDialog;

package/dist/src/components/Modal/ModalDialog.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: <T extends import('react').ElementType = "div">({ as, children, id, idModal, withOverlay, show, size, className, classNameContainer, onClose, ...props }: import('../../interfaces/components/Modal').IModalDialog<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends import('react').ElementType = "div">({ as, children, id, idModal, withOverlay, show, size, className, classNameContainer, onClose, brand, ...props }: import('../../interfaces/components/Modal').IModalDialog<T>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

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

@@ -0,0 +1,7 @@
+export declare const configPopover: {
+    variant: {
+        white: string;
+        'blue-gray-50': string;
+    };
+};
+export declare const keysConfigPopoverVariant: string[];

package/dist/src/components/Textarea/TextareaFloatingInner.config.d.ts

@@ -2,5 +2,10 @@ export declare const configTextareaFloatingInner: {
     size: {
         medium: string;
     };
+    variants: {
+        'laba-white': string;
+        'fin-blue-gray-50': string;
+    };
 };
 export declare const keysConfigTextareaFloatingInnerSize: string[];
+export declare const keysConfigTextareaFloatingInnerVariant: string[];

package/dist/src/interfaces/components/Breadcrumbs/index.d.ts

@@ -21,7 +21,7 @@ export interface IBreadcrumbs<T extends ElementType> extends HTMLAttributes<HTML
      * [ID] : Varian gaya breadcrumbs (opsional).
      * [EN] : Breadcrumbs style variant (optional).
      */
-    variants?: 'laba-blue-10' | 'blue-700' | 'bill-secondary-800';
+    variants?: 'laba-blue-10' | 'blue-700' | 'bill-secondary-800' | 'fin-blue-gray-500';
     /**
      * [ID] : Daftar URL untuk setiap breadcrumb.
      * [EN] : List of URLs for each breadcrumb.

package/dist/src/interfaces/components/Button/index.d.ts

@@ -8,7 +8,7 @@ export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba
  * [ID] : Tipe ukuran tombol.
  * [EN] : Button size type.
  */
-export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs' | 'bill-xxs';
+export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs' | 'bill-xxs' | 'fin-l' | 'fin-m' | 'fin-s' | 'fin-xs';
 /**
  * [ID] : Interface untuk komponen Button.
  * [EN] : Interface for Button component.

package/dist/src/interfaces/components/ButtonIcon/index.d.ts

@@ -3,12 +3,12 @@ import { ReactNode } from 'react';
  * [ID] : Tipe varian tombol ikon.
  * [EN] : Button icon variant types.
  */
-export type TButtonIconVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700-dsb_laba-grey-06' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'secondary-red-700' | 'primary-bill-primary-600' | 'secondary-bill-secondary-800' | 'tertiary-bill-secondary-800' | 'primary-bill-red-700';
+export type TButtonIconVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700-dsb_laba-grey-06' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'secondary-red-700' | 'primary-bill-primary-600' | 'secondary-bill-secondary-800' | 'tertiary-bill-secondary-800' | 'primary-bill-red-700' | 'primary-fin-primary-500' | 'secondary-fin-primary-500' | 'tertiary-fin-primary-500';
 /**
  * [ID] : Tipe ukuran tombol ikon.
  * [EN] : Button icon size type.
  */
-export type TButtonIconSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs' | 'bill-xxs';
+export type TButtonIconSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs' | 'bill-xxs' | 'fin-l' | 'fin-m' | 'fin-s' | 'fin-xs';
 /**
  * [ID] : Interface untuk komponen ButtonIcon.
  * [EN] : Interface for ButtonIcon component.

package/dist/src/interfaces/components/Modal/index.d.ts

@@ -50,6 +50,11 @@ export interface IModalDialog<T extends ElementType> {
      * [EN] : Show overlay (optional).
      */
     withOverlay?: boolean;
+    /**
+     * [ID] : Merek (opsional).
+     * [EN] : Brand (optional).
+     */
+    brand?: 'fin' | '';
     /**
      * [ID] : Handler saat modal ditutup (opsional).
      * [EN] : Handler when modal is closed (optional).

package/dist/src/interfaces/components/Popover/index.d.ts

@@ -90,6 +90,11 @@ export interface IPopover extends React.HTMLAttributes<HTMLDivElement> {
      * [EN] : Dismiss properties (optional).
      */
     useDismissProps?: UseDismissProps;
+    /**
+     * [ID] : Varian gaya (opsional).
+     * [EN] : Style variant (optional).
+     */
+    variant?: 'white' | 'blue-gray-50';
 }
 /**
  * [ID] : Interface untuk referensi Popover.

package/dist/src/interfaces/components/Textarea/index.d.ts

@@ -135,6 +135,11 @@ export interface ITextareaFloatingInner extends React.InputHTMLAttributes<HTMLTe
      * [EN] : Auto translate label (optional).
      */
     autoTranslateLabel?: boolean;
+    /**
+     * [ID] : Varian gaya (opsional).
+     * [EN] : Style variant (optional).
+     */
+    variant?: 'laba-white' | 'fin-blue-gray-50';
 }
 /**
  * [ID] : Interface untuk textarea dengan label di dalam.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "1mpacto-react-ui",
   "private": false,
-  "version": "2.0.26",
+  "version": "2.0.27",
   "type": "module",
   "engines": {
     "node": ">=22.22.3",