@telefonica/mistica 13.2.2 → 13.3.0

package/dist/hero.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Tag from './tag';
+import { ButtonLink, ButtonPrimary } from './button';
+import Video from './video';
+import Image from './image';
+import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
+type HeroProps = {
+    height?: string;
+    background?: 'default' | 'alternative' | 'brand' | 'brand-secondary';
+    media: RendersElement<typeof Image> | RendersElement<typeof Video>;
+    headline?: RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    title?: string;
+    description?: string;
+    descriptionLinesMax?: number;
+    extra?: React.ReactNode;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    buttonLink?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
+    desktopMediaPosition?: 'left' | 'right';
+};
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement>>;
+export default Hero;

package/dist/hero.js

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>er
+});
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+const _hooksJs = require("./hooks.js");
+const _imageJs = require("./image.js");
+const _textJs = require("./text.js");
+const _gridLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./grid-layout.js"));
+const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
+const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
+const _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+const _heroCssMisticaJs = require("./hero.css-mistica.js");
+const _dynamic = require("@vanilla-extract/dynamic");
+const _carouselJs = require("./carousel.js");
+const _domJs = require("./utils/dom.js");
+const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+const _themeVariantContextJs = require("./theme-variant-context.js");
+const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const k = (param)=>/* @__PURE__ */ {
+    let { children: e , isInverse: o  } = param;
+    return (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+        isInverse: o,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            className: _heroCssMisticaJs.layout,
+            children: e
+        })
+    });
+}, v = (param)=>/* @__PURE__ */ {
+    let { headline: e , title: o , pretitle: a , description: i , descriptionLinesMax: d , extra: n , button: l , secondaryButton: p , buttonLink: m  } = param;
+    return (0, _jsxRuntimeJs.jsxs)("section", {
+        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+            height: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column"
+        }),
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                children: [
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                        space: 16,
+                        children: [
+                            e && e,
+                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 8,
+                                children: [
+                                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                        as: "p",
+                                        regular: !0,
+                                        children: a
+                                    }),
+                                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
+                                        as: "h1",
+                                        children: o
+                                    })
+                                ]
+                            }),
+                            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                as: "p",
+                                regular: !0,
+                                color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                truncate: d,
+                                children: i
+                            })
+                        ]
+                    }),
+                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: n
+                    })
+                ]
+            }),
+            (l || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _heroCssMisticaJs.actions,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                    primaryButton: l,
+                    secondaryButton: p,
+                    link: m
+                })
+            })
+        ]
+    });
+}, C = {
+    default: _skinContractCssMisticaJs.vars.colors.background,
+    alternative: _skinContractCssMisticaJs.vars.colors.backgroundAlternative,
+    brand: _skinContractCssMisticaJs.vars.colors.backgroundBrand,
+    "brand-secondary": _skinContractCssMisticaJs.vars.colors.backgroundBrand
+}, er = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    var { height: e , background: o = "default" , media: a , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, n = _objectWithoutProperties(_param, [
+        "height",
+        "background",
+        "media",
+        "desktopMediaPosition",
+        "dataAttributes"
+    ]);
+    const { isTabletOrSmaller: p  } = (0, _hooksJs.useScreenSize)(), m = (0, _carouselJs.useIsInsideSlideshowContext)(), h = o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+        value: !1,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, (0, _dynamic.assignInlineVars)({
+                [_heroCssMisticaJs.vars.height]: e != null ? e : "100%"
+            })),
+            className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerMobile),
+            children: [
+                a,
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(k, {
+                    isInverse: h,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: 24,
+                        paddingBottom: m ? 48 : 24,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+                    })
+                })
+            ]
+        }))
+    });
+    const H = i === "left" ? a : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+        paddingRight: 24,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+    }), I = i === "right" ? a : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+        paddingLeft: 24,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+    });
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+        value: !0,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, (0, _dynamic.assignInlineVars)({
+                [_heroCssMisticaJs.vars.height]: e != null ? e : "100%"
+            })),
+            className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                height: "100%",
+                display: "flex",
+                alignItems: "center"
+            }),
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(k, {
+                isInverse: h,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingY: 56,
+                        className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerDesktop),
+                        children: H
+                    }),
+                    right: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingY: 56,
+                        className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerDesktop),
+                        children: I
+                    })
+                })
+            })
+        }))
+    });
+});

