@telefonica/mistica 14.5.0 → 14.7.0

package/dist/chip.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>w
+    get: ()=>H
 });
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 const _hooksJs = require("./hooks.js");
@@ -16,6 +16,7 @@ const _cssJs = require("./utils/css.js");
 const _chipCssMisticaJs = require("./chip.css-mistica.js");
 const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _domJs = require("./utils/dom.js");
+const _themeVariantContextJs = require("./theme-variant-context.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -74,9 +75,9 @@ function _objectSpreadProps(target, source) {
     }
     return target;
 }
-const w = (param)=>{
-    let { Icon: t , children: d , id: p , dataAttributes: i , active: o , onClose: s  } = param;
-    const { texts: f , isDarkMode: u  } = (0, _hooksJs.useTheme)(), n = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+const H = (param)=>{
+    let { Icon: t , children: p , id: f , dataAttributes: n , active: o , onClose: a  } = param;
+    const { texts: u , isDarkMode: h  } = (0, _hooksJs.useTheme)(), s = (0, _themeVariantContextJs.useThemeVariant)() === "alternative", m = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
             t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 4,
@@ -87,20 +88,20 @@ const w = (param)=>{
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                id: p,
+                id: f,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
-                children: d
+                children: p
             })
         ]
-    }), a = t ? 8 : 12;
-    if (s) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, _objectSpreadProps(_objectSpread({
-        className: _chipCssMisticaJs.chipVariants.default,
-        paddingLeft: a
-    }, (0, _domJs.getPrefixedDataAttributes)(i, "Chip")), {
+    }), l = t ? 8 : 12;
+    if (a) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, _objectSpreadProps(_objectSpread({
+        className: s ? _chipCssMisticaJs.chipVariants.overAlternative : _chipCssMisticaJs.chipVariants.default,
+        paddingLeft: l
+    }, (0, _domJs.getPrefixedDataAttributes)(n, "Chip")), {
         children: [
-            n,
+            m,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 4,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
@@ -110,8 +111,8 @@ const w = (param)=>{
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": f.closeButtonLabel,
-                    onPress: ()=>s(),
+                    "aria-label": u.closeButtonLabel,
+                    onPress: ()=>a(),
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                         size: 16,
                         color: _skinContractCssMisticaJs.vars.colors.neutralMedium
@@ -121,15 +122,15 @@ const w = (param)=>{
         ]
     }));
     {
-        const h = o !== void 0;
+        const g = o !== void 0;
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, _objectSpreadProps(_objectSpread({
-            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[o ? "active" : "default"], {
-                [_chipCssMisticaJs.chipInteractiveVariants[u ? "dark" : "light"]]: h
+            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[o ? "active" : s ? "overAlternative" : "default"], {
+                [_chipCssMisticaJs.chipInteractiveVariants[h ? "dark" : "light"]]: g
             }),
-            paddingLeft: a,
+            paddingLeft: l,
             paddingRight: 12
-        }, (0, _domJs.getPrefixedDataAttributes)(i, "Chip")), {
-            children: n
+        }, (0, _domJs.getPrefixedDataAttributes)(n, "Chip")), {
+            children: m
         }));
     }
 };

package/dist/circle.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "circle", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./circle.css.ts.vanilla.js");
-var p = "_1wpwyyp1 _1y2v1nf5i _1y2v1nf5x _1y2v1nf5r _1y2v1nf9h";
+var p = "_1wpwyyp1 _1y2v1nf5o _1y2v1nf63 _1y2v1nf5x _1y2v1nf9n";

package/dist/credit-card-number-field.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./credit-card-number-field.css.ts.vanilla.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5e", f = {
-    default: "yvyo3q4 _1y2v1nf5d yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf5d yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5k", f = {
+    default: "yvyo3q4 _1y2v1nf5j yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf5j yvyo3q6"
 };

package/dist/cvv-field.css-mistica.js

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    cvvText: ()=>v,
-    tooltipContainer: ()=>i
+    cvvText: ()=>r,
+    tooltipContainer: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./cvv-field.css.ts.vanilla.js");
-var v = "_10ijton2 _1y2v1nf1o", i = "_1y2v1nf5i _1y2v1nf5x";
+var r = "_10ijton2 _1y2v1nf1r", v = "_1y2v1nf5o _1y2v1nf63";

package/dist/date-time-picker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
     enumerable: true,
-    get: ()=>Q
+    get: ()=>Z
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _textFieldBaseJs = require("./text-field-base.js");
@@ -17,6 +17,7 @@ const _domJs = require("./utils/dom.js");
 const _hooksJs = require("./hooks.js");
 const _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 const _dateTimePickerCssMisticaJs = require("./date-time-picker.css-mistica.js");
