@telefonica/mistica 10.13.0 → 10.14.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [10.14.0](https://github.com/Telefonica/mistica-web/compare/v10.13.0...v10.14.0) (2021-12-22)
+
+
+### Features
+
+* **Checkbox, RadioButton:** Baseline alignment by default ([6c1fe3e](https://github.com/Telefonica/mistica-web/commit/6c1fe3ef62d96889ce7f94f22f08782f729070ca))
+* **DecimalField:** Add maxDecimals prop to limit the number of decimal places ([#380](https://github.com/Telefonica/mistica-web/issues/380)) ([82196ec](https://github.com/Telefonica/mistica-web/commit/82196ecdba2b9a10140ae70c3c881baff43f8d39))
+* **ErrorFeedbackScreen:** new errorReference prop ([#375](https://github.com/Telefonica/mistica-web/issues/375)) ([60b8193](https://github.com/Telefonica/mistica-web/commit/60b8193c92b9c076e570792197f8c60eabd7d412))
+* **ForwardRef:** Support forward ref in: Row, BoxedRow, MediaCard, Boxed, Box, ButtonLink ([#377](https://github.com/Telefonica/mistica-web/issues/377)) ([48d3017](https://github.com/Telefonica/mistica-web/commit/48d30174cb8f43dbeb0185ca7ca294e41acee9a8))
+* **Icons:** Update Mistica Icons ([#379](https://github.com/Telefonica/mistica-web/issues/379)) ([9165907](https://github.com/Telefonica/mistica-web/commit/91659078b736edb6938fa309e9a40968e6b7b1c9))
+
 # [10.13.0](https://github.com/Telefonica/mistica-web/compare/v10.12.0...v10.13.0) (2021-12-02)
 
 

package/dist/box.d.ts

@@ -17,5 +17,5 @@ declare type Props = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
 };
-declare const Box: React.FC<Props>;
+declare const Box: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/box.js

@@ -38,7 +38,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var Box = function Box(param) {
+var Box = /*#__PURE__*/ _react.default.forwardRef(function(param, ref) {
     var className = param.className, children = param.children, width = param.width, _padding = param.padding, padding = _padding === void 0 ? 0 : _padding, _paddingX = param.paddingX, paddingX = _paddingX === void 0 ? padding : _paddingX, _paddingY = param.paddingY, paddingY = _paddingY === void 0 ? padding : _paddingY, _paddingTop = param.paddingTop, paddingTop = _paddingTop === void 0 ? paddingY : _paddingTop, _paddingBottom = param.paddingBottom, paddingBottom = _paddingBottom === void 0 ? paddingY : _paddingBottom, _paddingLeft = param.paddingLeft, paddingLeft = _paddingLeft === void 0 ? paddingX : _paddingLeft, _paddingRight = param.paddingRight, paddingRight = _paddingRight === void 0 ? paddingX : _paddingRight, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var classes = useStyles({
         padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
@@ -48,8 +48,9 @@ var Box = function Box(param) {
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         className: (0, _classnames).default(className, classes.box),
         role: role,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        ref: ref
     }), children));
-};
+});
 var _default = Box;
 exports.default = _default;

package/dist/box.js.flow

@@ -36,5 +36,8 @@ declare type Props = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare var Box: React.ComponentType<Props>;
+declare var Box: React.ComponentType<{
+  ...Props,
+  ref?: React.Ref<HTMLDivElement>,
+}>;
 declare export default typeof Box;

package/dist/boxed.d.ts

@@ -9,5 +9,5 @@ declare type Props = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
 };
-export declare const Boxed: React.FC<Props>;
+export declare const Boxed: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/boxed.js

@@ -73,7 +73,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         }
     };
 });
-var Boxed = function Boxed(param) {
+var Boxed = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var children = param.children, tmp = param.isInverse, isInverseInside = tmp === void 0 ? false : tmp, className = param.className, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var isInverseOutside = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
@@ -81,6 +81,7 @@ var Boxed = function Boxed(param) {
         isInverseInside: isInverseInside
     });
     return(/*#__PURE__*/ React.createElement("div", _extends({
+        ref: ref,
         className: (0, _classnames).default(className, classes.boxed),
         role: role
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
@@ -88,5 +89,5 @@ var Boxed = function Boxed(param) {
     }), /*#__PURE__*/ React.createElement(_themeVariantContext.ThemeVariant, {
         isInverse: isInverseInside
     }, children)));
-};
+});
 exports.Boxed = Boxed;

package/dist/boxed.js.flow

@@ -14,5 +14,8 @@ declare type Props = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare export var Boxed: React.ComponentType<Props>;
+declare export var Boxed: React.ComponentType<{
+  ...Props,
+  ref?: React.Ref<HTMLDivElement>,
+}>;
 declare export {};

package/dist/button.d.ts

@@ -80,7 +80,7 @@ interface ButtonLinkToProps extends ButtonLinkCommonProps {
     href?: undefined;
 }
 export declare type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
-export declare const ButtonLink: React.FC<ButtonLinkProps>;
+export declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
 export declare const ButtonPrimary: React.FC<ButtonProps>;
 export declare const ButtonSecondary: React.FC<ButtonProps>;
 export declare const ButtonDanger: React.FC<ButtonProps>;

package/dist/button.js

@@ -484,7 +484,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var _obj1;
-var ButtonLink = function ButtonLink(props) {
+var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var commonProps = {
@@ -500,12 +500,14 @@ var ButtonLink = function ButtonLink(props) {
     };
     if (props.onPress) {
         return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+            ref: ref
         }, commonProps, {
             onPress: props.onPress
         })));
     }
     if (props.to) {
         return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+            ref: ref
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
@@ -513,6 +515,7 @@ var ButtonLink = function ButtonLink(props) {
     }
     if (props.href) {
         return(/*#__PURE__*/ React.createElement(_touchable.default, _extends({
+            ref: ref
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
@@ -520,7 +523,7 @@ var ButtonLink = function ButtonLink(props) {
     }
     // this cannot happen
     throw Error('Bad button props');
-};
+});
 exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {
     var classes = usePrimaryButtonStyles();

package/dist/button.js.flow

@@ -78,7 +78,10 @@ export type ButtonLinkProps =
   | ButtonLinkOnPressProps
   | ButtonLinkHrefProps
   | ButtonLinkToProps;
-declare export var ButtonLink: React.ComponentType<ButtonLinkProps>;
+declare export var ButtonLink: React.ComponentType<{
+  ...ButtonLinkProps,
+  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
+}>;
 declare export var ButtonPrimary: React.ComponentType<ButtonProps>;
 declare export var ButtonSecondary: React.ComponentType<ButtonProps>;
 declare export var ButtonDanger: React.ComponentType<ButtonProps>;

package/dist/card.d.ts

@@ -29,7 +29,7 @@ declare type MediaCardProps = {
     children?: void;
     'aria-label'?: string;
 };
-export declare const MediaCard: React.FC<MediaCardProps>;
+export declare const MediaCard: React.ForwardRefExoticComponent<MediaCardProps & React.RefAttributes<HTMLDivElement>>;
 interface DataCardProps {
     /**
      * Typically a mistica-icons component element
@@ -47,5 +47,5 @@ interface DataCardProps {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
 }
-export declare const DataCard: React.FC<DataCardProps>;
+export declare const DataCard: React.ForwardRefExoticComponent<DataCardProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/card.js

@@ -131,13 +131,14 @@ var useMediaCardStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var MediaCard = function MediaCard(param) {
+var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var media = param.media, headline = param.headline, pretitle = param.pretitle, title = param.title, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, ariaLabel = param['aria-label'];
     var classes = useMediaCardStyles({
         media: media
     });
     return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
-        className: classes.boxed
+        className: classes.boxed,
+        ref: ref
     }, /*#__PURE__*/ React.createElement("section", {
         className: classes.mediaCard,
         "aria-label": ariaLabel
@@ -154,7 +155,7 @@ var MediaCard = function MediaCard(param) {
         button: button,
         buttonLink: buttonLink
     })))));
-};
+});
 exports.MediaCard = MediaCard;
 var useDataCardStyles = (0, _jss).createUseStyles(function() {
     return {
@@ -169,12 +170,13 @@ var useDataCardStyles = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var DataCard = function DataCard(param) {
+var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
     var icon = param.icon, headline = param.headline, title = param.title, subtitle = param.subtitle, description = param.description, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
     var classes = useDataCardStyles();
     return(/*#__PURE__*/ React.createElement(_boxed.Boxed, {
         className: classes.boxed,
-        dataAttributes: dataAttributes
+        dataAttributes: dataAttributes,
+        ref: ref
     }, /*#__PURE__*/ React.createElement("section", {
         className: classes.dataCard,
         "aria-label": ariaLabel
@@ -189,5 +191,5 @@ var DataCard = function DataCard(param) {
         button: button,
         buttonLink: buttonLink
     }))));
-};
+});
 exports.DataCard = DataCard;

package/dist/card.js.flow

@@ -25,7 +25,10 @@ declare type MediaCardProps = {
   buttonLink?: React.Element<typeof ButtonLink>,
   "aria-label"?: string,
 };
-declare export var MediaCard: React.ComponentType<MediaCardProps>;
+declare export var MediaCard: React.ComponentType<{
+  ...MediaCardProps,
+  ref?: React.Ref<HTMLDivElement>,
+}>;
 declare type DataCardProps = {
   /**
    * Typically a mistica-icons component element
@@ -44,5 +47,8 @@ declare type DataCardProps = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare export var DataCard: React.ComponentType<DataCardProps>;
+declare export var DataCard: React.ComponentType<{
+  ...DataCardProps,
+  ref?: React.Ref<HTMLDivElement>,
+}>;
 declare export {};

package/dist/checkbox.js

@@ -215,9 +215,16 @@ var Checkbox = function Checkbox(props) {
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
     }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes)), props.render ? props.render(iconCheckbox, labelId) : /*#__PURE__*/ React.createElement(_inline.default, {
-        space: 16,
-        alignItems: "center"
-    }, iconCheckbox, props.children && /*#__PURE__*/ React.createElement(_text.Text3, {
+        space: 16
+    }, /*#__PURE__*/ React.createElement(_text.Text3, {
+        regular: true,
+        as: "div"
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            top: -2
+        }
+    }, iconCheckbox)), props.children && /*#__PURE__*/ React.createElement(_text.Text3, {
         regular: true,
         as: "div",
         id: labelId,

package/dist/decimal-field.d.ts

@@ -13,6 +13,8 @@ export declare const DecimalInput: React.FC<DecimalInputProps>;
 export interface DecimalFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     prefix?: React.ReactNode;
+    /** defaults to Infinity */
+    maxDecimals?: number;
 }
 declare const DecimalField: React.FC<DecimalFieldProps>;
 export default DecimalField;

package/dist/decimal-field.js

@@ -120,7 +120,7 @@ var getLocalDecimalChar = function getLocalDecimalChar(locale) {
         return '.';
     }
 };
-var format = function format(value) {
+var format = function format(value, maxDecimals) {
     // do not make the localDecimalChar replacement here. Instead, keep the one the user typed.
     // Make that replacement in `replace` prost-processor. It is what rifm lib expects.
     var sanitized = String(value !== null && value !== void 0 ? value : '').replace(/[^.,\d]/g, ''); // remove non digits or decimal separator chars;
@@ -130,20 +130,21 @@ var format = function format(value) {
         // empty
         return '';
     }
-    if (firstSeparator) {
+    if (firstSeparator && maxDecimals > 0) {
         // value includes one or more decimal separators, keep the first one
-        return parts.shift() + firstSeparator[0] + parts.join('');
+        return parts.shift() + firstSeparator[0] + parts.join('').slice(0, maxDecimals);
     } else {
         // no fractional part, return "as is"
         return parts[0];
     }
 };
 var DecimalInput = function DecimalInput(_param) {
-    var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, rest = _objectWithoutProperties(_param, [
+    var inputRef = _param.inputRef, value = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, maxDecimals = _param.maxDecimals, rest = _objectWithoutProperties(_param, [
         "inputRef",
         "value",
         "defaultValue",
-        "onChange"
+        "onChange",
+        "maxDecimals"
     ]);
     var ref = (0, _hooks).useTheme(), i18n = ref.i18n;
     var localDecimalChar = getLocalDecimalChar(i18n.locale);
@@ -166,7 +167,9 @@ var DecimalInput = function DecimalInput(_param) {
         onChange
     ]);
     var rifm = (0, _rifm).useRifm({
-        format: format,
+        format: function format1(value) {
+            return format(value, maxDecimals);
+        },
         replace: replace,
         value: controlledValue,
         onChange: handleChangeValue,
@@ -186,7 +189,7 @@ var DecimalInput = function DecimalInput(_param) {
 };
 exports.DecimalInput = DecimalInput;
 var DecimalField = function DecimalField(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value = _param.value, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validateProp = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value = _param.value, defaultValue = _param.defaultValue, _maxDecimals = _param.maxDecimals, maxDecimals = _maxDecimals === void 0 ? Infinity : _maxDecimals, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -197,7 +200,8 @@ var DecimalField = function DecimalField(_param) {
         "onChangeValue",
         "onBlur",
         "value",
-        "defaultValue"
+        "defaultValue",
+        "maxDecimals"
     ]);
     var ref = (0, _hooks).useTheme(), texts = ref.texts;
     var validate = function validate(value, rawValue) {
@@ -225,7 +229,10 @@ var DecimalField = function DecimalField(_param) {
     });
     return(/*#__PURE__*/ React.createElement(_textFieldBase.default, _extends({
     }, rest, fieldProps, {
-        inputComponent: DecimalInput
+        inputComponent: DecimalInput,
+        inputProps: {
+            maxDecimals: maxDecimals
+        }
     })));
 };
 var _default = DecimalField;

package/dist/decimal-field.js.flow

@@ -18,6 +18,11 @@ export type DecimalFieldProps = {
 
   onChangeValue?: (value: string, rawValue: string) => void,
   prefix?: React.Node,
+
+  /**
+   * defaults to Infinity
+   */
+  maxDecimals?: number,
 };
 declare var DecimalField: React.ComponentType<DecimalFieldProps>;
 declare export default typeof DecimalField;

package/dist/feedback.d.ts

@@ -21,7 +21,10 @@ interface FeedbackScreenProps extends AssetFeedbackProps {
 }
 export declare const FeedbackScreen: React.FC<FeedbackScreenProps>;
 export declare const SuccessFeedbackScreen: React.FC<AssetFeedbackProps>;
-export declare const ErrorFeedbackScreen: React.FC<FeedbackProps>;
+interface ErrorFeedbackScreenProps extends FeedbackProps {
+    errorReference?: string;
+}
+export declare const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps>;
 export declare const InfoFeedbackScreen: React.FC<FeedbackProps>;
 export declare const SuccessFeedback: React.FC<AssetFeedbackProps>;
 export {};

package/dist/feedback.js

@@ -106,6 +106,36 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
+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;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
 }
@@ -379,15 +409,22 @@ var SuccessFeedbackScreen = function SuccessFeedbackScreen(props) {
     }))));
 };
 exports.SuccessFeedbackScreen = SuccessFeedbackScreen;
-var ErrorFeedbackScreen = function ErrorFeedbackScreen(props) {
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName;
+var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
+    var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, [
+        "children",
+        "errorReference"
+    ]);
+    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
     var hasIcon = skinName !== _constants.VIVO_SKIN;
     return(/*#__PURE__*/ React.createElement(FeedbackScreen, _extends({
-    }, props, {
+    }, otherProps, {
         hapticFeedback: "error",
         icon: hasIcon ? /*#__PURE__*/ React.createElement(_iconError.default, null) : undefined,
         animateText: true
-    })));
+    }), children, errorReference && /*#__PURE__*/ React.createElement(_text.Text2, {
+        color: colors.textSecondary,
+        regular: true
+    }, errorReference)));
 };
 exports.ErrorFeedbackScreen = ErrorFeedbackScreen;
 var InfoFeedbackScreen = function InfoFeedbackScreen(props) {

package/dist/feedback.js.flow

@@ -29,7 +29,12 @@ declare type FeedbackScreenProps = {
 };
 declare export var FeedbackScreen: React.ComponentType<FeedbackScreenProps>;
 declare export var SuccessFeedbackScreen: React.ComponentType<AssetFeedbackProps>;
-declare export var ErrorFeedbackScreen: React.ComponentType<FeedbackProps>;
+declare type ErrorFeedbackScreenProps = {
+  ...$Exact<FeedbackProps>,
+
+  errorReference?: string,
+};
+declare export var ErrorFeedbackScreen: React.ComponentType<ErrorFeedbackScreenProps>;
 declare export var InfoFeedbackScreen: React.ComponentType<FeedbackProps>;
 declare export var SuccessFeedback: React.ComponentType<AssetFeedbackProps>;
 declare export {};

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

@@ -99,7 +99,7 @@ var IconAddMoreCircleFilled = function IconAddMoreCircleFilled(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M17.982 12.714h-5.236v5.248a.751.751 0 01-1.503 0v-5.248H6.018a.751.751 0 110-1.503h5.225V6.038a.751.751 0 011.503 0v5.177h5.236a.75.75 0 01.751.75.753.753 0 01-.75.749m-5.48-12.7a37.44 37.44 0 00-.92-.014h-.216C8.956.02 0 .847 0 11.962c0 11.13 9.04 12 11.452 12.035.126.003.26.003.39.003.249 0 .494-.003.706-.007C14.84 23.953 24 23.092 24 12.034 24.003.997 14.854.068 12.504.014",
+            d: "M17.484 12.654h-4.8v4.812a.689.689 0 01-1.377 0v-4.812h-4.79a.689.689 0 110-1.377h4.79V6.534a.689.689 0 011.377 0v4.746h4.8c.378 0 .688.307.688.689a.69.69 0 01-.688.685M12.462 1.013A35.406 35.406 0 0011.616 1h-.197C9.21 1.019 1 1.776 1 11.966c0 10.201 8.287 11 10.498 11.03.115.004.237.004.356.004.229 0 .454-.003.648-.006C14.603 22.956 23 22.167 23 12.03c.003-10.117-8.384-10.968-10.538-11.018",
             fill: fillColor
         })));
     }

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

