@telefonica/mistica 12.0.0 → 12.1.0

package/dist/button-group.js

@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj) {
     }
 }
 var buttonLayoutSpacing = 16;
-var buttonLinkPadding = 6;
+var buttonLinkPadding = 12;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         inline: {

package/dist/button.js

@@ -460,12 +460,13 @@ var Button = function Button(props) {
     return null;
 };
 var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
-    var padding = 6;
+    var paddingY = 6;
+    var paddingX = 12;
     return {
         link: {
             display: "inline-block",
             width: "auto",
-            padding: padding,
+            padding: "".concat(paddingY, "px ").concat(paddingX, "px"),
             fontWeight: 500,
             borderRadius: 4,
             overflow: "hidden",
@@ -493,7 +494,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             })
         },
         aligned: {
-            marginLeft: -padding
+            marginLeft: -paddingX
         }
     };
 });

package/dist/card.d.ts

@@ -11,6 +11,8 @@ declare type MediaCardProps = {
     pretitleLinesMax?: number;
     title?: string;
     titleLinesMax?: number;
+    subtitle?: string;
+    subtitleLinesMax?: number;
     description?: string;
     descriptionLinesMax?: number;
     extra?: React.ReactNode;
@@ -28,6 +30,8 @@ interface DataCardProps {
      */
     icon?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    pretitleLinesMax?: number;
     title?: string;
     titleLinesMax?: number;
     subtitle?: string;

package/dist/card.js

@@ -228,7 +228,7 @@ var useMediaCardStyles = (0, _jss).createUseStyles(function(param) {
     };
 });
 var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useMediaCardStyles({
         media: media
     });
@@ -254,6 +254,8 @@ var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                             pretitleLinesMax: pretitleLinesMax,
                             title: title,
                             titleLinesMax: titleLinesMax,
+                            subtitle: subtitle,
+                            subtitleLinesMax: subtitleLinesMax,
                             description: description,
                             descriptionLinesMax: descriptionLinesMax,
                             extra: extra,
@@ -285,7 +287,7 @@ var useDataCardStyles = (0, _jss).createUseStyles(function(param) {
     };
 });
 var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var icon = param.icon, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useDataCardStyles();
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
         "aria-label": ariaLabel,
