@telefonica/mistica 9.17.0 → 10.2.0

package/dist-es/empty-state-card.js

@@ -14,8 +14,16 @@ var useStyles = createUseStyles(function (theme) {
       maxWidth: 392
     }),
     image: _defineProperty({
+      height: 80,
+      display: 'block'
+    }, theme.mq.tabletOrSmaller, {
+      height: 64
+    }),
+    iconContainer: _defineProperty({
+      width: 80,
       height: 80
     }, theme.mq.tabletOrSmaller, {
+      width: 64,
       height: 64
     }),
     actions: {
@@ -28,7 +36,7 @@ var useStyles = createUseStyles(function (theme) {
 });
 
 var EmptyStateCard = function EmptyStateCard(_ref2) {
-  var _image2;
+  var _button$props, _image2;
 
   var title = _ref2.title,
       description = _ref2.description,
@@ -60,6 +68,10 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
     });
   }
 
+  if (process.env.NODE_ENV !== 'production' && !(button !== null && button !== void 0 && (_button$props = button.props) !== null && _button$props !== void 0 && _button$props.small)) {
+    console.error('button property in EmptyStateCard must be a a small Button. Set small prop to true');
+  }
+
   return /*#__PURE__*/React.createElement(Boxed, {
     dataAttributes: dataAttributes
   }, /*#__PURE__*/React.createElement(Box, {
@@ -70,9 +82,9 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
     "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement(Stack, {
     space: 16
-  }, (_image2 = image) !== null && _image2 !== void 0 ? _image2 : icon, /*#__PURE__*/React.createElement(Box, {
-    paddingRight: isTabletOrSmaller ? 48 : 0
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, (_image2 = image) !== null && _image2 !== void 0 ? _image2 : icon && /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Stack, {
     space: 8
   }, /*#__PURE__*/React.createElement(Text4, {
     regular: true

package/dist-es/{empty-state-screen.js → empty-state.js}

@@ -1,17 +1,21 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 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; }
 
 import * as React from 'react';
 import Box from './box';
 import { Boxed } from './boxed';
-import { FeedbackScreen } from './feedback-screen';
 import { useScreenSize, useTheme } from './hooks';
 import Stack from './stack';
 import { Text4, Text6 } from './text';
-import ResponsiveLayout from './responsive-layout';
 import { createUseStyles } from './jss';
 import Inline from './inline';
+import { getPrefixedDataAttributes } from './utils/dom';
 var useStyles = createUseStyles(function (theme) {
   return {
+    container: _defineProperty({}, theme.mq.tabletOrSmaller, {
+      maxWidth: 368
+    }),
     desktopContainer: {
       display: 'flex',
       justifyContent: 'spaceBetween'
@@ -29,18 +33,29 @@ var useStyles = createUseStyles(function (theme) {
       backgroundSize: 'contain',
       flex: 1
     },
-    mobileImage: {
-      width: '100%'
+    largeImage: {
+      width: '100%',
+      display: 'block',
+      // to avoid letter's descenders bottom space
+      aspectRatio: '16/9'
     },
     smallImage: _defineProperty({
-      height: 128
+      height: 128,
+      display: 'block'
     }, theme.mq.tabletOrSmaller, {
       height: 112
+    }),
+    iconContainer: _defineProperty({
+      width: 80,
+      height: 80
+    }, theme.mq.tabletOrSmaller, {
+      width: 64,
+      height: 64
     })
   };
 });
 
-var EmptyStateScreen = function EmptyStateScreen(_ref2) {
+var EmptyState = function EmptyState(_ref2) {
   var _image;
 
   var title = _ref2.title,
@@ -49,7 +64,9 @@ var EmptyStateScreen = function EmptyStateScreen(_ref2) {
       buttonLink = _ref2.buttonLink,
       largeImageUrl = _ref2.largeImageUrl,
       imageUrl = _ref2.imageUrl,
-      icon = _ref2.icon;
+      icon = _ref2.icon,
+      ariaLabel = _ref2['aria-label'],
+      dataAttributes = _ref2.dataAttributes;
 
   var _useTheme = useTheme(),
       colors = _useTheme.colors;
@@ -67,7 +84,7 @@ var EmptyStateScreen = function EmptyStateScreen(_ref2) {
 
   if (largeImageUrl) {
     largeImage = /*#__PURE__*/React.createElement("img", {
-      className: classes.mobileImage,
+      className: classes.largeImage,
       alt: "",
       src: largeImageUrl
     });
@@ -84,16 +101,30 @@ var EmptyStateScreen = function EmptyStateScreen(_ref2) {
   if (isTabletOrSmaller) {
     var _ref3, _largeImage;
 
-    return /*#__PURE__*/React.createElement(FeedbackScreen, {
-      icon: (_ref3 = (_largeImage = largeImage) !== null && _largeImage !== void 0 ? _largeImage : image) !== null && _ref3 !== void 0 ? _ref3 : icon,
-      title: title,
-      description: description,
-      primaryButton: button,
-      link: buttonLink
-    });
+    return /*#__PURE__*/React.createElement("section", _extends({
+      className: classes.container,
+      "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes)), /*#__PURE__*/React.createElement(Stack, {
+      space: 24
+    }, (_ref3 = (_largeImage = largeImage) !== null && _largeImage !== void 0 ? _largeImage : image) !== null && _ref3 !== void 0 ? _ref3 : icon && /*#__PURE__*/React.createElement("div", {
+      className: classes.iconContainer
+    }, icon), /*#__PURE__*/React.createElement(Stack, {
+      space: 16
+    }, /*#__PURE__*/React.createElement(Text6, {
+      as: "h1"
+    }, title), /*#__PURE__*/React.createElement(Text4, {
+      light: true,
+      as: "p",
+      color: colors.textSecondary
+    }, description)), button && /*#__PURE__*/React.createElement(Inline, {
+      space: 16,
+      alignItems: "center"
+    }, button, buttonLink)));
   }
 
-  return /*#__PURE__*/React.createElement(ResponsiveLayout, null, /*#__PURE__*/React.createElement(Boxed, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Boxed, {
+    dataAttributes: dataAttributes
+  }, /*#__PURE__*/React.createElement("div", {
     className: classes.desktopContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.desktopContent
@@ -101,7 +132,9 @@ var EmptyStateScreen = function EmptyStateScreen(_ref2) {
     padding: 64
   }, /*#__PURE__*/React.createElement(Stack, {
     space: 24
-  }, (_image = image) !== null && _image !== void 0 ? _image : icon, /*#__PURE__*/React.createElement(Stack, {
+  }, (_image = image) !== null && _image !== void 0 ? _image : icon && /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement(Stack, {
     space: 16
   }, /*#__PURE__*/React.createElement(Text6, {
     as: "h1"
@@ -114,7 +147,7 @@ var EmptyStateScreen = function EmptyStateScreen(_ref2) {
     alignItems: "center"
   }, button, buttonLink)))), largeImageUrl && /*#__PURE__*/React.createElement("div", {
     className: classes.desktopImage
-  }))));
+  })));
 };
 
-export default EmptyStateScreen;
+export default EmptyState;

package/dist-es/focus-trap.js

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import FocusTrapReact from 'focus-trap-react';
+import ReactFocusLock from 'react-focus-lock';
 
 var FocusTrap = function FocusTrap(_ref) {
   var children = _ref.children,
-      _ref$clickOutsideDeac = _ref.clickOutsideDeactivates,
-      clickOutsideDeactivates = _ref$clickOutsideDeac === void 0 ? false : _ref$clickOutsideDeac,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement(FocusTrapReact, {
-    focusTrapOptions: {
-      escapeDeactivates: false,
-      clickOutsideDeactivates: clickOutsideDeactivates
-    },
-    className: className
+      disabled = _ref.disabled,
+      className = _ref.className,
+      group = _ref.group;
+  return /*#__PURE__*/React.createElement(ReactFocusLock, {
+    noFocusGuards: true,
+    disabled: disabled,
+    className: className,
+    group: group
   }, children);
 };
 

package/dist-es/generated/mistica-icons/icon-bush-filled.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconBushFilled = function IconBushFilled(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.305 8c0-2.339-1.602-3.347-3.243-3.543C15.322 2.655 13.378 2 11.725 2 9.681 2 7.308 3.008 7.101 5.874c-1.095.465-1.695 1.417-1.695 2.728 0 .967.32 1.614.709 2.04-.504.596-.76 1.378-.76 2.324 0 2.353 1.603 3.356 3.244 3.541.586 1.423 1.925 2.123 3.275 2.356v2.224c0 .33.283.6.63.6.348 0 .63-.27.63-.6v-2.135s-.459-.02-.689-.036a18.929 18.929 0 01-.568-.053v-2.426L9.384 14.05a.582.582 0 01.003-.848.656.656 0 01.89.002l1.603 1.533V9.625c0-.33.282-.6.63-.6.347 0 .63.27.63.6v1.818l1.244-1.6a.65.65 0 01.88-.126.58.58 0 01.131.838l-2.233 2.876c-.005.009-.016.012-.022.02v5.507c1.997-.064 4.224-1.095 4.423-3.866.77-.324 1.695-1.061 1.695-2.728 0-.966-.32-1.613-.709-2.04.501-.604.756-1.38.756-2.324",
+    fill: fillColor
+  }));
+};
+
+export default IconBushFilled;

package/dist-es/generated/mistica-icons/icon-bush-light.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconBushLight = function IconBushLight(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17.162 10.148a.398.398 0 00.031.664c.563.339.835.899.835 1.711 0 1.05-.476 1.712-1.417 1.961-.188.05-.308.283-.308.465 0 3.056-2.838 3.294-3.71 3.294h-.01v-4.695c.02-.02.047-.03.064-.053l2.305-2.935a.392.392 0 00-.064-.552l-.025-.02a.455.455 0 00-.605.084l-1.673 2.132V9.73c0-.224-.193-.406-.43-.406-.239 0-.432.182-.432.406v5.715L9.7 13.529a.452.452 0 00-.61-.003.39.39 0 00-.026.552c.009.008.014.017.023.022l2.596 2.462c.012.012.026.014.037.023v1.568c-.938-.16-2.283-.633-2.698-2.086a.424.424 0 00-.406-.3c-.829-.02-2.753-.314-2.753-2.628 0-.935.308-1.633.916-2.078a.4.4 0 00.165-.342.408.408 0 00-.199-.325c-.56-.336-.835-.896-.835-1.711 0-1.059.463-1.7 1.42-1.96.185-.051.306-.281.306-.463 0-3.056 2.837-3.294 3.709-3.294.691 0 2.997.157 3.571 2.17a.43.43 0 00.403.3c1.031.034 2.76.418 2.76 2.633 0 .95-.3 1.628-.917 2.079m1.782-2.073c0-2.314-1.644-3.277-3.286-3.429-.882-2.367-3.73-2.49-4.31-2.49-.746 0-4.384.188-4.56 3.888-1.124.423-1.738 1.35-1.738 2.647 0 1.031.381 1.678.807 2.076-.571.59-.857 1.39-.857 2.378 0 2.325 1.641 3.283 3.283 3.426.647 1.73 2.347 2.26 3.44 2.42v2.445c0 .227.193.407.431.407s.431-.183.431-.407v-2.378h.012c.745 0 4.383-.187 4.56-3.888.756-.283 1.74-.972 1.74-2.647 0-.885-.272-1.582-.807-2.078.568-.588.854-1.384.854-2.37",
+    fill: fillColor
+  }));
+};
+
+export default IconBushLight;

package/dist-es/generated/mistica-icons/icon-bush-regular.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconBushRegular = function IconBushRegular(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17.258 10.849c.479.291.714.784.714 1.51 0 .944-.4 1.51-1.221 1.728-.272.073-.454.378-.454.644 0 2.569-2.09 2.983-3.185 3.028v-4.314c.006-.008.017-.01.022-.02l2.233-2.876a.583.583 0 00-.1-.815c-.012-.009-.02-.017-.032-.023a.651.651 0 00-.88.127l-1.24 1.602V9.622c0-.33-.28-.6-.63-.6-.348 0-.63.27-.63.6v5.112l-1.603-1.53a.656.656 0 00-.89-.002.58.58 0 00-.031.82c.008.009.016.02.028.028l2.495 2.387v1.204c-.843-.184-1.862-.655-2.201-1.86a.625.625 0 00-.591-.442c-.922-.022-2.468-.361-2.468-2.375 0-.86.266-1.477.81-1.88a.587.587 0 00.243-.501.59.59 0 00-.291-.477c-.48-.288-.712-.781-.712-1.507 0-.95.39-1.498 1.227-1.73.27-.073.446-.379.446-.645 0-2.734 2.366-3.028 3.386-3.028.633 0 2.745.143 3.263 1.98a.62.62 0 00.586.443c.924.028 2.47.375 2.47 2.381 0 .86-.263 1.47-.806 1.874a.587.587 0 00-.244.501.587.587 0 00.286.474M19.278 8c0-2.339-1.603-3.347-3.244-3.543C15.297 2.655 13.353 2 11.7 2 9.658 2 7.283 3.008 7.078 5.874c-1.098.462-1.694 1.415-1.694 2.728 0 .97.322 1.616.711 2.042-.412.496-.762 1.236-.762 2.322 0 2.353 1.603 3.356 3.244 3.541.585 1.423 1.924 2.123 3.275 2.356v2.224c0 .33.282.6.63.6.347 0 .63-.27.63-.6v-2.135c1.997-.064 4.224-1.095 4.423-3.865.77-.325 1.695-1.062 1.695-2.731 0-.967-.32-1.61-.712-2.04.504-.596.76-1.372.76-2.316",
+    fill: fillColor
+  }));
+};
+
+export default IconBushRegular;

package/dist-es/generated/mistica-icons/icon-care-health-filled.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconCareHealthFilled = function IconCareHealthFilled(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20.115 16.983c.426-.274.442-.434.257-.781a.66.66 0 00-.809-.33l-3.868 1.344c-.048.016-.087.008-.13.016a1.8 1.8 0 01-.949.289H9.77a.601.601 0 01-.602-.602v-.003c0-.339.266-.605.602-.605h4.849c.305 0 .633-.328.633-.644 0-.289-.168-.589-.504-.597-.073 0-.16 0-.266.008-.804.017-2.488.048-4.062-.935-.017-.006-.82-.474-3.42-.538v4.373l4.608 2.218c.336.193.74.283 1.23.283.408 0 .761-.065 1.042-.185.025-.017 4.767-2.384 6.235-3.31zm1.333-1.328c.275.533.563 1.555-.692 2.353-1.518.958-6.165 3.278-6.364 3.373-.456.21-.972.308-1.557.308-.706 0-1.308-.137-1.79-.42L7 19.319v.387c0 .787-.641 1.426-1.429 1.426H3.43A1.429 1.429 0 012 19.706v-6.614c0-.79.641-1.434 1.429-1.434H5.57c.538 0 .995.3 1.244.74 3.09.047 4.095.619 4.263.73 1.252.782 2.625.757 3.379.743.12-.008.232 0 .313-.008.474.008.9.21 1.196.538.306.322.49.764.49 1.266l2.712-.942c.849-.3 1.79.054 2.232.838a.361.361 0 01.048.092zM4.48 13.527a.69.69 0 00-.714.717.69.69 0 00.714.717c.417 0 .714-.297.714-.717a.686.686 0 00-.714-.717zm10.566-.538c-3.53 0-5.476-1.95-5.476-5.493C9.569 3.952 11.513 2 15.045 2s5.479 1.952 5.479 5.496c-.003 3.54-1.947 5.493-5.48 5.493zM12.65 7.132h1.512a.522.522 0 00.521-.524V5.09h.726v1.518c0 .288.235.52.524.524h1.512v.725h-1.512a.522.522 0 00-.521.524v1.518h-.726V8.381a.522.522 0 00-.52-.524l-1.513.003-.003-.728zm-.216 1.776l1.205-.003v1.204c0 .454.353.835.767.835h1.277c.415 0 .768-.381.768-.835V8.902h1.202c.45 0 .832-.353.832-.77V6.849c0-.418-.381-.77-.832-.77h-1.205V4.873c0-.451-.353-.835-.767-.835h-1.278c-.414 0-.767.381-.767.835V6.08h-1.202c-.45 0-.832.353-.832.77v1.283c.003.42.384.774.832.774z",
+    fill: fillColor
+  }));
+};
+
+export default IconCareHealthFilled;

package/dist-es/generated/mistica-icons/icon-care-health-light.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconCareHealthLight = function IconCareHealthLight(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20.551 17.42c.51-.32.591-.591.345-1.068-.238-.42-.673-.577-1.081-.434l-3.958 1.373c-.05.017-.099.017-.149.017-.263.17-.566.28-.877.28h-4.95a.41.41 0 010-.82l4.95-.001c.434 0 .86-.426.86-.863 0-.45-.31-.798-.72-.807h-.285c-.804.017-2.477.056-4.023-.921-.017-.009-.902-.535-3.812-.583v4.801l4.818 2.317c.37.213.804.314 1.344.314.451 0 .835-.076 1.146-.216.034-.02 4.894-2.434 6.392-3.39zm-14.52 2.596v-6.74a.436.436 0 00-.435-.433H3.408a.436.436 0 00-.434.434v6.74c0 .237.196.433.434.433h2.188a.433.433 0 00.434-.434zm15.585-4.05c.31.6.459 1.462-.625 2.145-1.54.978-6.275 3.337-6.479 3.443a3.753 3.753 0 01-1.499.289c-.68 0-1.26-.14-1.72-.404l-4.44-2.137v.714c0 .692-.56 1.255-1.251 1.258H3.408a1.258 1.258 0 01-1.252-1.258v-6.74c0-.688.566-1.257 1.252-1.257h2.188c.515 0 .95.305 1.148.748 3.261.034 4.261.65 4.359.725 1.336.83 2.784.796 3.563.78h.32c.85.016 1.523.733 1.523 1.627 0 .106-.017.204-.039.302l3.073-1.067a1.68 1.68 0 012.03.756c0 .003.043.076.043.076zM4.484 13.722c.426 0 .731.297.731.734a.703.703 0 01-.731.731c-.429 0-.731-.308-.731-.734 0-.437.302-.73.731-.73zM15.268 2.977c-3.028 0-4.566 1.543-4.566 4.583 0 3.039 1.535 4.58 4.566 4.58 3.031 0 4.566-1.541 4.566-4.58 0-3.04-1.538-4.583-4.566-4.583zm0 9.983c-3.473 0-5.383-1.916-5.383-5.4-.003-3.485 1.91-5.404 5.383-5.404 3.474 0 5.387 1.919 5.387 5.404-.003 3.484-1.913 5.4-5.387 5.4zM12.7 7.067l-.003.988h1.667a.41.41 0 01.408.41v1.672h.986V8.464a.41.41 0 01.41-.411h1.666v-.99h-1.667a.41.41 0 01-.409-.408V4.983h-.988v1.672a.408.408 0 01-.41.409l-1.66.003zm-.096 1.81c-.395 0-.725-.303-.725-.665V6.904c0-.358.333-.66.725-.66l1.35-.004V4.885c0-.39.309-.726.662-.726h1.302c.35 0 .661.339.661.728V6.24h1.353c.387 0 .726.308.726.661V8.21c0 .353-.34.662-.726.662h-1.35v1.355c0 .395-.303.726-.658.726h-1.306c-.358 0-.66-.334-.66-.729l-.003-1.352c0 .005-1.35.005-1.35.005z",
+    fill: fillColor
+  }));
+};
+
+export default IconCareHealthLight;

