@telefonica/mistica 17.1.0 → 17.3.0

package/css/movistar.css

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='movistar'] {
     /* Palette colors */
     --mistica-movistar-white: #ffffff;
@@ -376,6 +382,7 @@
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 8px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;

package/css/o2.css

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='o2'] {
     /* Palette colors */
     --mistica-o2-white: #ffffff;
@@ -46,6 +52,7 @@
     --mistica-o2-raw-white: 255, 255, 255;
     --mistica-o2-raw-black: 0, 0, 30;
     --mistica-o2-raw-beyondBlue90: 0, 16, 51;
+    --mistica-o2-raw-grey30: 217, 217, 221;
     --mistica-o2-raw-beyondBlue30: 128, 167, 255;
     --mistica-o2-raw-darkModeGrey: 8, 19, 43;
 
@@ -126,7 +133,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);
@@ -384,6 +391,7 @@
     --mistica-border-radius-popup: 8px;
     --mistica-border-radius-sheet: 16px;
     --mistica-border-radius-mediaSmall: 8px;
+    --mistica-border-radius-snackbar: 8px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1173,7 +1181,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-o2-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-o2-raw-white), 0.08);
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-o2-grey20);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-o2-raw-grey30), 0.4);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-o2-white);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-o2-grey20);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-o2-white);

package/css/telefonica.css

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='telefonica'] {
     /* Palette colors */
     --mistica-telefonica-white: #ffffff;
@@ -49,6 +55,7 @@
     --mistica-telefonica-raw-black: 0, 0, 0;
     --mistica-telefonica-raw-telefonicaBlue: 0, 102, 255;
     --mistica-telefonica-raw-telefonicaBlue80: 0, 46, 115;
+    --mistica-telefonica-raw-grey2: 209, 213, 228;
     --mistica-telefonica-raw-darkModeTelefonicaBlue: 34, 122, 255;
     --mistica-telefonica-raw-darkModeGrey: 0, 24, 47;
     --mistica-telefonica-raw-coral60: 210, 42, 30;
@@ -127,7 +134,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
     --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-telefonica-grey1);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);
@@ -385,6 +392,7 @@
     --mistica-border-radius-popup: 4px;
     --mistica-border-radius-sheet: 0px;
     --mistica-border-radius-mediaSmall: 2px;
+    --mistica-border-radius-snackbar: 4px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1299,7 +1307,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundBrandPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
         --mistica-color-buttonLinkBackgroundMediaPressed: rgba(var(--mistica-telefonica-raw-white), 0.08);
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-telefonica-grey1);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: rgba(var(--mistica-telefonica-raw-grey2), 0.4);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-telefonica-white);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-telefonica-grey1);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-telefonica-white);

package/css/vivo-evolution.css

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='vivo-evolution'] {
     /* Palette colors */
     --mistica-vivo-evolution-vivoNeutral0: #ffffff;
@@ -150,7 +156,7 @@
         var(--mistica-vivo-evolution-raw-vivoNeutral0),
         0.1
     );
-    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral25);
+    --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
     --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
     --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
     --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -427,11 +433,12 @@
     --mistica-border-radius-container: 24px;
     --mistica-border-radius-indicator: 24px;
     --mistica-border-radius-chip: 24px;
-    --mistica-border-radius-tag: 10px;
+    --mistica-border-radius-tag: 8px;
     --mistica-border-radius-input: 16px;
     --mistica-border-radius-popup: 16px;
     --mistica-border-radius-sheet: 24px;
     --mistica-border-radius-mediaSmall: 12px;
+    --mistica-border-radius-snackbar: 24px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -475,14 +482,14 @@
     --mistica-font-size-title1: 0.75rem;
     --mistica-line-height-title1: 1rem;
     --mistica-font-weight-title1: 500;
-    --mistica-font-size-title2: 1rem;
-    --mistica-line-height-title2: 1.5rem;
+    --mistica-font-size-title2: 0.875rem;
+    --mistica-line-height-title2: 1.25rem;
     --mistica-font-weight-title2: 500;
-    --mistica-font-size-title3: 1.125rem;
+    --mistica-font-size-title3: 1rem;
     --mistica-line-height-title3: 1.5rem;
     --mistica-font-weight-title3: 500;
-    --mistica-font-size-title4: 1.5rem;
-    --mistica-line-height-title4: 2rem;
+    --mistica-font-size-title4: 1.25rem;
+    --mistica-line-height-title4: 1.5rem;
     --mistica-font-weight-title4: 500;
     --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 400;
@@ -1511,7 +1518,7 @@
             var(--mistica-vivo-evolution-raw-vivoNeutral0),
             0.1
         );
-        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral25);
+        --mistica-color-buttonLinkNeutralBackgroundPressed: var(--mistica-vivo-evolution-vivoNeutral100);
         --mistica-color-buttonLinkNeutralBackgroundBrand: var(--mistica-vivo-evolution-vivoNeutral0);
         --mistica-color-buttonLinkNeutralBackgroundBrandPressed: var(--mistica-vivo-evolution-vivoNeutral25);
         --mistica-color-buttonLinkNeutralBackgroundNegative: var(--mistica-vivo-evolution-vivoNeutral0);
