@telefonica/mistica 15.7.0 → 15.9.0

package/dist/accordion.js

@@ -11,19 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Accordion: function() {
-        return ao;
+        return le;
     },
     AccordionItem: function() {
-        return so;
+        return ae;
     },
     BoxedAccordion: function() {
-        return uo;
+        return ue;
     },
     BoxedAccordionItem: function() {
-        return lo;
-    },
-    useAccordionContext: function() {
-        return F;
+        return me;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -43,6 +40,7 @@ const _themevariantcontext = require("./theme-variant-context.js");
 const _hooks = require("./hooks.js");
 const _reacttransitiongroup = require("react-transition-group");
 const _platform = require("./utils/platform.js");
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -168,61 +166,61 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const z = 400, v = /*#__PURE__*/ _react.createContext({
+const C = 400, g = /*#__PURE__*/ _react.createContext({
     index: [],
-    toogle: ()=>{}
-}), F = ()=>_react.useContext(v), B = (param)=>{
-    let { value: e, defaultValue: r, onChange: n, singleOpen: s } = param;
-    const l = e !== void 0, d = (o)=>o === void 0 ? [] : typeof o == "number" ? [
-            o
-        ] : o, [c, a] = _react.useState(d(r));
+    toggle: ()=>{}
+}), H = ()=>_react.useContext(g), b = (param)=>{
+    let { value: t, defaultValue: r, onChange: n, singleOpen: i } = param;
+    const u = t !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
+            e
+        ] : e, [c, a] = _react.useState(d(r));
     _react.useEffect(()=>{
-        if (c.length > 1 && s) {
-            const o = [
+        if (c.length > 1 && i) {
+            const e = [
                 ...c
             ];
-            o.splice(1), a(o);
+            e.splice(1), a(e);
         }
     }, [
-        s,
+        i,
         c
     ]);
-    const I = (o, u)=>{
-        if (!u) return [
-            o
+    const p = (e, l)=>{
+        if (!l) return [
+            e
         ];
-        const f = u.indexOf(o);
-        let p = [
-            ...u
+        const m = l.indexOf(e);
+        let I = [
+            ...l
         ];
-        return f === -1 ? s ? p = [
-            o
-        ] : p.push(o) : p.splice(f, 1), p;
-    }, m = (o)=>{
-        if (l || a(I(o, c)), n) {
-            const u = (l ? d(e) : c).includes(o);
-            n(o, !u);
+        return m === -1 ? i ? I = [
+            e
+        ] : I.push(e) : I.splice(m, 1), I;
+    }, f = (e)=>{
+        if (u || a(p(e, c)), n) {
+            const l = (u ? d(t) : c).includes(e);
+            n(e, !l);
         }
     };
-    return l ? [
-        d(e),
-        m
+    return u ? [
+        d(t),
+        f
     ] : [
         c,
-        m
+        f
     ];
-}, H = (e)=>{
-    const r = e == null ? void 0 : e.closest("[data-accordion]");
-    if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === e);
-}, b = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
-    var { content: e, dataAttributes: r, trackingEvent: n } = _param, s = _object_without_properties(_param, [
+}, U = (t)=>{
+    const r = t == null ? void 0 : t.closest("[data-accordion]");
+    if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === t);
+}, N = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
+    var { content: t, dataAttributes: r, trackingEvent: n } = _param, i = _object_without_properties(_param, [
         "content",
         "dataAttributes",
         "trackingEvent"
     ]);
-    const d = _react.useRef(null), c = _react.useRef(null), { index: a, toogle: I } = F(), m = (0, _themevariantcontext.useIsInverseVariant)(), o = (0, _hooks.useAriaId)(), u = (0, _hooks.useAriaId)(), [f, p] = _react.useState(), x = f !== void 0 && (a == null ? void 0 : a.includes(f));
+    const d = _react.useRef(null), c = _react.useRef(null), { index: a, toggle: p } = H(), f = (0, _themevariantcontext.useIsInverseVariant)(), e = (0, _hooks.useAriaId)(), l = (0, _hooks.useAriaId)(), [m, I] = _react.useState(), x = m !== void 0 && (a == null ? void 0 : a.includes(m));
     return _react.useEffect(()=>{
-        p(H(c.current));
+        I(U(c.current));
     }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         ref: c
     }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
@@ -230,27 +228,26 @@ const z = 400, v = /*#__PURE__*/ _react.createContext({
     }))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-                ref: l,
-                className: (0, _classnames.default)(_accordioncssmistica.itemContent, m ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
+                ref: u,
+                className: (0, _classnames.default)(_accordioncssmistica.itemContent, f ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
                 onPress: ()=>{
-                    f !== void 0 && I(f);
+                    m !== void 0 && p(m);
                 },
                 trackingEvent: n,
                 "aria-expanded": x,
-                "aria-controls": u,
+                "aria-controls": l,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
-                        labelId: o,
-                        type: "custom"
-                    }, s), {
+                        labelId: e
+                    }, i), {
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _accordioncssmistica.chevronContainer,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
                                 size: 24,
-                                transitionDuration: 400,
+                                transitionDuration: C,
                                 direction: x ? "up" : "down",
-                                color: m ? _skincontractcssmistica.vars.colors.inverse : x ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
+                                color: f ? _skincontractcssmistica.vars.colors.inverse : x ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
                             })
                         })
                     }))
