@telefonica/mistica 15.18.0 → 15.19.0

package/dist/button.css-mistica.js

@@ -9,83 +9,92 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    CHEVRON_MARGIN_LEFT_LINK: function() {
-        return _;
-    },
-    ICON_MARGIN_PX: function() {
-        return y;
+    borderSize: function() {
+        return r;
     },
-    ICON_SIZE: function() {
+    buttonMinWidth: function() {
         return f;
     },
-    PADDING_X_LINK: function() {
-        return r;
-    },
-    PADDING_Y_LINK: function() {
-        return a;
+    buttonPaddingX: function() {
+        return y;
     },
-    SMALL_ICON_SIZE: function() {
-        return b;
+    buttonPaddingY: function() {
+        return _;
     },
-    SMALL_SPINNER_SIZE: function() {
-        return k;
+    buttonVariants: function() {
+        return a;
     },
-    SPINNER_SIZE: function() {
-        return e;
+    buttonVars: function() {
+        return p;
     },
-    X_PADDING_PX: function() {
-        return h;
+    chevronMarginLeft: function() {
+        return b;
     },
-    X_SMALL_PADDING_PX: function() {
-        return p;
+    iconMargin: function() {
+        return l;
     },
-    buttonVariants: function() {
+    iconSize: function() {
         return i;
     },
     inverseButtonVariants: function() {
-        return l;
-    },
-    inverseLinkVariants: function() {
-        return t;
+        return e;
     },
     isLoading: function() {
-        return o;
+        return h;
     },
-    linkVariants: function() {
-        return d;
+    linkMinWidth: function() {
+        return k;
     },
     loadingContent: function() {
-        return g;
+        return d;
     },
     loadingFiller: function() {
-        return I;
+        return t;
     },
     small: function() {
-        return N;
+        return o;
     },
-    textContent: function() {
+    spinnerSize: function() {
         return m;
     },
-    textContentLink: function() {
-        return L;
+    textContent: function() {
+        return c;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
-var _ = 2, y = 8, f = 24, r = 12, a = 6, b = 20, k = 16, e = 20, h = 14.5, p = 10.5, i = {
-    primary: "rrbrpno rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4l",
-    secondary: "rrbrpnp rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2f _1y2v1nf7c",
-    danger: "rrbrpnq rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4d"
-}, l = {
-    primary: "rrbrpnr rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2d _1y2v1nf4m",
-    secondary: "rrbrpns rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2h _1y2v1nf7c",
-    danger: "rrbrpnt rrbrpn2 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4d"
-}, t = {
-    default: "rrbrpnx rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2k _1y2v1nf7c",
-    danger: "rrbrpny rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2l _1y2v1nf4h",
-    dangerDark: "rrbrpnz rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2l _1y2v1nf7c"
-}, o = "rrbrpn0", d = {
-    default: "rrbrpnu rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2j _1y2v1nf7c",
-    danger: "rrbrpnv rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2l _1y2v1nf7c",
-    dangerDark: "rrbrpnw rrbrpng _1y2v1nfa7 _1y2v1nfbg _1y2v1nfho _1y2v1nfi8 _1y2v1nfhe _1y2v1nfk9 _1y2v1nfk2 _1y2v1nfkl _1y2v1nfje _1y2v1nf2l _1y2v1nf7c"
-}, g = "rrbrpn7 _1y2v1nfhl _1y2v1nfhf _1y2v1nfkr _1y2v1nfm0 _1y2v1nfht _1y2v1nfhz", I = "rrbrpn4 _1y2v1nfhm _1y2v1nfip _1y2v1nfkl", N = "rrbrpn5", m = "rrbrpn9 _1y2v1nfhk _1y2v1nfhz _1y2v1nfht", L = "rrbrpni _1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+var r = "1.5px", f = {
+    default: "104px",
+    small: "80px"
+}, y = {
+    default: "calc(16px - 1.5px)",
+    small: "calc(12px - 1.5px)"
+}, _ = {
+    default: "calc(12px - 1.5px)",
+    small: "calc(6px - 1.5px)"
+}, a = {
+    primary: "rrbrpnm rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4l",
+    secondary: "rrbrpnn rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2f _1y2v1nf7c",
+    danger: "rrbrpno rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4d",
+    link: "rrbrpnp rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2j _1y2v1nf7c",
+    linkDanger: "rrbrpnq rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf7c",
+    linkDangerDark: "rrbrpnr rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf7c"
+}, p = {
+    minWidth: "var(--rrbrpn0)"
+}, b = "2px", l = "8px", i = {
+    default: "1.500rem",
+    small: "1.250rem"
+}, e = {
+    primary: "rrbrpns rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2d _1y2v1nf4m",
+    secondary: "rrbrpnt rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2h _1y2v1nf7c",
+    danger: "rrbrpnu rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2c _1y2v1nf4d",
+    link: "rrbrpnv rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2k _1y2v1nf7c",
+    linkDanger: "rrbrpnw rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf4h",
+    linkDangerDark: "rrbrpnx rrbrpn4 rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf7c"
+}, h = "rrbrpn1", k = {
+    default: "40px",
+    small: "40px"
+}, d = "rrbrpn9 _1y2v1nfhl _1y2v1nfhf _1y2v1nfkr _1y2v1nfm0 _1y2v1nfht _1y2v1nfhz", t = "rrbrpn7 _1y2v1nfhm _1y2v1nfip _1y2v1nfkl", o = "rrbrpn5", m = {
+    default: "1.250rem",
+    small: "1.000rem"
+}, c = "rrbrpnb _1y2v1nfhk _1y2v1nfhz _1y2v1nfht";

package/dist/button.css.d.ts

@@ -1,24 +1,40 @@
 import type { ComplexStyleRule } from '@vanilla-extract/css';
-export declare const BUTTON_MIN_WIDTH = 104;
-export declare const ICON_MARGIN_PX = 8;
-export declare const X_PADDING_PX: number;
-export declare const X_SMALL_PADDING_PX: number;
-export declare const ICON_SIZE = 24;
-export declare const SMALL_ICON_SIZE = 20;
-export declare const SPINNER_SIZE = 20;
-export declare const SMALL_SPINNER_SIZE = 16;
-export declare const PADDING_Y_LINK = 6;
-export declare const PADDING_X_LINK = 12;
-export declare const CHEVRON_MARGIN_LEFT_LINK = 2;
+export declare const buttonVars: {
+    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const buttonMinWidth: {
+    default: string;
+    small: string;
+};
+export declare const linkMinWidth: {
+    default: string;
+    small: string;
+};
+export declare const borderSize = "1.5px";
+export declare const iconMargin = "8px";
+export declare const chevronMarginLeft = "2px";
+export declare const iconSize: {
+    default: string;
+    small: string;
+};
+export declare const spinnerSize: {
+    default: string;
+    small: string;
+};
+export declare const buttonPaddingX: {
+    default: string;
+    small: string;
+};
+export declare const buttonPaddingY: {
+    default: string;
+    small: string;
+};
 export declare const isLoading: string;
-export declare const loadingFiller: string;
 export declare const small: string;
+export declare const loadingFiller: string;
 export declare const loadingContent: string;
 export declare const textContent: string;
-export declare const textContentLink: string;
 export declare const defaultLink: ComplexStyleRule;
 export declare const defaultLinkInverse: ComplexStyleRule;
-export declare const buttonVariants: Record<"danger" | "primary" | "secondary", string>;
-export declare const inverseButtonVariants: Record<"danger" | "primary" | "secondary", string>;
-export declare const linkVariants: Record<"default" | "danger" | "dangerDark", string>;
-export declare const inverseLinkVariants: Record<"default" | "danger" | "dangerDark", string>;
+export declare const buttonVariants: Record<"link" | "danger" | "primary" | "secondary" | "linkDanger" | "linkDangerDark", string>;
+export declare const inverseButtonVariants: Record<"link" | "danger" | "primary" | "secondary" | "linkDanger" | "linkDangerDark", string>;

package/dist/button.d.ts

@@ -25,71 +25,34 @@ interface CommonProps {
     /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
     role?: string;
 }
-export interface ToButtonProps extends CommonProps {
+interface ToButtonProps extends CommonProps {
     to: string | Location;
     newTab?: boolean;
     fullPageOnWebView?: boolean;
     onNavigate?: () => void | Promise<void>;
 }
-export interface OnPressButtonProps extends CommonProps {
+interface OnPressButtonProps extends CommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
 }
-export interface HrefButtonProps extends CommonProps {
+interface HrefButtonProps extends CommonProps {
     href: string;
     newTab?: boolean;
     loadOnTop?: boolean;
     onNavigate?: () => void | Promise<void>;
 }
-export interface FakeButtonProps extends CommonProps {
+interface FakeButtonProps extends CommonProps {
     fake: true;
 }
-export interface SubmitButtonProps extends CommonProps {
+interface SubmitButtonProps extends CommonProps {
     submit: true;
 }
-export type ButtonProps = ExclusifyUnion<FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps>;
-interface ButtonLinkCommonProps {
-    children: React.ReactNode;
-    disabled?: boolean;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    trackEvent?: boolean;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    showSpinner?: boolean;
-    loadingText?: string;
-    StartIcon?: React.FC<IconProps>;
-    EndIcon?: React.FC<IconProps>;
+type ButtonProps = ExclusifyUnion<FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps>;
+type ButtonLinkProps = ExclusifyUnion<ToButtonProps | OnPressButtonProps | HrefButtonProps> & {
     bleedLeft?: boolean;
     bleedRight?: boolean;
     bleedY?: boolean;
-    'aria-label'?: string;
-    'aria-controls'?: string;
-    'aria-expanded'?: 'true' | 'false' | boolean;
-    'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
-    /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
-    role?: string;
-}
-interface ButtonLinkOnPressProps extends ButtonLinkCommonProps {
-    onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
-    to?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
-}
-interface ButtonLinkHrefProps extends ButtonLinkCommonProps {
-    href: string;
-    newTab?: boolean;
-    onPress?: undefined;
-    to?: undefined;
-    onNavigate?: () => void | Promise<void>;
-}
-interface ButtonLinkToProps extends ButtonLinkCommonProps {
-    to: string;
-    newTab?: boolean;
-    fullPageOnWebView?: boolean;
-    onPress?: undefined;
-    href?: undefined;
-    onNavigate?: () => void | Promise<void>;
-}
-export type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
+    small?: true;
+};
 export declare const ButtonLink: React.ForwardRefExoticComponent<(ButtonLinkProps & {
     withChevron?: boolean | undefined;
 }) & React.RefAttributes<TouchableElement>>;