@telefonica/mistica 16.72.0 → 17.1.0

package/dist/sheet-common.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     get SheetBody () {
-        return Me;
+        return Le;
     },
     get default () {
-        return Ae;
+        return Ce;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,7 +26,6 @@ const _hooks = require("./hooks.js");
 const _modalcontextprovider = require("./modal-context-provider.js");
 const _portal = require("./portal.js");
 const _text = require("./text.js");
-const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
@@ -37,6 +36,7 @@ const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-l
 const _css = require("./utils/css.js");
 const _responsivelayoutcssmistica = require("./responsive-layout.css-mistica.js");
 const _texttokens = require("./text-tokens.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -162,49 +162,49 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transitionDuration, k = (r)=>"touches" in r ? r.touches[0].clientY : r.clientY, ue = (param)=>{
+const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transitionDuration, k = (r)=>"touches" in r ? r.touches[0].clientY : r.clientY, le = (param)=>{
     let { closeModal: r } = param;
-    const [o, s] = _react.useState(0), d = _react.useRef(!1), f = _react.useRef(0), g = _react.useRef(0), u = _react.useRef(0), n = _react.useRef(0), { isDesktopOrBigger: i } = (0, _hooks.useScreenSize)(), c = _react.useCallback((l)=>{
-        d.current = !0, f.current = 0, g.current = Date.now(), u.current = k(l);
-    }, []), p = _react.useCallback(()=>{
-        d.current = !1, s(0);
+    const [o, i] = _react.useState(0), d = _react.useRef(!1), f = _react.useRef(0), h = _react.useRef(0), u = _react.useRef(0), n = _react.useRef(0), { isDesktopOrBigger: c } = (0, _hooks.useScreenSize)(), m = _react.useCallback((s)=>{
+        d.current = !0, f.current = 0, h.current = Date.now(), u.current = k(s);
+    }, []), g = _react.useCallback(()=>{
+        d.current = !1, i(0);
     }, []);
     return _react.useEffect(()=>{
-        if (i) return;
-        const l = (a)=>{
+        if (c) return;
+        const s = (l)=>{
             if (d.current) {
                 if (f.current < 3) {
                     f.current++;
                     return;
                 }
-                n.current = k(a), s(n.current - u.current);
+                n.current = k(l), i(n.current - u.current);
             }
-        }, m = ()=>{
+        }, a = ()=>{
             if (!d.current) return;
-            const a = Date.now() - g.current, v = n.current - u.current, S = v / a;
-            d.current = !1, s(0), v > 50 && (n.current > window.innerHeight * 0.75 || S > 0.5) && r();
+            const l = Date.now() - h.current, S = n.current - u.current, E = S / l;
+            d.current = !1, i(0), S > 50 && (n.current > window.innerHeight * 0.75 || E > 0.5) && r();
         };
-        return document.addEventListener("touchmove", l), document.addEventListener("touchend", m), document.addEventListener("mousemove", l), document.addEventListener("mouseup", m), ()=>{
-            document.removeEventListener("touchmove", l), document.removeEventListener("touchend", m), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", m);
+        return document.addEventListener("touchmove", s), document.addEventListener("touchend", a), document.addEventListener("mousemove", s), document.addEventListener("mouseup", a), ()=>{
+            document.removeEventListener("touchmove", s), document.removeEventListener("touchend", a), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", a);
         };
     }, [
         r,
-        i
-    ]), i ? {} : {
-        onTouchStart: c,
-        onMouseDown: c,
+        c
+    ]), c ? {} : {
+        onTouchStart: m,
+        onMouseDown: m,
         style: o ? {
             transform: `translateY(${o}px)`,
             transition: "none"
         } : void 0,
-        onScroll: p,
+        onScroll: g,
         overlayStyle: o ? {
             // decrease opacity when dragging down the sheet
             opacity: 0.25 + 1 - o / (window.innerHeight - u.current),
             transition: "none"
         } : void 0
     };
-}, me = {
+}, de = {
     closed: {
         open: "opening"
     },
@@ -218,54 +218,54 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
     closing: {
         transitionEnd: "closed"
     }
-}, fe = (r, o)=>me[r][o] || r, Ae = /*#__PURE__*/ _react.forwardRef((param, d)=>{
-    let { onClose: r, children: o, dataAttributes: s } = param;
-    const { texts: f, t: g } = (0, _hooks.useTheme)(), { isTabletOrSmaller: u } = (0, _hooks.useScreenSize)(), [n, i] = _react.useReducer(fe, "closed"), c = _react.useRef(!1), p = _react.useId(), l = (0, _hooks.useIsWithinIFrame)(), m = _react.useCallback((E)=>{
-        E.target === E.currentTarget && i("transitionEnd");
-    }, []), a = ()=>{
-        n === "open" && i("close");
+}, ue = (r, o)=>de[r][o] || r, Ce = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { onClose: r, children: o, dataAttributes: i } = param;
+    const { texts: f, t: h } = (0, _hooks.useTheme)(), { isTabletOrSmaller: u } = (0, _hooks.useScreenSize)(), [n, c] = _react.useReducer(ue, "closed"), m = _react.useRef(!1), g = _react.useId(), s = (0, _hooks.useIsWithinIFrame)(), a = _react.useCallback((v)=>{
+        v.target === v.currentTarget && c("transitionEnd");
+    }, []), l = ()=>{
+        n === "open" && c("close");
     };
     _react.useEffect(()=>{
         if (n === "opening" || n === "closing") {
-            const E = setTimeout(()=>{
-                i("transitionEnd");
-            }, de);
-            return ()=>clearTimeout(E);
+            const v = setTimeout(()=>{
+                c("transitionEnd");
+            }, ce);
+            return ()=>clearTimeout(v);
         }
     }, [
         n
     ]), _react.useEffect(()=>{
-        n === "closed" ? c.current ? r === null || r === void 0 ? void 0 : r() : i("open") : c.current = !0;
+        n === "closed" ? m.current ? r === null || r === void 0 ? void 0 : r() : c("open") : m.current = !0;
     }, [
         n,
         r
     ]);
-    const _ue = ue({
-        closeModal: a
-    }), { onScroll: v, overlayStyle: S } = _ue, x = _object_without_properties(_ue, [
+    const _le = le({
+        closeModal: l
+    }), { onScroll: S, overlayStyle: E } = _le, y = _object_without_properties(_le, [
         "onScroll",
         "overlayStyle"
     ]);
     return (0, _modalcontextprovider.useSetModalStateEffect)(), (0, _hooks.useDisableBodyScroll)(n !== "closed"), n === "closed" ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_focustrap.default, {
-            disabled: l,
+            disabled: s,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_sheetcommoncssmistica.overlay, {
                         [_sheetcommoncssmistica.closingOverlay]: n === "closing"
                     }),
-                    style: S,
-                    onClick: a
+                    style: E,
+                    onClick: l
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
                     className: (0, _classnames.default)(_sheetcommoncssmistica.SheetContainer, {
                         [_sheetcommoncssmistica.closingSheet]: n === "closing"
                     }),
-                    onTransitionEnd: m,
-                    onAnimationEnd: m
-                }, x, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+                    onTransitionEnd: a,
+                    onAnimationEnd: a
+                }, y, (0, _dom.getPrefixedDataAttributes)(_object_spread({
                     testid: "Sheet"
-                }, s))), {
+                }, i))), {
                     ref: d,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _sheetcommoncssmistica.Sheet,
@@ -278,16 +278,16 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
                                     role: "dialog",
                                     "aria-modal": "true",
-                                    "aria-labelledby": p,
-                                    onScroll: v,
+                                    "aria-labelledby": g,
+                                    onScroll: S,
                                     className: _sheetcommoncssmistica.children,
                                     style: {
                                         paddingBottom: _css.safeAreaInsetBottom
                                     },
                                     children: [
                                         typeof o == "function" ? o({
-                                            closeModal: a,
-                                            modalTitleId: p
+                                            closeModal: l,
+                                            modalTitleId: g
                                         }) : o,
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _sheetcommoncssmistica.handleContainer,
@@ -301,8 +301,8 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                     className: _sheetcommoncssmistica.dismissButton,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                                         small: u,
-                                        onPress: a,
-                                        "aria-label": f.modalClose || g(_texttokens.modalClose),
+                                        onPress: l,
+                                        "aria-label": f.modalClose || h(_texttokens.modalClose),
                                         Icon: _iconcloseregular.default
                                     })
                                 })
@@ -313,27 +313,27 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
             ]
         })
     });
