@telefonica/mistica 17.3.0 → 17.5.0

package/css/vivo.css

@@ -73,6 +73,8 @@
     --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
     --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
+    --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-white);
+    --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-vivoPurpleDark);
     --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
     --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
     --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
@@ -115,12 +117,12 @@
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
-    --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
-    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
-    --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
-    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
-    --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
-    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+    --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
+    --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
     --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
     --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -185,10 +187,10 @@
     --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
     --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
-    --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
-    --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-white);
+    --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-white);
     --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
-    --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
+    --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
     --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
     --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
     --mistica-color-inputBorder: var(--mistica-vivo-grey4);
@@ -430,6 +432,9 @@
     --mistica-font-size-chipLabel: 0.875rem;
     --mistica-line-height-chipLabel: 1.25rem;
     --mistica-font-weight-chipLabel: 500;
+    --mistica-font-size-headerPretitle: 1rem;
+    --mistica-line-height-headerPretitle: 1.5rem;
+    --mistica-font-weight-headerPretitle: 400;
     --mistica-font-size-cardPretitleSnap: 0.875rem;
     --mistica-line-height-cardPretitleSnap: 1.25rem;
     --mistica-font-size-cardTitleSnap: 0.875rem;
@@ -484,6 +489,8 @@
     --mistica-color-backgroundContainerNegative: var(--mistica-vivo-darkModeGrey);
     --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-darkModeGrey);
     --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-darkModeGrey);
+    --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-darkModeGrey);
     --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
     --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
@@ -804,6 +811,8 @@
         --mistica-color-backgroundContainerNegative: var(--mistica-vivo-darkModeGrey);
         --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-darkModeGrey);
         --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-darkModeGrey);
+        --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-darkModeGrey);
         --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-darkModeGrey), 0.8);
         --mistica-color-backgroundSkeleton: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-darkModeGrey6);
@@ -1117,6 +1126,8 @@
         --mistica-color-backgroundContainerNegative: rgba(var(--mistica-vivo-raw-darkModeBlack), 0.4);
         --mistica-color-backgroundContainerBrandOverBrand: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundContainerAlternative: var(--mistica-vivo-grey1);
+        --mistica-color-backgroundContainerAlternativeOverAlternative: var(--mistica-vivo-white);
+        --mistica-color-backgroundContainerAlternativeOverBrand: var(--mistica-vivo-vivoPurpleDark);
         --mistica-color-backgroundOverlay: rgba(var(--mistica-vivo-raw-grey6), 0.6);
         --mistica-color-backgroundSkeleton: var(--mistica-vivo-grey3);
         --mistica-color-backgroundSkeletonInverse: var(--mistica-vivo-vivoPurpleDark);
@@ -1159,12 +1170,12 @@
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-grey2);
-        --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-white);
-        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-grey1);
-        --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-white);
-        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: var(--mistica-vivo-grey1);
-        --mistica-color-buttonLinkNeutralBackgroundMedia: var(--mistica-vivo-white);
-        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: var(--mistica-vivo-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundBrand: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundBrandPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonLinkNeutralBackgroundNegative: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
+        --mistica-color-buttonLinkNeutralBackgroundMedia: rgba(var(--mistica-vivo-raw-white), 0);
+        --mistica-color-buttonLinkNeutralBackgroundMediaPressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --mistica-color-buttonPrimaryBackground: var(--mistica-vivo-vivoPurple);
         --mistica-color-buttonPrimaryBackgroundInverse: var(--mistica-vivo-white);
         --mistica-color-buttonPrimaryBackgroundNegative: var(--mistica-vivo-white);
@@ -1229,10 +1240,10 @@
         --mistica-color-textLinkDangerMedia: var(--mistica-vivo-pepper);
         --mistica-color-textLinkSnackbar: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-textLinkNeutral: var(--mistica-vivo-grey6);
-        --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-grey6);
-        --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralBrand: var(--mistica-vivo-white);
+        --mistica-color-textLinkNeutralNegative: var(--mistica-vivo-white);
         --mistica-color-textLinkNeutralAlternative: var(--mistica-vivo-grey6);
-        --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-grey6);
+        --mistica-color-textLinkNeutralMedia: var(--mistica-vivo-white);
         --mistica-color-textActivated: var(--mistica-vivo-vivoPurple);
         --mistica-color-textBrand: var(--mistica-vivo-vivoPurple);
         --mistica-color-inputBorder: var(--mistica-vivo-grey4);