package/dist/image.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-export declare const useDisableBorderRadius: () => boolean;
-export declare const DisableBorderRadiusProvider: ({ children }: {
+export declare const useMediaBorderRadius: () => boolean;
+export declare const MediaBorderRadiusProvider: ({ children, value, }: {
     children: React.ReactNode;
+    value: boolean;
 }) => JSX.Element;
 export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
 export declare const RATIO: {

package/dist/image.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DisableBorderRadiusProvider: ()=>s1,
+    MediaBorderRadiusProvider: ()=>r1,
     RATIO: ()=>U,
-    default: ()=>r1,
-    useDisableBorderRadius: ()=>O
+    default: ()=>s1,
+    useMediaBorderRadius: ()=>O
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -150,10 +150,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k), s1 = (param)=>/* @__PURE__ */ {
-    let { children: t  } = param;
+const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k), r1 = (param)=>/* @__PURE__ */ {
+    let { children: t , value: r  } = param;
     return (0, _jsxRuntimeJs.jsx)(k.Provider, {
-        value: !0,
+        value: r,
         children: t
     });
 }, P = (param)=>/* @__PURE__ */ {
@@ -172,7 +172,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
     });
 }, K = (param)=>{
     let { noBorderRadius: t  } = param;
-    const r = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: l  } = (0, _hooksJs.useTheme)();
+    const r = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: c  } = (0, _hooksJs.useTheme)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: "100%",
@@ -183,7 +183,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
             backgroundColor: r ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
             borderRadius: t ? void 0 : 8
         },