package/dist-es/generated/mistica-icons/icon-care-health-regular.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconCareHealthRegular = function IconCareHealthRegular(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20.115 16.978c.434-.275.442-.435.266-.782-.18-.314-.515-.434-.82-.33l-3.69 1.252a5.27 5.27 0 00-.314.126 1.777 1.777 0 01-.94.271h-4.85a.601.601 0 01-.602-.602v-.003c0-.327.266-.605.603-.605h4.848c.314 0 .642-.327.642-.644 0-.288-.18-.588-.507-.588h-.275c-.804.017-2.479.056-4.061-.936-.009-.008-.821-.473-3.42-.538v4.373l4.613 2.224c.336.193.74.283 1.227.283.417 0 .762-.064 1.042-.193.025-.017 4.767-2.376 6.238-3.308zm-14.32 2.72V13.09a.219.219 0 00-.218-.219H3.429a.224.224 0 00-.225.219v6.607a.23.23 0 00.225.227H5.57a.229.229 0 00.225-.227zm15.645-4.065c.288.55.568 1.577-.684 2.367-1.515.958-6.162 3.277-6.364 3.381-.448.202-.972.308-1.557.308-.706 0-1.308-.146-1.79-.428L7 19.31v.386a1.43 1.43 0 01-1.429 1.435H3.43A1.434 1.434 0 012 19.697V13.09c0-.787.639-1.426 1.429-1.426H5.57c.538 0 .995.3 1.244.734 3.098.05 4.093.619 4.269.74 1.244.78 2.625.75 3.373.733h.31c.457.006.891.199 1.205.532.305.322.49.773.49 1.264l2.706-.942a1.848 1.848 0 012.233.838c-.003-.003.039.07.039.07zM4.479 13.53c.426 0 .714.289.714.717 0 .418-.288.71-.714.71-.417 0-.714-.292-.714-.71 0-.425.297-.717.714-.717zM15.045 3.207c-2.874 0-4.27 1.404-4.27 4.286 0 2.882 1.396 4.283 4.27 4.283 2.877 0 4.274-1.4 4.274-4.283-.002-2.882-1.4-4.286-4.274-4.286zm0 9.779c-3.53 0-5.474-1.95-5.474-5.49C9.57 3.95 11.513 2 15.045 2s5.476 1.952 5.476 5.493c0 3.543-1.947 5.493-5.476 5.493zM12.728 7.21v.566h1.432c.333 0 .602.269.602.602l.003 1.437h.563V8.378c0-.333.269-.605.602-.605h1.431v-.566H15.93a.604.604 0 01-.602-.605V5.168h-.566l.003 1.437a.605.605 0 01-.6.605h-1.437zm.832 1.773h-1.123c-.493 0-.91-.39-.91-.849v-1.28c0-.462.417-.851.91-.851h1.12v-1.13c0-.495.39-.912.846-.912h1.278c.46 0 .846.417.846.916V6h1.123c.493 0 .91.39.91.849v1.28c0 .46-.417.849-.91.849h-1.123v1.128c0 .496-.387.914-.846.914h-1.272c-.46 0-.846-.418-.846-.914l-.003-1.123z",
+    fill: fillColor
+  }));
+};
+
+export default IconCareHealthRegular;

