@telefonica/mistica 12.11.0 → 12.12.0

package/dist/chip.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return A;
+        return q;
     }
 });
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -16,6 +16,7 @@ var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 var _cssJs = require("./utils/css.js");
 var _chipCssMisticaJs = require("./chip.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -35,31 +36,72 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-var A = function A(t) {
-    var ref = (0, _hooksJs.useTheme)(), l = ref.texts, s = ref.isDarkMode, m = ref.colors, i = t.Icon, d = t.children, f = t.id, r = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+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;
+}
+var q = function q(param) {
+    var t = param.Icon, d = param.children, p = param.id, i = param.dataAttributes, o = param.active, n = param.onClose;
+    var ref = (0, _hooksJs.useTheme)(), f = ref.texts, u = ref.isDarkMode, h = ref.colors, s = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 4,
-                className: t.active ? _chipCssMisticaJs.iconActive : _chipCssMisticaJs.icon,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
+                className: o ? _chipCssMisticaJs.iconActive : _chipCssMisticaJs.icon,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(t, {
                     color: "currentColor",
                     size: (0, _cssJs.pxToRem)(16)
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                id: f,
+                id: p,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
                 children: d
             })
         ]
-    }), n = i ? 8 : 12;
-    if (t.onClose) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, {
+    }), a = t ? 8 : 12;
+    if (n) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, _objectSpreadProps(_objectSpread({
         className: _chipCssMisticaJs.chipVariants.default,
-        paddingLeft: n,
+        paddingLeft: a
+    }, (0, _domJs.getPrefixedDataAttributes)(i, "Chip")), {
         children: [
-            r,
+            s,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 4,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
@@ -69,25 +111,26 @@ var A = function A(t) {
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": l.closeButtonLabel,
+                    "aria-label": f.closeButtonLabel,
                     onPress: function onPress() {
-                        return t.onClose();
+                        return n();
                     },
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                         size: 16,
-                        color: m.neutralMedium
+                        color: h.neutralMedium
                     })
                 })
             })
         ]
-    });
+    }));
     {
-        var u = t.active !== void 0;
-        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[t.active ? "active" : "default"], _defineProperty({}, _chipCssMisticaJs.chipInteractiveVariants[s ? "dark" : "light"], u)),
-            paddingLeft: n,
-            paddingRight: 12,
-            children: r
-        });
+        var g = o !== void 0;
+        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, _objectSpreadProps(_objectSpread({
+            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[o ? "active" : "default"], _defineProperty({}, _chipCssMisticaJs.chipInteractiveVariants[u ? "dark" : "light"], g)),
+            paddingLeft: a,
+            paddingRight: 12
+        }, (0, _domJs.getPrefixedDataAttributes)(i, "Chip")), {
+            children: s
+        }));
     }
 };

package/dist/chip.js.flow

@@ -1,21 +1,26 @@
 // @flow
 
 import * as React from "react";