@@ -1447,6 +1458,8 @@
 
         --mistica-font-size-chipLabel: 1rem;
         --mistica-line-height-chipLabel: 1.5rem;
+        --mistica-font-size-headerPretitle: 1.125rem;
+        --mistica-line-height-headerPretitle: 1.5rem;
         --mistica-font-size-cardPretitleSnap: 1rem;
         --mistica-line-height-cardPretitleSnap: 1.5rem;
         --mistica-font-size-cardTitleSnap: 1rem;

package/dist/accordion.css-mistica.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get accordionContentPadding () {
-        return z;
+        return c;
     },
     get accordionItem () {
-        return c;
+        return z;
     },
     get boxed () {
         return s;
@@ -25,13 +25,13 @@ _export(exports, {
         return n;
     },
     get panel () {
-        return i;
+        return x;
     },
     get panelContainer () {
         return o;
     },
     get panelTransitionClasses () {
-        return x;
+        return i;
     },
     get rightContentContainer () {
         return e;
@@ -43,9 +43,9 @@ _export(exports, {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v17_3_8s3szx0 v17_3_1y2v1nfh3 v17_3_1y2v1nfic v17_3_1y2v1nfjl v17_3_1y2v1nfku v17_3_1y2v1nfrx v17_3_1y2v1nfts v17_3_1y2v1nfh2 v17_3_1y2v1nfrc v17_3_1y2v1nfse", s = "v17_3_8s3szx1", r = "v17_3_8s3szx2", a = "v17_3_8s3szx3", e = "v17_3_8s3szx4", t = "v17_3_8s3szx5", o = "v17_3_8s3szx6", x = {
-    enter: "v17_3_8s3szx7",
-    enterActive: "v17_3_8s3szx8",
-    exit: "v17_3_8s3szx9",
-    exitActive: "v17_3_8s3szxa"
-}, i = "v17_3_8s3szxb", c = "v17_3_8s3szxc v17_3_1y2v1nfrx", z = "v17_3_8s3szxd";
+/* empty css                                     */ /* empty css                                     */ var n = "v17_5_8s3szx0 v17_5_1y2v1nfh7 v17_5_1y2v1nfig v17_5_1y2v1nfjp v17_5_1y2v1nfky v17_5_1y2v1nfs1 v17_5_1y2v1nftw v17_5_1y2v1nfh6 v17_5_1y2v1nfrg v17_5_1y2v1nfsi", s = "v17_5_8s3szx1", r = "v17_5_8s3szx2", a = "v17_5_8s3szx3", e = "v17_5_8s3szx4", t = "v17_5_8s3szx5", o = "v17_5_8s3szx6", i = {
+    enter: "v17_5_8s3szx7",
+    enterActive: "v17_5_8s3szx8",
+    exit: "v17_5_8s3szx9",
+    exitActive: "v17_5_8s3szxa"
+}, x = "v17_5_8s3szxb", z = "v17_5_8s3szxc v17_5_1y2v1nfs1", c = "v17_5_8s3szxd";

package/dist/align.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "container", {
         return o;
     }
 });
-/* empty css                                 */ var o = "v17_3_1mfs0fk0";
+/* empty css                                 */ var o = "v17_5_1mfs0fk0";

package/dist/autocomplete.css-mistica.js

@@ -13,16 +13,16 @@ _export(exports, {
         return n;
     },
     get optionBaseItem () {
-        return f;
+        return y;
     },
     get optionItem () {
-        return o;
+        return f;
     },
     get optionItemSelected () {
-        return y;
+        return j;
     },
     get optionsList () {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                        */ var n = "v17_3_1rj3nw81 v17_3_1rj3nw80 v17_3_1y2v1nfr4", r = "v17_3_1rj3nw83 v17_3_1rj3nw82 v17_3_1y2v1nfhc v17_3_1y2v1nfil v17_3_1y2v1nfju v17_3_1y2v1nfl3 v17_3_1y2v1nfr5 v17_3_1y2v1nfu3", f = "v17_3_1rj3nw85 v17_3_1rj3nw84 v17_3_1y2v1nfju v17_3_1y2v1nfl3 v17_3_1y2v1nfhf v17_3_1y2v1nfio", o = "v17_3_1rj3nw87 v17_3_1rj3nw85 v17_3_1rj3nw84 v17_3_1y2v1nfju v17_3_1y2v1nfl3 v17_3_1y2v1nfhf v17_3_1y2v1nfio v17_3_1rj3nw86 v17_3_1y2v1nfud", y = "v17_3_1rj3nw88";
+/* empty css                                     */ /* empty css                                        */ var n = "v17_5_1rj3nw81 v17_5_1rj3nw80 v17_5_1y2v1nfr8", r = "v17_5_1rj3nw83 v17_5_1rj3nw82 v17_5_1y2v1nfhg v17_5_1y2v1nfip v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfr9 v17_5_1y2v1nfu7", y = "v17_5_1rj3nw85 v17_5_1rj3nw84 v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfhj v17_5_1y2v1nfis", f = "v17_5_1rj3nw87 v17_5_1rj3nw85 v17_5_1rj3nw84 v17_5_1y2v1nfjy v17_5_1y2v1nfl7 v17_5_1y2v1nfhj v17_5_1y2v1nfis v17_5_1rj3nw86 v17_5_1y2v1nfuh", j = "v17_5_1rj3nw88";

package/dist/avatar.css-mistica.js

@@ -16,4 +16,4 @@ _export(exports, {
         return f;
     }
 });
-/* empty css                                     */ /* empty css                                  */ var r = "v17_3_f1g4uj0 v17_3_1y2v1nfu9 v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj v17_3_1y2v1nfue", f = "v17_3_f1g4uj1 v17_3_1y2v1nfw8";
+/* empty css                                     */ /* empty css                                  */ var r = "v17_5_f1g4uj0 v17_5_1y2v1nfud v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn v17_5_1y2v1nfui", f = "v17_5_f1g4uj1 v17_5_1y2v1nfwc";

package/dist/badge.css-mistica.js

@@ -28,4 +28,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                 */ var r = "v17_3_17szrmd0 v17_3_1y2v1nfr4 v17_3_1y2v1nfre", d = "v17_3_17szrmd2 v17_3_17szrmd1 v17_3_1y2v1nfdl", m = "v17_3_17szrmd3", a = "v17_3_17szrmd5 v17_3_17szrmd2 v17_3_17szrmd1 v17_3_1y2v1nfdl v17_3_17szrmd4 v17_3_1y2v1nfra v17_3_1y2v1nfrp v17_3_1y2v1nfrj", e = "v17_3_17szrmd6 v17_3_1y2v1nfr5", n = "v17_3_17szrmd7";
+/* empty css                                     */ /* empty css                                 */ var r = "v17_5_17szrmd0 v17_5_1y2v1nfr8 v17_5_1y2v1nfri", d = "v17_5_17szrmd2 v17_5_17szrmd1 v17_5_1y2v1nfdp", m = "v17_5_17szrmd3", a = "v17_5_17szrmd5 v17_5_17szrmd2 v17_5_17szrmd1 v17_5_1y2v1nfdp v17_5_17szrmd4 v17_5_1y2v1nfre v17_5_1y2v1nfrt v17_5_1y2v1nfrn", e = "v17_5_17szrmd6 v17_5_1y2v1nfr9", n = "v17_5_17szrmd7";

package/dist/box.css-mistica.js

@@ -18,23 +18,23 @@ _export(exports, {
 });
 /* empty css                               */ var _ = {
     paddingTop: {
-        desktop: "var(--v17_3_1xgjmkv0)",
-        tablet: "var(--v17_3_1xgjmkv1)",
-        mobile: "var(--v17_3_1xgjmkv2)"
+        desktop: "var(--v17_5_1xgjmkv0)",
+        tablet: "var(--v17_5_1xgjmkv1)",
+        mobile: "var(--v17_5_1xgjmkv2)"
     },
     paddingBottom: {
-        desktop: "var(--v17_3_1xgjmkv3)",
-        tablet: "var(--v17_3_1xgjmkv4)",
-        mobile: "var(--v17_3_1xgjmkv5)"
+        desktop: "var(--v17_5_1xgjmkv3)",
+        tablet: "var(--v17_5_1xgjmkv4)",
+        mobile: "var(--v17_5_1xgjmkv5)"
     },
     paddingLeft: {
-        desktop: "var(--v17_3_1xgjmkv6)",
-        tablet: "var(--v17_3_1xgjmkv7)",
-        mobile: "var(--v17_3_1xgjmkv8)"
+        desktop: "var(--v17_5_1xgjmkv6)",
+        tablet: "var(--v17_5_1xgjmkv7)",
+        mobile: "var(--v17_5_1xgjmkv8)"
     },
     paddingRight: {
-        desktop: "var(--v17_3_1xgjmkv9)",
-        tablet: "var(--v17_3_1xgjmkva)",
-        mobile: "var(--v17_3_1xgjmkvb)"
+        desktop: "var(--v17_5_1xgjmkv9)",
+        tablet: "var(--v17_5_1xgjmkva)",
+        mobile: "var(--v17_5_1xgjmkvb)"
     }
-}, a = "v17_3_1xgjmkvc";
+}, a = "v17_5_1xgjmkvc";

package/dist/boxed.css-mistica.js

@@ -29,32 +29,32 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                 */ var _ = {
-    width: "var(--v17_3_ihbkeq0)",
-    height: "var(--v17_3_ihbkeq1)",
-    minHeight: "var(--v17_3_ihbkeq2)",
-    maxWidth: "var(--v17_3_ihbkeq3)",
-    minWidth: "var(--v17_3_ihbkeq4)",
+    width: "var(--v17_5_ihbkeq0)",
+    height: "var(--v17_5_ihbkeq1)",
+    minHeight: "var(--v17_5_ihbkeq2)",
+    maxWidth: "var(--v17_5_ihbkeq3)",
+    minWidth: "var(--v17_5_ihbkeq4)",
     mobile: {
-        width: "var(--v17_3_ihbkeq5)",
-        height: "var(--v17_3_ihbkeq6)",
-        minHeight: "var(--v17_3_ihbkeq7)",
-        maxWidth: "var(--v17_3_ihbkeq8)",
-        minWidth: "var(--v17_3_ihbkeq9)"
+        width: "var(--v17_5_ihbkeq5)",
+        height: "var(--v17_5_ihbkeq6)",
+        minHeight: "var(--v17_5_ihbkeq7)",
+        maxWidth: "var(--v17_5_ihbkeq8)",
+        minWidth: "var(--v17_5_ihbkeq9)"
     },
     tablet: {
-        width: "var(--v17_3_ihbkeqa)",
-        height: "var(--v17_3_ihbkeqb)",
-        minHeight: "var(--v17_3_ihbkeqc)",
-        maxWidth: "var(--v17_3_ihbkeqd)",
-        minWidth: "var(--v17_3_ihbkeqe)"
+        width: "var(--v17_5_ihbkeqa)",
+        height: "var(--v17_5_ihbkeqb)",
+        minHeight: "var(--v17_5_ihbkeqc)",
+        maxWidth: "var(--v17_5_ihbkeqd)",
+        minWidth: "var(--v17_5_ihbkeqe)"
     },
     desktop: {
-        width: "var(--v17_3_ihbkeqf)",
-        height: "var(--v17_3_ihbkeqg)",
-        minHeight: "var(--v17_3_ihbkeqh)",
-        maxWidth: "var(--v17_3_ihbkeqi)",
-        minWidth: "var(--v17_3_ihbkeqj)"
-    },
-    background: "var(--v17_3_ihbkeqk)",
-    borderRadius: "var(--v17_3_ihbkeql)"
-}, h = "v17_3_ihbkeqm", e = "v17_3_ihbkeqn v17_3_1y2v1nfue", r = "v17_3_ihbkeqo v17_3_1y2v1nftr", a = "v17_3_ihbkeqp", b = "v17_3_ihbkeqq v17_3_1y2v1nfts";
+        width: "var(--v17_5_ihbkeqf)",
+        height: "var(--v17_5_ihbkeqg)",
+        minHeight: "var(--v17_5_ihbkeqh)",
+        maxWidth: "var(--v17_5_ihbkeqi)",
+        minWidth: "var(--v17_5_ihbkeqj)"
+    },
+    background: "var(--v17_5_ihbkeqk)",
+    borderRadius: "var(--v17_5_ihbkeql)"
+}, h = "v17_5_ihbkeqm", e = "v17_5_ihbkeqn v17_5_1y2v1nfui", r = "v17_5_ihbkeqo v17_5_1y2v1nftv", a = "v17_5_ihbkeqp", b = "v17_5_ihbkeqq v17_5_1y2v1nftw";

