@telefonica/mistica 14.28.1 → 14.29.0

package/dist/counter.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+type Props = {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    onChangeValue?: (value: number) => void;
+    onRemove?: () => void;
+    children?: void;
+    disabled?: boolean;
+    dataAttributes?: DataAttributes;
+    removeLabel?: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    valueLabel?: string;
+};
+declare const Counter: React.FC<Props>;
+export default Counter;

package/dist/counter.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return hr;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _dom = require("./utils/dom.js");
+const _countercssmistica = require("./counter.css-mistica.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _text = require("./text.js");
+const _touchable = require("./touchable.js");
+const _iconsubtractregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-subtract-regular.js"));
+const _iconaddmoreregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-add-more-regular.js"));
+const _icontrashcanregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-trash-can-regular.js"));
+const _hooks = require("./hooks.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+function _interop_require_default(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 _interop_require_wildcard(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 _define_property(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 _object_spread(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) {
+            _define_property(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 _object_spread_props(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;
+}
+const x = 20, W = (param)=>{
+    let { value: h , defaultValue: b , min: m , max: s , onChangeValue: a  } = param;
+    const i = h !== void 0, f = _react.useCallback((n)=>n === void 0 ? m : Math.max(m, Math.min(s, n)), [
+        m,
+        s
+    ]), [e, p] = _react.useState(f(b)), v = (n)=>{
+        i || p(n), a == null || a(n);
+    };
+    return [
+        i ? f(h) : e,
+        v
+    ];
+}, X = (param)=>{
+    let { value: h , defaultValue: b , onChangeValue: m , onRemove: s , min: a , max: i , dataAttributes: f , disabled: e , removeLabel: p , increaseLabel: v , decreaseLabel: n , valueLabel: C  } = param;
+    const A = (0, _themevariantcontext.useThemeVariant)(), { texts: u  } = (0, _hooks.useTheme)(), l = a === void 0 ? 0 : a, d = Math.max(l, i === void 0 ? 999 : i), [t, T] = W({
+        value: h,
+        defaultValue: b,
+        min: l,
+        max: d,
+        onChangeValue: m
+    }), o = !!s && t === l, D = ()=>p === void 0 ? u.counterRemoveLabel : p, $ = ()=>v === void 0 ? u.counterIncreaseLabel : v, k = ()=>n === void 0 ? u.counterDecreaseLabel : n, z = ()=>`${t}, ${C === void 0 ? u.counterQuantity : C}${a !== void 0 ? `, ${u.counterMinValue} ${a}` : ""}${i !== void 0 ? `, ${u.counterMaxValue} ${i}` : ""}`;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        className: (0, _classnames.default)(_countercssmistica.counter, {
+            [_countercssmistica.disabled]: e
+        })
+    }, (0, _dom.getPrefixedDataAttributes)(f, "Counter")), {
+        style: {
+            border: `1px solid ${A === "inverse" ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+            space: 8,
+            alignItems: "center",
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
+                        [_countercssmistica.hasTrashIcon]: o,
+                        [_countercssmistica.isButtonDisabled]: e || !o && t === l,
+                        [_countercssmistica.disabled]: !e && !o && t === l
+                    }),
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
+                        className: _countercssmistica.button,
+                        disabled: !o && t === l || e,
+                        onPress: ()=>o ? s == null ? void 0 : s() : T(t - 1),
+                        "aria-label": o ? D() : k(),
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _countercssmistica.buttonBackground
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _countercssmistica.decreaseButtonIcon,
+                                "aria-hidden": o,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconsubtractregular.default, {
+                                    size: x,
+                                    color: t === l && !o || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _countercssmistica.trashButtonIcon,
+                                "aria-hidden": !o,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_icontrashcanregular.default, {
+                                    size: x,
+                                    color: _skincontractcssmistica.vars.colors.controlError
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _countercssmistica.valueContainer,
+                    style: {
+                        width: `${Math.max(3, String(d).length) * 1.25}ch`
+                    },
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+                        variant: "default",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                "aria-hidden": !0,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textPrimary,
+                                    children: t
+                                })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                                    children: z()
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(_countercssmistica.buttonContainer, {
+                        [_countercssmistica.isButtonDisabled]: e || t === d,
+                        [_countercssmistica.disabled]: !e && t === d
+                    }),
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
+                        className: _countercssmistica.button,
+                        disabled: t === d || e,
+                        onPress: ()=>T(t + 1),
+                        "aria-label": $(),
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _countercssmistica.buttonBackground
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _countercssmistica.defaultButtonIcon,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconaddmoreregular.default, {
+                                    size: x,
+                                    color: t === d || e ? _skincontractcssmistica.vars.colors.control : _skincontractcssmistica.vars.colors.controlActivated
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    }));
+}, hr = X;

package/dist/generated/mistica-icons/icon-add-more-filled.js

@@ -104,7 +104,7 @@ const a = (_param)=>{
     }, s), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: l,
-            d: "M12 4a1 1 0 0 0-1 1v5.498H6.002a1.002 1.002 0 1 0 0 2.004H11V18a1 1 0 1 0 2 0v-5.498h4.998a1.002 1.002 0 1 0 0-2.004H13V5a1 1 0 0 0-1-1Z"
+            d: "M12 2a1 1 0 0 0-1 1v7.498H3.002a1.002 1.002 0 1 0 0 2.004H11V21a1 1 0 1 0 2 0v-8.498h7.998a1.002 1.002 0 1 0 0-2.004H13V3a1 1 0 0 0-1-1Z"
         })
     }));
 }, h = a;

package/dist/generated/mistica-icons/icon-add-more-light.js

@@ -105,7 +105,7 @@ const v = (_param)=>{
     }, e), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: t,
-            d: "M11.676 4.35a.35.35 0 1 1 .7 0v6.8h4.414a.35.35 0 1 1 0 .7h-4.414v6.8a.35.35 0 1 1-.7 0v-6.8H5.35a.35.35 0 1 1 0-.7h6.326v-6.8Zm6.752 7.72a.573.573 0 0 0 .572-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
+            d: "M11.676 2.35a.35.35 0 1 1 .7 0v8.8h7.414a.35.35 0 1 1 0 .7h-7.414v9.8a.35.35 0 1 1-.7 0v-9.8H2.35a.35.35 0 1 1 0-.7h9.326v-8.8Zm9.752 9.72a.573.573 0 0 0 .572-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
         })
     })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: o,

package/dist/generated/mistica-icons/icon-add-more-regular.js

@@ -105,7 +105,7 @@ const v = (_param)=>{
     }, o), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: t,
-            d: "M18.524 11.525h-6.057v-6.05a.475.475 0 0 0-.951 0v6.05H5.459a.476.476 0 1 0 0 .95h6.057v6.05a.476.476 0 0 0 .95 0v-6.05h6.058a.475.475 0 1 0 0-.95Z"
+            d: "M21.321 11.321h-8.643V2.68a.679.679 0 1 0-1.357 0v8.642H2.679a.679.679 0 1 0 0 1.357h8.642v8.643a.679.679 0 0 0 1.357 0v-8.643h8.643a.679.679 0 1 0 0-1.357Z"
         })
     })) : a.match(/^o2/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: e,
@@ -115,7 +115,7 @@ const v = (_param)=>{
     }, o), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             fill: t,
-            d: "M11.42 4.72a.722.722 0 0 1 .716-.716.722.722 0 0 1 .716.716l.003 6.064 5.426.003a.722.722 0 0 1 .716.716.84.84 0 0 1-.22.552c-.127.127-.3.16-.493.16l-5.432.003v6.073a.703.703 0 0 1-.713.712.722.722 0 0 1-.715-.715v-6.072l-5.712.005a.722.722 0 0 1-.716-.715.722.722 0 0 1 .716-.716l5.712-.006-.003-6.064Z"
+            d: "M11.42 2.72a.722.722 0 0 1 .716-.716.722.722 0 0 1 .716.716l.003 8.064 8.426.003a.722.722 0 0 1 .716.716.84.84 0 0 1-.22.552c-.127.127-.3.16-.493.16l-8.432.003v9.073a.703.703 0 0 1-.713.712.722.722 0 0 1-.715-.715v-9.072l-8.712.005a.722.722 0 0 1-.716-.715.722.722 0 0 1 .716-.716l8.711-.006-.002-8.064Z"
         })
     })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: e,

package/dist/generated/mistica-icons/icon-subtract-filled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { IconProps } from '../../utils/types';
+declare const IconSubtractFilled: ({ color, size, ...rest }: IconProps) => JSX.Element;
+export default IconSubtractFilled;

package/dist/generated/mistica-icons/icon-subtract-light.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return m;
+        return v;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _hooks = require("../../hooks.js");
 const _themevariantcontext = require("../../theme-variant-context.js");
 const _skincontractcssmistica = require("../../skins/skin-contract.css-mistica.js");
 function _define_property(obj, key, value) {
@@ -90,21 +91,31 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const a = (_param)=>{
-    var { color: e , size: r = 24  } = _param, s = _object_without_properties(_param, [
+const l = (_param)=>{
+    var { color: n , size: t = 24  } = _param, r = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), n = e !== null && e !== void 0 ? e : i ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
-        width: r,
-        height: r,
+    const s = (0, _themevariantcontext.useIsInverseVariant)(), e = n !== null && n !== void 0 ? n : s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: a  } = (0, _hooks.useTheme)();
+    return a.match(/^o2/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: t,
+        height: t,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, s), {
+    }, r), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-            fill: n,
+            fill: e,
+            d: "M19.79 11.15a.35.35 0 1 1 0 .7H2.35a.35.35 0 1 1 0-.7h17.44Zm1.639.92a.573.573 0 0 0 .571-.574.573.573 0 0 0-.572-.574.573.573 0 0 0-.571.574c0 .317.256.574.572.574Z"
+        })
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: t,
+        height: t,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, r), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+            fill: e,
             d: "M3 12.001c0-.333.269-.6.6-.6h16.803a.6.6 0 0 1-.002 1.199H3.599A.6.6 0 0 1 3 12.002Z"
         })
     }));
-}, m = a;
+}, v = l;

package/dist/generated/mistica-icons/icon-subtract-regular.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return f;
+        return d;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _hooks = require("../../hooks.js");
 const _themevariantcontext = require("../../theme-variant-context.js");
 const _skincontractcssmistica = require("../../skins/skin-contract.css-mistica.js");
 function _define_property(obj, key, value) {
@@ -90,21 +91,41 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const l = (_param)=>{
-    var { color: e , size: r = 24  } = _param, s = _object_without_properties(_param, [
+const c = (_param)=>{
+    var { color: n , size: r = 24  } = _param, e = _object_without_properties(_param, [
         "color",
         "size"
     ]);
-    const n = (0, _themevariantcontext.useIsInverseVariant)(), a = e !== null && e !== void 0 ? e : n ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+    const l = (0, _themevariantcontext.useIsInverseVariant)(), o = n !== null && n !== void 0 ? n : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh, { skinName: i  } = (0, _hooks.useTheme)();
+    return i.match(/^blau/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
         width: r,
         height: r,
         viewBox: "0 0 24 24",
         role: "presentation"
-    }, s), {
+    }, e), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-            fill: a,
+            fill: o,
+            d: "M21.321 11.321H2.679a.679.679 0 1 0 0 1.357h18.642a.679.679 0 1 0 0-1.357Z"
+        })
+    })) : i.match(/^o2/i) ? /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: r,
+        height: r,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, e), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+            fill: o,
+            d: "M21.285 10.783a.722.722 0 0 1 .715.716.84.84 0 0 1-.219.551c-.127.128-.3.161-.493.161-11.82.004-6.036-.002-18.572.006A.722.722 0 0 1 2 11.5a.722.722 0 0 1 .716-.715c11.312-.008 6.967-.007 18.569-.003Z"
+        })
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: r,
+        height: r,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, e), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+            fill: o,
             d: "M3.001 12.047a.879.879 0 0 1 .828-.924h16.34a.876.876 0 0 1 .003 1.752H3.829A.876.876 0 0 1 3 12.047Z"
         })
     }));
-}, f = l;
+}, d = c;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ 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 Counter } from './counter';
 export { default as FixedFooterLayout } from './fixed-footer-layout';
 export { default as ButtonFixedFooterLayout } from './button-fixed-footer-layout';
 export { default as Snackbar } from './snackbar';

package/dist/index.js

@@ -114,6 +114,9 @@ _export(exports, {
     CommunityValueBlock: function() {
         return _blocks.ValueBlock;
     },
+    Counter: function() {
+        return _counter.default;
+    },
     CreditCardExpirationField: function() {
         return _creditcardexpirationfield.default;
     },
@@ -5633,6 +5636,7 @@ const _fadein = /*#__PURE__*/ _interop_require_default(require("./fade-in.js"));
 const _accordion = require("./accordion.js");
 const _button = require("./button.js");
 const _buttonlayout = /*#__PURE__*/ _interop_require_default(require("./button-layout.js"));
+const _counter = /*#__PURE__*/ _interop_require_default(require("./counter.js"));
 const _fixedfooterlayout = /*#__PURE__*/ _interop_require_default(require("./fixed-footer-layout.js"));
 const _buttonfixedfooterlayout = /*#__PURE__*/ _interop_require_default(require("./button-fixed-footer-layout.js"));
 const _snackbar = /*#__PURE__*/ _interop_require_default(require("./snackbar.js"));

package/dist/list.d.ts

@@ -76,6 +76,9 @@ type RowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;
     role?: string;
+    /**
+     * @deprecated This field is deprecated and it has no effect.
+     */
     noLastDivider?: boolean;
     dataAttributes?: DataAttributes;
 };