package/dist-es/generated/mistica-icons/icon-computer-academic-filled.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconComputerAcademicFilled = function IconComputerAcademicFilled(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21.084 16.298c.333 0 .602.272.602.608a.604.604 0 01-.602.608h-8.89a1.2 1.2 0 01-.735.451c-.745.134-1.795.42-2.549 1.02a1.383 1.383 0 01-.86.302c-.302 0-.605-.1-.86-.302-.753-.6-1.8-.886-2.549-1.02-.58-.104-1-.61-1-1.205v-1.156l3.566 1.605a1.927 1.927 0 001.583 0l3.667-1.647 1.19-.535a1.963 1.963 0 001.154-1.793 1.94 1.94 0 00-1.154-1.793l-4.86-2.185a1.917 1.917 0 00-.79-.17 1.95 1.95 0 00-.793.167L4.35 10.536V7.444c0-.919.247-1.641.728-2.137.499-.516 1.233-.776 2.183-.776l11.453-.006c.95 0 1.684.264 2.182.776.485.499.729 1.219.729 2.137v5.437c0 .922-.244 1.645-.729 2.149-.501.524-1.235.79-2.185.79l-6.263.003v.481h8.636zM8 16.57c-.16 0-.317-.034-.465-.1l-4.857-2.186A1.143 1.143 0 012 13.231c0-.46.258-.863.675-1.05l4.86-2.188c.294-.132.633-.132.927 0l4.86 2.185c.417.188.678.59.678 1.053 0 .454-.266.868-.678 1.05l-4.86 2.185A1.07 1.07 0 018 16.57z",
+    fill: fillColor
+  }));
+};
+
+export default IconComputerAcademicFilled;