@@ -304,6 +306,8 @@ var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(CardContent, {
                         headline: headline,
+                        pretitle: pretitle,
+                        pretitleLinesMax: pretitleLinesMax,
                         title: title,
                         titleLinesMax: titleLinesMax,
                         subtitle: subtitle,
@@ -343,6 +347,7 @@ var useSnapCardStyles = (0, _jss).createUseStyles(function(theme) {
             justifyContent: "space-between",
             padding: 16,
             minHeight: 80,
+            flex: 1,
             minWidth: 104
         }, theme.mq.desktopOrBigger, {
             padding: 24

package/dist/card.js.flow

@@ -18,6 +18,8 @@ declare type MediaCardProps = {
   pretitleLinesMax?: number,
   title?: string,
   titleLinesMax?: number,
+  subtitle?: string,
+  subtitleLinesMax?: number,
   description?: string,
   descriptionLinesMax?: number,
   extra?: React.Node,
@@ -34,6 +36,8 @@ declare type DataCardProps = {
    */
   icon?: React.Element<any>,
   headline?: string | RendersNullableElement<typeof Tag>,
+  pretitle?: string,
+  pretitleLinesMax?: number,
   title?: string,
   titleLinesMax?: number,
   subtitle?: string,

package/dist/carousel.d.ts

@@ -16,6 +16,8 @@ declare type MobilePageOffset = number | {
 };
 declare type CarouselProps = {
     items: ReadonlyArray<React.ReactNode>;
+    itemStyle?: React.CSSProperties;
+    itemClassName?: string;
     withBullets?: boolean;
     renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
     itemsPerPage?: ItemsPerPageProp;
@@ -39,6 +41,8 @@ declare type CarouselProps = {
 export declare const Carousel: React.FC<CarouselProps>;
 declare type CenteredCarouselProps = {
     items: ReadonlyArray<React.ReactNode>;
+    itemStyle?: React.CSSProperties;
+    itemClassName?: string;
     withBullets?: boolean;
     renderBullets?: (bulletsProps: PageBulletsProps) => React.ReactNode;
     onPageChange?: (newPageInfo: {

package/dist/carousel.js

@@ -415,7 +415,7 @@ var calcCurrentPageIndex = function calcCurrentPageIndex(scrollPosition, pagesSc
 };
 var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function BaseCarousel(param) {
-    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     var texts = (0, _hooks).useTheme().texts;
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
@@ -629,7 +629,8 @@ var BaseCarousel = function BaseCarousel(param) {
                         ref: carouselRef,
                         children: items.map(function(item, index) {
                             return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                className: classes.item,
+                                className: (0, _classnames).default(classes.item, itemClassName),
+                                style: itemStyle,
                                 "data-item": true,
                                 children: item
                             }, index);
@@ -659,9 +660,11 @@ var Carousel = function Carousel(props) {
 };
 exports.Carousel = Carousel;
 var CenteredCarousel = function CenteredCarousel(param) {
-    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(BaseCarousel, {
         items: items,
+        itemStyle: itemStyle,
+        itemClassName: itemClassName,
         itemsPerPage: {
             mobile: 1,
             desktop: 3

package/dist/carousel.js.flow

@@ -22,6 +22,8 @@ declare type MobilePageOffset =
     };
 declare type CarouselProps = {
   items: $ReadOnlyArray<React.Node>,
+  itemStyle?: CssStyle,
+  itemClassName?: string,
   withBullets?: boolean,
   renderBullets?: (bulletsProps: PageBulletsProps) => React.Node,
   itemsPerPage?: ItemsPerPageProp,
@@ -52,6 +54,8 @@ declare type CarouselProps = {
 declare export var Carousel: React.ComponentType<CarouselProps>;
 declare type CenteredCarouselProps = {
   items: $ReadOnlyArray<React.Node>,
+  itemStyle?: CssStyle,
+  itemClassName?: string,
   withBullets?: boolean,
   renderBullets?: (bulletsProps: PageBulletsProps) => React.Node,
   onPageChange?: (newPageInfo: {
@@ -75,3 +79,5 @@ declare type SlideshowProps = {
 };
 declare export var Slideshow: React.ComponentType<SlideshowProps>;
 declare export {};
+
+import { type CssStyle } from "./__css_types__.js.flow";

package/dist/checkbox.js

@@ -125,6 +125,7 @@ var useIconCheckboxStyles = (0, _jss).createUseStyles(function(param) {
             justifyContent: "center",
             alignItems: "center",
             userSelect: "none",
+            outline: "1px solid transparent",
             borderRadius: 2,
             verticalAlign: "middle",
             background: colors.background,
@@ -132,7 +133,7 @@ var useIconCheckboxStyles = (0, _jss).createUseStyles(function(param) {
             transition: "box-shadow 0.3s"
         },
         boxChecked: {
-            boxShadow: "inset 0 0 0 9px ".concat(colors.controlActivated)
+            boxShadow: "inset 0 0 0 12px ".concat(colors.controlActivated)
         },
         check: {
             display: "block",

package/dist/generated/mistica-icons/icon-photo-camera-filled.js

@@ -90,26 +90,46 @@ var IconPhotoCameraFilled = function IconPhotoCameraFilled(_param) {
         "size",
         "children"
     ]);
-    var colors = (0, _hooks).useTheme().colors;
+    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", _objectSpread({
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        role: "presentation"
-    }, rest, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M8.248 12.712a3.753 3.753 0 013.748-3.748 3.753 3.753 0 013.748 3.748 3.75 3.75 0 01-3.748 3.748 3.75 3.75 0 01-3.748-3.748z",
-                fill: fillColor
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M17.648 6.288h2.204c1.18 0 2.144.96 2.144 2.144v10c0 1.184-.96 2.144-2.144 2.144H4.14a2.144 2.144 0 01-2.144-2.144v-10c0-1.184.96-2.144 2.144-2.144h2.2L8.992 3.64a.69.69 0 01.504-.212h5c.188 0 .372.076.508.212l2.644 2.648zM7.176 12.716c0 2.66 2.164 4.82 4.82 4.82s4.82-2.16 4.82-4.82-2.164-4.82-4.82-4.82a4.825 4.825 0 00-4.82 4.82z",
-                fill: fillColor
-            })
-        ]
-    }));
+    if (skinName.match(/^o2/i)) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M8.248 12.712a3.753 3.753 0 013.748-3.748 3.753 3.753 0 013.748 3.748 3.75 3.75 0 01-3.748 3.748 3.75 3.75 0 01-3.748-3.748z",
+                    fill: fillColor
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M17.648 6.288h2.204c1.18 0 2.144.96 2.144 2.144v10c0 1.184-.96 2.144-2.144 2.144H4.14a2.144 2.144 0 01-2.144-2.144v-10c0-1.184.96-2.144 2.144-2.144h2.2L8.992 3.64a.69.69 0 01.504-.212h5c.188 0 .372.076.508.212l2.644 2.648zM7.176 12.716c0 2.66 2.164 4.82 4.82 4.82s4.82-2.16 4.82-4.82-2.164-4.82-4.82-4.82a4.825 4.825 0 00-4.82 4.82z",
+                    fill: fillColor
+                })
+            ]
+        }));
+    } else {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M11.597 11.36h.806a1.327 1.327 0 011.329 1.33v.805a1.33 1.33 0 01-1.33 1.33h-.805a1.327 1.327 0 01-1.33-1.33v-.806a1.33 1.33 0 011.33-1.329z",
+                    fill: fillColor
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M9.603 5.36a1.636 1.636 0 011.468-.913h1.69c.597 0 1.146.324 1.434.847l.722 1.313h5.345c.96 0 1.738.779 1.738 1.739v9.461c0 .96-.778 1.739-1.738 1.739H3.331A1.331 1.331 0 012 18.214V8.346c0-.96.778-1.739 1.738-1.739h5.25l.615-1.247zm1.994 4.773a2.556 2.556 0 00-2.556 2.556v.806a2.556 2.556 0 002.556 2.556h.806a2.556 2.556 0 002.556-2.556v-.806a2.556 2.556 0 00-2.556-2.556h-.806z",
+                    fill: fillColor
+                })
+            ]
+        }));
+    }
 };
 var _default = IconPhotoCameraFilled;
 exports.default = _default;

package/dist/generated/mistica-icons/icon-photo-camera-light.js

@@ -90,26 +90,40 @@ var IconPhotoCameraLight = function IconPhotoCameraLight(_param) {
         "size",
         "children"
     ]);
-    var colors = (0, _hooks).useTheme().colors;
+    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", _objectSpread({
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        role: "presentation"
-    }, rest, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M20.203 20.032h-.356a.357.357 0 010-.712h.356a1.07 1.07 0 001.067-1.067V8.258a1.07 1.07 0 00-1.067-1.068h-2.855a.344.344 0 01-.252-.104l-2.75-2.75H9.644l-2.75 2.742a.357.357 0 01-.252.104H3.787A1.07 1.07 0 002.72 8.25v9.995c0 .587.48 1.067 1.067 1.067h11.778a.357.357 0 010 .712H3.787A1.777 1.777 0 012 18.244v-9.99c0-.984.8-1.787 1.787-1.787h2.71l2.751-2.751a.357.357 0 01.252-.104h4.998c.096 0 .188.036.252.104l2.75 2.75h2.71c.984 0 1.788.8 1.788 1.788v9.995a1.8 1.8 0 01-1.795 1.783z",
-                fill: fillColor
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M16.992 19.676c0 .392.32.712.712.712.392 0 .712-.32.712-.712a.713.713 0 00-.712-.712.708.708 0 00-.712.712zm-9.639-7.14a4.648 4.648 0 004.642 4.641 4.644 4.644 0 004.642-4.637 4.648 4.648 0 00-4.642-4.642 4.644 4.644 0 00-4.642 4.638zm.72-.005a3.926 3.926 0 013.922-3.922 3.923 3.923 0 013.922 3.922 3.926 3.926 0 01-3.922 3.923 3.926 3.926 0 01-3.922-3.923z",
+    if (skinName.match(/^o2/i)) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M20.203 20.032h-.356a.357.357 0 010-.712h.356a1.07 1.07 0 001.067-1.067V8.258a1.07 1.07 0 00-1.067-1.068h-2.855a.344.344 0 01-.252-.104l-2.75-2.75H9.644l-2.75 2.742a.357.357 0 01-.252.104H3.787A1.07 1.07 0 002.72 8.25v9.995c0 .587.48 1.067 1.067 1.067h11.778a.357.357 0 010 .712H3.787A1.777 1.777 0 012 18.244v-9.99c0-.984.8-1.787 1.787-1.787h2.71l2.751-2.751a.357.357 0 01.252-.104h4.998c.096 0 .188.036.252.104l2.75 2.75h2.71c.984 0 1.788.8 1.788 1.788v9.995a1.8 1.8 0 01-1.795 1.783z",
+                    fill: fillColor
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                    d: "M16.992 19.676c0 .392.32.712.712.712.392 0 .712-.32.712-.712a.713.713 0 00-.712-.712.708.708 0 00-.712.712zm-9.639-7.14a4.648 4.648 0 004.642 4.641 4.644 4.644 0 004.642-4.637 4.648 4.648 0 00-4.642-4.642 4.644 4.644 0 00-4.642 4.638zm.72-.005a3.926 3.926 0 013.922-3.922 3.923 3.923 0 013.922 3.922 3.926 3.926 0 01-3.922 3.923 3.926 3.926 0 01-3.922-3.923z",
+                    fill: fillColor
+                })
+            ]
+        }));
+    } else {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", _objectSpread({
+            width: size,
+            height: size,
+            viewBox: "0 0 24 24",
+            role: "presentation"
+        }, rest, {
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                d: "M11.06 4.497c-.566 0-1.082.32-1.332.828l-.676 1.372h-5.46c-.877 0-1.587.71-1.587 1.587v10.049c0 .648.525 1.173 1.173 1.173h17.24c.877 0 1.588-.71 1.588-1.587V8.284c0-.876-.711-1.587-1.588-1.587h-5.55l-.788-1.432a1.484 1.484 0 00-1.3-.768h-1.72zm-.538 1.219a.598.598 0 01.537-.334h1.72c.22 0 .42.118.526.31l.913 1.66.126.23h6.074c.388 0 .703.314.703.702v9.635a.703.703 0 01-.703.702H3.178a.289.289 0 01-.288-.288V8.284c0-.388.314-.702.702-.702h6.011l.121-.247.798-1.62zm1.073 5.273c-.949 0-1.718.77-1.718 1.718v.82c0 .95.77 1.718 1.718 1.718h.82c.949 0 1.718-.769 1.718-1.717v-.82c0-.95-.77-1.719-1.718-1.719h-.82zm-2.603 1.718a2.603 2.603 0 012.603-2.602h.82a2.603 2.603 0 012.603 2.602v.82a2.603 2.603 0 01-2.603 2.603h-.82a2.603 2.603 0 01-2.603-2.602v-.82z",
                 fill: fillColor
             })