-}), R = {
-    mobile: _responsivelayoutcssmistica.MOBILE_SIDE_MARGIN,
-    tablet: _responsivelayoutcssmistica.TABLET_SIDE_MARGIN,
-    desktop: 40
-}, Me = (param)=>{
-    let { title: r, subtitle: o, description: s, modalTitleId: d, button: f, secondaryButton: g, link: u, children: n } = param;
-    const i = _react.useRef(null), c = _react.useRef(null), p = _react.useRef(null);
+}), Le = (param)=>{
+    let { title: r, subtitle: o, description: i, modalTitleId: d, button: f, secondaryButton: h, link: u, children: n } = param;
+    const { spacing: c } = (0, _hooks.useTheme)(), m = {
+        mobile: c.responsiveLayoutMargin.mobile,
+        tablet: _responsivelayoutcssmistica.TABLET_SIDE_MARGIN,
+        desktop: 40
+    }, g = _react.useRef(null), s = _react.useRef(null), a = _react.useRef(null);
     _react.useEffect(()=>{
-        c.current && (p.current = (0, _dom.getScrollableParentElement)(c.current));
+        s.current && (a.current = (0, _dom.getScrollableParentElement)(s.current));
     }, []);
-    const l = !(0, _hooks.useIsInViewport)(i, !0, {
-        root: p.current
-    }), m = !(0, _hooks.useIsInViewport)(c, !0, {
+    const l = !(0, _hooks.useIsInViewport)(g, !0, {
+        root: a.current
+    }), S = !(0, _hooks.useIsInViewport)(s, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: p.current
-    }), a = !!f || !!g || !!u;
+        root: a.current
+    }), E = !!f || !!h || !!u;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: i
+                ref: g
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcommoncssmistica.stickyTitle,
@@ -344,7 +344,7 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                             mobile: 0,
                             desktop: 40
                         },