package/dist-es/generated/mistica-icons/icon-computer-academic-regular.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconComputerAcademicRegular = function IconComputerAcademicRegular(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.162 18.001a.181.181 0 01-.23 0c-.952-.756-2.2-1.103-3.086-1.266v-1.501l2.689 1.21c.294.132.633.134.927 0l2.787-1.252-.003 1.549c-.882.16-2.131.504-3.084 1.26zm-.187-6.918l4.725 2.123-4.675 2.123L3.3 13.206l4.675-2.123zm5.347 1.072l-4.86-2.184a1.138 1.138 0 00-.927 0l-1.992.893V7.416c0-.594.132-1.03.39-1.297.266-.274.714-.415 1.333-.415L18.72 5.7c.616 0 1.064.14 1.333.414.258.267.39.704.39 1.297v5.437c0 .6-.132 1.042-.393 1.314-.269.28-.717.423-1.33.423l-6.132.003.731-.328c.412-.185.678-.597.678-1.05a1.128 1.128 0 00-.675-1.054zm7.762 4.115h-8.627v-.482l6.266-.002c.946 0 1.683-.266 2.185-.79.481-.504.725-1.23.725-2.149V7.413c0-.919-.246-1.638-.728-2.137-.499-.516-1.233-.776-2.182-.776H7.269c-.952 0-1.686.263-2.185.776-.485.499-.728 1.218-.728 2.137v3.983l-1.678.757A1.14 1.14 0 002 13.206c0 .454.266.868.678 1.05l.963.437v2.045c0 .594.42 1.098.998 1.205.745.134 1.792.42 2.549 1.02.504.4 1.218.4 1.72 0 .753-.6 1.8-.886 2.549-1.02a1.21 1.21 0 00.733-.451h8.891a.606.606 0 00.602-.608.603.603 0 00-.599-.614z",
+    fill: fillColor
+  }));
+};
+
+export default IconComputerAcademicRegular;