package/dist/boxed.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { vars } from './skins/skin-contract.css';
 import type { Variant } from './theme-variant-context';
+import type { ComponentPropertiesConfig } from './skins/types';
 import type { ByBreakpoint, DataAttributes } from './utils/types';
 type Props = {
     children: React.ReactNode;
@@ -24,6 +25,14 @@ type InternalProps = {
     background?: string;
     overflow?: 'hidden' | 'visible';
 };
+/**
+ * The single point that decides whether a boxed surface paints its border. Components that own their own
+ * box, like `SidenavBar`, share this rule instead of repeating it.
+ *
+ * @param internalVariant the variant of the box itself
+ * @param externalVariant the variant of the page behind the box
+ */
+export declare const shouldShowBoxedBorder: (internalVariant: Variant, externalVariant: Variant, showBoxedBorder: ComponentPropertiesConfig["showBoxedBorder"]) => boolean;
 export declare const InternalBoxed: React.ForwardRefExoticComponent<Props & InternalProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Boxed: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/boxed.js

@@ -11,10 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     get Boxed () {
-        return X;
+        return Y;
     },
     get InternalBoxed () {
-        return E;
+        return F;
+    },
+    get shouldShowBoxedBorder () {
+        return q;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -124,21 +127,21 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const q = (e, r, t)=>e === "default" && (r === "default" || r === "alternative") && t[r] ? _boxedcssmistica.boxBorder : _boxedcssmistica.noBorder, d = (e)=>typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "initial", a = (e, r)=>{
+const q = (o, r, e)=>o === "default" && (r === "default" || r === "alternative") && e[r], E = (o, r, e)=>q(o, r, e) ? _boxedcssmistica.boxBorder : _boxedcssmistica.noBorder, d = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", a = (o, r)=>{
     if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
-        [_boxedcssmistica.vars[e]]: d(r)
+        [_boxedcssmistica.vars[o]]: d(r)
     };
-    const t = {
-        [_boxedcssmistica.vars.mobile[e]]: d(r.mobile),
-        [_boxedcssmistica.vars.desktop[e]]: d(r.desktop)
+    const e = {
+        [_boxedcssmistica.vars.mobile[o]]: d(r.mobile),
+        [_boxedcssmistica.vars.desktop[o]]: d(r.desktop)
     };
-    return r.tablet && (t[_boxedcssmistica.vars.tablet[e]] = d(r.tablet)), t;
-}, E = /*#__PURE__*/ _react.forwardRef((param, v)=>{
-    let { children: e, className: r, role: t, dataAttributes: b, "aria-label": p, "aria-labelledby": u, width: g, maxWidth: h, minWidth: y, height: k, minHeight: B, borderRadius: x = _skincontractcssmistica.vars.borderRadii.container, background: m, desktopOnly: C, variant: w, overflow: R, border: V } = param;
+    return r.tablet && (e[_boxedcssmistica.vars.tablet[o]] = d(r.tablet)), e;
+}, F = /*#__PURE__*/ _react.forwardRef((param, v)=>{
+    let { children: o, className: r, role: e, dataAttributes: b, "aria-label": p, "aria-labelledby": u, width: g, maxWidth: h, minWidth: B, height: y, minHeight: k, borderRadius: x = _skincontractcssmistica.vars.borderRadii.container, background: m, desktopOnly: C, variant: w, overflow: R, border: V } = param;
     const i = (0, _themevariantcontext.normalizeVariant)((0, _themevariantcontext.useThemeVariant)()), s = (0, _themevariantcontext.normalizeVariant)(w !== null && w !== void 0 ? w : "default"), { componentProperties: O } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         ref: v,
-        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, a("width", g), a("maxWidth", h), a("minWidth", y), a("height", k), a("minHeight", B)), {
+        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread_props(_object_spread({}, a("width", g), a("maxWidth", h), a("minWidth", B), a("height", y), a("minHeight", k)), {
             [_boxedcssmistica.vars.background]: m !== null && m !== void 0 ? m : ({
                 default: _skincontractcssmistica.vars.colors.backgroundContainer,
                 brand: i === "brand" || i === "negative" || i === "media" ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverBrand : _skincontractcssmistica.vars.colors.backgroundContainerBrand,
@@ -151,19 +154,19 @@ const q = (e, r, t)=>e === "default" && (r === "default" || r === "alternative")
             background: m,
             border: V
         }),
-        className: (0, _classnames.default)(r, _boxedcssmistica.boxed, q(s, i, O.showBoxedBorder), {
+        className: (0, _classnames.default)(r, _boxedcssmistica.boxed, E(s, i, O.showBoxedBorder), {
             [_boxedcssmistica.desktopOnly]: C,
             [_boxedcssmistica.overflowHidden]: R !== "visible"
         }),
-        role: t,
+        role: e,
         "aria-label": p,
         "aria-labelledby": u
     }, (0, _dom.getPrefixedDataAttributes)(b)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: s,
-            children: e
+            children: o
         })
     }));
-}), X = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(E, _object_spread_props(_object_spread({}, e), {
+}), Y = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(F, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));

package/dist/button-group.css-mistica.js

@@ -37,4 +37,4 @@ _export(exports, {
         return r;
     }
 });