-                        paddingX: R,
+                        paddingX: m,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
                             as: "h2",
                             id: d,
@@ -363,15 +363,15 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _sheetcommoncssmistica.bodyContent,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingBottom: a ? 0 : {
+                    paddingBottom: E ? 0 : {
                         desktop: 40,
                         mobile: 0
                     },
-                    paddingX: R,
+                    paddingX: m,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            o || s ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            o || i ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: {
                                     mobile: 8,
                                     desktop: 16
@@ -382,22 +382,22 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                         regular: !0,
                                         children: o
                                     }),
-                                    s && (Array.isArray(s) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                    i && (Array.isArray(i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                         as: "div",
                                         regular: !0,
                                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                                        children: s.map((v, S)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
+                                        children: i.map((y, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("p", {
                                                 style: {
                                                     margin: 0,
-                                                    marginBottom: S < s.length - 1 ? "1em" : void 0
+                                                    marginBottom: v < i.length - 1 ? "1em" : void 0
                                                 },
-                                                children: v
-                                            }, S))
+                                                children: y
+                                            }, v))
                                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                         as: "p",
                                         regular: !0,
                                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                                        children: s
+                                        children: i
                                     }))
                                 ]
                             }) : null,
@@ -406,27 +406,27 @@ const de = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                     })
                 })
             }),
-            a && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            E && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: _sheetcommoncssmistica.stickyButtons,
                 children: [
-                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
+                    S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: {
                             mobile: 16,
                             desktop: 40
                         },
-                        paddingX: R,
+                        paddingX: m,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonlayout.default, {
                             align: "full-width",
                             link: u,
                             primaryButton: f,
-                            secondaryButton: g
+                            secondaryButton: h
                         })
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: c
+                ref: s
             })
         ]
     });

package/dist/sheet-info.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return n;
     },
     get infoItemIconContainer () {
-        return f;
+        return r;
     },
     get itemContainer () {
-        return r;
+        return f;
     }
 });
-/* empty css                                     */ /* empty css                                      */ var n = "v16_72_12pggsm0 v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfrg", f = "v16_72_12pggsm1 v16_72_1y2v1nfr8 v16_72_1y2v1nfq4", r = "v16_72_12pggsm2 v16_72_1y2v1nfgc v16_72_1y2v1nfhl v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfsh";
+/* empty css                                     */ /* empty css                                      */ var n = "v17_1_12pggsm0 v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfsm", r = "v17_1_12pggsm1 v17_1_1y2v1nfse v17_1_1y2v1nfra", f = "v17_1_12pggsm2 v17_1_1y2v1nfhi v17_1_1y2v1nfir v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nftn";

package/dist/skeletons.css-mistica.js