package/dist-es/generated/mistica-icons/icon-computer-regular.js

@@ -23,7 +23,7 @@ var IconComputerRegular = function IconComputerRegular(_ref) {
     viewBox: "0 0 24 24",
     role: "presentation"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M21.243 18.504a.75.75 0 01.102 1.493l-.102.007H3.3a.75.75 0 01-.101-1.493l.101-.007h17.943zM18.22 3.5c2.1 0 3.802 1.702 3.802 3.801v5.897c0 2.1-1.702 3.802-3.802 3.802H6.302A3.802 3.802 0 012.5 13.198V7.301a3.8 3.8 0 013.802-3.8zm0 1.5H6.302A2.301 2.301 0 004 7.301v5.897A2.302 2.302 0 006.302 15.5h11.917a2.302 2.302 0 002.302-2.302V7.301a2.3 2.3 0 00-2.302-2.3z",
+    d: "M18.406 18.007L5.603 18c-1.12 0-1.99-.311-2.58-.927-.574-.591-.863-1.437-.863-2.513V8.282C2.16 6.08 3.381 4.87 5.6 4.87l12.806.008c2.219 0 3.44 1.213 3.44 3.412v6.277c0 1.076-.288 1.922-.86 2.513-.594.616-1.462.927-2.58.927zM5.6 5.99c-.807 0-1.406.194-1.779.575-.358.367-.54.944-.54 1.717v6.277c0 1.583.736 2.32 2.319 2.32l12.804.008c1.582 0 2.319-.737 2.319-2.32V8.29c0-.773-.182-1.35-.543-1.717-.373-.38-.97-.574-1.78-.574L5.6 5.99zm15.686 14.23L2.72 20.212a.562.562 0 01-.56-.56c0-.309.252-.56.56-.56l18.566.008c.308 0 .56.252.56.56 0 .308-.252.56-.56.56z",
     fill: fillColor
   }));
 };