@@ -258,7 +255,7 @@ const z = 400, v = /*#__PURE__*/ _react.createContext({
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                 in: x,
-                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : z,
+                timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : C,
                 nodeRef: d,
                 classNames: _accordioncssmistica.panelTransitionClasses,
                 mountOnEnter: !0,
@@ -269,88 +266,98 @@ const z = 400, v = /*#__PURE__*/ _react.createContext({
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _accordioncssmistica.panel,
                         role: "region",
-                        "aria-labelledby": o,
-                        id: u,
+                        "aria-labelledby": e,
+                        id: l,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingX: 16,
                             paddingBottom: 16,
-                            children: e
+                            children: t
                         })
                     })
                 })
             })
         ]
     }));
-}), so = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
-    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
-        "dataAttributes"
+}), ae = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
+        "dataAttributes",
+        "role"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, r), {
-        ref: n,
-        dataAttributes: _object_spread({
-            "component-name": "AccordionItem"
-        }, e)
-    }));
-}), ao = (param)=>{
-    let { children: e, dataAttributes: r, index: n, defaultIndex: s, onChange: l, singleOpen: d } = param;
-    const [c, a] = B({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        role: r,
+        className: (0, _sprinklescssmistica.sprinkles)({
+            width: "100%"
+        }),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread_props(_object_spread({}, n), {
+            ref: i,
+            dataAttributes: _object_spread({
+                "component-name": "AccordionItem"
+            }, t)
+        }))
+    });
+}), le = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
+    const [a, p] = b({
         value: n,
-        defaultValue: s,
-        onChange: l,
+        defaultValue: i,
+        onChange: u,
         singleOpen: d
-    }), I = _react.Children.count(e) - 1;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(v.Provider, {
+    }), f = _react.Children.toArray(t).filter(Boolean), e = f.length - 1;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
         value: {
-            index: c,
-            toogle: a
+            index: a,
+            toggle: p
         },
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+            role: c
+        }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
             accordion: !0
         }), "Accordion")), {
-            children: _react.Children.toArray(e).filter(Boolean).map((m, o)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: f.map((l, m)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                     children: [
-                        m,
-                        o < I && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        l,
+                        m < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                             paddingX: 16,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                         })
                     ]
-                }, o))
+                }, m))
         }))
     });
-}, lo = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
-    var { dataAttributes: e, isInverse: r } = _param, n = _object_without_properties(_param, [
+}, me = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+    var { dataAttributes: t, isInverse: r } = _param, n = _object_without_properties(_param, [
         "dataAttributes",
         "isInverse"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
         isInverse: r,
-        ref: s,
+        ref: i,
         dataAttributes: _object_spread({
             "component-name": "BoxedAccordionItem"
-        }, e),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+        }, t),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, _object_spread({}, n))
     });
-}), uo = (param)=>{
-    let { children: e, dataAttributes: r, index: n, defaultIndex: s, onChange: l, singleOpen: d } = param;
-    const [c, a] = B({
+}), ue = (param)=>{
+    let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: u, singleOpen: d, role: c } = param;
+    const [a, p] = b({
         value: n,
-        defaultValue: s,
-        onChange: l,
+        defaultValue: i,
+        onChange: u,
         singleOpen: d
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(v.Provider, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
         value: {
-            index: c,
-            toogle: a
+            index: a,
+            toggle: p
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: 16,
+            role: c,
             dataAttributes: _object_spread({
                 "component-name": "BoxedAccordion",
                 accordion: !0
             }, r),
-            children: e
+            children: t
         })
     });
 };

