@telefonica/mistica 15.0.0 → 15.1.0

package/dist/icon-button.d.ts

@@ -84,7 +84,6 @@ interface IconButtonBaseProps {
 }
 interface InternalIconButtonBaseProps {
     isOverMedia?: boolean;
-    hasInteractiveAreaBleed?: boolean;
     hasOverlay?: boolean;
 }
 export type IconButtonProps = BaseProps & IconButtonBaseProps & ExclusifyUnion<HrefProps | ToProps | OnPressProps | MaybeProps> & AriaProps;
@@ -118,7 +117,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: undefined;
     bleedRight?: undefined;
     bleedY?: undefined;
-    hasInteractiveAreaBleed?: undefined;
     showSpinner?: undefined;
 } | {
     children?: React.ReactNode;
@@ -149,7 +147,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: undefined;
     bleedRight?: undefined;
     bleedY?: undefined;
-    hasInteractiveAreaBleed?: undefined;
     showSpinner?: undefined;
 } | {
     children?: React.ReactNode;
@@ -180,7 +177,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: undefined;
     bleedRight?: undefined;
     bleedY?: undefined;
-    hasInteractiveAreaBleed?: undefined;
     showSpinner?: undefined;
 } | {
     children?: React.ReactNode;
@@ -211,7 +207,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: undefined;
     bleedRight?: undefined;
     bleedY?: undefined;
-    hasInteractiveAreaBleed?: undefined;
     showSpinner?: undefined;
 } | {
     children?: undefined;
@@ -235,7 +230,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-label': string;
     "aria-labelledby"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -266,7 +260,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-labelledby': string;
     "aria-label"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -297,7 +290,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-label': string;
     "aria-labelledby"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -328,7 +320,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-labelledby': string;
     "aria-label"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -359,7 +350,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-label': string;
     "aria-labelledby"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -390,7 +380,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-labelledby': string;
     "aria-label"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -421,7 +410,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-label': string;
     "aria-labelledby"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;
@@ -452,7 +440,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     'aria-labelledby': string;
     "aria-label"?: undefined;
     isOverMedia?: boolean | undefined;
-    hasInteractiveAreaBleed?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
     size?: undefined;

package/dist/icon-button.js

@@ -11,22 +11,22 @@ function _export(target, all) {
 }
 _export(exports, {
     IconButton: function() {
-        return se;
+        return ce;
     },
     InternalIconButton: function() {
-        return te;
+        return ee;
     },
     InternalToggleIconButton: function() {
-        return ne;
+        return te;
     },
     RawDeprecatedIconButton: function() {
-        return ee;
+        return p;
     },
     RawIconButton: function() {
-        return x;
+        return O;
     },
     ToggleIconButton: function() {
-        return de;
+        return se;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -161,23 +161,23 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const U = 24, p = (e, r, o, a, n)=>{
-    const c = a ? `${a}px ${a}px` : "100% 100%";
+const X = 24, U = (e, a, l, r, n)=>{
+    const o = r ? `${r}px ${r}px` : "100% 100%";
     return {
         padding: 0,
-        backgroundColor: o,
+        backgroundColor: l,
         backgroundImage: e ? `url(${e})` : "initial",
-        backgroundSize: c,
+        backgroundSize: o,
         cursor: n ? "default" : "pointer",
-        height: r,
-        width: r,
+        height: a,
+        width: a,
         verticalAlign: "middle",
         textAlign: "center"
     };
-}, ee = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    const { icon: o, children: a } = e, n = {
+}, p = /*#__PURE__*/ _react.forwardRef((e, a)=>{
+    const { icon: l, children: r } = e, n = {
         className: e.className || "",
-        ref: r,
+        ref: a,
         disabled: e.disabled,
         style: e.style,
         trackingEvent: e.trackingEvent,
@@ -190,25 +190,25 @@ const U = 24, p = (e, r, o, a, n)=>{
         href: e.href,
         newTab: e.newTab,
         "aria-label": e["aria-label"],
-        children: !o && _react.Children.only(a)
+        children: !l && _react.Children.only(r)
     })) : e.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, n), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
         replace: e.replace,
         "aria-label": e["aria-label"],
-        children: !o && _react.Children.only(a)
+        children: !l && _react.Children.only(r)
     })) : e.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, n), {
-        onPress: (c)=>{
-            c.stopPropagation(), e.onPress(c);
+        onPress: (o)=>{
+            o.stopPropagation(), e.onPress(o);
         },
         "aria-label": e["aria-label"],
-        children: !o && _react.Children.only(a)
+        children: !l && _react.Children.only(r)
     })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, n), {
         maybe: !0,
-        children: !o && _react.Children.only(a)
+        children: !l && _react.Children.only(r)
     }));
