@telefonica/mistica 15.20.1 → 16.1.0

package/dist/boxed.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     Boxed: function() {
-        return J;
+        return G;
     },
     InternalBoxed: function() {
-        return A;
+        return H;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -124,7 +124,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
+const A = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         border: "none"
     }) : _boxedcssmistica.boxBorder, s = (o)=>typeof o == "number" ? `${o}px` : o !== null && o !== void 0 ? o : "initial", e = (o, r)=>{
     if (typeof r == "number" || typeof r == "string" || typeof r > "u") return {
@@ -135,15 +135,15 @@ const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         [_boxedcssmistica.vars.desktop[o]]: s(r.desktop)
     };
     return r.tablet && (t[_boxedcssmistica.vars.tablet[o]] = s(r.tablet)), t;
-}, A = /*#__PURE__*/ _react.forwardRef((param, w)=>{
-    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C } = param;
-    const m = (0, _themevariantcontext.useIsInverseVariant)();
+}, H = /*#__PURE__*/ _react.forwardRef((param, w)=>{
+    let { children: o, isInverse: r = !1, className: t, role: p, dataAttributes: b, "aria-label": c, "aria-labelledby": y, width: h, maxWidth: x, minWidth: g, height: k, minHeight: u, borderRadius: B = _skincontractcssmistica.vars.borderRadii.container, background: d, desktopOnly: C, variant: O } = param;
+    const m = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         ref: w,
         style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(_object_spread({}, e("width", h), e("maxWidth", x), e("minWidth", g), e("height", k), e("minHeight", u)))), {
             background: d
         }),
-        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, z(m, r), (0, _sprinklescssmistica.sprinkles)({
+        className: (0, _classnames.default)(t, _boxedcssmistica.boxed, A(m, r), (0, _sprinklescssmistica.sprinkles)({
             borderRadius: B,
             overflow: "hidden",
             background: (d !== null && d !== void 0 ? d : r) ? m ? _skincontractcssmistica.vars.colors.backgroundContainerBrandOverInverse : _skincontractcssmistica.vars.colors.backgroundContainerBrand : _skincontractcssmistica.vars.colors.backgroundContainer
@@ -155,10 +155,10 @@ const z = (o, r)=>o || r ? (0, _sprinklescssmistica.sprinkles)({
         "aria-labelledby": y
     }, (0, _dom.getPrefixedDataAttributes)(b)), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
-            isInverse: r,
+            variant: O !== null && O !== void 0 ? O : r ? "inverse" : void 0,
             children: o
         })
     }));