package/dist/community/blocks.js

@@ -239,6 +239,7 @@ const g = (param)=>{
                     ]
                 }),
                 l !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.ProgressBar, {
+                    "aria-hidden": !0,
                     progressPercent: l,
                     reverse: t
                 }),

package/dist/empty-state.js

@@ -80,9 +80,9 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const M = (param)=>{
-    let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: v } = param;
-    const { isDarkMode: h } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), u = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+const G = (param)=>{
+    let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: h } = param;
+    const { isDarkMode: v } = (0, _hooks.useTheme)(), s = (0, _themevariantcontext.useIsInverseVariant)(), u = i ? /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
         className: _emptystatecssmistica.smallImage,
         alt: "",
         src: i
@@ -98,11 +98,11 @@ const M = (param)=>{
             border: "regular"
         })),
         style: (0, _css.applyCssVars)({
-            [_emptystatecssmistica.vars.backgroundColor]: s && !h ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
+            [_emptystatecssmistica.vars.backgroundColor]: s && !v ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.backgroundContainer
         }),
         "aria-label": g,
         role: "region"
-    }, (0, _dom.getPrefixedDataAttributes)(v, "EmptyState")), {
+    }, (0, _dom.getPrefixedDataAttributes)(h, "EmptyState")), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
@@ -144,6 +144,7 @@ const M = (param)=>{
                     aspectRatio: 16 / 9,
                     className: _emptystatecssmistica.largeImageContainer,
                     height: "100%",
+                    width: "100%",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _emptystatecssmistica.largeImage,
                         style: {
@@ -154,4 +155,4 @@ const M = (param)=>{
             })
         ]
     }));
-}, _ = M;
+}, _ = G;

package/dist/icon-button.d.ts

@@ -76,6 +76,7 @@ interface BaseProps {
     bleedLeft?: boolean;
     bleedRight?: boolean;
     bleedY?: boolean;
+    role?: string;
 }
 interface IconButtonBaseProps {
     Icon: React.FC<IconProps>;
@@ -230,6 +231,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -243,7 +245,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -263,6 +264,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -276,7 +278,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -297,6 +298,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -309,7 +311,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -330,6 +331,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -342,7 +344,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -366,6 +367,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -375,7 +377,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     to?: undefined;
     onPress?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -399,6 +400,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -408,7 +410,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     to?: undefined;
     onPress?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -432,6 +433,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -441,7 +443,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     onPress?: undefined;
     newTab?: undefined;
     loadOnTop?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -465,6 +466,7 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -474,7 +476,6 @@ export declare const InternalIconButton: React.ForwardRefExoticComponent<({
     onPress?: undefined;
     newTab?: undefined;
     loadOnTop?: undefined;
-    role?: string | undefined;
     isOverMedia?: boolean | undefined;
     hasOverlay?: boolean | undefined;
     backgroundColor?: undefined;
@@ -619,6 +620,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -632,7 +634,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -650,6 +651,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -663,7 +665,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -682,6 +683,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -694,7 +696,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -713,6 +714,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -725,7 +727,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     loadOnTop?: undefined;
     onNavigate?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -747,6 +748,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -756,7 +758,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     to?: undefined;
     onPress?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -778,6 +779,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -787,7 +789,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     to?: undefined;
     onPress?: undefined;
     fullPageOnWebView?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -809,6 +810,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -818,7 +820,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     onPress?: undefined;
     newTab?: undefined;
     loadOnTop?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;
@@ -840,6 +841,7 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     bleedLeft?: boolean | undefined;
     bleedRight?: boolean | undefined;
     bleedY?: boolean | undefined;
+    role?: string | undefined;
     Icon: React.FC<IconProps>;
     type?: IconButtonType | undefined;
     backgroundType?: IconButtonBackgroundType | undefined;
@@ -849,7 +851,6 @@ export declare const IconButton: React.ForwardRefExoticComponent<({
     onPress?: undefined;
     newTab?: undefined;
     loadOnTop?: undefined;
-    role?: string | undefined;
     backgroundColor?: undefined;
     size?: undefined;
     style?: undefined;