-/* empty css                                     */ /* empty css                                  */ /* empty css                                        */ var r = "v17_3_1xdd1h61 v17_3_1xdd1h60 v17_3_1y2v1nfrb v17_3_1y2v1nfrp v17_3_1y2v1nfrf", n = "v17_3_1xdd1h62", t = "v17_3_1xdd1h63", a = "v17_3_1xdd1h64", e = "v17_3_1xdd1h65", h = "v17_3_1xdd1h66", i = "v17_3_1xdd1h67", o = "v17_3_1xdd1h68", x = "v17_3_1xdd1h69";
+/* empty css                                     */ /* empty css                                  */ /* empty css                                        */ var r = "v17_5_1xdd1h61 v17_5_1xdd1h60 v17_5_1y2v1nfrf v17_5_1y2v1nfrt v17_5_1y2v1nfrj", n = "v17_5_1xdd1h62", t = "v17_5_1xdd1h63", a = "v17_5_1xdd1h64", e = "v17_5_1xdd1h65", h = "v17_5_1xdd1h66", i = "v17_5_1xdd1h67", o = "v17_5_1xdd1h68", x = "v17_5_1xdd1h69";

package/dist/button-layout.css-mistica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     get alignVariant () {
-        return x;
+        return h;
     },
     get container () {
         return y;
@@ -19,28 +19,28 @@ _export(exports, {
         return l;
     },
     get link () {
-        return h;
+        return k;
     },
     get linkInNewLine () {
-        return k;
+        return x;
     },
     get smallLinkInNewLine () {
-        return r;
+        return n;
     }
 });