+const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -143,24 +144,24 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 const g = navigator.language.toLocaleLowerCase().split("-")[0];
 Promise.resolve(/* webpackChunkName: "moment-locale" */ `moment/locale/${g}`).then((p)=>/*#__PURE__*/ _interopRequireWildcard(require(p))).finally(()=>{});
-const Q = (_param)=>{
+const Z = (_param)=>{
     var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _objectWithoutProperties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: k , ref: v  } = (0, _hooksJs.useElementDimensions)(), i = (e)=>{
+    const [m, x] = _react.useState(!1), { texts: b  } = (0, _hooksJs.useTheme)(), n = _react.useRef(null), { height: v , ref: k  } = (0, _hooksJs.useElementDimensions)(), i = (e)=>{
         t.disabled || x(e);
     }, w = ()=>{
         var p;
         const { top: e = 0 , bottom: o = 0 , left: a = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
         return {
             width: _textFieldComponentsCssMisticaJs.DEFAULT_WIDTH,
-            top: P ? o : e - k,
+            top: P ? o : e - v,
             left: a,
             position: "absolute",
-            borderRadius: 8,
+            borderRadius: _skinContractCssMisticaJs.vars.borderRadii.input,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
@@ -213,7 +214,7 @@ const Q = (_param)=>{
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    ref: v,
+                    ref: k,
                     style: w(),
                     className: _dateTimePickerCssMisticaJs.reactDatePicker,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactDatetime.default, {

package/dist/dialog.css-mistica.js

@@ -14,15 +14,15 @@ _export(exports, {
     dialogActions: ()=>f,
     dialogContent: ()=>l,
     iconContainer: ()=>a,
-    modalCloseButtonContainer: ()=>d,
-    modalContent: ()=>o,
+    modalCloseButtonContainer: ()=>o,
+    modalContent: ()=>d,
     modalOpacityLayer: ()=>r,
     variants: ()=>t,
-    wrapper: ()=>i
+    wrapper: ()=>e
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./dialog.css.ts.vanilla.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6b", l = "_3dl29lj _1y2v1nf64 _1y2v1nf8z", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6a _1y2v1nf6o _1y2v1nf72 _1y2v1nf7g _1y2v1nf5e _1y2v1nf9q _1y2v1nfai", o = "_3dl29la _1y2v1nf2p _1y2v1nf9k", r = "_3dl29l5 _1y2v1nf5f _1y2v1nf5i _1y2v1nf5r _1y2v1nf5x _1y2v1nf5o _1y2v1nf9q _1y2v1nfai _1y2v1nfaw _1y2v1nfa4 _1y2v1nf2t", t = {
-    dialog: "_3dl29ld _1y2v1nf5i _1y2v1nf5o _1y2v1nf5u _1y2v1nf73 _1y2v1nf7h _1y2v1nf6d _1y2v1nf6p",
-    default: "_3dl29ld _1y2v1nf5i _1y2v1nf5o _1y2v1nf5u _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h"
-}, i = "_3dl29l3 _1y2v1nf5d";
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6h", l = "_3dl29lj _1y2v1nf6a _1y2v1nf95", a = "_3dl29lm", o = "_3dl29l8 _1y2v1nf6g _1y2v1nf6u _1y2v1nf78 _1y2v1nf7m _1y2v1nf5k _1y2v1nfa6 _1y2v1nfay", d = "_3dl29la _1y2v1nf2s _1y2v1nf9v", r = "_3dl29l5 _1y2v1nf5l _1y2v1nf5o _1y2v1nf5x _1y2v1nf63 _1y2v1nf5u _1y2v1nfa6 _1y2v1nfay _1y2v1nfbc _1y2v1nfak _1y2v1nf2y", t = {
+    dialog: "_3dl29ld _1y2v1nf5o _1y2v1nf5u _1y2v1nf60 _1y2v1nf79 _1y2v1nf7n _1y2v1nf6j _1y2v1nf6v",
+    default: "_3dl29ld _1y2v1nf5o _1y2v1nf5u _1y2v1nf60 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf7n"
+}, e = "_3dl29l3 _1y2v1nf5j";

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonLink } from './button';
+import type { ButtonLink } from './button';
 import type { RendersNullableElement } from './utils/types';
 import type { ExclusifyUnion } from './utils/utility-types';
 interface BaseDialogProps {

package/dist/double-field.css-mistica.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "variants", {
     enumerable: true,
-    get: ()=>v
+    get: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./text-field-components.css.ts.vanilla.js");
 require("./double-field.css.ts.vanilla.js");
-var v = {
-    default: "skrulh1 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p",
-    fullWidth: "skrulh2 _1y2v1nf5i _1y2v1nf5n _1y2v1nf7p"
+var r = {
+    default: "skrulh1 _1y2v1nf5o _1y2v1nf5t _1y2v1nf7v",
+    fullWidth: "skrulh2 _1y2v1nf5o _1y2v1nf5t _1y2v1nf7v"
 };

package/dist/double-field.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import CreditCardExpirationField from './credit-card-expiration-field';
-import CvvField from './cvv-field';
-import DateField from './date-field';
-import DecimalField from './decimal-field';
-import EmailField from './email-field';
-import IntegerField from './integer-field';
-import PasswordField from './password-field';
-import PhoneNumberField from './phone-number-field';
-import Select from './select';
-import TextField from './text-field';
+import type CreditCardExpirationField from './credit-card-expiration-field';
+import type CvvField from './cvv-field';
+import type DateField from './date-field';
+import type DecimalField from './decimal-field';
+import type EmailField from './email-field';
+import type IntegerField from './integer-field';
+import type PasswordField from './password-field';
+import type PhoneNumberField from './phone-number-field';
+import type Select from './select';
+import type TextField from './text-field';
 import type { RendersElement } from './utils/types';
 type Field = RendersElement<typeof TextField> | RendersElement<typeof Select> | RendersElement<typeof CvvField> | RendersElement<typeof CreditCardExpirationField> | RendersElement<typeof DecimalField> | RendersElement<typeof IntegerField> | RendersElement<typeof DateField> | RendersElement<typeof PhoneNumberField> | RendersElement<typeof PasswordField> | RendersElement<typeof EmailField>;
 type Props = {

package/dist/empty-state-card.css-mistica.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>n,
+    container: ()=>a,
     iconContainer: ()=>o,
     image: ()=>v
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state-card.css.ts.vanilla.js");
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf80 _1y2v1nf8f", v = "_1azor6p2 _1y2v1nf5k _1y2v1nf8h";
+var a = "_1azor6p0", o = "_1azor6p4 _1y2v1nf86 _1y2v1nf8l", v = "_1azor6p2 _1y2v1nf5q _1y2v1nf8n";

package/dist/empty-state-card.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
 interface CommonProps {
     title: string;

package/dist/empty-state.css-mistica.js

@@ -20,9 +20,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf5i _1y2v1nf5c", v = {
+var n = "_13fzrua2 _1y2v1nf5o _1y2v1nf5i", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf82 _1y2v1nf8h", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf85", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5k", t = {
+}, e = "_13fzrua9 _1y2v1nf88 _1y2v1nf8n", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8b", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5q", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/empty-state.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from './button';
+import { ButtonPrimary } from './button';
+import type { ButtonSecondary, ButtonLink } from './button';
 import type { DataAttributes, RendersNullableElement } from './utils/types';
 interface BaseProps {
     title: string;

package/dist/feedback.css-mistica.js

@@ -11,12 +11,12 @@ function _export(target, all) {
 _export(exports, {
     container: ()=>n,
     desktopContainer: ()=>r,
-    desktopContent: ()=>t,
-    feedbackData: ()=>v,
-    feedbackDataAppear: ()=>p,
+    desktopContent: ()=>v,
+    feedbackData: ()=>t,
+    feedbackDataAppear: ()=>o,
     feedbackDataAppearActive: ()=>f,
-    innerContainer: ()=>i
+    innerContainer: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf5i _1y2v1nf85 _1y2v1nf7p", r = "_1y2v1nf9l _1y2v1nf5i _1y2v1nf5u", t = "gx6h6a1", v = "gx6h6a7", p = "gx6h6a5", f = "gx6h6a6", i = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf5o _1y2v1nf8b _1y2v1nf7v", r = "_1y2v1nf9w _1y2v1nf5o _1y2v1nf60", v = "gx6h6a1", t = "gx6h6a7", o = "gx6h6a5", f = "gx6h6a6", p = "gx6h6a4";

package/dist/feedback.d.ts

@@ -18,6 +18,7 @@ interface FeedbackScreenProps extends AssetFeedbackProps {
     hapticFeedback?: HapticFeedback;
     icon?: React.ReactNode;
     animateText?: boolean;
+    isInverse?: boolean;
 }
 export declare const FeedbackScreen: React.FC<FeedbackScreenProps>;
 export declare const SuccessFeedbackScreen: React.FC<AssetFeedbackProps>;