package/dist-es/generated/mistica-icons/icon-euro-symbol-circle-filled.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconEuroSymbolCircleFilled = function IconEuroSymbolCircleFilled(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16.398 16.95c-.863.406-1.91.61-3.118.61-3.137 0-5.131-1.398-5.778-3.98h-1.12a.603.603 0 010-1.205h.926a9.72 9.72 0 01-.039-.823c0-.123.009-.241.014-.359h-.902a.603.603 0 010-1.204h1.025c.522-2.88 2.558-4.446 5.874-4.446 1.19 0 2.23.202 3.084.597a.603.603 0 11-.507 1.095c-.694-.322-1.56-.484-2.577-.484-2.65 0-4.165 1.075-4.633 3.24h3.664a.603.603 0 010 1.205H8.5c-.006.123-.025.233-.025.359 0 .29.028.554.056.823h3.781a.601.601 0 110 1.205h-3.56c.577 1.857 2.067 2.773 4.527 2.773 1.025 0 1.902-.168 2.602-.496a.603.603 0 01.518 1.09M12 2c-6.437 0-9.84 3.403-9.84 9.846 0 6.44 3.403 9.84 9.84 9.84 6.443 0 9.846-3.403 9.846-9.84C21.846 5.403 18.443 2 12 2",
+    fill: fillColor
+  }));
+};
+
+export default IconEuroSymbolCircleFilled;