-/* empty css                                     */ /* empty css                                  */ /* empty css                                         */ var y = "v17_3_kfxylh1 v17_3_kfxylh0 v17_3_1y2v1nfra v17_3_1y2v1nfrp", l = "v17_3_kfxylh2", x = {
-    right: "v17_3_kfxylh7 v17_3_kfxylh3 v17_3_1y2v1nfrk",
-    left: "v17_3_kfxylh8 v17_3_kfxylh4 v17_3_1y2v1nfri",
-    center: "v17_3_kfxylh9 v17_3_kfxylh5 v17_3_1y2v1nfrj",
-    "full-width": "v17_3_kfxylha v17_3_kfxylh6 v17_3_1y2v1nfrj"
-}, h = "v17_3_kfxylhd v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx", k = {
-    center: "v17_3_kfxylhh v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx",
-    left: "v17_3_kfxylhi v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhe",
-    right: "v17_3_kfxylhj v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhf",
-    "full-width": "v17_3_kfxylhk v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhg"
-}, r = {
-    center: "v17_3_kfxylho v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx",
-    left: "v17_3_kfxylhp v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhl",
-    right: "v17_3_kfxylhq v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhm",
-    "full-width": "v17_3_kfxylhr v17_3_kfxylhc v17_3_kfxylhb v17_3_1y2v1nfra v17_3_1y2v1nfrx v17_3_kfxylhn"
+/* empty css                                     */ /* empty css                                  */ /* empty css                                         */ var y = "v17_5_kfxylh1 v17_5_kfxylh0 v17_5_1y2v1nfre v17_5_1y2v1nfrt", l = "v17_5_kfxylh2", h = {
+    right: "v17_5_kfxylh7 v17_5_kfxylh3 v17_5_1y2v1nfro",
+    left: "v17_5_kfxylh8 v17_5_kfxylh4 v17_5_1y2v1nfrm",
+    center: "v17_5_kfxylh9 v17_5_kfxylh5 v17_5_1y2v1nfrn",
+    "full-width": "v17_5_kfxylha v17_5_kfxylh6 v17_5_1y2v1nfrn"
+}, k = "v17_5_kfxylhd v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1", x = {
+    center: "v17_5_kfxylhh v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1",
+    left: "v17_5_kfxylhi v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhe",
+    right: "v17_5_kfxylhj v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhf",
+    "full-width": "v17_5_kfxylhk v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhg"
+}, n = {
+    center: "v17_5_kfxylho v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1",
+    left: "v17_5_kfxylhp v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhl",
+    right: "v17_5_kfxylhq v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhm",
+    "full-width": "v17_5_kfxylhr v17_5_kfxylhc v17_5_kfxylhb v17_5_1y2v1nfre v17_5_1y2v1nfs1 v17_5_kfxylhn"
 };