-        children: l === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
+        children: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -208,8 +208,8 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, r1 = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
-    var { aspectRatio: t = "1:1" , alt: r = "" , dataAttributes: l , noBorderRadius: c , src: I , onError: d , onLoad: a , loadingFallback: p = !0 , errorFallback: x = !0  } = _param, o = _objectWithoutProperties(_param, [
+}, s1 = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
+    var { aspectRatio: t = "1:1" , alt: r = "" , dataAttributes: c , noBorderRadius: l , src: I , onError: d , onLoad: a , loadingFallback: p = !0 , errorFallback: x = !0  } = _param, o = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -220,13 +220,13 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), R = O(), m = c != null ? c : R, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [D, v] = _react.useState(!1), n = typeof t == "number" ? t : U[t], b = p && !!(n !== 0 || o.width && o.height), H = x && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
+    const C = _react.useRef(), R = O(), m = l != null ? l : !R, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [M, v] = _react.useState(!1), n = typeof t == "number" ? t : U[t], b = p && !!(n !== 0 || o.width && o.height), H = x && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
         f(!1), g(!1), setTimeout(()=>{
             v(!0);
         }, _imageCssMisticaJs.FADE_IN_DURATION_MS), a == null || a();
     }, [
         a
-    ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(l)), {
+    ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(c)), {
         style: _objectSpread({}, S && b ? {
             opacity: 0
         } : {
@@ -257,7 +257,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
         width: o.width,
         height: o.height,
         children: [
-            b && !D && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            b && !M && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { default as ProgressBar } from './progress-bar';
 export { MediaCard, DataCard, SnapCard } from './card';
+export { default as Hero } from './hero';
 export { default as Divider } from './divider';
 export { default as Menu } from './menu';
 export { default as EmptyState } from './empty-state';

package/dist/index.js

@@ -52,6 +52,7 @@ _export(exports, {
     GridLayout: ()=>_gridLayoutJs.default,
     Header: ()=>_headerJs.Header,
     HeaderLayout: ()=>_headerJs.HeaderLayout,
+    Hero: ()=>_heroJs.default,
     HighlightedCard: ()=>_highlightedCardJs.default,
     IbanField: ()=>_ibanFieldJs.default,
     Icon2GFilled: ()=>_icon2GFilledJs.default,
@@ -1873,6 +1874,7 @@ const _highlightedCardJs = /*#__PURE__*/ _interopRequireDefault(require("./highl
 const _stepperJs = /*#__PURE__*/ _interopRequireDefault(require("./stepper.js"));
 const _progressBarJs = /*#__PURE__*/ _interopRequireDefault(require("./progress-bar.js"));
 const _cardJs = require("./card.js");
+const _heroJs = /*#__PURE__*/ _interopRequireDefault(require("./hero.js"));
 const _dividerJs = /*#__PURE__*/ _interopRequireDefault(require("./divider.js"));
 const _menuJs = /*#__PURE__*/ _interopRequireDefault(require("./menu.js"));
 const _emptyStateJs = /*#__PURE__*/ _interopRequireDefault(require("./empty-state.js"));

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "13.2.2";
+const o = "13.3.0";

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

@@ -1,3 +1,7 @@
+export declare const MOBILE_SIDE_MARGIN = 16;
+export declare const TABLET_SIDE_MARGIN = 32;
+export declare const SMALL_DESKTOP_SIDE_MARGIN = 40;
+export declare const LARGE_DESKTOP_MAX_WIDTH = 1224;
 export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };

package/dist/search-field.d.ts

@@ -4,5 +4,5 @@ export interface SearchFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     getSuggestions?: (value: string) => ReadonlyArray<string>;
 }
-declare const SearchField: React.FC<SearchFieldProps>;
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<any>>;
 export default SearchField;

package/dist/search-field.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>M
+    get: ()=>O
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _formContextJs = require("./form-context.js");
@@ -14,6 +14,7 @@ const _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./gene
 const _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 const _hooksJs = require("./hooks.js");
 const _domJs = require("./utils/dom.js");
+const _commonJs = require("./utils/common.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -138,8 +139,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const M = (_param)=>{
-    var { disabled: m , error: u , helperText: p , name: d , optional: n , validate: I , onChange: e , onChangeValue: r , onBlur: x , value: a , defaultValue: y  } = _param, S = _objectWithoutProperties(_param, [
+const O = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
+    var { disabled: a , error: u , helperText: p , name: d , optional: n , validate: I , onChange: e , onChangeValue: t , onBlur: R , value: l , defaultValue: x  } = _param, y = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -152,45 +153,45 @@ const M = (_param)=>{
         "value",
         "defaultValue"
     ]);
-    const P = (0, _hooksJs.useTheme)(), t = _react.useRef(), [R, b] = _react.useState(y || ""), i = typeof a < "u", f = i ? a : R, l = _react.useCallback((o, F)=>{
-        i || b(o), r == null || r(o, F);
+    const b = (0, _hooksJs.useTheme)(), o = _react.useRef(), [P, v] = _react.useState(x || ""), i = typeof l < "u", m = i ? l : P, f = _react.useCallback((s, h)=>{
+        i || v(s), t == null || t(s, h);
     }, [
         i,
-        r
-    ]), v = _react.useCallback(()=>{
-        l("", ""), t.current && (e == null || e((0, _domJs.createChangeEvent)(t.current, "")), t.current.focus());
+        t
+    ]), B = _react.useCallback(()=>{
+        f("", ""), o.current && (e == null || e((0, _domJs.createChangeEvent)(o.current, "")), o.current.focus());
     }, [
-        l,
+        f,
         e
-    ]), B = (0, _formContextJs.useFieldProps)({
+    ]), F = (0, _formContextJs.useFieldProps)({
         name: d,
-        value: f,
+        value: m,
         defaultValue: void 0,
-        processValue: (o)=>o,
+        processValue: (s)=>s,
         helperText: p,
         optional: n,
         error: u,
-        disabled: m,
-        onBlur: x,
+        disabled: a,
+        onBlur: R,
         validate: I,
         onChange: e,
-        onChangeValue: l
+        onChangeValue: f
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textFieldBaseJs.TextFieldBaseAutosuggest, _objectSpreadProps(_objectSpread({
-        ref: t,
+        ref: (0, _commonJs.combineRefs)(o, S),
         startIcon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSearchJs.default, {}),
-        endIcon: f ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+        endIcon: m ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
             size: 48,
             style: {
                 display: "flex",
                 padding: 12,
                 margin: -12
             },
-            "aria-label": P.texts.formSearchClear,
-            onPress: v,
+            "aria-label": b.texts.formSearchClear,
+            onPress: B,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
         }) : void 0
-    }, S, B), {
+    }, y, F), {
         type: "search"
     }));
-};
+});

package/dist/video.js

@@ -9,7 +9,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    RATIO: ()=>F,
+    RATIO: ()=>C,
     default: ()=>j
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -138,13 +138,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const F = {
+const C = {
     "1:1": 1,
     "16:9": 16 / 9,
     "12:5": 12 / 5,
     "4:3": 4 / 3
-}, N = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", j = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
-    var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: d = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, n = _objectWithoutProperties(_param, [
+}, F = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC", j = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    var { src: t , poster: i , autoPlay: o = !(0, _platformJs.isRunningAcceptanceTest)() , muted: c = !0 , loop: m = !0 , preload: u = "none" , aspectRatio: A = "1:1" , dataAttributes: f  } = _param, n = _objectWithoutProperties(_param, [
         "src",
         "poster",
         "autoPlay",
@@ -154,9 +154,9 @@ const F = {
         "aspectRatio",
         "dataAttributes"
     ]);
-    const R = (0, _imageJs.useDisableBorderRadius)(), p = typeof A == "number" ? A : F[A], a = _react.useRef(null);
+    const R = (0, _imageJs.useMediaBorderRadius)(), p = typeof A == "number" ? A : C[A], d = _react.useRef(null);
     _react.useEffect(()=>{
-        const e = a.current;
+        const e = d.current;
         e && o && e.paused && e.play();
     }, [
         o
@@ -165,20 +165,20 @@ const F = {
         t
     ]).map((e)=>typeof e == "string" ? {
             src: e
-        } : e), c = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
-        ref: (0, _commonJs.combineRefs)(l, a),
+        } : e), a = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("video", _objectSpreadProps(_objectSpread({
+        ref: (0, _commonJs.combineRefs)(l, d),
         playsInline: !0,
         disablePictureInPicture: !0,
         disableRemotePlayback: !0,
         autoPlay: o,
-        muted: d,
+        muted: c,
         loop: m,
         className: _videoCssMisticaJs.video,
         preload: u,
-        poster: i || N
+        poster: i || F
     }, (0, _domJs.getPrefixedDataAttributes)(f)), {
         style: {
-            borderRadius: R ? 0 : 8
+            borderRadius: R ? 8 : 0
         },
         children: g.map((param, b)=>/* @__PURE__ */ {
             let { src: e , type: h  } = param;
@@ -200,7 +200,7 @@ const F = {
                 backgroundSize: "cover",
                 backgroundPosition: "50% 50%"
             },
-            children: c
-        }) : c
+            children: a
+        }) : a
     });
 });