@@ -16,19 +16,19 @@ _export(exports, {
         return o;
     },
     get circle () {
-        return p;
+        return r;
     },
     get line () {
-        return w;
+        return n;
     },
     get row () {
-        return n;
+        return p;
     }
 });
 /* empty css                                     */ /* empty css                                     */ var o = {
-    default: "v16_72_zopolw5 v16_72_zopolw0 v16_72_1y2v1nf8f",
-    alternative: "v16_72_zopolw6 v16_72_zopolw1 v16_72_1y2v1nf8f",
-    brand: "v16_72_zopolw7 v16_72_zopolw2 v16_72_1y2v1nf8i",
-    negative: "v16_72_zopolw8 v16_72_zopolw3 v16_72_1y2v1nf8h",
-    media: "v16_72_zopolw9 v16_72_zopolw4 v16_72_1y2v1nf8h"
-}, l = "v16_72_zopolwc v16_72_zopolwb v16_72_1y2v1nfq6", n = "v16_72_zopolwd v16_72_1y2v1nfq4 v16_72_1y2v1nfqj v16_72_1y2v1nfqd", p = "v16_72_zopolwe v16_72_1y2v1nfqm v16_72_1y2v1nfqo", w = "v16_72_zopolwg v16_72_zopolwf v16_72_1y2v1nfqn";
+    default: "v17_1_zopolw5 v17_1_zopolw0 v17_1_1y2v1nf99",
+    alternative: "v17_1_zopolw6 v17_1_zopolw1 v17_1_1y2v1nf99",
+    brand: "v17_1_zopolw7 v17_1_zopolw2 v17_1_1y2v1nf9c",
+    negative: "v17_1_zopolw8 v17_1_zopolw3 v17_1_1y2v1nf9b",
+    media: "v17_1_zopolw9 v17_1_zopolw4 v17_1_1y2v1nf9b"
+}, l = "v17_1_zopolwc v17_1_zopolwb v17_1_1y2v1nfrc", p = "v17_1_zopolwd v17_1_1y2v1nfra v17_1_1y2v1nfrp v17_1_1y2v1nfrj", r = "v17_1_zopolwe v17_1_1y2v1nfrs v17_1_1y2v1nfru", n = "v17_1_zopolwg v17_1_zopolwf v17_1_1y2v1nfrt";

package/dist/skins/blau.js

@@ -63,6 +63,15 @@ const e = {
         colors: {
             background: e.white,
             backgroundAlternative: e.blauBluePrimary20,
+            backgroundSelected: (0, _color.applyAlpha)(e.blauBluePrimary, 0.08),
+            backgroundSelectedHover: (0, _color.applyAlpha)(e.blauBluePrimary, 0.12),
+            backgroundSelectedPressed: (0, _color.applyAlpha)(e.blauBluePrimary, 0.16),
+            backgroundSelectedBrand: (0, _color.applyAlpha)(e.darkModeBlack, 0.16),
+            backgroundSelectedBrandHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.24),
+            backgroundSelectedBrandPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.32),
+            backgroundSelectedNegative: (0, _color.applyAlpha)(e.white, 0.2),
+            backgroundSelectedNegativeHover: (0, _color.applyAlpha)(e.white, 0.28),
+            backgroundSelectedNegativePressed: (0, _color.applyAlpha)(e.white, 0.35),
             backgroundBrand: e.blauBluePrimary,
             backgroundNegative: e.blauBlueSecondary,
             backgroundBrandSecondary: e.blauBluePrimary,
@@ -122,6 +131,13 @@ const e = {
             buttonLinkBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.15),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: e.grey1,