-        ]
-    }));
+        }));
+    }
 };
 var _default = IconPhotoCameraLight;
 exports.default = _default;

package/dist/generated/mistica-icons/icon-process-loading-filled.js

@@ -113,7 +113,7 @@ var IconProcessLoadingFilled = function IconProcessLoadingFilled(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M2.155 12.001c0-6.443 3.403-9.846 9.84-9.846 6.443 0 9.846 3.403 9.846 9.846 0 6.437-3.406 9.84-9.846 9.84-6.437 0-9.84-3.403-9.84-9.84zm10.49-4.174V4.802a.604.604 0 10-1.21 0v3.025a.604.604 0 101.21 0zm3.527 4.818h3.022a.604.604 0 100-1.21h-3.022a.604.604 0 100 1.21zm.459 4.902a.602.602 0 00.852-.003.604.604 0 000-.857l-2.138-2.137a.605.605 0 00-.854.854l2.14 2.143zM11.956 19.8a.604.604 0 00.605-.605V16.17a.604.604 0 10-1.21 0v3.025c0 .336.269.605.605.605zm-2.513-4.454a.6.6 0 000-.829.606.606 0 00-.854-.022L6.452 16.63a.605.605 0 00.854.854l2.137-2.14zm-4.641-3.994a.606.606 0 000 1.21h3.025a.604.604 0 100-1.21H4.802zm9.75-2.7a.608.608 0 00-.002.854.605.605 0 00.854 0l2.14-2.137a.605.605 0 00-.854-.854L14.552 8.65z",
+                d: "M2.155 12.001c0-6.443 3.403-9.846 9.84-9.846 6.443 0 9.846 3.403 9.846 9.846 0 6.437-3.406 9.84-9.846 9.84-6.437 0-9.84-3.403-9.84-9.84zm10.49-4.174V4.802a.604.604 0 10-1.21 0v3.025a.604.604 0 101.21 0zm3.527 4.818h3.022a.604.604 0 100-1.21h-3.022a.604.604 0 100 1.21zm.46 4.902a.602.602 0 00.85-.003.604.604 0 000-.857l-2.136-2.137a.605.605 0 00-.855.854l2.14 2.143zM11.955 19.8a.604.604 0 00.605-.605V16.17a.604.604 0 10-1.21 0v3.025c0 .336.269.605.605.605zm-2.512-4.454a.6.6 0 000-.829.606.606 0 00-.855-.022L6.452 16.63a.605.605 0 00.854.854l2.138-2.14zm-4.642-3.994a.606.606 0 000 1.21h3.025a.604.604 0 100-1.21H4.802zm9.75-2.7a.608.608 0 00-.002.854.605.605 0 00.854 0l2.14-2.137a.605.605 0 00-.854-.854L14.553 8.65z",
                 fill: fillColor
             })
         }));