-import type { IconProps } from "./utils/types";
-declare type ChipBaseProps = {
+import type { ExclusifyUnion } from "./utils/utility-types";
+import type { DataAttributes, IconProps } from "./utils/types";
+declare type SimpleChipProps = {
   children: string,
   Icon?: React.ComponentType<IconProps>,
   id?: string,
+  dataAttributes?: DataAttributes,
 };
-declare type SimpleChipProps = { ...$Exact<ChipBaseProps> };
 declare type ClosableChipProps = {
-  ...$Exact<ChipBaseProps>,
+  ...$Exact<SimpleChipProps>,
+
   onClose: () => void,
 };
 declare type ToggleChipProps = {
-  ...$Exact<ChipBaseProps>,
+  ...$Exact<SimpleChipProps>,
+
   active: boolean,
 };
-declare type ChipProps = SimpleChipProps | ClosableChipProps | ToggleChipProps;
+declare type ChipProps = ExclusifyUnion<
+  SimpleChipProps | ClosableChipProps | ToggleChipProps
+>;
 declare var Chip: React.ComponentType<ChipProps>;
 declare export default typeof Chip;

package/dist/circle.css-mistica.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "circle", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./circle.css.ts.vanilla.js");
-var r = "_1wpwyyp1 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfba";
+var r = "_1wpwyyp1 _1y2v1nf4y _1y2v1nf5d _1y2v1nf57 _1y2v1nf8x";

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

@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./credit-card-number-field.css.ts.vanilla.js");
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf77", f = {
-    default: "yvyo3q4 _1y2v1nf76 yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf76 yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf4u", f = {
+    default: "yvyo3q4 _1y2v1nf4t yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf4t yvyo3q6"
 };

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

@@ -18,4 +18,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./cvv-field.css.ts.vanilla.js");
-var v = "_10ijton2 _1y2v1nf1i", i = "_1y2v1nf7b _1y2v1nf7q";
+var v = "_10ijton2 _1y2v1nf1i", i = "_1y2v1nf4y _1y2v1nf5d";

package/dist/date-time-picker.js

@@ -13,7 +13,7 @@ var _textFieldBaseJs = require("./text-field-base.js");
 var _iconCalendarRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular.js"));
 var _reactDatetime = /*#__PURE__*/ _interopRequireDefault(require("react-datetime"));
 var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
-var _textFieldComponentsJs = require("./text-field-components.js");
+var _textFieldComponentsCssMisticaJs = require("./text-field-components.css-mistica.js");
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _domJs = require("./utils/dom.js");
 var _hooksJs = require("./hooks.js");
@@ -206,7 +206,7 @@ var Q = function Q(_param) {
         var p;
         var ref = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, tmp = ref.top, e = tmp === void 0 ? 0 : tmp, tmp1 = ref.bottom, o = tmp1 === void 0 ? 0 : tmp1, tmp2 = ref.left, i = tmp2 === void 0 ? 0 : tmp2, P = 260 + o < window.innerHeight;
         return {
-            width: _textFieldComponentsJs.DEFAULT_WIDTH,
+            width: _textFieldComponentsCssMisticaJs.DEFAULT_WIDTH,
             top: P ? o : e - k,
             left: i,
             position: "absolute",

package/dist/dialog.css-mistica.js

@@ -28,10 +28,10 @@ _export(exports, {
         return d;
     },
     modalContent: function() {
-        return o;
+        return r;
     },
     modalOpacityLayer: function() {
-        return r;
+        return o;
     },
     variants: function() {
         return t;
@@ -42,7 +42,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./dialog.css.ts.vanilla.js");
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf84", l = "_3dl29lj _1y2v1nf7x _1y2v1nfas", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf83 _1y2v1nf8h _1y2v1nf8v _1y2v1nf99 _1y2v1nf77 _1y2v1nfbj _1y2v1nfcb", o = "_3dl29la _1y2v1nf2f _1y2v1nfbd", r = "_3dl29l5 _1y2v1nf78 _1y2v1nf7b _1y2v1nf7k _1y2v1nf7q _1y2v1nf7h _1y2v1nfbj _1y2v1nfcb _1y2v1nfcp _1y2v1nfbx _1y2v1nf2i", t = {
-    dialog: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf8w _1y2v1nf9a _1y2v1nf86 _1y2v1nf8i",
-    default: "_3dl29ld _1y2v1nf7b _1y2v1nf7h _1y2v1nf7n _1y2v1nf84 _1y2v1nf8i _1y2v1nf8w _1y2v1nf9a"
-}, i = "_3dl29l3 _1y2v1nf76";
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf5r", l = "_3dl29lj _1y2v1nf5k _1y2v1nf8f", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf5q _1y2v1nf64 _1y2v1nf6i _1y2v1nf6w _1y2v1nf4u _1y2v1nf96 _1y2v1nf9y", r = "_3dl29la _1y2v1nf2f _1y2v1nf90", o = "_3dl29l5 _1y2v1nf4v _1y2v1nf4y _1y2v1nf57 _1y2v1nf5d _1y2v1nf54 _1y2v1nf96 _1y2v1nf9y _1y2v1nfac _1y2v1nf9k _1y2v1nf2i", t = {
+    dialog: "_3dl29ld _1y2v1nf4y _1y2v1nf54 _1y2v1nf5a _1y2v1nf6j _1y2v1nf6x _1y2v1nf5t _1y2v1nf65",
+    default: "_3dl29ld _1y2v1nf4y _1y2v1nf54 _1y2v1nf5a _1y2v1nf5r _1y2v1nf65 _1y2v1nf6j _1y2v1nf6x"
+}, i = "_3dl29l3 _1y2v1nf4t";

package/dist/dialog.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
 import type { RendersNullableElement } from './utils/types';
+import type { ExclusifyUnion } from './utils/utility-types';
 interface BaseDialogProps {
     className?: string;
     title?: string;
@@ -11,18 +12,9 @@ interface BaseDialogProps {
     destructive?: boolean;
 }
 interface AlertProps extends BaseDialogProps {
-    subtitle?: undefined;
-    extra?: undefined;
-    forceWeb?: undefined;
     showClose?: boolean;
-    showCancel?: never;
-    cancelText?: never;
-    onCancel?: never;
 }
 interface ConfirmProps extends BaseDialogProps {
-    subtitle?: undefined;
-    extra?: undefined;
-    forceWeb?: undefined;
     showClose?: boolean;
     showCancel?: boolean;
     cancelText?: string;
@@ -38,7 +30,7 @@ interface ExtendedDialogProps extends BaseDialogProps {
     onCancel?: () => void;
     link?: RendersNullableElement<typeof ButtonLink>;
 }
-declare type DialogProps = AlertProps | ConfirmProps | ExtendedDialogProps;
+declare type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDialogProps>;
 declare type DialogRootProps = {
     children?: React.ReactNode;
 };

package/dist/dialog.js

@@ -439,6 +439,7 @@ var A = function A(e) {
                     onClick: B,
                     className: (0, _classnames.default)(_dialogCssMisticaJs.modalOpacityLayer, _defineProperty({}, _dialogCssMisticaJs.closedOpactityLayer, a)),
                     role: "dialog",
+                    "data-component-name": "Dialog",
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                         onClick: function onClick(h) {
                             return h.stopPropagation();

package/dist/dialog.js.flow

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { ButtonLink } from "./button";
 import type { RendersNullableElement } from "./utils/types";
+import type { ExclusifyUnion } from "./utils/utility-types";
 declare type BaseDialogProps = {
   className?: string,
   title?: string,
@@ -14,13 +15,12 @@ declare type BaseDialogProps = {
 };
 declare type AlertProps = {
   ...$Exact<BaseDialogProps>,
+
   showClose?: boolean,
-  showCancel?: empty,
-  cancelText?: empty,
-  onCancel?: empty,
 };
 declare type ConfirmProps = {
   ...$Exact<BaseDialogProps>,
+
   showClose?: boolean,
   showCancel?: boolean,
   cancelText?: string,
@@ -38,7 +38,9 @@ declare type ExtendedDialogProps = {
   onCancel?: () => void,
   link?: RendersNullableElement<typeof ButtonLink>,
 };
-declare type DialogProps = AlertProps | ConfirmProps | ExtendedDialogProps;
+declare type DialogProps = ExclusifyUnion<
+  AlertProps | ConfirmProps | ExtendedDialogProps
+>;
 declare type DialogRootProps = {
   children?: React.Node,
 };

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "variants", {
     enumerable: true,
     get: function() {
-        return n;
+        return y;
     }
 });
 require("./sprinkles.css.ts.vanilla.js");
+require("./text-field-components.css.ts.vanilla.js");
 require("./double-field.css.ts.vanilla.js");
-var n = {
-    default: "skrulh1 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9i",
-    fullWidth: "skrulh2 _1y2v1nf7b _1y2v1nf7g _1y2v1nf9i"
+var y = {
+    default: "skrulh1 _1y2v1nf4y _1y2v1nf53 _1y2v1nf75",
+    fullWidth: "skrulh2 _1y2v1nf4y _1y2v1nf53 _1y2v1nf75"
 };

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

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state-card.css.ts.vanilla.js");
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf9t _1y2v1nfa8", v = "_1azor6p2 _1y2v1nf7d _1y2v1nfaa";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf7g _1y2v1nf7v", v = "_1azor6p2 _1y2v1nf50 _1y2v1nf7x";

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

@@ -36,9 +36,9 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf7b _1y2v1nf74", v = {
+var n = "_13fzrua2 _1y2v1nf4y _1y2v1nf4s", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf9v _1y2v1nfaa", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf9y", o = "_13fzrua5", u = "_13fzruab _1y2v1nf7d", t = {
+}, e = "_13fzrua9 _1y2v1nf7i _1y2v1nf7x", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf7l", o = "_13fzrua5", u = "_13fzruab _1y2v1nf50", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/empty-state.js

@@ -80,11 +80,11 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 var Z = function Z(param) {
-    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, t = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
-    var ref = (0, _hooksJs.useTheme)(), l = ref.colors, u = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)(), s = t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
+    var p = param.title, f = param.description, e = param.button, v = param.buttonLink, a = param.largeImageUrl, i = param.imageUrl, n = param.icon, g = param["aria-label"], h = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), m = ref.colors, u = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)(), s = i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", {
         className: _emptyStateCssMisticaJs.smallImage,
         alt: "",
-        src: t
+        src: i
     }) : void 0, y = _objectSpreadProps(_objectSpread({}, (e == null ? void 0 : e.type) === _buttonJs.ButtonPrimary ? {
         primaryButton: e
     } : {
@@ -99,7 +99,7 @@ var Z = function Z(param) {
         style: (0, _dynamic.assignInlineVars)(_defineProperty({}, _emptyStateCssMisticaJs.vars.backgroundColor, o && !u ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.backgroundContainer)),
         "aria-label": g,
         role: "region"
-    }, (0, _domJs.getPrefixedDataAttributes)(h)), {
+    }, (0, _domJs.getPrefixedDataAttributes)(h, "EmptyState")), {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
@@ -123,7 +123,7 @@ var Z = function Z(param) {
                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                     regular: !0,
                                     as: "p",
-                                    color: o ? l.inverse : l.textSecondary,
+                                    color: o ? m.inverse : m.textSecondary,
                                     children: f
                                 })
                             ]

package/dist/fade-in.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 declare type Props = {
     children?: React.ReactNode;
     className?: string;
     delay?: string;
     duration?: string;
+    dataAttributes?: DataAttributes;
 };
 declare const FadeIn: React.FC<Props>;
 export default FadeIn;

package/dist/fade-in.js

@@ -5,15 +5,68 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return l;
+        return D;
     }
 });
 var _fadeInCssMisticaJs = require("./fade-in.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-var r = "0.3s", l = function l(param) {
-    var i = param.children, tmp = param.className, n = tmp === void 0 ? "" : tmp, tmp1 = param.duration, t = tmp1 === void 0 ? r : tmp1, tmp2 = param.delay, a = tmp2 === void 0 ? "0" : tmp2;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: "".concat(_fadeInCssMisticaJs.wrapper, " ").concat(n),
+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;
+}
+var s = "0.3s", D = function D(param) {
+    var i = param.children, tmp = param.className, e = tmp === void 0 ? "" : tmp, tmp1 = param.duration, t = tmp1 === void 0 ? s : tmp1, tmp2 = param.delay, a = tmp2 === void 0 ? "0" : tmp2, n = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(n, "FadeIn")), {
+        className: "".concat(_fadeInCssMisticaJs.wrapper, " ").concat(e),
         style: {
             animationDelay: a,
             WebkitAnimationDelay: a,
@@ -21,5 +74,5 @@ var r = "0.3s", l = function l(param) {
             WebkitAnimationDuration: t
         },
         children: i
-    });
+    }));
 };

package/dist/fade-in.js.flow

@@ -1,11 +1,13 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare type Props = {
   children?: React.Node,
   className?: string,
   delay?: string,
   duration?: string,
+  dataAttributes?: DataAttributes,
 };
 declare var FadeIn: React.ComponentType<Props>;
 declare export default typeof FadeIn;

package/dist/feedback.css-mistica.js

@@ -33,4 +33,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf7b _1y2v1nf9y _1y2v1nf9i", r = "_1y2v1nfbe _1y2v1nf7b _1y2v1nf7n", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf4y _1y2v1nf7l _1y2v1nf75", r = "_1y2v1nf91 _1y2v1nf4y _1y2v1nf5a", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";