@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/radio-button.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     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);
@@ -99,19 +123,19 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import { SPACE, LEFT, UP, DOWN, RIGHT } from "./utils/key-codes";
-import { useControlProps } from "./form-context";
-import { combineRefs } from "./utils/common";
-import { Text3 } from "./text";
-import Inline from "./inline";
-import classnames from "classnames";
-import { useAriaId, useTheme } from "./hooks";
-import { getPrefixedDataAttributes } from "./utils/dom";
-var useRadioButtonStyles = createUseStyles(function(param) {
-    var colors = param.colors, isIos = param.isIos;
+import * as d from "react";
+import { createUseStyles as w } from "./jss.js";
+import { UP as I, LEFT as N, DOWN as D, RIGHT as $, SPACE as q } from "./utils/key-codes.js";
+import { useControlProps as E } from "./form-context.js";
+import { combineRefs as B } from "./utils/common.js";
+import { Text3 as V } from "./text.js";
+import K from "./inline.js";
+import P from "classnames";
+import { useAriaId as T, useTheme as j } from "./hooks.js";
+import { getPrefixedDataAttributes as O } from "./utils/dom.js";
+import { jsx as c, jsxs as F } from "./_virtual/jsx-runtime.js";
+var G = w(function(param) {
+    var e = param.colors, o = param.isIos;
     return {
         outerCircle: {
             cursor: "pointer",
@@ -123,14 +147,13 @@ var useRadioButtonStyles = createUseStyles(function(param) {
             alignItems: "center",
             justifyContent: "center",
             verticalAlign: "middle",
-            boxShadow: "inset 0 0 0 ".concat(isIos ? 1 : 2, "px ").concat(colors.control),
-            background: colors.background,
+            boxShadow: "inset 0 0 0 ".concat(o ? 1 : 2, "px ").concat(e.control),
+            background: e.background,
             transition: "background 0.3s, box-shadow 0.3s"
         },
         outerCircleChecked: {
-            boxShadow: "inset 0 0 0 ".concat(isIos ? 5 : 2, "px ").concat(colors.controlActivated),
-            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
-            background: isIos ? "radial-gradient(circle, ".concat(colors.iosControlKnob, " 0%, ").concat(colors.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : colors.background
+            boxShadow: "inset 0 0 0 ".concat(o ? 5 : 2, "px ").concat(e.controlActivated),
+            background: o ? "radial-gradient(circle, ".concat(e.iosControlKnob, " 0%, ").concat(e.iosControlKnob, " 64%, transparent 64%, transparent 100%)") : e.background
         },
         innerCircle: {
             display: "flex",
@@ -142,7 +165,7 @@ var useRadioButtonStyles = createUseStyles(function(param) {
             transform: "scale(0)"
         },
         innerCircleChecked: {
-            background: colors.controlActivated,
+            background: e.controlActivated,
             opacity: 1,
             transform: "scale(1)"
         },
@@ -154,196 +177,145 @@ var useRadioButtonStyles = createUseStyles(function(param) {
             cursor: "default"
         }
     };
-});
-var RadioContext = /*#__PURE__*/ React.createContext({
-    disabled: false,
+}), A = /*#__PURE__*/ d.createContext({
+    disabled: !1,
     selectedValue: null,
     focusableValue: null,
     select: function() {},
     selectNext: function() {},
     selectPrev: function() {}
-});
-export var useRadioContext = function() {
-    return React.useContext(RadioContext);
-};
-var RadioButton = function(_param) {
-    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, ariaLabelledby = _param["aria-labelledby"], rest = _objectWithoutProperties(_param, [
+}), U = function() {
+    return d.useContext(A);
+}, _ = function(_param) {
+    var e = _param.value, o = _param.id, x = _param.dataAttributes, C = _param["aria-labelledby"], h = _objectWithoutProperties(_param, [
         "value",
         "id",
         "dataAttributes",
         "aria-labelledby"
     ]);
-    var ref = useRadioContext(), disabled = ref.disabled, selectedValue = ref.selectedValue, focusableValue = ref.focusableValue, select = ref.select, selectNext = ref.selectNext, selectPrev = ref.selectPrev;
-    var labelId = useAriaId(ariaLabelledby);
-    var ref1 = React.useRef(null);
-    var checked = value === selectedValue;
-    var tabIndex = focusableValue === value ? 0 : -1;
-    var classes = useRadioButtonStyles({
-        checked: checked
-    });
-    var isIos = useTheme().isIos;
-    var handleKeyDown = function(event) {
-        switch(event.keyCode){
-            case SPACE:
-                select(value);
-                event.preventDefault();
-                event.stopPropagation();
+    var _obj;
+    var ref = U(), i = ref.disabled, s = ref.selectedValue, p = ref.focusableValue, f = ref.select, y = ref.selectNext, k = ref.selectPrev, r = T(C), R = d.useRef(null), u = e === s, v = p === e ? 0 : -1, n = G({
+        checked: u
+    }), ref1 = j(), g = ref1.isIos, a = function(l) {
+        switch(l.keyCode){
+            case q:
+                f(e), l.preventDefault(), l.stopPropagation();
                 break;
-            case RIGHT:
-            case DOWN:
-                selectNext();
-                event.preventDefault();
-                event.stopPropagation();
+            case $:
+            case D:
+                y(), l.preventDefault(), l.stopPropagation();
                 break;
-            case LEFT:
-            case UP:
-                selectPrev();
-                event.preventDefault();
-                event.stopPropagation();
+            case N:
+            case I:
+                k(), l.preventDefault(), l.stopPropagation();
                 break;
-            default:
         }
-    };
-    var _obj;
-    var radio = /*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.outerCircle, (_obj = {}, _defineProperty(_obj, classes.outerCircleChecked, checked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
-        children: !isIos && /*#__PURE__*/ _jsx("div", {
-            className: classnames(classes.innerCircle, _defineProperty({}, classes.innerCircleChecked, checked))
+    }, t = /* @__PURE__ */ c("div", {
+        className: P(n.outerCircle, (_obj = {}, _defineProperty(_obj, n.outerCircleChecked, u), _defineProperty(_obj, n.disabled, i), _obj)),
+        children: !g && /* @__PURE__ */ c("div", {
+            className: P(n.innerCircle, _defineProperty({}, n.innerCircleChecked, u))
         })
     });
-    return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    /*#__PURE__*/ _jsx("span", _objectSpread({
-        ref: ref1,
-        id: id,
-        tabIndex: disabled ? undefined : tabIndex,
+    return /* @__PURE__ */ c("span", _objectSpreadProps(_objectSpread({
+        ref: R,
+        id: o,
+        tabIndex: i ? void 0 : v,
         role: "radio",
-        "data-value": value,
-        "aria-checked": checked,
-        "aria-disabled": disabled,
-        "aria-labelledby": labelId,
-        onClick: disabled ? undefined : function() {
-            return select(value);
+        "data-value": e,
+        "aria-checked": u,
+        "aria-disabled": i,
+        "aria-labelledby": r,
+        onClick: i ? void 0 : function() {
+            return f(e);
         },
-        onKeyDown: disabled ? undefined : handleKeyDown,
-        className: classes.radioButton
-    }, getPrefixedDataAttributes(dataAttributes), {
-        children: rest.render ? rest.render({
-            controlElement: radio,
-            disabled: !!disabled,
-            checked: checked,
-            labelId: labelId
-        }) : /*#__PURE__*/ _jsxs(Inline, {
+        onKeyDown: i ? void 0 : a,
+        className: n.radioButton
+    }, O(x)), {
+        children: h.render ? h.render({
+            controlElement: t,
+            disabled: !!i,
+            checked: u,
+            labelId: r
+        }) : /* @__PURE__ */ F(K, {
             space: 16,
             children: [
-                /*#__PURE__*/ _jsx(Text3, {
-                    regular: true,
+                /* @__PURE__ */ c(V, {
+                    regular: !0,
                     as: "div",
-                    children: /*#__PURE__*/ _jsx("div", {
+                    children: /* @__PURE__ */ c("div", {
                         style: {
                             position: "relative",
                             top: -2
                         },
-                        children: radio
+                        children: t
                     })
                 }),
-                /*#__PURE__*/ _jsx(Text3, {
-                    regular: true,
+                /* @__PURE__ */ c(V, {
+                    regular: !0,
                     as: "div",
-                    id: labelId,
-                    children: /*#__PURE__*/ _jsx("span", {
-                        className: disabled ? classes.disabled : "",
-                        children: rest.children
+                    id: r,
+                    children: /* @__PURE__ */ c("span", {
+                        className: i ? n.disabled : "",
+                        children: h.children
                     })
                 })
             ]
         })
-    })));
-};
-export var RadioGroup = function(props) {
-    var ref = useControlProps({
-        name: props.name,
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onChange: props.onChange,
-        disabled: props.disabled
-    }), valueContext = ref.value, defaultValue = ref.defaultValue, onChangeContext = ref.onChange, focusableRef = ref.focusableRef, disabled = ref.disabled;
-    var ref2;
-    // This state is needed because the component should be able to work outside a Form context
-    var ref3 = _slicedToArray(React.useState((ref2 = valueContext !== null && valueContext !== void 0 ? valueContext : defaultValue) !== null && ref2 !== void 0 ? ref2 : ""), 2), value1 = ref3[0], setValue = ref3[1];
-    // Propagate context value to inner state
-    React.useEffect(function() {
-        if (valueContext !== undefined) {
-            setValue(valueContext);
-        }
+    }));
+}, ee = function(e) {
+    var n, g;
+    var ref = E({
+        name: e.name,
+        value: e.value,
+        defaultValue: e.defaultValue,
+        onChange: e.onChange,
+        disabled: e.disabled
+    }), o = ref.value, x = ref.defaultValue, C = ref.onChange, h = ref.focusableRef, i = ref.disabled, ref1 = _slicedToArray(d.useState((n = o != null ? o : x) != null ? n : ""), 2), s = ref1[0], p = ref1[1];
+    d.useEffect(function() {
+        o !== void 0 && p(o);
     }, [
-        valueContext
+        o
     ]);
-    var onChange = function(value) {
-        setValue(value);
-        onChangeContext(value);
-    };
-    var ref4 = _slicedToArray(React.useState(null), 2), firstRadioValue = ref4[0], setFirstRadioValue = ref4[1];
-    var ref5 = React.useRef(null);
-    var selectNext = function() {
-        if (ref5.current) {
-            var checkedRadio = ref5.current.querySelector("[role=radio][aria-checked=true]");
-            var allRadios = Array.from(ref5.current.querySelectorAll("[role=radio]"));
-            if (allRadios.length === 0) {
-                return;
-            }
-            var index = checkedRadio ? allRadios.indexOf(checkedRadio) : 0;
-            var nextIndex = (index + 1) % allRadios.length;
-            var nextRadio = allRadios[nextIndex];
-            var value = nextRadio.dataset.value;
-            if (value) {
-                nextRadio.focus();
-                onChange(value);
-            }
+    var f = function(a) {
+        p(a), C(a);
+    }, ref2 = _slicedToArray(d.useState(null), 2), y = ref2[0], k = ref2[1], r = d.useRef(null), R = function() {
+        if (r.current) {
+            var a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (t.length === 0) return;
+            var S = ((a ? t.indexOf(a) : 0) + 1) % t.length, b = t[S], m = b.dataset.value;
+            m && (b.focus(), f(m));
         }
-    };
-    var selectPrev = function() {
-        if (ref5.current) {
-            var checkedRadio = ref5.current.querySelector("[role=radio][aria-checked=true]");
-            var allRadios = Array.from(ref5.current.querySelectorAll("[role=radio]"));
-            if (allRadios.length === 0) {
-                return;
-            }
-            var index = checkedRadio ? allRadios.indexOf(checkedRadio) : 0;
-            var prevIndex = (allRadios.length + index - 1) % allRadios.length;
-            var prevRadio = allRadios[prevIndex];
-            var value = prevRadio.dataset.value;
-            if (value) {
-                prevRadio.focus();
-                onChange(value);
-            }
+    }, u = function() {
+        if (r.current) {
+            var a = r.current.querySelector("[role=radio][aria-checked=true]"), t = Array.from(r.current.querySelectorAll("[role=radio]"));
+            if (t.length === 0) return;
+            var l = a ? t.indexOf(a) : 0, S = (t.length + l - 1) % t.length, b = t[S], m = b.dataset.value;
+            m && (b.focus(), f(m));
         }
     };
-    React.useEffect(function() {
-        if (ref5.current) {
-            var radio = ref5.current.querySelector("[role=radio]");
-            if (radio) {
-                var _value;
-                setFirstRadioValue((_value = radio.dataset.value) !== null && _value !== void 0 ? _value : null);
-            }
+    d.useEffect(function() {
+        var a;
+        if (r.current) {
+            var t = r.current.querySelector("[role=radio]");
+            t && k((a = t.dataset.value) != null ? a : null);
         }
     }, []);
-    var ref6;
-    var focusableValue = (ref6 = value1 !== null && value1 !== void 0 ? value1 : firstRadioValue) !== null && ref6 !== void 0 ? ref6 : null;
-    return /*#__PURE__*/ _jsx("div", {
-        ref: combineRefs(ref5, focusableRef),
+    var v = (g = s != null ? s : y) != null ? g : null;
+    return /* @__PURE__ */ c("div", {
+        ref: B(r, h),
         role: "radiogroup",
-        "aria-labelledby": props["aria-labelledby"],
-        children: /*#__PURE__*/ _jsx(RadioContext.Provider, {
+        "aria-labelledby": e["aria-labelledby"],
+        children: /* @__PURE__ */ c(A.Provider, {
             value: {
-                disabled: disabled,
-                selectedValue: value1 !== null && value1 !== void 0 ? value1 : defaultValue,
-                focusableValue: focusableValue,
-                select: onChange,
-                selectNext: selectNext,
-                selectPrev: selectPrev
+                disabled: i,
+                selectedValue: s != null ? s : x,
+                focusableValue: v,
+                select: f,
+                selectNext: R,
+                selectPrev: u
             },
-            children: props.children
+            children: e.children
         })
     });
 };
-export default RadioButton;
+export { ee as RadioGroup, _ as default, U as useRadioContext };

package/dist-es/responsive-layout.js

@@ -26,18 +26,38 @@ function _objectSpread(target) {
     }
     return target;
 }
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import classnames from "classnames";
-import { useScreenSize } from "./hooks";
-import { getPrefixedDataAttributes } from "./utils/dom";
-import ContainerTypeContext from "./container-type-context";
-var MOBILE_SIDE_MARGIN = 16;
-var TABLET_SIDE_MARGIN = 32;
-var SMALL_DESKTOP_SIDE_MARGIN = 40;
-var LARGE_DESKTOP_MAX_WIDTH = 1224;
-var useStyles = createUseStyles(function(theme) {
+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;
+}
+import * as c from "react";
+import { createUseStyles as x } from "./jss.js";
+import r from "classnames";
+import { useScreenSize as v } from "./hooks.js";
+import { getPrefixedDataAttributes as y } from "./utils/dom.js";
+import h from "./container-type-context.js";
+import { jsx as e } from "./_virtual/jsx-runtime.js";
+var a = 16, i = 32, l = 40, M = 1224, S = x(function(t) {
     var _obj;
     return {
         container: {
@@ -47,50 +67,44 @@ var useStyles = createUseStyles(function(theme) {
             margin: "auto",
             paddingLeft: "env(safe-area-inset-left)",
             paddingRight: "env(safe-area-inset-right)"
-        }, _defineProperty(_obj, theme.mq.largeDesktop, {
-            width: LARGE_DESKTOP_MAX_WIDTH
-        }), _defineProperty(_obj, theme.mq.desktop, {
-            width: "calc(100% - ".concat(SMALL_DESKTOP_SIDE_MARGIN * 2, "px)"),
-            margin: "0 ".concat(SMALL_DESKTOP_SIDE_MARGIN, "px")
-        }), _defineProperty(_obj, theme.mq.tablet, {
-            width: "calc(100% - ".concat(TABLET_SIDE_MARGIN * 2, "px)"),
-            margin: "0 ".concat(TABLET_SIDE_MARGIN, "px")
-        }), _defineProperty(_obj, theme.mq.mobile, {
-            width: "calc(100% - ".concat(MOBILE_SIDE_MARGIN * 2, "px)"),
-            margin: "0 ".concat(MOBILE_SIDE_MARGIN, "px")
+        }, _defineProperty(_obj, t.mq.largeDesktop, {
+            width: M
+        }), _defineProperty(_obj, t.mq.desktop, {
+            width: "calc(100% - ".concat(l * 2, "px)"),
+            margin: "0 ".concat(l, "px")
+        }), _defineProperty(_obj, t.mq.tablet, {
+            width: "calc(100% - ".concat(i * 2, "px)"),
+            margin: "0 ".concat(i, "px")
+        }), _defineProperty(_obj, t.mq.mobile, {
+            width: "calc(100% - ".concat(a * 2, "px)"),
+            margin: "0 ".concat(a, "px")
         }), _obj),
         layoutFullWidth: _defineProperty({
             width: "100%",
             margin: 0
-        }, theme.mq.largeDesktop, {
+        }, t.mq.largeDesktop, {
             width: "auto",
             margin: "auto"
         })
     };
-});
-var ResponsiveLayoutMarginContext = /*#__PURE__*/ React.createContext(0);
-export var useResonsiveLayoutMargin = function() {
-    return React.useContext(ResponsiveLayoutMarginContext);
-};
-var ResponsiveLayout = function(param) {
-    var children = param.children, className = param.className, fullWidth = param.fullWidth, dataAttributes = param.dataAttributes;
-    var classes = useStyles();
-    var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
-    var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
-    var containerType = isMobile ? "mobile-column" : isTablet ? "tablet-column" : "desktop-wide-column";
-    return /*#__PURE__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
-        value: sideMargin,
-        children: /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
-            value: containerType,
-            children: /*#__PURE__*/ _jsx("div", _objectSpread({
-                className: classnames(classes.container, className)
-            }, getPrefixedDataAttributes(dataAttributes), {
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
-                    children: children
+}), m = /*#__PURE__*/ c.createContext(0), E = function() {
+    return c.useContext(m);
+}, I = function(param) {
+    var t = param.children, d = param.className, u = param.fullWidth, p = param.dataAttributes;
+    var o = S(), ref = v(), n = ref.isMobile, s = ref.isTablet, g = n ? a : s ? i : null, f = n ? "mobile-column" : s ? "tablet-column" : "desktop-wide-column";
+    return /* @__PURE__ */ e(m.Provider, {
+        value: g,
+        children: /* @__PURE__ */ e(h.Provider, {
+            value: f,
+            children: /* @__PURE__ */ e("div", _objectSpreadProps(_objectSpread({
+                className: r(o.container, d)
+            }, y(p)), {
+                children: /* @__PURE__ */ e("div", {
+                    className: r(o.layout, _defineProperty({}, o.layoutFullWidth, u)),
+                    children: t
                 })
             }))
         })
     });
 };
-export default ResponsiveLayout;
+export { I as default, E as useResonsiveLayoutMargin };

package/dist-es/screen-reader-only.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-var useStyles = createUseStyles(function() {
+import * as s from "react";
+import { createUseStyles as t } from "./jss.js";
+import { jsx as a } from "./_virtual/jsx-runtime.js";
+var l = t(function() {
     return {
         screenReaderOnly: {
             position: "absolute",
@@ -15,21 +15,18 @@ var useStyles = createUseStyles(function() {
             userSelect: "none"
         }
     };
-});
-var ScreenReaderOnly = function(param) {
-    var children = param.children;
-    var classes = useStyles();
-    if (React.Children.count(children) === 1) {
-        var element = React.Children.only(children);
-        if (/*#__PURE__*/ React.isValidElement(element)) {
-            return /*#__PURE__*/ React.cloneElement(element, {
-                className: element.props.className ? element.props.className + " " + classes.screenReaderOnly : classes.screenReaderOnly
-            });
-        }
+}), i = function(param) {
+    var r = param.children;
+    var n = l();
+    if (s.Children.count(r) === 1) {
+        var e = s.Children.only(r);
+        if (/*#__PURE__*/ s.isValidElement(e)) return /*#__PURE__*/ s.cloneElement(e, {
+            className: e.props.className ? e.props.className + " " + n.screenReaderOnly : n.screenReaderOnly
+        });
     }
-    return /*#__PURE__*/ _jsx("div", {
-        className: classes.screenReaderOnly,
-        children: children
+    return /* @__PURE__ */ a("div", {
+        className: n.screenReaderOnly,
+        children: r
     });
 };
-export default ScreenReaderOnly;
+export { i as default };