package/dist/generated/mistica-icons/icon-shield-cross-light.js

@@ -113,7 +113,7 @@ var IconShieldCrossLight = function IconShieldCrossLight(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M20.446 4.849a.433.433 0 01.162.31v.028c0 .53.006 6.763-.46 9.485-.615 3.583-7.677 6.983-7.98 7.126l-.005.003a.39.39 0 01-.339 0l-.009-.003c-.3-.143-7.352-3.543-7.969-7.126-.47-2.72-.465-8.954-.465-9.485V5.16a.428.428 0 01.157-.325.414.414 0 01.35-.082c1.738.282 2.681-.348 3.768-1.074l.02-.012c1.061-.712 2.263-1.516 4.316-1.516h.005c2.054.003 3.258.807 4.317 1.516l.01.006c1.088.728 2.031 1.36 3.772 1.083a.448.448 0 01.35.093zM11.58 3.006c-1.552.1-2.518.733-3.448 1.355-1.048.703-2.137 1.429-3.922 1.275.006 1.005.028 3.44.146 5.66h7.224v-8.29zm-6.916 11.52c.451 2.614 5.233 5.331 6.916 6.213v-8.605H4.41c.064.92.145 1.762.254 2.393zm7.745 6.213c1.684-.882 6.474-3.599 6.922-6.212.11-.628.19-1.474.252-2.393h-7.174v8.605zM19.78 5.63c-1.804.146-2.882-.571-3.924-1.266-.928-.622-1.894-1.258-3.446-1.356v8.289h7.227c.118-2.224.14-4.667.143-5.667z",
+                d: "M20.446 4.849a.433.433 0 01.162.31v.028c0 .53.006 6.763-.46 9.485-.615 3.583-7.677 6.983-7.98 7.126l-.005.003a.39.39 0 01-.339 0l-.009-.003c-.3-.143-7.352-3.543-7.969-7.126-.47-2.72-.465-8.954-.465-9.485V5.16a.428.428 0 01.157-.325.414.414 0 01.35-.082c1.738.282 2.681-.348 3.768-1.074l.02-.012c1.061-.712 2.263-1.516 4.316-1.516h.006c2.053.003 3.257.807 4.316 1.516l.01.006c1.088.728 2.031 1.36 3.772 1.083a.448.448 0 01.35.093zM11.58 3.006c-1.552.1-2.518.733-3.448 1.355-1.048.703-2.137 1.429-3.922 1.275.006 1.005.028 3.44.146 5.66h7.224v-8.29zm-6.916 11.52c.451 2.614 5.233 5.331 6.916 6.213v-8.605H4.41c.064.92.145 1.762.254 2.393zm7.745 6.213c1.684-.882 6.474-3.599 6.922-6.212.11-.628.19-1.474.252-2.393h-7.174v8.605zM19.78 5.63c-1.804.146-2.882-.571-3.924-1.266-.928-.622-1.894-1.258-3.446-1.356v8.289h7.227c.118-2.224.14-4.667.143-5.667z",
                 fill: fillColor
             })
         }));

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

