@telefonica/mistica 14.24.1 → 14.26.0

package/dist/carousel.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     Carousel: function() {
-        return vt;
+        return Pt;
     },
     CenteredCarousel: function() {
-        return It;
+        return xt;
     },
     IsInsideSlideshowProvider: function() {
-        return $e;
+        return tt;
     },
     PageBullets: function() {
         return ie;
     },
     Slideshow: function() {
-        return xt;
+        return St;
     },
     useIsInsideSlideshowContext: function() {
-        return Pt;
+        return wt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -174,7 +174,7 @@ const ce = (e, r)=>{
                 })
             }, d))
     });
-}, $ = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], Xe = (e, r)=>{
+}, $ = (e, r, t)=>t ? typeof t == "number" ? t : t[e] || r[e] : r[e], $e = (e, r)=>{
     const t = {
         mobile: 1,
         tablet: 2,
@@ -201,33 +201,33 @@ const ce = (e, r)=>{
     const t = Math.ceil(e.length / r), o = [];
     for(let f = 0; f < e.length; f += t)o.push(e[f]);
     return o[o.length - 1] = e[e.length - t], o;
-}, Ze = (e, r)=>{
+}, et = (e, r)=>{
     const t = [];
     for(let o = 0; o < r.length; o++)o === 0 ? t.push(r[0]) : t.push((r[o] + r[o - 1]) / 2);
     for(let o = t.length - 1; o >= 0; o--)if (e - t[o] >= -1) return o;
     return 0;
 }, ae = 5e3, ue = (param)=>{
-    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , itemsPerPage: b , itemsToScroll: d , mobilePageOffset: g , gap: k , free: C , centered: R , autoplay: v , onPageChange: P , dataAttributes: F  } = param;
-    const { texts: T , platformOverrides: M , skinName: y  } = (0, _hooks.useTheme)(), c = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = Xe(c || "large", b), { isDesktopOrBigger: x , isTablet: N  } = (0, _hooks.useScreenSize)(), U = N ? i.tablet : i.mobile, I = Math.max(Math.floor(x ? i.desktop : U), 1), p = _react.useRef(null), w = Math.ceil(e.length / I), [{ scrollLeft: H , scrollRight: q  }, de] = _react.useState({
+    let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , itemsPerPage: b , itemsToScroll: d , mobilePageOffset: g , gap: N , free: R , centered: A , autoplay: v , onPageChange: P , dataAttributes: F  } = param;
+    const { texts: T , platformOverrides: x , skinName: y  } = (0, _hooks.useTheme)(), c = (0, _desktopcontainertypecontext.useDesktopContainerType)(), i = $e(c || "large", b), { isDesktopOrBigger: w , isTablet: L  } = (0, _hooks.useScreenSize)(), U = L ? i.tablet : i.mobile, I = Math.max(Math.floor(w ? i.desktop : U), 1), p = _react.useRef(null), S = Math.ceil(e.length / I), [{ scrollLeft: H , scrollRight: q  }, de] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), [K, he] = _react.useState([]), W = _react.useMemo(()=>ee(K, w), [
+    }), [K, he] = _react.useState([]), W = _react.useMemo(()=>ee(K, S), [
         K,
-        w
+        S
     ]), O = d ? ee(K, Math.ceil(e.length / d)) : W, me = q !== 0, ge = H !== 0;
     (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (p.current) {
             const l = p.current, a = ()=>{
-                const { scrollWidth: z , clientWidth: A  } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + A));
+                const { scrollWidth: z , clientWidth: M  } = l, _ = Math.round(l.scrollLeft), j = Math.round(z - (_ + M));
                 de({
                     scrollLeft: _,
                     scrollRight: j
                 });
             }, u = ()=>{
                 const z = l.scrollWidth - l.clientWidth;
-                he(Array.from(l.querySelectorAll("[data-item]")).map((A, _)=>{
+                he(Array.from(l.querySelectorAll("[data-item]")).map((M, _)=>{
                     if (_ === e.length - 1) return z;
-                    const j = A.offsetLeft, Ie = parseInt(getComputedStyle(A).scrollMargin), Pe = R && !x ? j - A.clientWidth / 2 : j;
+                    const j = M.offsetLeft, Ie = parseInt(getComputedStyle(M).scrollMargin), Pe = A && !w ? j - M.clientWidth / 2 : j;
                     return Math.min(Pe - Ie - l.offsetLeft, z);
                 }));
             };
@@ -244,10 +244,10 @@ const ce = (e, r)=>{
         i.desktop,
         i.tablet,
         i.mobile,
+        S,
+        N,
+        A,
         w,
-        k,
-        R,
-        x,
         e.length
     ]);
     const D = _react.useCallback(function(l) {
@@ -310,21 +310,21 @@ const ce = (e, r)=>{
         q,
         J
     ]);
-    const S = Ze(H, W), Q = _react.useRef(!m), X = _react.useRef(0);
+    const k = et(H, W), Q = _react.useRef(!m), X = _react.useRef(0);
     _react.useEffect(()=>{
         if (P) {
-            const l = Math.min((S + 1) * I - 1, e.length - 1), a = [];
+            const l = Math.min((k + 1) * I - 1, e.length - 1), a = [];
             for(let u = 0; u < I; u++){
                 const h = l - u;
                 h >= 0 && a.unshift(h);
             }
-            Q.current ? X.current !== S && P({
-                pageIndex: S,
+            Q.current ? X.current !== k && P({
+                pageIndex: k,
                 shownItemIndexes: a
-            }) : Q.current = a.includes(m || 0), X.current = S;
+            }) : Q.current = a.includes(m || 0), X.current = k;
         }
     }, [
-        S,
+        k,
         e.length,
         I,
         m,
@@ -332,12 +332,12 @@ const ce = (e, r)=>{
     ]);
     let V = null;
     f ? V = f({
-        numPages: w,
-        currentIndex: S,
+        numPages: S,
+        currentIndex: k,
         onPress: D
-    }) : o && (V = w > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
-        numPages: w,
-        currentIndex: S,
+    }) : o && (V = S > 1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
+        numPages: S,
+        currentIndex: k,
         onPress: D
     }));
     const be = "64px", ve = "36px";
@@ -362,8 +362,8 @@ const ce = (e, r)=>{
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_carouselcssmistica.carousel, {
-                            [_carouselcssmistica.centeredCarousel]: R,
-                            [_carouselcssmistica.carouselWithScroll]: w > 1
+                            [_carouselcssmistica.centeredCarousel]: A,
+                            [_carouselcssmistica.carouselWithScroll]: S > 1
                         }),
                         style: _object_spread_props(_object_spread({}, (0, _dynamic.assignInlineVars)(_object_spread({
                             [_carouselcssmistica.vars.itemsPerPageDesktop]: String(i.desktop),
@@ -373,16 +373,22 @@ const ce = (e, r)=>{
                             [_carouselcssmistica.vars.mobilePageOffset]: be
                         } : y === _constants.VIVO_NEW_SKIN ? {
                             [_carouselcssmistica.vars.mobilePageOffset]: ve
-                        } : {}, k !== void 0 ? {
-                            [_carouselcssmistica.vars.gap]: String(k)
+                        } : {}, N !== void 0 ? {
+                            [_carouselcssmistica.vars.gap]: String(N)
                         } : {}))), {
-                            scrollSnapType: C ? "initial" : "x mandatory"
+                            scrollSnapType: R ? "initial" : "x mandatory",
+                            // Hack to fix https://jira.tid.es/browse/NOVUMCC-8988
+                            // there is a webkit rendering bug that causes a half pixel white line to appear at
+                            // the bottom of the scrollable area in retina displays when it has a height with
+                            // decimals. This extra padding avoids that line to partially cover the carousel
+                            // slides border:
+                            paddingBottom: (0, _platform.isIos)(x) && !(0, _platform.isRunningAcceptanceTest)(x) ? 0.5 : void 0
                         }),
                         ref: p,
                         children: e.map((l, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_carouselcssmistica.carouselItem, t),
                                 style: _object_spread_props(_object_spread({}, r), {
-                                    scrollSnapStop: (0, _platform.isAndroid)(M) ? "always" : "normal"
+                                    scrollSnapStop: (0, _platform.isAndroid)(x) ? "always" : "normal"
                                 }),
                                 "data-item": !0,
                                 children: l
@@ -406,7 +412,7 @@ const ce = (e, r)=>{
             })
         ]
     });
-}, vt = (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ue, _object_spread({}, e)), It = (param)=>/* @__PURE__ */ {
+}, Pt = (e)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ue, _object_spread({}, e)), xt = (param)=>/* @__PURE__ */ {
     let { items: e , itemStyle: r , itemClassName: t , withBullets: o , renderBullets: f , initialActiveItem: m , onPageChange: b , dataAttributes: d  } = param;
     return (0, _jsxruntime.jsx)(ue, {
         items: e,
@@ -426,15 +432,15 @@ const ce = (e, r)=>{
         onPageChange: b,
         dataAttributes: d
     });
-}, fe = /*#__PURE__*/ _react.createContext(!1), Pt = ()=>_react.useContext(fe), $e = (param)=>/* @__PURE__ */ {
+}, fe = /*#__PURE__*/ _react.createContext(!1), wt = ()=>_react.useContext(fe), tt = (param)=>/* @__PURE__ */ {
     let { children: e  } = param;
     return (0, _jsxruntime.jsx)(fe.Provider, {
         value: !0,
         children: e
     });
-}, xt = (param)=>{
+}, St = (param)=>{
     let { items: e , withBullets: r , autoplay: t , onPageChange: o , dataAttributes: f , inverseBullets: m = !0  } = param;
-    const { texts: b , platformOverrides: d  } = (0, _hooks.useTheme)(), g = _react.useRef(null), [{ scrollLeft: k , scrollRight: C  }, R] = _react.useState({
+    const { texts: b , platformOverrides: d  } = (0, _hooks.useTheme)(), g = _react.useRef(null), [{ scrollLeft: N , scrollRight: R  }, A] = _react.useState({
         scrollLeft: 0,
         scrollRight: 0
     }), v = _react.useCallback(()=>{
@@ -449,21 +455,21 @@ const ce = (e, r)=>{
             left: c.clientWidth,
             behavior: "smooth"
         });
-    }, []), F = C !== 0, T = k !== 0, M = g.current ? Math.floor((k + g.current.clientWidth / 2) / g.current.clientWidth) : 0;
+    }, []), F = R !== 0, T = N !== 0, x = g.current ? Math.floor((N + g.current.clientWidth / 2) / g.current.clientWidth) : 0;
     _react.useLayoutEffect(()=>{
         const c = g.current;
         if (c) {
             const i = ()=>{
-                const { scrollWidth: N , clientWidth: U  } = c, I = Math.round(c.scrollLeft), p = Math.round(N - (I + U));
-                R({
+                const { scrollWidth: L , clientWidth: U  } = c, I = Math.round(c.scrollLeft), p = Math.round(L - (I + U));
+                A({
                     scrollLeft: I,
                     scrollRight: p
                 });
             };
             i(), c.addEventListener("scroll", i);
-            const x = (0, _dom.listenResize)(c, i);
+            const w = (0, _dom.listenResize)(c, i);
             return ()=>{
-                c.removeEventListener("scroll", i), x();
+                c.removeEventListener("scroll", i), w();
             };
         }
     }, [
@@ -472,26 +478,26 @@ const ce = (e, r)=>{
     const y = ce(!!t, g);
     return _react.useEffect(()=>{
         if (y && t) {
-            const c = typeof t == "boolean" ? ae : t.time, i = typeof t == "object" && t.loop, x = setInterval(()=>{
-                var N;
-                C !== 0 ? P() : i && ((N = g.current) == null || N.scrollTo({
+            const c = typeof t == "boolean" ? ae : t.time, i = typeof t == "object" && t.loop, w = setInterval(()=>{
+                var L;
+                R !== 0 ? P() : i && ((L = g.current) == null || L.scrollTo({
                     left: 0,
                     behavior: "smooth"
                 }));
             }, c);
-            return ()=>clearInterval(x);
+            return ()=>clearInterval(w);
         }
     }, [
         t,
         P,
-        C,
+        R,
         y
     ]), _react.useEffect(()=>{
-        o && o(M);
+        o && o(x);
     }, [
-        M,
+        x,
         o
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)($e, {
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(tt, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _carouselcssmistica.slideshowContainer
         }, (0, _dom.getPrefixedDataAttributes)(f, "SlideShow")), {
@@ -536,7 +542,7 @@ const ce = (e, r)=>{
                         className: _carouselcssmistica.slideshowBullets,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
                             numPages: e.length,
-                            currentIndex: M
+                            currentIndex: x
                         })
                     })
                 })

package/dist/checkbox.css.d.ts

@@ -1,6 +1,6 @@
 export declare const checkboxContainer: string;
 export declare const checkboxContainerDisabled: string;
-export declare const boxVariant: Record<"ios" | "rest" | "checked", string>;
+export declare const boxVariant: Record<"ios" | "checked" | "rest", string>;
 export declare const check: string;
 export declare const checkChecked: string;
 export declare const disabled: string;

package/dist/checkbox.d.ts

@@ -16,6 +16,7 @@ type RenderProps = {
     disabled?: boolean;
     'aria-labelledby'?: string;
     'aria-label'?: string;
+    role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
 type ChildrenProps = {
@@ -29,7 +30,8 @@ type ChildrenProps = {
     disabled?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    role?: 'checkbox' | 'menuitemcheckbox';
     dataAttributes?: DataAttributes;
 };
-declare const Checkbox: React.FC<RenderProps | ChildrenProps>;
+declare const Checkbox: React.ForwardRefExoticComponent<(RenderProps | ChildrenProps) & React.RefAttributes<HTMLDivElement>>;
 export default Checkbox;

package/dist/checkbox.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return O;
+        return W;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -19,6 +19,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames")
 const _dom = require("./utils/dom.js");
 const _checkboxcssmistica = require("./checkbox.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _common = require("./utils/common.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -115,9 +116,9 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const z = (param)=>{
-    let { isChecked: e , disabled: o  } = param;
-    const { isIos: l  } = (0, _hooks.useTheme)(), r = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+const B = (param)=>{
+    let { isChecked: e , disabled: c  } = param;
+    const { isIos: o  } = (0, _hooks.useTheme)(), l = o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
@@ -141,37 +142,37 @@ const z = (param)=>{
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(_checkboxcssmistica.boxVariant[e ? "checked" : l ? "ios" : "rest"], {
-            [_checkboxcssmistica.disabled]: o
+        className: (0, _classnames.default)(_checkboxcssmistica.boxVariant[e ? "checked" : o ? "ios" : "rest"], {
+            [_checkboxcssmistica.disabled]: c
         }),
-        children: r
+        children: l
     });
-}, B = (e)=>{
-    const o = (0, _hooks.useAriaId)(e["aria-labelledby"]), l = e["aria-label"], r = l || e["aria-labelledby"], { defaultValue: x , value: t , onChange: s , focusableRef: C , disabled: i  } = (0, _formcontext.useControlProps)({
+}, K = /*#__PURE__*/ _react.forwardRef((e, c)=>{
+    const o = (0, _hooks.useAriaId)(e["aria-labelledby"]), l = e["aria-label"], C = l || e["aria-labelledby"], { defaultValue: g , value: t , onChange: s , focusableRef: w , disabled: i  } = (0, _formcontext.useControlProps)({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), [d, g] = _react.useState(!!x), h = ()=>{
-        t === void 0 ? (g(!d), s(!d)) : s(!t);
-    }, y = (c)=>{
-        c.keyCode === _keycodes.SPACE && (c.preventDefault(), c.stopPropagation(), h());
-    }, b = /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+    }), [d, y] = _react.useState(!!g), h = ()=>{
+        t === void 0 ? (y(!d), s(!d)) : s(!t);
+    }, I = (r)=>{
+        r.keyCode === _keycodes.SPACE && (r.preventDefault(), r.stopPropagation(), h());
+    }, b = /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
         disabled: i,
         isChecked: t !== null && t !== void 0 ? t : d
     });
-    return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    return(// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         id: e.id,
-        role: "checkbox",
+        role: e.role || "checkbox",
         "aria-checked": t !== null && t !== void 0 ? t : d,
-        onKeyDown: i ? void 0 : y,
-        onClick: (c)=>{
-            c.stopPropagation(), i || h();
+        onKeyDown: i ? void 0 : I,
+        onClick: (r)=>{
+            r.stopPropagation(), i || h();
         },
         tabIndex: i ? void 0 : 0,
-        ref: C,
+        ref: (0, _common.combineRefs)(c, w),
         className: i ? _checkboxcssmistica.checkboxContainerDisabled : _checkboxcssmistica.checkboxContainer,
         "aria-label": l,
         "aria-labelledby": l ? void 0 : o,
@@ -200,7 +201,7 @@ const z = (param)=>{
                     regular: !0,
                     as: "div",
                     id: o,
-                    role: r ? "presentation" : void 0,
+                    role: C ? "presentation" : void 0,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
                         className: i ? _checkboxcssmistica.disabled : "",
                         children: e.children
@@ -209,4 +210,4 @@ const z = (param)=>{
             ]
         })
     })));
-}, O = B;
+}), W = K;

package/dist/community/blocks.js

@@ -35,7 +35,7 @@ const _text = require("../text.js");
 const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("../inline.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("../box.js"));
-const _progressbar = /*#__PURE__*/ _interop_require_default(require("../progress-bar.js"));
+const _progressbar = require("../progress-bar.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -120,6 +120,7 @@ const g = (param)=>{
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textSecondary,
+                        decoration: "line-through",
                         children: l
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
@@ -228,7 +229,7 @@ const g = (param)=>{
                         e
                     ]
                 }),
-                l !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.default, {
+                l !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.ProgressBar, {
                     progressPercent: l,
                     reverse: t
                 }),

package/dist/form-context.d.ts

@@ -54,17 +54,17 @@ export declare const useControlProps: <T>({ name, value, defaultValue, onChange,
 };
 export declare const useFieldProps: ({ name, value, defaultValue, processValue, helperText, optional, error, disabled, onBlur, validate, onChange, onChangeValue, }: {
     name: string;
-    value: string | undefined;
-    defaultValue: string | undefined;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
     processValue: (value: string) => unknown;
-    helperText: string | undefined;
-    optional: boolean | undefined;
-    error: boolean | undefined;
-    disabled: boolean | undefined;
+    helperText?: string | undefined;
+    optional?: boolean | undefined;
+    error?: boolean | undefined;
+    disabled?: boolean | undefined;
     onBlur?: React.FocusEventHandler<Element> | undefined;
-    validate: ((value: any, rawValue: string) => string | undefined) | undefined;
-    onChange: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    onChangeValue: ((value: any, rawValue: string) => void) | undefined;
+    validate?: ((value: any, rawValue: string) => string | undefined) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onChangeValue?: ((value: any, rawValue: string) => void) | undefined;
 }) => {
     value?: string | undefined;
     defaultValue?: string | undefined;

package/dist/generated/mistica-icons/icons-keywords.d.ts

@@ -0,0 +1,4 @@
+declare const iconKeywords: {
+    [key: string]: Array<string>;
+};
+export default iconKeywords;

package/dist/icons/icon-chevron.d.ts

@@ -6,6 +6,7 @@ type Props = {
     className?: string;
     style?: React.CSSProperties;
     direction?: Direction;
+    transitionDuration?: number;
 };
 declare const IconChevron: React.FC<Props>;
 export default IconChevron;

package/dist/icons/icon-chevron.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return v;
+        return p;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -38,38 +38,41 @@ function _object_spread(target) {
     }
     return target;
 }
-const c = (param)=>/* @__PURE__ */ {
-    let { size: o , color: t , transform: r , className: n , style: e  } = param;
+const h = (param)=>/* @__PURE__ */ {
+    let { size: o , color: r , transform: n , transitionDuration: t , className: e , style: l  } = param;
     return (0, _jsxruntime.jsx)("svg", {
         role: "presentation",
         width: o,
         height: o,
         viewBox: "0 0 24 24",
-        className: n,
-        style: e,
+        className: e,
+        style: _object_spread({
+            transform: n,
+            transition: `transform ${t}ms`
+        }, l),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             style: {
-                transition: "transform 0.3s"
+                transition: `fill ${t}ms`
             },
-            fill: t,
+            fill: r,
             fillRule: "evenodd",
-            d: "M14.338 11.478a.75.75 0 0 1 0 1.044l-3.837 3.997a.75.75 0 1 1-1.082-1.038L12.76 12 9.42 8.52a.75.75 0 0 1 1.082-1.04l3.837 3.998z",
-            transform: r
+            d: "M14.338 11.478a.75.75 0 0 1 0 1.044l-3.837 3.997a.75.75 0 1 1-1.082-1.038L12.76 12 9.42 8.52a.75.75 0 0 1 1.082-1.04l3.837 3.998z"
         })
     });
-}, h = {
+}, f = {
     up: -90,
     down: 90,
     left: 180,
     right: 0
-}, f = (param)=>{
-    let { size: o = 24 , color: t , className: r , style: n , direction: e = "right"  } = param;
-    const i = t || _skincontractcssmistica.vars.colors.neutralHigh, s = {
+}, g = (param)=>{
+    let { size: o = 24 , color: r , className: n , style: t , transitionDuration: e = 300 , direction: l = "right"  } = param;
+    const i = r || _skincontractcssmistica.vars.colors.neutralHigh, a = {
         size: o,
         color: i,
-        transform: `rotate(${h[e]} 12 12)`,
-        className: r,
-        style: n
+        transform: `rotate(${f[l]}deg)`,
+        className: n,
+        transitionDuration: e,
+        style: t
     };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread({}, s));
-}, v = f;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(h, _object_spread({}, a));
+}, p = g;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Touchable } from './touchable';
 export type { TouchableElement } from './touchable';
 export { default as Spinner } from './spinner';
 export { default as FadeIn } from './fade-in';
+export { AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion } from './accordion';
 export { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink } from './button';
 export { default as ButtonLayout } from './button-layout';
 export { default as FixedFooterLayout } from './fixed-footer-layout';
@@ -50,15 +51,16 @@ export { default as Inline } from './inline';
 export { default as HorizontalScroll } from './horizontal-scroll';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
-export { default as ProgressBar } from './progress-bar';
+export { ProgressBar, ProgressBarStepped } from './progress-bar';
 export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard, PosterCard, NakedCard, SmallNakedCard, CardActionSpinner, } from './card';
 export { default as Hero } from './hero';
 export { default as Divider } from './divider';
-export { default as Menu } from './menu';
+export { Menu, MenuItem, MenuSection } from './menu';
 export { default as EmptyState } from './empty-state';
 export { default as EmptyStateCard } from './empty-state-card';
 export { default as Callout } from './callout';
 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 { 
@@ -79,6 +81,7 @@ export { default as StackingGroup } from './stacking-group';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { default as PinField } from './pin-field';
 export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';