@@ -99,7 +99,7 @@ var IconAddMoreCircleLight = function IconAddMoreCircleLight(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M17.98 11.464a.5.5 0 010 .997h-5.485v5.498a.5.5 0 01-.997 0v-5.495H6.02a.5.5 0 010-.997h5.475v-5.43a.5.5 0 01.997 0v5.427h5.488zm-5.45 11.529C14.984 22.948 23 22.023 23 12.03c0-4.327-1.483-7.452-4.399-9.279-2.384-1.495-5.075-1.717-6.123-1.741-.266-.007-.574-.01-.87-.01h-.23c-1.041.01-3.715.187-6.061 1.666-2.869 1.8-4.316 4.928-4.316 9.295 0 4.372 1.461 7.513 4.354 9.333 2.37 1.493 5.06 1.687 6.109 1.704.12.004.239.004.358.004.246-.004.492-.004.707-.01zM12.498.01C14.848.065 24 .994 24 12.03c0 11.062-9.159 11.919-11.45 11.963a47.16 47.16 0 01-.728.007c-.123 0-.249 0-.372-.003C9.04 23.962 0 23.092 0 11.962 0 .847 8.957.02 11.365 0h.239c.307 0 .621.003.895.01z",
+            d: "M17.481 11.509a.458.458 0 010 .914h-5.027v5.04a.458.458 0 01-.914 0v-5.037H6.519a.458.458 0 010-.914h5.018V6.534a.458.458 0 01.914 0v4.975h5.03zm-4.996 10.568c2.25-.041 9.598-.89 9.598-10.049 0-3.966-1.359-6.83-4.032-8.505-2.185-1.371-4.652-1.575-5.613-1.596-.244-.007-.526-.01-.798-.01h-.21c-.954.01-3.406.172-5.556 1.528-2.63 1.65-3.957 4.517-3.957 8.52 0 4.007 1.34 6.887 3.991 8.556 2.173 1.368 4.64 1.546 5.6 1.562.11.003.22.003.33.003.225-.003.45-.003.647-.01zm-.028-21.068C14.611 1.06 23 1.911 23 12.03c0 10.138-8.396 10.924-10.496 10.965-.2.003-.435.006-.667.006-.112 0-.228 0-.341-.003C9.286 22.966 1 22.167 1 11.966 1 1.776 9.21 1.019 11.418 1h.219c.282 0 .57.003.82.01z",
             fill: fillColor
         })));
     }

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