@@ -119,7 +119,7 @@ var IconShopLight = function IconShopLight(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M21.188 12.552c.798-.383 1.312-.999 1.312-1.715 0-.432-.191-.843-.556-1.195-.139-.223-.482-1.375-.664-1.984l-.017-.059c-.096-.33-.18-.61-.233-.765l-1.345-3.965c-.125-.372-.51-.624-.917-.619L5.22 2.286c-.415.003-.78.247-.911.613-.185.547-.457 1.36-.75 2.24-.592 1.778-1.405 4.211-1.51 4.436-.045.1-.105.189-.165.277l-.02.028-.004.006c-.16.238-.36.533-.36.951 0 .716.514 1.335 1.309 1.715V20.3c0 .799.726 1.45 1.62 1.45h15.143c.89 0 1.616-.651 1.616-1.45v-7.747zm.44-1.712c0 .708-1.067 1.307-2.331 1.307-.84-.003-1.623-.266-2.044-.7a.54.54 0 00-.383-.154h-.003l-.253.027-.129.13c-.418.428-1.201.692-2.04.692-.84 0-1.623-.264-2.042-.691a.537.537 0 00-.382-.159l-.257.026-.131.133c-.419.427-1.202.69-2.041.69-.849 0-1.635-.266-2.05-.699a.54.54 0 00-.392-.163l-.26.027-.131.136c-.415.43-1.201.7-2.05.7-1.264 0-2.33-.597-2.33-1.307 0-.178.083-.306.23-.522.095-.133.179-.272.25-.419.114-.247.712-2.028 1.542-4.517l.264-.788.483-1.44c.012-.03.045-.05.081-.05l13.545-.036c.036 0 .069.022.08.053L20.2 7.078c.051.147.132.419.224.735.505 1.698.685 2.187.879 2.375l.003.003c.146.141.323.366.323.65zm-1.315 2v7.46c.003.352-.332.638-.741.638h-4.766V15.99c0-.58-.526-1.052-1.174-1.052h-3.245c-.646 0-1.172.472-1.172 1.052v4.947h-4.79c-.409 0-.744-.289-.744-.641v-7.455c.323.07.66.116 1.02.116.955 0 1.84-.272 2.44-.738.601.466 1.489.738 2.442.738.95 0 1.831-.266 2.429-.727.6.46 1.48.727 2.426.727.947 0 1.829-.266 2.43-.727.6.458 1.479.727 2.426.727a4.833 4.833 0 001.019-.116zm-6.383 8.097h-3.836V15.99c0-.133.134-.242.298-.242h3.24c.164 0 .298.109.298.242v4.947z",
+                d: "M21.188 12.552c.798-.383 1.312-.999 1.312-1.715 0-.432-.191-.843-.556-1.195-.139-.223-.482-1.375-.664-1.984l-.017-.059c-.096-.33-.18-.61-.233-.765l-1.345-3.965c-.125-.372-.51-.624-.917-.619L5.22 2.286c-.415.003-.78.247-.911.613-.185.547-.457 1.36-.75 2.24-.592 1.778-1.405 4.211-1.51 4.436-.045.1-.105.189-.165.277l-.02.028-.004.006c-.16.238-.36.533-.36.951 0 .716.514 1.335 1.309 1.715V20.3c0 .799.726 1.45 1.62 1.45h15.143c.89 0 1.616-.651 1.616-1.45v-7.747zm.44-1.712c0 .708-1.067 1.307-2.331 1.307-.84-.003-1.623-.266-2.044-.7a.54.54 0 00-.383-.154h-.003l-.254.027-.128.13c-.418.428-1.201.692-2.04.692-.84 0-1.623-.264-2.042-.691a.537.537 0 00-.382-.159l-.257.026-.131.133c-.419.427-1.202.69-2.041.69-.849 0-1.635-.266-2.05-.699a.54.54 0 00-.392-.163l-.26.027-.131.136c-.415.43-1.201.7-2.05.7-1.264 0-2.33-.597-2.33-1.307 0-.178.083-.306.23-.522.095-.133.179-.272.25-.419.114-.247.712-2.028 1.542-4.517l.264-.788c.189-.564.357-1.068.483-1.44.012-.03.045-.05.081-.05l13.545-.036c.036 0 .069.022.08.053L20.2 7.078c.051.147.132.419.224.735.505 1.698.685 2.187.879 2.375l.003.003c.146.141.323.366.323.65zm-1.315 2v7.46c.003.352-.332.638-.741.638h-4.766V15.99c0-.58-.526-1.052-1.174-1.052h-3.245c-.646 0-1.172.472-1.172 1.052v4.947h-4.79c-.41 0-.744-.289-.744-.641v-7.455c.323.07.66.116 1.02.116.955 0 1.84-.272 2.44-.738.601.466 1.488.738 2.442.738.95 0 1.831-.266 2.429-.727.6.46 1.479.727 2.426.727.947 0 1.829-.266 2.43-.727.6.458 1.479.727 2.426.727a4.832 4.832 0 001.019-.116zm-6.383 8.097h-3.836V15.99c0-.133.134-.242.298-.242h3.24c.164 0 .298.109.298.242v4.947z",
                 fill: fillColor
             })
         }));

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