-}), J = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(A, _object_spread_props(_object_spread({}, o), {
+}), G = /*#__PURE__*/ _react.forwardRef((o, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(H, _object_spread_props(_object_spread({}, o), {
         ref: r
     })));

package/dist/button-fixed-footer-layout.d.ts

@@ -4,8 +4,6 @@ import type { RendersNullableElement } from './utils/types';
 type Props = {
     isFooterVisible?: boolean;
     button?: NullableButtonElement;
-    /** @deprecated */
-    desktopButtonAlign?: 'left' | 'center';
     secondaryButton?: NullableButtonElement;
     link?: RendersNullableElement<typeof ButtonLink>;
     footerBgColor?: string;
@@ -13,5 +11,5 @@ type Props = {
     children: React.ReactNode;
     onChangeFooterHeight?: (heightInPx: number) => void;
 };
-declare const ButtonFixedFooterLayout: ({ isFooterVisible, button, secondaryButton, link, children, desktopButtonAlign, footerBgColor, containerBgColor, onChangeFooterHeight, }: Props) => JSX.Element;
+declare const ButtonFixedFooterLayout: ({ isFooterVisible, button, secondaryButton, link, children, footerBgColor, containerBgColor, onChangeFooterHeight, }: Props) => JSX.Element;
 export default ButtonFixedFooterLayout;

package/dist/button-fixed-footer-layout.js

@@ -1,4 +1,3 @@
-"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -6,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return c;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _fixedfooterlayout = /*#__PURE__*/ _interop_require_default(require("./fixed-footer-layout.js"));
 const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-layout.js"));
-const _hooks = require("./hooks.js");
 const _responsivelayout = require("./responsive-layout.js");
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 function _interop_require_default(obj) {
@@ -20,14 +18,13 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const F = (param)=>{
-    let { isFooterVisible: i = !0, button: t, secondaryButton: e, link: s, children: n, desktopButtonAlign: r, footerBgColor: a, containerBgColor: m, onChangeFooterHeight: u } = param;
-    const { isDesktopOrBigger: p } = (0, _hooks.useScreenSize)();
+const f = (param)=>{
+    let { isFooterVisible: r = !0, button: t, secondaryButton: e, link: i, children: n, footerBgColor: a, containerBgColor: s, onChangeFooterHeight: u } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_fixedfooterlayout.default, {
         onChangeFooterHeight: u,
-        isFooterVisible: (!!t || !!e) && i,
+        isFooterVisible: (!!t || !!e) && r,
         footerBgColor: a,
-        containerBgColor: m,
+        containerBgColor: s,
         footer: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
             shouldExpandWhenNested: "desktop",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -39,11 +36,11 @@ const F = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonlayout.default, {
                     primaryButton: t,
                     secondaryButton: e,
-                    align: p && r ? r : "full-width",
-                    link: s
+                    align: "full-width",
+                    link: i
                 })
             })
         }),
         children: n
     });
-}, S = F;
+}, c = f;

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

@@ -13,13 +13,16 @@ _export(exports, {
         return r;
     },
     buttons: function() {
-        return t;
+        return h;
+    },
+    buttonsWithSmallLink: function() {
+        return a;
     },
     centerInDesktop: function() {
         return e;
     },
     centerInMobile: function() {
-        return h;
+        return i;
     },
     centerInTablet: function() {
         return v;
@@ -27,10 +30,14 @@ _export(exports, {
     container: function() {
         return _;
     },
+    containerWithSmallLink: function() {
+        return o;
+    },
     inline: function() {
-        return a;
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./button.css.ts.vanilla.css-mistica.js");
 require("./button-group.css.ts.vanilla.css-mistica.js");
-var r = "_1xdd1h67", t = "_1xdd1h66", e = "_1xdd1h64", h = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", a = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";
+var r = "_1xdd1h69", h = "_1xdd1h67", a = "_1xdd1h68", e = "_1xdd1h64", i = "_1xdd1h62", v = "_1xdd1h63", _ = "_1xdd1h65", o = "_1xdd1h66", x = "_1xdd1h61 _1y2v1nfhl _1y2v1nfhz _1y2v1nfhp";

package/dist/button-group.css.d.ts

@@ -3,5 +3,7 @@ export declare const centerInMobile: string;
 export declare const centerInTablet: string;
 export declare const centerInDesktop: string;
 export declare const container: string;
+export declare const containerWithSmallLink: string;
 export declare const buttons: string;
+export declare const buttonsWithSmallLink: string;
 export declare const buttonChild: string;

package/dist/button-group.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -5,18 +6,62 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return A;
+        return T;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _dom = require("./utils/dom.js");
 const _buttongroupcssmistica = require("./button-group.css-mistica.js");
+const _buttoncssmistica = require("./button.css-mistica.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -69,10 +114,15 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const k = (param)=>{
-    let { primaryButton: t, secondaryButton: o, link: s, align: e = "left", dataAttributes: m } = param;
+const D = (param)=>{
+    let { primaryButton: t, secondaryButton: s, link: o, align: e = "left", dataAttributes: u } = param;
+    const r = _react.useRef(null), [m, h] = _react.useState(!1);
+    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
+        var a, c;
+        (c = (a = r.current) == null ? void 0 : a.getElementsByClassName(_buttoncssmistica.smallLink)) != null && c.length && h(!0);
+    }, []);
     var _e_mobile, _e_tablet, _ref, _e_desktop;
-    const d = !!t || !!o || !!s, a = !!t && !!o, l = typeof e == "string" ? {
+    const k = !!t || !!s || !!o, L = !!t && !!s, l = typeof e == "string" ? {
         mobile: e,
         tablet: e,
         desktop: e
@@ -81,34 +131,35 @@ const k = (param)=>{
         tablet: (_ref = (_e_tablet = e.tablet) !== null && _e_tablet !== void 0 ? _e_tablet : e.mobile) !== null && _ref !== void 0 ? _ref : "left",
         desktop: (_e_desktop = e.desktop) !== null && _e_desktop !== void 0 ? _e_desktop : "left"
     };
-    return d ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(_buttongroupcssmistica.inline, _buttongroupcssmistica.container, {
+    return k ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: (0, _classnames.default)(_buttongroupcssmistica.inline, m ? _buttongroupcssmistica.containerWithSmallLink : _buttongroupcssmistica.container, {
             [_buttongroupcssmistica.centerInDesktop]: l.desktop === "center",
             [_buttongroupcssmistica.centerInTablet]: l.tablet === "center",
             [_buttongroupcssmistica.centerInMobile]: l.mobile === "center"
         })
-    }, (0, _dom.getPrefixedDataAttributes)(m, "ButtonGroup")), {
+    }, (0, _dom.getPrefixedDataAttributes)(u, "ButtonGroup")), {
         children: [
-            (t || o) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_buttongroupcssmistica.inline, _buttongroupcssmistica.buttons),
+            (t || s) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(_buttongroupcssmistica.inline, m ? _buttongroupcssmistica.buttonsWithSmallLink : _buttongroupcssmistica.buttons),
                 children: [
                     t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _buttongroupcssmistica.buttonChild,
                         children: t
                     }),
-                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _buttongroupcssmistica.buttonChild,
-                        children: o
+                        children: s
                     })
                 ]
             }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: r,
                 className: _buttongroupcssmistica.buttonChild,
                 style: {
-                    width: a ? "100%" : "auto"
+                    width: L ? "100%" : "auto"
                 },
-                children: s
+                children: o
             })
         ]
     })) : null;