package/dist-es/generated/mistica-icons/icon-euro-symbol-circle-light.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconEuroSymbolCircleLight = function IconEuroSymbolCircleLight(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.997 21.022c5.988 0 9.022-3.034 9.022-9.02 0-5.989-3.034-9.022-9.022-9.022-5.986 0-9.02 3.036-9.02 9.022 0 5.986 3.036 9.02 9.02 9.02zm0-18.866c6.442 0 9.846 3.406 9.846 9.846 0 6.437-3.404 9.84-9.846 9.84-6.437 0-9.84-3.403-9.84-9.84 0-6.44 3.403-9.846 9.84-9.846zm3.988 14.426a.408.408 0 01.535.224.41.41 0 01-.184.518c-.85.4-1.891.605-3.096.605-3.199 0-5.151-1.4-5.74-4.064H6.199a.412.412 0 010-.824h1.174a9.83 9.83 0 01-.062-1.044c0-.196.009-.387.02-.572H6.198a.412.412 0 010-.823h1.219C7.885 7.66 9.913 6.06 13.24 6.06c1.188 0 2.219.199 3.065.591a.408.408 0 01.168.557.407.407 0 01-.513.188c-.737-.342-1.652-.515-2.72-.515-2.885 0-4.546 1.257-4.98 3.717h3.994a.412.412 0 010 .823H8.167c-.01.19-.039.37-.039.572 0 .37.031.714.07 1.045h4.05a.412.412 0 010 .823H8.367c.56 2.143 2.182 3.244 4.871 3.244 1.085.003 2.006-.174 2.748-.524z",
+    fill: fillColor
+  }));
+};
+
+export default IconEuroSymbolCircleLight;