+            buttonLinkNeutralBackgroundBrand: e.white,
+            buttonLinkNeutralBackgroundBrandPressed: e.grey1,
+            buttonLinkNeutralBackgroundNegative: e.white,
+            buttonLinkNeutralBackgroundNegativePressed: e.grey1,
+            buttonLinkNeutralBackgroundMedia: e.white,
+            buttonLinkNeutralBackgroundMediaPressed: e.grey1,
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.white,
@@ -185,6 +201,11 @@ const e = {
             textLinkDanger: e.blauRed,
             textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
+            textLinkNeutral: e.grey6,
+            textLinkNeutralBrand: e.grey6,
+            textLinkNeutralNegative: e.grey6,
+            textLinkNeutralAlternative: e.grey6,
+            textLinkNeutralMedia: e.grey6,
             textActivated: e.blauBlueSecondary,
             textBrand: e.blauBlueSecondary,
             inputBorder: e.grey4,
@@ -349,6 +370,15 @@ const e = {
         darkModeColors: {
             background: e.darkModeBlack,
             backgroundAlternative: e.darkModeBlack,
+            backgroundSelected: (0, _color.applyAlpha)(e.blauBluePrimary, 0.18),
+            backgroundSelectedHover: (0, _color.applyAlpha)(e.blauBluePrimary, 0.25),
+            backgroundSelectedPressed: (0, _color.applyAlpha)(e.blauBluePrimary, 0.33),
+            backgroundSelectedBrand: (0, _color.applyAlpha)(e.blauBluePrimary, 0.18),
+            backgroundSelectedBrandHover: (0, _color.applyAlpha)(e.blauBluePrimary, 0.25),
+            backgroundSelectedBrandPressed: (0, _color.applyAlpha)(e.blauBluePrimary, 0.33),
+            backgroundSelectedNegative: (0, _color.applyAlpha)(e.blauBluePrimary, 0.18),
+            backgroundSelectedNegativeHover: (0, _color.applyAlpha)(e.blauBluePrimary, 0.25),
+            backgroundSelectedNegativePressed: (0, _color.applyAlpha)(e.blauBluePrimary, 0.33),
             backgroundBrand: e.darkModeBlack,
             backgroundNegative: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
@@ -408,6 +438,13 @@ const e = {
             buttonLinkBackgroundNegativePressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
             buttonLinkBackgroundBrandPressed: (0, _color.applyAlpha)(e.blauPurple, 0.3),
             buttonLinkBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.15),
+            buttonLinkNeutralBackgroundPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundBrand: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundBrandPressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundNegative: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundNegativePressed: (0, _color.applyAlpha)(e.white, 0.08),
+            buttonLinkNeutralBackgroundMedia: (0, _color.applyAlpha)(e.white, 0),
+            buttonLinkNeutralBackgroundMediaPressed: (0, _color.applyAlpha)(e.white, 0.08),
             buttonPrimaryBackground: e.blauBlueSecondary,
             buttonPrimaryBackgroundInverse: e.blauBlueSecondary,
             buttonPrimaryBackgroundNegative: e.blauBlueSecondary,
@@ -471,6 +508,11 @@ const e = {
             textLinkDanger: e.blauRed40,
             textLinkDangerMedia: e.blauRed,
             textLinkSnackbar: e.blauPurple30,
+            textLinkNeutral: e.grey2,
+            textLinkNeutralBrand: e.grey2,
+            textLinkNeutralNegative: e.grey2,
+            textLinkNeutralAlternative: e.grey2,
+            textLinkNeutralMedia: e.white,
             textActivated: e.blauBluePrimary,
             textBrand: e.blauBluePrimary,
             inputBorder: e.darkModeGrey5,
@@ -983,6 +1025,15 @@ const e = {
             successFeedback: "default",
             brandLoadingScreen: "default"
         },
+        componentProperties: {
+            showBoxedBorder: {
+                default: !0,
+                brand: !0,
+                negative: !0,
+                alternative: !0,
+                media: !0
+            }
+        },
         spacing: {
             buttonDefaultPadding: {
                 left: {
@@ -1097,6 +1148,20 @@ const e = {
                     mobile: 16,
                     desktop: 40
                 }
+            },
+            responsiveLayoutMargin: {
+                mobile: 16,
+                desktop: 48
+            },
+            boxedDefaultPadding: {
+                left: {
+                    mobile: 16,
+                    desktop: 16
+                },
+                right: {
+                    mobile: 16,
+                    desktop: 16
+                }
             }
         }
     });

package/dist/skins/defaults.d.ts

@@ -1,5 +1,6 @@
-import type { BorderRadiiConfig, SpacingConfig, TextPresetsConfig, ThemeVariantsConfig } from './types';
+import type { BorderRadiiConfig, ComponentPropertiesConfig, SpacingConfig, TextPresetsConfig, ThemeVariantsConfig } from './types';
 export declare const defaultTextPresetsConfig: TextPresetsConfig;
 export declare const defaultBorderRadiiConfig: BorderRadiiConfig;
 export declare const defaultThemeVariantsConfig: ThemeVariantsConfig;
+export declare const defaultComponentPropertiesConfig: ComponentPropertiesConfig;
 export declare const defaultSpacing: SpacingConfig;

package/dist/skins/defaults.js

@@ -12,9 +12,12 @@ _export(exports, {
     get defaultBorderRadiiConfig () {
         return i;
     },
-    get defaultSpacing () {
+    get defaultComponentPropertiesConfig () {
         return o;
     },
+    get defaultSpacing () {
+        return l;
+    },
     get defaultTextPresetsConfig () {
         return e;
     },
@@ -371,6 +374,14 @@ const e = {
     brandLoadingScreen: "inverse",
     successFeedback: "inverse"
 }, o = {
+    showBoxedBorder: {
+        default: !0,
+        alternative: !0,
+        brand: !0,
+        negative: !0,
+        media: !0
+    }
+}, l = {
     buttonDefaultPadding: {
         left: {
             mobile: 16,
@@ -484,5 +495,19 @@ const e = {
             mobile: 16,
             desktop: 24
         }
+    },
+    boxedDefaultPadding: {
+        left: {
+            mobile: 16,
+            desktop: 16
+        },
+        right: {
+            mobile: 16,
+            desktop: 16
+        }
+    },
+    responsiveLayoutMargin: {
+        mobile: 16,
+        desktop: 48
     }
 };