@@ -100,7 +100,7 @@ var IconTalkFilled = function IconTalkFilled(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-            d: "M20.31 2.15h-6.006c-.072 0-.143.005-.213.014h-.224c-.891 0-1.614.723-1.614 1.613V7.68c0 .92.658 1.614 1.53 1.614h.109v1.557c0 .426.336.824.75.888a.755.755 0 00.113.009c.375 0 .79-.27 1.08-.715.132-.198.796-1.243 1.11-1.74h3.288c.891 0 1.614-.722 1.614-1.613V3.777c0-.107-.01-.212-.03-.313a1.52 1.52 0 00-1.508-1.314zm-5.446 4.118a.545.545 0 110-1.093.547.547 0 010 1.093zm1.638-.547a.547.547 0 111.094.002.547.547 0 01-1.094-.002zm2.732.547a.545.545 0 110-1.093.547.547 0 010 1.093zm-13.325 7.98c.655.695 1.602 1.045 2.817 1.045 1.213 0 2.163-.353 2.818-1.045.617-.653.93-1.563.93-2.703s-.313-2.05-.93-2.703c-.655-.692-1.602-1.045-2.818-1.045-1.215 0-2.162.35-2.817 1.045-.617.653-.93 1.563-.93 2.703s.31 2.05.93 2.703zm8.826 7.6H2.715a.562.562 0 01-.56-.56v-1.04c0-1.345.356-2.384 1.059-3.09s1.74-1.067 3.075-1.067h4.872c1.339 0 2.372.359 3.075 1.067.703.71 1.06 1.745 1.06 3.09v1.04a.56.56 0 01-.561.56z",
+            d: "M20.309 2.15h-6.006c-.072 0-.143.005-.212.014h-.225c-.89 0-1.613.723-1.613 1.613V7.68c0 .92.658 1.614 1.53 1.614h.109v1.557c0 .426.336.824.75.888a.754.754 0 00.112.009c.376 0 .79-.27 1.082-.715.131-.198.795-1.243 1.109-1.74h3.288c.891 0 1.614-.722 1.614-1.613V3.777c0-.107-.01-.212-.03-.313a1.52 1.52 0 00-1.508-1.314zm-5.446 4.118a.545.545 0 110-1.093.547.547 0 010 1.093zm1.64-.547a.547.547 0 111.093.002.547.547 0 01-1.094-.002zm2.73.547a.545.545 0 110-1.093.547.547 0 010 1.093zm-13.325 7.98c.656.695 1.603 1.045 2.818 1.045 1.213 0 2.163-.353 2.818-1.045.616-.653.93-1.563.93-2.703s-.314-2.05-.93-2.703c-.655-.692-1.602-1.045-2.818-1.045-1.215 0-2.162.35-2.818 1.045-.616.653-.93 1.563-.93 2.703s.311 2.05.93 2.703zm8.827 7.6H2.715a.562.562 0 01-.56-.56v-1.04c0-1.345.356-2.384 1.059-3.09s1.74-1.067 3.075-1.067h4.871c1.34 0 2.373.359 3.076 1.067.703.71 1.059 1.745 1.059 3.09v1.04a.56.56 0 01-.56.56z",
             fill: fillColor
         })
     }));

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

@@ -100,7 +100,7 @@ var IconTongueLight = function IconTongueLight(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-            d: "M21.07 3.994a.425.425 0 01.583-.117.407.407 0 01.117.571c-.843 1.258-1.977 2.224-3.361 2.93.03.053.056.112.062.176.067.813.1 1.715.1 2.754 0 6.106-1.098 9.894-6.563 9.894s-6.563-3.788-6.563-9.894c0-1.081.037-2.017.112-2.86a.217.217 0 01.016-.056l.007-.02C4.199 6.67 3.064 5.7 2.224 4.44a.41.41 0 01.12-.575.42.42 0 01.583.118c1.728 2.594 4.784 3.908 9.076 3.908 4.285 0 7.339-1.311 9.067-3.897zm-9.059 15.381c4.224 0 5.723-2.37 5.723-9.064 0-.97-.031-1.81-.09-2.574-1.479.602-3.227.924-5.232.963l.039 7.426a.42.42 0 01-.417.417h-.003a.414.414 0 01-.42-.412l-.04-7.428c-1.986-.042-3.722-.361-5.193-.958a33.33 33.33 0 00-.09 2.566c0 6.692 1.496 9.064 5.723 9.064z",
+            d: "M21.07 3.994a.425.425 0 01.583-.117.407.407 0 01.117.571c-.843 1.258-1.977 2.224-3.361 2.93.03.053.056.112.062.176.067.813.1 1.715.1 2.754 0 6.106-1.098 9.894-6.563 9.894s-6.563-3.788-6.563-9.894c0-1.081.037-2.017.112-2.86a.217.217 0 01.016-.056l.007-.02C4.199 6.67 3.064 5.7 2.224 4.44a.41.41 0 01.12-.575.42.42 0 01.583.118c1.728 2.594 4.784 3.908 9.076 3.908 4.285 0 7.339-1.311 9.067-3.897zm-9.06 15.381c4.224 0 5.723-2.37 5.723-9.064 0-.97-.031-1.81-.09-2.574-1.479.602-3.227.924-5.232.963l.039 7.426a.42.42 0 01-.418.417h-.002a.414.414 0 01-.42-.412l-.04-7.428c-1.986-.042-3.722-.361-5.193-.958a33.33 33.33 0 00-.09 2.566c0 6.692 1.496 9.064 5.723 9.064z",
             fill: fillColor
         })
     }));