-}), x = /*#__PURE__*/ _react.forwardRef((_param, z)=>{
-    var { disabled: e, trackingEvent: r, dataAttributes: o, type: a = "neutral", backgroundType: n = "transparent", isOverMedia: c, hasOverlay: S = !0, "aria-label": I, "aria-labelledby": h, small: w, Icon: R, bleedLeft: m, bleedRight: f, bleedY: T, hasInteractiveAreaBleed: b } = _param, l = _object_without_properties(_param, [
+}), O = /*#__PURE__*/ _react.forwardRef((_param, k)=>{
+    var { disabled: e, trackingEvent: a, dataAttributes: l, type: r = "neutral", backgroundType: n = "transparent", isOverMedia: o, hasOverlay: P = !0, "aria-label": y, "aria-labelledby": b, small: h, Icon: v, bleedLeft: f, bleedRight: m, bleedY: B } = _param, c = _object_without_properties(_param, [
         "disabled",
         "trackingEvent",
         "dataAttributes",
@@ -222,48 +222,45 @@ const U = 24, p = (e, r, o, a, n)=>{
         "Icon",
         "bleedLeft",
         "bleedRight",
-        "bleedY",
-        "hasInteractiveAreaBleed"
+        "bleedY"
     ]);
-    const V = (0, _themevariantcontext.useThemeVariant)(), [E, B] = _react.useState(!1), s = l.showSpinner || E, [P, N] = _react.useState(!!s);
+    const x = (0, _themevariantcontext.useThemeVariant)(), [z, R] = _react.useState(!1), s = c.showSpinner || z, [w, T] = _react.useState(!!s);
     _react.useEffect(()=>{
-        s && !P && N(!0);
+        s && !w && T(!0);
     }, [
         s,
-        P
+        w
     ]);
-    const d = w ? "small" : "default", C = c ? `${a}-media` : `${a}-${n}-${V}`, g = {
+    const u = h ? "small" : "default", V = o ? `${r}-media` : `${r}-${n}-${x}`, I = {
         disabled: e || s,
-        ref: z,
-        trackingEvent: r,
-        "aria-label": I,
-        "aria-labelledby": h,
-        role: l.onPress || l.to || l.href ? "button" : void 0,
+        ref: k,
+        trackingEvent: a,
+        "aria-label": y,
+        "aria-labelledby": b,
         dataAttributes: _object_spread({
             "component-name": "IconButton"
-        }, o),
-        className: (0, _classnames.default)(_iconbuttoncssmistica.buttonContainer[d], _iconbuttoncssmistica.iconButtonTokens[C], {
+        }, l),
+        className: (0, _classnames.default)(_iconbuttoncssmistica.buttonContainer[u], _iconbuttoncssmistica.iconButtonTokens[V], _iconbuttoncssmistica.minimumInteractiveArea, {
             [_iconbuttoncssmistica.disabled]: e,
             [_iconbuttoncssmistica.overlayContainer]: !e && !s,
-            [_iconbuttoncssmistica.bleedLeft[d]]: m && !b,
-            [_iconbuttoncssmistica.bleedRight[d]]: f && !b,
-            [_iconbuttoncssmistica.bleedY[d]]: T && !b,
-            [_iconbuttoncssmistica.interactiveAreaBleed[d]]: b
+            [_iconbuttoncssmistica.bleedLeft[u]]: f,
+            [_iconbuttoncssmistica.bleedRight[u]]: m,
+            [_iconbuttoncssmistica.bleedY[u]]: B
         }),
-        resetMargin: !m && !f && !T && !b
-    }, y = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        className: (0, _classnames.default)(_iconbuttoncssmistica.iconContainer[d], {
+        resetMargin: !f && !m && !B
+    }, g = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(_iconbuttoncssmistica.iconContainer[u], {
             [_iconbuttoncssmistica.isLoading]: s
         }),
         children: [
-            S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            P && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _iconbuttoncssmistica.overlay
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 "aria-hidden": s ? !0 : void 0,
                 className: _iconbuttoncssmistica.icon,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(R, {
-                    size: _iconbuttoncssmistica.iconSize[d],
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
+                    size: _iconbuttoncssmistica.iconSize[u],
                     color: "currentColor"
                 })
             }),
@@ -271,50 +268,50 @@ const U = 24, p = (e, r, o, a, n)=>{
                 "aria-hidden": s ? void 0 : !0,
                 className: _iconbuttoncssmistica.spinner,
                 onTransitionEnd: ()=>{
-                    s !== P && N(s);
+                    s !== w && T(s);
                 },
-                children: P && /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
-                    size: _iconbuttoncssmistica.iconSize[d],
+                children: w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                    size: _iconbuttoncssmistica.iconSize[u],
                     color: "currentColor",
                     delay: "0s"
                 })
             })
         ]
     });