@@ -1820,12 +1827,12 @@
 
         --mistica-font-size-title1: 0.875rem;
         --mistica-line-height-title1: 1.25rem;
-        --mistica-font-size-title2: 1.125rem;
+        --mistica-font-size-title2: 1rem;
         --mistica-line-height-title2: 1.5rem;
-        --mistica-font-size-title3: 1.5rem;
-        --mistica-line-height-title3: 1.75rem;
-        --mistica-font-size-title4: 2rem;
-        --mistica-line-height-title4: 2.5rem;
+        --mistica-font-size-title3: 1.125rem;
+        --mistica-line-height-title3: 1.5rem;
+        --mistica-font-size-title4: 1.75rem;
+        --mistica-line-height-title4: 2rem;
 
         --mistica-font-size-chipLabel: 1rem;
         --mistica-line-height-chipLabel: 1.5rem;

package/css/vivo.css

@@ -1,3 +1,9 @@
+/**
+ * @generated
+ * This file was automatically generated by the generate-design-tokens script.
+ * Do not edit it by hand: your changes will be overwritten the next time the script runs.
+ */
+
 [data-mistica-skin='vivo'] {
     /* Palette colors */
     --mistica-vivo-white: #ffffff;
@@ -108,7 +114,7 @@
     --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
     --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-grey1);
+    --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);
@@ -366,6 +372,7 @@
     --mistica-border-radius-popup: 16px;
     --mistica-border-radius-sheet: 24px;
     --mistica-border-radius-mediaSmall: 12px;
+    --mistica-border-radius-snackbar: 16px;
 
     /* Text */
     --mistica-font-size-1: 0.75rem;
@@ -1151,7 +1158,7 @@
         --mistica-color-buttonLinkBackgroundNegativePressed: rgba(var(--mistica-vivo-raw-white), 0.1);
         --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-grey1);
+        --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);

package/dist/accordion.css-mistica.js

@@ -9,9 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get accordionItem () {
+    get accordionContentPadding () {
         return z;
     },
+    get accordionItem () {
+        return c;
+    },
     get boxed () {
         return s;
     },
@@ -25,24 +28,24 @@ _export(exports, {
         return i;
     },
     get panelContainer () {
-        return x;
+        return o;
     },
     get panelTransitionClasses () {
-        return o;
+        return x;
     },
     get rightContentContainer () {
-        return a;
+        return e;
     },
     get touchableBackground () {
         return r;
     },
     get touchableBackgroundOverBrand () {
-        return e;
+        return a;
     }
 });
-/* empty css                                     */ /* empty css                                     */ var n = "v17_1_8s3szx0 v17_1_1y2v1nfh3 v17_1_1y2v1nfic v17_1_1y2v1nfjl v17_1_1y2v1nfku v17_1_1y2v1nfrx v17_1_1y2v1nfts v17_1_1y2v1nfh2 v17_1_1y2v1nfrc v17_1_1y2v1nfse", s = "v17_1_8s3szx1", r = "v17_1_8s3szx2", e = "v17_1_8s3szx3", a = "v17_1_8s3szx4", t = "v17_1_8s3szx5", x = "v17_1_8s3szx6", o = {
-    enter: "v17_1_8s3szx7",
-    enterActive: "v17_1_8s3szx8",
-    exit: "v17_1_8s3szx9",
-    exitActive: "v17_1_8s3szxa"
-}, i = "v17_1_8s3szxb", z = "v17_1_8s3szxc v17_1_1y2v1nfrx";
+/* 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";

package/dist/accordion.css.d.ts

@@ -13,3 +13,4 @@ export declare const panelTransitionClasses: {
 };
 export declare const panel: string;
 export declare const accordionItem: string;
+export declare const accordionContentPadding: string;

package/dist/accordion.d.ts

@@ -23,6 +23,7 @@ type AccordionBaseProps = {
     dataAttributes?: DataAttributes;
     onChange?: (index: number, value: boolean) => void;
     role?: string;
+    small?: boolean;
 };
 type SingleOpenProps = {
     singleOpen: true;
@@ -35,10 +36,10 @@ type MultipleOpenProps = {
     defaultIndex?: number | ReadonlyArray<number>;
 };
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
-export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
+export declare const Accordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, small, }: AccordionProps) => JSX.Element;
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
     variant?: 'default' | 'brand';
 }
 export declare const BoxedAccordionItem: React.ForwardRefExoticComponent<BoxedAccordionItemProps & React.RefAttributes<HTMLDivElement>>;
-export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, }: AccordionProps) => JSX.Element;
+export declare const BoxedAccordion: ({ children, dataAttributes, index, defaultIndex, onChange, singleOpen, role, small, }: AccordionProps) => JSX.Element;
 export {};