package/dist/generated/mistica-icons/icon-trash-can-filled.js

@@ -113,7 +113,7 @@ var IconTrashCanFilled = function IconTrashCanFilled(_param) {
             role: "presentation"
         }, rest, {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-                d: "M16.704 6.262h4.535c.333 0 .602.272.605.602a.603.603 0 01-.602.603h-1.457V18.58c0 1.009-.305 1.813-.907 2.39-.855.818-2.02.871-2.311.871a.647.647 0 01-.056-.002H7.46c-1.036 0-1.854-.314-2.428-.928-.889-.95-.82-2.272-.815-2.356v-.003L4.214 7.467H2.757a.601.601 0 110-1.205H7.29V4.45c0-.784.23-1.39.681-1.798a2.004 2.004 0 011.485-.493l5.129-.006c.803 0 1.283.333 1.543.613.63.675.585 1.628.577 1.734v1.762zm-8.213 0h7.011v-1.8c.009-.189-.022-.628-.257-.878-.146-.154-.362-.227-.661-.227l-5.188.003h-.003c-.066-.003-.395-.02-.625.19-.184.172-.277.477-.277.9v1.812zm5.56 11.476a.601.601 0 00.603-.602v-6.162a.603.603 0 00-1.205 0v6.162c0 .334.272.602.602.602zm-3.507-.602v-6.162a.601.601 0 10-1.204 0v6.162a.601.601 0 101.204 0z",
+                d: "M16.704 6.262h4.535c.333 0 .602.272.605.602a.603.603 0 01-.602.603h-1.457V18.58c0 1.009-.305 1.813-.908 2.39-.854.818-2.02.871-2.31.871a.644.644 0 01-.065-.003H7.46c-1.036 0-1.854-.313-2.428-.927-.89-.95-.82-2.272-.816-2.356v-.003L4.214 7.467H2.757a.601.601 0 110-1.205h4.532V4.45c0-.784.23-1.39.68-1.798a2.005 2.005 0 011.485-.493l5.13-.006c.803 0 1.282.333 1.543.613.63.675.585 1.628.577 1.734v1.762zm-8.213 0h7.011v-1.8c.008-.189-.022-.628-.258-.878-.145-.154-.361-.227-.66-.227l-5.188.003h-.003c-.066-.003-.396-.02-.625.19-.185.172-.277.477-.277.9v1.812zm5.56 11.476a.601.601 0 00.602-.602v-6.162a.603.603 0 00-1.204 0v6.162c0 .334.272.602.602.602zm-3.507-.602v-6.162a.601.601 0 10-1.204 0v6.162a.601.601 0 101.204 0z",
                 fill: fillColor
             })
         }));

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

@@ -100,7 +100,7 @@ var IconUmbrellaFilled = function IconUmbrellaFilled(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-            d: "M11.436 3.334a.07.07 0 01.003.017h1.227l.003-.012c.002-.008.004-.015.002-.024v-.55a.616.616 0 00-.619-.61.616.616 0 00-.619.61v.553a.07.07 0 00.003.016zm10.381 7.516c.073.417-.042.86-.316 1.204a1.58 1.58 0 01-1.2.558l-1.526-.003a.606.606 0 00.014-.19c-.804-6.382-4.706-8.583-6.104-9.068 2.914.126 5.197 1.011 6.804 2.653 1.205 1.23 1.99 2.863 2.328 4.846zm-4.258 1.717c-.644-5.115-3.49-7.275-4.876-7.897 0 0-.003 7.922-.006 7.92l4.894.013a.051.051 0 00-.006-.019.088.088 0 01-.006-.017zM11.422 4.7c-1.442.734-4.39 3.101-5.154 7.874l5.16.014-.006-7.888zM5.01 12.567c.9-6.104 5.05-8.639 6.407-9.213-2.933.095-5.247.966-6.872 2.605-1.218 1.218-2.016 2.843-2.37 4.826a1.539 1.539 0 00.706 1.552c.247.149.527.227.816.233l1.313.002v-.005zm10.348 6.423a.616.616 0 01.619.61c0 1.236-1.02 2.241-2.272 2.241-1.235 0-2.246-.977-2.272-2.19l-.002-.042v-7.02h1.238V19.6c0 .56.462 1.02 1.033 1.02.569 0 1.031-.457 1.031-1.02a.624.624 0 01.625-.61z",
+            d: "M11.436 3.334a.07.07 0 01.003.017h1.227l.003-.012c.002-.008.004-.015.002-.024v-.55a.616.616 0 00-.619-.61.616.616 0 00-.619.61v.553a.07.07 0 00.003.016zm10.38 7.516c.074.417-.041.86-.316 1.204a1.58 1.58 0 01-1.198.558l-1.527-.003a.606.606 0 00.014-.19c-.804-6.382-4.706-8.583-6.104-9.068 2.913.126 5.196 1.011 6.804 2.653 1.205 1.23 1.989 2.863 2.328 4.846zm-4.257 1.717c-.644-5.115-3.49-7.275-4.877-7.897 0 0-.002 7.922-.005 7.92l4.893.013a.049.049 0 00-.005-.019c-.002-.005-.005-.01-.006-.017zM11.422 4.7c-1.443.734-4.39 3.101-5.154 7.874l5.16.014-.006-7.888zM5.01 12.567c.9-6.104 5.05-8.639 6.406-9.213-2.932.095-5.246.966-6.87 2.605-1.22 1.218-2.018 2.843-2.37 4.826-.079.429.041.874.344 1.241.104.12.224.227.361.311.247.149.527.227.815.233l1.314.002v-.005zm10.348 6.423a.616.616 0 01.618.61c0 1.236-1.02 2.241-2.271 2.241-1.236 0-2.247-.977-2.272-2.19l-.003-.042v-7.02h1.238V19.6c0 .56.463 1.02 1.034 1.02.569 0 1.03-.457 1.03-1.02a.624.624 0 01.626-.61z",
             fill: fillColor
         })
     }));

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