-}, A = k;
+}, T = D;

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

@@ -10,30 +10,40 @@ function _export(target, all) {
 }
 _export(exports, {
     alignVariant: function() {
-        return y;
+        return n;
     },
     container: function() {
         return l;
     },
     containerWithTwoButtons: function() {
-        return i;
+        return k;
     },
     link: function() {
-        return k;
+        return v;
     },
     linkInNewLine: function() {
-        return r;
+        return i;
     },
-    margins: function() {
+    smallLinkInNewLine: function() {
         return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
 require("./button-layout.css.ts.vanilla.css-mistica.js");
-var y = {
-    right: "kfxylh8 _1y2v1nfhu",
-    left: "kfxylh9 _1y2v1nfhs",
-    center: "kfxylha _1y2v1nfht",
-    "full-width": "kfxylhb _1y2v1nfht"
-}, l = "kfxylh2 _1y2v1nfhk _1y2v1nfhz", i = "kfxylh3", k = "kfxylhe kfxylhd _1y2v1nfhk _1y2v1nfi7", r = "kfxylhf kfxylhd _1y2v1nfhk _1y2v1nfi7", t = "kfxylh0";
+var n = {
+    right: "kfxylh7 _1y2v1nfhu",
+    left: "kfxylh8 _1y2v1nfhs",
+    center: "kfxylh9 _1y2v1nfht",
+    "full-width": "kfxylha _1y2v1nfht"
+}, l = "kfxylh1 _1y2v1nfhk _1y2v1nfhz", k = "kfxylh2", v = "kfxylhd kfxylhc _1y2v1nfhk _1y2v1nfi7", i = {
+    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
+    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhe",
+    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhf",
+    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhg"
+}, t = {
+    center: "kfxylhc _1y2v1nfhk _1y2v1nfi7",
+    left: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhl",
+    right: "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhm",
+    "full-width": "kfxylhc _1y2v1nfhk _1y2v1nfi7 kfxylhn"
+};

package/dist/button-layout.css.d.ts

@@ -1,6 +1,6 @@
-export declare const margins: string;
 export declare const container: string;
 export declare const containerWithTwoButtons: string;
 export declare const alignVariant: Record<"left" | "right" | "center" | "full-width", string>;
 export declare const link: string;
-export declare const linkInNewLine: string;
+export declare const linkInNewLine: Record<"left" | "right" | "center" | "full-width", string>;
+export declare const smallLinkInNewLine: Record<"left" | "right" | "center" | "full-width", string>;

package/dist/button-layout.d.ts

@@ -1,18 +1,12 @@
 /// <reference types="react" />
-import { ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
+import type { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
-import type { NullableButtonElement, ButtonLink } from './button';
-type MaybeButtonElement = NullableButtonElement | void | false;
 type ButtonLayoutProps = {
-    /** @deprecated Use primaryButton and secondaryButton props */
-    children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement];
     align?: 'center' | 'left' | 'right' | 'full-width';
     primaryButton?: RendersNullableElement<typeof ButtonPrimary | typeof ButtonDanger>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
-    /** @deprecated Use a wrapping Box if you need paddings */
-    withMargins?: boolean;
     dataAttributes?: DataAttributes;
 };
-declare const ButtonLayout: ({ children, primaryButton, secondaryButton, align, link, withMargins, dataAttributes, }: ButtonLayoutProps) => JSX.Element;
+declare const ButtonLayout: ({ primaryButton, secondaryButton, align, link, dataAttributes, }: ButtonLayoutProps) => JSX.Element;
 export default ButtonLayout;

package/dist/button-layout.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return W;
+        return F;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _button = require("./button.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _dom = require("./utils/dom.js");
 const _buttonlayoutcssmistica = require("./button-layout.css-mistica.js");
+const _buttoncssmistica = require("./button.css-mistica.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -113,48 +114,44 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const p = [
-    _button.ButtonPrimary,
-    _button.ButtonDanger,
-    _button.ButtonSecondary
-], R = (param)=>{
-    let { children: r, primaryButton: e, secondaryButton: s, align: t = "full-width", link: c, withMargins: x = !1, dataAttributes: B } = param;
-    const l = _react.Children.toArray(r).sort((b, k)=>{
-        const f = p.indexOf(b.type), h = p.indexOf(k.type);
-        return t === "right" ? h - f : f - h;
-    }), i = r ? l.length : (e ? 1 : 0) + (s ? 1 : 0), m = r ? l : t === "right" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+const j = (param)=>{
+    let { primaryButton: i, secondaryButton: r, align: t = "full-width", link: o, dataAttributes: L } = param;
+    const l = _react.useRef(null), [k, p] = _react.useState(!1);
+    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
+        var c, u;
+        (u = (c = l.current) == null ? void 0 : c.getElementsByClassName(_buttoncssmistica.smallLink)) != null && u.length && p(!0);
+    }, []);
+    const s = (i ? 1 : 0) + (r ? 1 : 0), a = t === "right" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            s,
-            e
+            r,
+            i
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            e,
-            s
+            i,
+            r
         ]
-    }), u = c ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(i !== 1 ? _buttonlayoutcssmistica.linkInNewLine : _buttonlayoutcssmistica.link),
+    }), m = o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        ref: l,
+        className: (0, _classnames.default)(s !== 1 ? k ? _buttonlayoutcssmistica.smallLinkInNewLine[t] : _buttonlayoutcssmistica.linkInNewLine[t] : _buttonlayoutcssmistica.link),
         "data-link": "true",
-        children: c
-    }) : null, d = /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        children: o
+    }) : null;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_buttonlayoutcssmistica.container, _buttonlayoutcssmistica.alignVariant[t], {
-            [_buttonlayoutcssmistica.containerWithTwoButtons]: i > 1
+            [_buttonlayoutcssmistica.containerWithTwoButtons]: s > 1
         })