package/dist-es/generated/mistica-icons/icon-euro-symbol-circle-regular.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconEuroSymbolCircleRegular = function IconEuroSymbolCircleRegular(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 20.479c5.731 0 8.639-2.905 8.639-8.633 0-5.734-2.905-8.639-8.639-8.639-5.728 0-8.633 2.905-8.633 8.639 0 5.728 2.905 8.633 8.633 8.633zM12 2c6.44 0 9.846 3.403 9.846 9.846 0 6.437-3.403 9.84-9.846 9.84-6.437 0-9.84-3.403-9.84-9.84C2.16 5.403 5.563 2 12 2zm3.883 13.857a.6.6 0 01.8.283c0 .003.004.003.004.006.142.3.014.66-.289.804h-.003c-.862.406-1.91.61-3.117.61-3.135 0-5.13-1.398-5.78-3.98h-1.12a.604.604 0 110-1.21h.928a10.058 10.058 0 01-.04-.821c0-.123.009-.24.014-.361h-.902a.602.602 0 010-1.204h1.028c.522-2.88 2.558-4.446 5.874-4.446 1.19 0 2.23.199 3.084.596a.603.603 0 11-.507 1.096c-.694-.322-1.563-.485-2.577-.485-2.65 0-4.168 1.076-4.633 3.238h3.664a.601.601 0 110 1.205h-3.81c-.005.123-.022.232-.022.361 0 .294.028.557.054.82h3.784a.604.604 0 110 1.21H8.754c.577 1.858 2.067 2.774 4.526 2.774 1.028.003 1.902-.165 2.603-.496z",
+    fill: fillColor
+  }));
+};
+
+export default IconEuroSymbolCircleRegular;

package/dist-es/generated/mistica-icons/icon-neural-network-human-filled.js

@@ -0,0 +1,31 @@
+/*
+ * This file was autogenerated. Don't edit this file!
+ *
+ * To update, execute "yarn start" inside "import-mistica-icons"
+ */
+import * as React from 'react';
+import { useTheme } from '../../hooks';
+import { useIsInverseVariant } from '../../theme-variant-context';
+
+var IconNeuralNetworkHumanFilled = function IconNeuralNetworkHumanFilled(_ref) {
+  var color = _ref.color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+
+  var _useTheme = useTheme(),
+      colors = _useTheme.colors;
+
+  var isInverse = useIsInverseVariant();
+  var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    role: "presentation"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13.071 2c5.04 0 7.816 2.725 7.816 7.672 0 1.003-.118 1.866-.317 2.62h-5.182a1.716 1.716 0 00-.535-.695l1.25-3.376c.75-.19 1.307-.854 1.307-1.65 0-.944-.781-1.711-1.745-1.711-.7 0-1.305.409-1.58.997h-1.518v-3.84c.168-.006.334-.017.504-.017zm.704 12.644a1.748 1.748 0 001.616-1.07h4.708c-.638 1.348-1.568 2.205-2.481 2.726l-.012 4.532a.865.865 0 01-.87.854H9.34a.865.865 0 01-.87-.854V19.3c-1.172-.118-2.034-.482-2.57-1.09-.462-.52-.585-1.137-.551-1.543l-.025-1.675-1.832-.474a.867.867 0 01-.617-.594.849.849 0 01.205-.823 10.198 10.198 0 001.582-2.126c.37-.675.58-1.362.62-2.042.226-3.866 2.333-6.227 5.977-6.793v4.104L9.587 7.952a1.783 1.783 0 00-.661-.131c-.961 0-1.745.767-1.745 1.711 0 .944.781 1.712 1.745 1.712.96 0 1.742-.768 1.742-1.712 0-.235-.05-.468-.146-.683l1.67-1.706h1.837c.138.38.404.695.751.896l-1.185 3.202c-.877.09-1.563.81-1.563 1.695 0 .944.782 1.711 1.743 1.708zm2.327-8.07a.433.433 0 01-.434.429.432.432 0 01-.437-.429c0-.235.196-.428.437-.428.238 0 .434.193.434.428zm-6.93 2.614c.017.02.084.056.104.1.053.07.084.155.087.241a.434.434 0 01-.437.429.434.434 0 01-.437-.429c0-.235.196-.428.437-.428a.445.445 0 01.246.087zm4.166 3.745c0-.236.196-.429.434-.429.24 0 .437.193.437.429a.434.434 0 01-.437.428.433.433 0 01-.434-.428z",
+    fill: fillColor
+  }));
+};
+
+export default IconNeuralNetworkHumanFilled;