@@ -100,7 +100,7 @@ var IconWebFilled = function IconWebFilled(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
-            d: "M21.841 5.993c0-.759-.641-1.378-1.428-1.378H3.583c-.79 0-1.428.62-1.428 1.378v12.011c0 .76.639 1.376 1.429 1.376h16.829c.787 0 1.428-.62 1.428-1.378V5.993zm-16.498.83a.548.548 0 01-.56.537.548.548 0 01-.558-.538.548.548 0 01.557-.537h.003a.548.548 0 01.558.537zm15.294 11.179a.22.22 0 01-.224.215H3.583a.221.221 0 01-.223-.215V8.338h17.277v9.664zM6.81 10.447l2.729 2.384a.57.57 0 01.006.857l-2.729 2.428a.595.595 0 01-.409.155.61.61 0 01-.442-.188.566.566 0 01.01-.801l.012-.01a.082.082 0 01.011-.01l2.244-1.997-2.238-1.958a.567.567 0 01-.052-.81l.01-.01a.615.615 0 01.848-.04zm10.681 2.255c.334 0 .605.26.605.58 0 .32-.271.58-.602.58h-6.468a.596.596 0 01-.605-.58c0-.32.272-.583.605-.583l6.465.003zM6.463 6.285a.548.548 0 01.558.537.548.548 0 01-.56.538.548.548 0 01-.558-.538.548.548 0 01.557-.537h.003zm2.235.537a.548.548 0 01-.56.538.548.548 0 01-.557-.538.548.548 0 01.557-.537h.003a.548.548 0 01.557.537z",
+            d: "M21.841 5.993c0-.759-.641-1.378-1.428-1.378H3.583c-.79 0-1.428.62-1.428 1.378v12.011c0 .76.638 1.376 1.428 1.376h16.83c.787 0 1.428-.62 1.428-1.378V5.993zm-16.499.83a.548.548 0 01-.56.537.548.548 0 01-.557-.538.548.548 0 01.557-.537h.003a.548.548 0 01.557.537zm15.295 11.179a.22.22 0 01-.224.215H3.583a.221.221 0 01-.224-.215V8.338h17.278v9.664zM6.81 10.447l2.729 2.384a.57.57 0 01.006.857l-2.73 2.428a.595.595 0 01-.408.155.61.61 0 01-.443-.188.566.566 0 01.012-.801l.01-.01a.082.082 0 01.012-.01l2.244-1.997-2.238-1.958a.567.567 0 01-.062-.798.036.036 0 01.01-.011l.01-.012a.615.615 0 01.848-.039zm10.68 2.255c.334 0 .606.26.606.58 0 .32-.272.58-.602.58h-6.468a.596.596 0 01-.605-.58c0-.32.272-.583.605-.583l6.465.003zM6.464 6.285a.548.548 0 01.557.537.548.548 0 01-.56.538.548.548 0 01-.557-.538.548.548 0 01.557-.537h.003zm2.235.537a.548.548 0 01-.56.538.548.548 0 01-.557-.538.548.548 0 01.557-.537h.003a.548.548 0 01.557.537z",
             fill: fillColor
         })
     }));

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "12.0.0";
+var PACKAGE_VERSION = "12.1.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/popover.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { TrackingEvent } from './utils/types';
 declare type Position = 'top' | 'bottom' | 'left' | 'right';
 declare type Props = {
-    description: string;
+    description?: string;
     target: React.ReactNode;
     title?: string;
     asset?: React.ReactNode;
@@ -12,6 +12,7 @@ declare type Props = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     isVisible?: boolean;
     children?: void;
+    extra?: React.ReactNode;
 };
 declare const Popover: React.FC<Props>;
 export default Popover;