-    }, (0, _dom.getPrefixedDataAttributes)(B, "ButtonLayout")), {
-        children: t !== "right" || i > 1 ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    }, (0, _dom.getPrefixedDataAttributes)(L, "ButtonLayout")), {
+        children: t !== "right" || s > 1 ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                m,
-                u
+                a,
+                m
             ]
         }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                u,
-                m
+                m,
+                a
             ]
         })
     }));
-    return x ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _buttonlayoutcssmistica.margins,
-        children: d
-    }) : d;
-}, W = R;
+}, F = j;

package/dist/button.css-mistica.js

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     borderSize: function() {
-        return r;
+        return f;
     },
     buttonMinWidth: function() {
-        return f;
+        return y;
     },
     buttonPaddingX: function() {
-        return y;
+        return r;
     },
     buttonPaddingY: function() {
         return _;
@@ -25,13 +25,13 @@ _export(exports, {
         return a;
     },
     buttonVars: function() {
-        return p;
+        return l;
     },
     chevronMarginLeft: function() {
-        return b;
+        return p;
     },
     iconMargin: function() {
-        return l;
+        return b;
     },
     iconSize: function() {
         return i;
@@ -52,21 +52,24 @@ _export(exports, {
         return t;
     },
     small: function() {
+        return m;
+    },
+    smallLink: function() {
         return o;
     },
     spinnerSize: function() {
-        return m;
+        return c;
     },
     textContent: function() {
-        return c;
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./button.css.ts.vanilla.css-mistica.js");
-var r = "1.5px", f = {
+var f = "1.5px", y = {
     default: "104px",
     small: "80px"
-}, y = {
+}, r = {
     default: "calc(16px - 1.5px)",
     small: "calc(12px - 1.5px)"
 }, _ = {
@@ -76,25 +79,25 @@ var r = "1.5px", f = {
     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 = {
+    link: "rrbrpnp rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2j _1y2v1nf7c",
+    linkDanger: "rrbrpnq rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf7c",
+    linkDangerDark: "rrbrpnr rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf7c"
+}, l = {
     minWidth: "var(--rrbrpn0)"
-}, b = "2px", l = "8px", i = {
+}, p = "2px", b = "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"
+    link: "rrbrpnv rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2k _1y2v1nf7c",
+    linkDanger: "rrbrpnw rrbrpn3 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfho _1y2v1nfhe _1y2v1nfi8 _1y2v1nfk9 _1y2v1nfkl _1y2v1nf2l _1y2v1nf4h",
+    linkDangerDark: "rrbrpnx 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 = {
+}, d = "rrbrpn9 _1y2v1nfhl _1y2v1nfhf _1y2v1nfkr _1y2v1nfm0 _1y2v1nfht _1y2v1nfhz", t = "rrbrpn7 _1y2v1nfhm _1y2v1nfip _1y2v1nfkl", m = "rrbrpn4", o = "rrbrpn5", c = {
     default: "1.250rem",
     small: "1.000rem"
-}, c = "rrbrpnb _1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+}, x = "rrbrpnb _1y2v1nfhk _1y2v1nfhz _1y2v1nfht";

package/dist/button.css.d.ts

@@ -31,6 +31,7 @@ export declare const buttonPaddingY: {
 };
 export declare const isLoading: string;
 export declare const small: string;
+export declare const smallLink: string;
 export declare const loadingFiller: string;
 export declare const loadingContent: string;
 export declare const textContent: string;

package/dist/button.d.ts

@@ -51,7 +51,6 @@ type ButtonLinkProps = ExclusifyUnion<ToButtonProps | OnPressButtonProps | HrefB
     bleedLeft?: boolean;
     bleedRight?: boolean;
     bleedY?: boolean;
-    small?: true;
 };
 export declare const ButtonLink: React.ForwardRefExoticComponent<(ButtonLinkProps & {
     withChevron?: boolean | undefined;