-    return l.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
-        href: l.href,
-        newTab: l.newTab,
-        children: y
-    })) : l.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
-        to: l.to,
-        fullPageOnWebView: l.fullPageOnWebView,
-        replace: l.replace,
-        children: y
-    })) : l.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
-        onPress: (W)=>{
-            const O = l.onPress(W);
-            O && (B(!0), O.finally(()=>B(!1)));
+    return c.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, I), {
+        href: c.href,
+        newTab: c.newTab,
+        children: g
+    })) : c.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, I), {
+        to: c.to,
+        fullPageOnWebView: c.fullPageOnWebView,
+        replace: c.replace,
+        children: g
+    })) : c.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, I), {
+        onPress: (E)=>{
+            const N = c.onPress(E);
+            N && (R(!0), N.finally(()=>R(!1)));
         },
-        children: y
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
+        children: g
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, I), {
         maybe: !0,
-        children: y
+        children: g
     }));
-}), te = /*#__PURE__*/ _react.forwardRef((e, r)=>{
-    if (e.Icon) return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({
-        ref: r
+}), ee = /*#__PURE__*/ _react.forwardRef((e, a)=>{
+    if (e.Icon) return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, _object_spread({
+        ref: a
     }, e));
-    const { icon: o, backgroundColor: a = "transparent", iconSize: n, size: c = U } = e;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, _object_spread_props(_object_spread({
-        ref: r
+    const { icon: l, backgroundColor: r = "transparent", iconSize: n, size: o = X } = e;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(p, _object_spread_props(_object_spread({
+        ref: a
     }, e), {
         className: (0, _classnames.default)(_iconbuttoncssmistica.deprecatedIconButtonBase, e.className),
-        style: _object_spread({}, p(o, c, a, n, e.disabled), e.style)
+        style: _object_spread({}, U(l, o, r, n, e.disabled), e.style)
     }));
-}), se = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(te, _object_spread({
-        ref: r
-    }, e))), ne = /*#__PURE__*/ _react.forwardRef((_param, I)=>{
-    var { checked: e, defaultChecked: r, checkedProps: o, uncheckedProps: a, onChange: n, dataAttributes: c } = _param, S = _object_without_properties(_param, [
+}), ce = /*#__PURE__*/ _react.forwardRef((e, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ee, _object_spread({
+        ref: a
+    }, e))), te = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
+    var { checked: e, defaultChecked: a, checkedProps: l, uncheckedProps: r, onChange: n, dataAttributes: o } = _param, P = _object_without_properties(_param, [
         "checked",
         "defaultChecked",
         "checkedProps",
@@ -322,21 +319,21 @@ const U = 24, p = (e, r, o, a, n)=>{
         "onChange",
         "dataAttributes"
     ]);
-    const [h, w] = _react.useState(!!r), R = ()=>{
+    const [b, h] = _react.useState(!!a), v = ()=>{
         if (e === void 0) {
-            const m = n == null ? void 0 : n(!h);
-            if (m) return m.then(()=>w((f)=>!f)).catch(()=>{});
-            w((f)=>!f);
+            const f = n == null ? void 0 : n(!b);
+            if (f) return f.then(()=>h((m)=>!m)).catch(()=>{});
+            h((m)=>!m);
         } else return n == null ? void 0 : n(!e);
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
-        ref: I
-    }, S, (e !== null && e !== void 0 ? e : h) ? o : a), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, _object_spread_props(_object_spread({
+        ref: y
+    }, P, (e !== null && e !== void 0 ? e : b) ? l : r), {
         dataAttributes: _object_spread({
             "component-name": "ToggleIconButton"
-        }, c),
-        onPress: R
+        }, o),
+        onPress: v
     }));
-}), de = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ne, _object_spread({
-        ref: r
+}), se = /*#__PURE__*/ _react.forwardRef((e, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(te, _object_spread({
+        ref: a
     }, e)));

package/dist/image.css-mistica.js

@@ -25,14 +25,14 @@ _export(exports, {
         return d;
     },
     noBorderRadius: function() {
-        return f;
+        return e;
     },
     vars: function() {
-        return n;
+        return f;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var v = 300, _ = "_17tt25r5", t = "_17tt25r6", i = "_17tt25r3 _1y2v1nfkf _1y2v1nfku _1y2v1nfha _1y2v1nfhv _1y2v1nfic _1y2v1nfm3 _1y2v1nfjn _1y2v1nfjo _1y2v1nfjz", d = "_17tt25r1", f = "_17tt25r4", n = {
+var v = 300, _ = "_17tt25r5", t = "_17tt25r6", i = "_17tt25r3 _1y2v1nfkh _1y2v1nfkw _1y2v1nfhc _1y2v1nfhx _1y2v1nfie _1y2v1nfm5 _1y2v1nfjp _1y2v1nfjq _1y2v1nfk1", d = "_17tt25r1", e = "_17tt25r4", f = {
     mediaBorderRadius: "var(--_17tt25r0)"
 };

package/dist/index.d.ts

@@ -67,7 +67,7 @@ export { default as Avatar } from './avatar';
 export { default as Slider } from './slider';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, } from './navigation-bar';
-export { Logo, MovistarLogo, VivoLogo, O2Logo, TelefonicaLogo, BlauLogo, TuLogo } from './logo';
+export { Logo, MovistarLogo, VivoLogo, O2Logo, O2NewLogo, TelefonicaLogo, BlauLogo, TuLogo } from './logo';
 export { default as Image } from './image';
 export { default as Chip } from './chip';
 export { default as Video } from './video';
@@ -117,18 +117,20 @@ export { TrackingConfig, useTrackingConfig } from './utils/analytics';
 export { useDocumentVisibility } from './utils/document-visibility';
 export { ThemeVariant, useIsInverseVariant, useThemeVariant } from './theme-variant-context';
 export type { Skin, KnownSkinName, SkinName } from './skins/types';
-export { VIVO_SKIN, VIVO_NEW_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN, } from './skins/constants';
+export { VIVO_SKIN, VIVO_NEW_SKIN, O2_SKIN, O2_NEW_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN, } from './skins/constants';
 export { getSkinByName } from './skins/utils';
 export { getVivoSkin } from './skins/vivo';
 export { getVivoNewSkin } from './skins/vivo-new';
 export { getMovistarSkin } from './skins/movistar';
 export { getO2Skin } from './skins/o2';
+export { getO2NewSkin } from './skins/o2-new';
 export { getTelefonicaSkin } from './skins/telefonica';
 export { getBlauSkin } from './skins/blau';
 export { getTuSkin } from './skins/tu';
 export { palette as vivoPalette } from './skins/vivo';
 export { palette as movistarPalette } from './skins/movistar';
 export { palette as o2Palette } from './skins/o2';
+export { palette as o2NewPalette } from './skins/o2-new';
 export { palette as telefonicaPalette } from './skins/telefonica';
 export { palette as blauPalette } from './skins/blau';
 export { palette as tuPalette } from './skins/tu';

package/dist/index.js

@@ -5439,6 +5439,12 @@ _export(exports, {
     O2Logo: function() {
         return _logo.O2Logo;
     },
+    O2NewLogo: function() {
+        return _logo.O2NewLogo;
+    },
+    O2_NEW_SKIN: function() {
+        return _constants.O2_NEW_SKIN;
+    },
     O2_SKIN: function() {
         return _constants.O2_SKIN;
     },
@@ -5703,6 +5709,9 @@ _export(exports, {
     getMovistarSkin: function() {
         return _movistar.getMovistarSkin;
     },
+    getO2NewSkin: function() {
+        return _o2new.getO2NewSkin;
+    },
     getO2Skin: function() {
         return _o2.getO2Skin;
     },
@@ -5727,6 +5736,9 @@ _export(exports, {
     mq: function() {
         return _mediaqueriescssmistica;
     },
+    o2NewPalette: function() {
+        return _o2new.palette;
+    },
     o2Palette: function() {
         return _o2.palette;
     },
@@ -5923,6 +5935,7 @@ const _vivo = require("./skins/vivo.js");
 const _vivonew = require("./skins/vivo-new.js");
 const _movistar = require("./skins/movistar.js");
 const _o2 = require("./skins/o2.js");
+const _o2new = require("./skins/o2-new.js");
 const _telefonica = require("./skins/telefonica.js");
 const _blau = require("./skins/blau.js");
 const _tu = require("./skins/tu.js");

package/dist/inline.js

@@ -126,21 +126,22 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, A = (t)=>{
     };
     return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
 }, C = (param)=>{
-    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": p, fullWidth: f, wrap: c, dataAttributes: u } = param;
-    const { platformOverrides: o } = (0, _hooks.useTheme)(), d = typeof t == "string";
+    let { space: t, className: e, children: a, role: o, alignItems: m = "stretch", "aria-labelledby": p, fullWidth: f, wrap: c, dataAttributes: d } = param;
+    const { platformOverrides: l } = (0, _hooks.useTheme)(), u = typeof t == "string";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(e, _inlinecssmistica.inline, (0, _sprinklescssmistica.sprinkles)({
             alignItems: m
-        }), c ? _inlinecssmistica.wrap : f ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, d ? _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
+        }), c ? _inlinecssmistica.wrap : f ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, u ? _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
         style: (0, _css.applyCssVars)(A(t)),
-        role: a,
+        role: o,
         "aria-labelledby": p
-    }, (0, _dom.getPrefixedDataAttributes)(u, "Inline")), {
-        children: _react.Children.map(s, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    }, (0, _dom.getPrefixedDataAttributes)(d, "Inline")), {
+        children: _react.Children.map(a, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                role: o === "list" ? "listitem" : void 0,
                 style: {
                     // Hack to fix https://jira.tid.es/browse/WEB-1683
                     // In iOS the inline component sometimes cuts the last line of the content
-                    paddingBottom: (0, _platform.isIos)(o) && !(0, _platform.isRunningAcceptanceTest)(o) ? 1 : void 0
+                    paddingBottom: (0, _platform.isIos)(l) && !(0, _platform.isRunningAcceptanceTest)(l) ? 1 : void 0
                 },
                 children: n
             }) : null)

package/dist/list.css-mistica.js

@@ -13,10 +13,10 @@ _export(exports, {
         return _;
     },
     badge: function() {
-        return y;
+        return f;
     },
     center: function() {
-        return f;
+        return y;
     },
     content: function() {
         return a;
@@ -31,31 +31,31 @@ _export(exports, {
         return t;
     },
     dualActionContainer: function() {
-        return i;
+        return e;
     },
     dualActionDivider: function() {
-        return e;
+        return i;
     },
     dualActionLeft: function() {
-        return o;
+        return u;
     },
     dualActionRight: function() {
-        return u;
+        return o;
     },
     pointer: function() {
-        return d;
+        return c;
     },
     right: function() {
-        return c;
+        return g;
     },
     rightRestrictedWidth: function() {
-        return g;
+        return d;
     },
     rowBody: function() {
-        return j;
+        return b;
     },
     rowContent: function() {
-        return b;
+        return j;
     },
     touchableBackground: function() {
         return l;
@@ -66,4 +66,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nfh8 _1y2v1nfhq _1y2v1nfhs", y = "_1y2v1nfhh _1y2v1nfiy _1y2v1nfic _1y2v1nfhq", f = "_1y2v1nfh8 _1y2v1nfhn", a = "_1y2v1nfh8 _1y2v1nfhv _1y2v1nfjl", r = "_2buj9gf", h = "_2buj9ge", t = "_2buj9g0", i = "_1y2v1nfh8 _1y2v1nfhd _1y2v1nfic", e = "_2buj9gm _1y2v1nfh8", o = "_1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nf9y _1y2v1nfb7 _1y2v1nfha _1y2v1nfht", u = "_2buj9go _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nf9y _1y2v1nfb7 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhs _1y2v1nfhw _1y2v1nfic", d = "_1y2v1nfk8", c = "_2buj9gc", g = "_2buj9gd", j = "_1y2v1nfh8 _1y2v1nfhe _1y2v1nfhu", b = "_1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfhv _1y2v1nfjq _1y2v1nf70 _1y2v1nfha _1y2v1nfic", l = "_2buj9g1", s = "_2buj9g2";
+var _ = "_1y2v1nfha _1y2v1nfhs _1y2v1nfhu", f = "_1y2v1nfhj _1y2v1nfj0 _1y2v1nfie _1y2v1nfhs", y = "_1y2v1nfha _1y2v1nfhp", a = "_1y2v1nfha _1y2v1nfhx _1y2v1nfjn", r = "_2buj9gf", h = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfha _1y2v1nfhf _1y2v1nfie", i = "_2buj9gm _1y2v1nfha", u = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfa0 _1y2v1nfb9 _1y2v1nfhc _1y2v1nfhv", o = "_2buj9go _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfa0 _1y2v1nfb9 _1y2v1nfha _1y2v1nfhp _1y2v1nfhu _1y2v1nfhy _1y2v1nfie", c = "_1y2v1nfka", g = "_2buj9gc", d = "_2buj9gd", b = "_1y2v1nfha _1y2v1nfhg _1y2v1nfhw", j = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfhx _1y2v1nfjs _1y2v1nf72 _1y2v1nfhc _1y2v1nfie", l = "_2buj9g1", s = "_2buj9g2";

package/dist/list.d.ts

@@ -7,6 +7,7 @@ interface CommonProps {
     children?: void;
     headline?: string | React.ReactNode;
     title: string;
+    titleAs?: string;
     titleLinesMax?: number;
     subtitle?: string;
     subtitleLinesMax?: number;