@@ -99,7 +99,7 @@ var IconAddMoreCircleRegular = function IconAddMoreCircleRegular(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M17.98 11.215a.751.751 0 010 1.502h-5.236v5.245a.751.751 0 01-1.502 0v-5.248H6.017a.751.751 0 010-1.503h5.225V6.038a.751.751 0 011.502 0v5.177h5.236zm-5.46 11.279c3-.055 9.977-1.185 9.977-10.463 0-9.279-7.017-10.45-10.033-10.522-.286-.006-.573-.01-.86-.01h-.226c-2.97.027-9.875 1.096-9.875 10.463 0 9.381 6.973 10.494 9.971 10.535.348.004.697.004 1.045-.003zM12.498.01C14.855.068 24 .997 24 12.03c0 11.062-9.162 11.919-11.45 11.963-.215.004-.461.007-.71.007-.13 0-.26 0-.39-.003C9.04 23.962 0 23.092 0 11.962 0 .847 8.954.02 11.365 0h.239c.307 0 .625.003.895.01z",
+            d: "M17.481 11.28a.689.689 0 010 1.377h-4.799v4.809a.689.689 0 01-1.377 0v-4.812h-4.79a.689.689 0 010-1.377h4.79V6.534a.689.689 0 011.377 0v4.746h4.8zm-5.005 10.34c2.751-.05 9.147-1.087 9.147-9.592S15.19 2.45 12.426 2.384a33.14 33.14 0 00-.79-.01h-.206C8.707 2.4 2.377 3.38 2.377 11.966c0 8.599 6.392 9.62 9.14 9.657.32.003.64.003.959-.003zm-.019-20.61C14.617 1.062 23 1.913 23 12.027c0 10.14-8.399 10.925-10.496 10.966-.197.003-.423.006-.651.006-.12 0-.238 0-.357-.003C9.286 22.966 1 22.167 1 11.966 1 1.776 9.208 1.019 11.418 1h.219c.282 0 .573.003.82.01z",
             fill: fillColor
         })));
     }

package/dist/generated/mistica-icons/icon-bell-filled.js

@@ -89,7 +89,7 @@ var IconBellFilled = function IconBellFilled(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M9.042 20.642C9.387 21.979 10.58 23 12.005 23s2.614-1.02 2.963-2.358H9.042zm12.803-2.434a11.276 11.276 0 01-2.154-6.6v-2.75c0-4.32-3.462-7.858-7.69-7.858C7.772 1 4.31 4.538 4.31 8.858v2.75c0 2.359-.77 4.713-2.153 6.6-.194.238-.194.55-.078.828.117.277.384.43.694.43h18.456c.305 0 .577-.158.693-.43.116-.273.112-.594-.077-.828z",
+            d: "M9.338 19.856C9.648 21.072 10.722 22 12.004 22c1.283 0 2.353-.928 2.667-2.144H9.338zm11.522-2.212a10.321 10.321 0 01-1.938-6v-2.5C18.922 5.216 15.806 2 12.001 2 8.195 2 5.079 5.216 5.079 9.144v2.5c0 2.144-.694 4.284-1.938 6-.174.216-.174.5-.07.752.105.252.345.392.624.392h16.61a.66.66 0 00.625-.392c.104-.248.1-.54-.07-.752z",
             fill: fillColor
         })));
     } else {

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

@@ -89,7 +89,7 @@ var IconBellLight = function IconBellLight(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M12.001 1c4.203 0 7.602 3.463 7.598 7.74v2.85c0 .815.082 1.668.28 2.566.04.202-.12.449-.32.488a.417.417 0 01-.479-.325c-.16-.937-.28-1.83-.28-2.728V8.74c0-3.828-3.041-6.926-6.799-6.926-3.758 0-6.798 3.098-6.798 6.926v2.85c0 2.447-.717 4.894-2.039 6.926h18.439c.237 0 .397.163.397.41 0 .246-.16.409-.402.409H14.68c.082.286.12.528.12.814 0 1.588-1.24 2.851-2.798 2.851-1.56 0-2.799-1.263-2.799-2.851 0-.286.04-.528.121-.814h-6.92c-.159 0-.275-.123-.358-.247-.082-.123-.043-.286.04-.409 1.48-2.037 2.319-4.563 2.319-7.088V8.74C4.404 4.463 7.799 1 12 1zm1.801 18.335h-3.64c-.079.242-.16.528-.16.814 0 1.14.88 2.037 2 2.037 1.118 0 1.999-.898 1.999-2.037 0-.286-.078-.572-.199-.814zm6.6-3.665c.441 0 .799.364.799.814 0 .45-.358.814-.8.814a.807.807 0 01-.798-.814c0-.45.358-.814.799-.814z",
+            d: "M12.001 2c3.782 0 6.842 3.148 6.838 7.036v2.592c0 .74.074 1.516.252 2.332.035.184-.108.408-.287.444a.376.376 0 01-.432-.296c-.144-.852-.252-1.664-.252-2.48V9.036c0-3.48-2.737-6.296-6.119-6.296-3.382 0-6.119 2.816-6.119 6.296v2.592c0 2.224-.645 4.448-1.834 6.296h16.594c.214 0 .358.148.358.372s-.144.372-.362.372h-6.227c.074.26.109.48.109.74 0 1.444-1.116 2.592-2.519 2.592s-2.519-1.148-2.519-2.592c0-.26.035-.48.109-.74H3.364c-.144 0-.25-.112-.323-.224-.074-.112-.039-.26.035-.372a11.147 11.147 0 002.087-6.444V9.036C5.163 5.148 8.22 2 12.001 2zm1.621 16.668h-3.277c-.07.22-.144.48-.144.74 0 1.036.793 1.852 1.8 1.852 1.007 0 1.8-.816 1.8-1.852 0-.26-.07-.52-.179-.74zm5.94-3.332a.73.73 0 01.719.74.73.73 0 01-.72.74.73.73 0 01-.718-.74.73.73 0 01.719-.74z",
             fill: fillColor
         })));
     } else {

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

@@ -89,7 +89,7 @@ var IconBellRegular = function IconBellRegular(_param) {
             viewBox: "0 0 24 24",
             role: "presentation"
         }, rest), /*#__PURE__*/ React.createElement("path", {
-            d: "M21.847 18.208a11.275 11.275 0 01-2.153-6.6v-2.75C19.694 4.538 16.23 1 12.002 1 7.772 1 4.31 4.538 4.31 8.858v2.75c0 2.359-.77 4.713-2.153 6.6-.194.238-.194.55-.078.828.117.277.384.43.694.43h6.193c0 .12-.039.278-.039.392 0 1.73 1.382 3.142 3.075 3.142 1.693 0 3.075-1.412 3.075-3.142 0-.118 0-.277-.039-.391h6.189c.306 0 .577-.159.693-.431.117-.273.117-.594-.073-.828zm-8.308 1.65c0 .863-.693 1.571-1.537 1.571s-1.538-.708-1.538-1.57c0-.12 0-.278.04-.392h2.958c.077.114.077.273.077.391zM4.2 17.892a12.782 12.782 0 001.653-6.288v-2.75c0-3.458 2.77-6.288 6.154-6.288 3.385 0 6.15 2.834 6.15 6.292v2.75c0 2.2.577 4.4 1.654 6.288H4.198v-.004z",
+            d: "M20.862 17.644a10.32 10.32 0 01-1.938-6v-2.5C18.924 5.216 15.808 2 12.002 2 8.196 2 5.079 5.216 5.079 9.144v2.5a10.32 10.32 0 01-1.938 6c-.174.216-.174.5-.07.752.105.252.345.392.624.392H9.27c0 .108-.035.252-.035.356 0 1.572 1.244 2.856 2.768 2.856 1.523 0 2.767-1.284 2.767-2.856 0-.108 0-.252-.035-.356h5.57c.275 0 .52-.144.624-.392.105-.248.105-.54-.066-.752zm-7.476 1.5c0 .784-.625 1.428-1.384 1.428-.76 0-1.384-.644-1.384-1.428 0-.108 0-.252.035-.356h2.663c.07.104.07.248.07.356zm-8.408-1.788a11.711 11.711 0 001.489-5.716v-2.5c0-3.144 2.492-5.716 5.539-5.716 3.046 0 5.535 2.576 5.535 5.72v2.5c0 2 .519 4 1.488 5.716H4.979v-.004z",
             fill: fillColor
         })));
     } else {

package/dist/generated/mistica-icons/icon-bill-invoice-pound-filled.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { IconProps } from '../../utils/types';
+declare const IconBillInvoicePoundFilled: React.FC<IconProps>;
+export default IconBillInvoicePoundFilled;