@telefonica/mistica 12.0.0 → 12.2.0

package/README.md

@@ -1,5 +1,5 @@
-<img alt="Mística for Web" src="https://raw.githubusercontent.com/Telefonica/mistica-web/master/img/mistica-web.svg">
-<br>
+![Mistica for Web](img/mistica-web-light.svg#gh-light-mode-only)
+![Mistica for Web](img/mistica-web-dark.svg#gh-dark-mode-only)
 
 React components library for Telefonica Design System ([Mistica](https://github.com/Telefonica/mistica))
 

package/dist/button-group.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 export interface ButtonGroupProps {
     primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
 }
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/button-group.js

@@ -7,6 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -33,8 +34,37 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 var buttonLayoutSpacing = 16;
-var buttonLinkPadding = 6;
+var buttonLinkPadding = 12;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         inline: {
@@ -65,14 +95,15 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var ButtonGroup = function ButtonGroup(param) {
-    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link;
+    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, dataAttributes = param.dataAttributes;
     var anyAction = !!primaryButton || !!secondaryButton || !!link;
     var bothButtons = !!primaryButton && !!secondaryButton;
     var classes = useStyles({
         bothButtons: bothButtons
     });
-    return anyAction ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-        className: (0, _classnames).default(classes.inline, classes.container),
+    return anyAction ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: (0, _classnames).default(classes.inline, classes.container)
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             (primaryButton || secondaryButton) && /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 className: (0, _classnames).default(classes.inline, classes.buttons),
@@ -90,7 +121,7 @@ var ButtonGroup = function ButtonGroup(param) {
                 children: link
             })
         ]
-    }) : null;
+    })) : null;
 };
 var _default = ButtonGroup;
 exports.default = _default;

package/dist/button-group.js.flow

@@ -2,11 +2,12 @@
 
 import * as React from "react";
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 export type ButtonGroupProps = {
   primaryButton?: RendersNullableElement<typeof ButtonPrimary>,
   secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
   link?: RendersNullableElement<typeof ButtonLink>,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
 declare export default typeof ButtonGroup;

package/dist/button-layout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 import type { NullableButtonElement } from './button';
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -8,6 +8,7 @@ declare type ButtonLayoutProps = {
     align?: 'center' | 'left' | 'right' | 'full-width';
     link?: RendersNullableElement<typeof ButtonLink>;
     withMargins?: boolean;
+    dataAttributes?: DataAttributes;
 };
 declare const ButtonLayout: React.FC<ButtonLayoutProps>;
 export default ButtonLayout;

package/dist/button-layout.js

@@ -10,6 +10,7 @@ var _hooks = require("./hooks");
 var _button = require("./button");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -93,6 +94,22 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -212,7 +229,7 @@ var buttonsRange = [
     _button.ButtonPrimary
 ];
 var ButtonLayout = function ButtonLayout(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins, dataAttributes = param1.dataAttributes;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -304,9 +321,10 @@ var ButtonLayout = function ButtonLayout(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -314,7 +332,7 @@ var ButtonLayout = function ButtonLayout(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: classes.margins,
         children: content

package/dist/button-layout.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 import type { NullableButtonElement } from "./button";
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -10,6 +10,7 @@ declare type ButtonLayoutProps = {
   align?: "center" | "left" | "right" | "full-width",
   link?: RendersNullableElement<typeof ButtonLink>,
   withMargins?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonLayout: React.ComponentType<ButtonLayoutProps>;
 declare export default typeof ButtonLayout;

package/dist/button.js

@@ -17,6 +17,7 @@ var _box = _interopRequireDefault(require("./box"));
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
 var _hooks = require("./hooks");
+var _utils = require("./skins/utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,11 +123,15 @@ var BUTTON_MIN_WIDTH = 136;
 exports.BUTTON_MIN_WIDTH = BUTTON_MIN_WIDTH;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
-var SPINNER_MARGIN_PX = 8;
+var ICON_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
 var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
+var ICON_SIZE = 24;
+var SMALL_ICON_SIZE = 20;
+var SPINNER_SIZE = 20;
+var SMALL_SPINNER_SIZE = 16;
 var commonClasses = function commonClasses() {
     return {
         button: {
@@ -134,7 +139,6 @@ var commonClasses = function commonClasses() {
             position: "relative",
             width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: "hidden",
@@ -169,6 +173,9 @@ var commonClasses = function commonClasses() {
             }
         },
         textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
@@ -176,9 +183,7 @@ var commonClasses = function commonClasses() {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
             "& svg": {
-                marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: "bottom",
-                height: "100%"
+                display: "block"
             }
         },
         isLoading: {
@@ -299,6 +304,48 @@ var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
         inverse: dangerButtonStyles(theme)
     });
 });
+var renderButtonContent = function renderButtonContent(param) {
+    var content = param.content, defaultIconSize = param.defaultIconSize, renderText = param.renderText;
+    var childrenArr = (0, _utils).flattenChildren(content);
+    var length = childrenArr.length;
+    var resultChildrenArr = [];
+    var accText = [];
+    var flushAccText = function flushAccText() {
+        resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx(React.Fragment, {
+            children: renderText(accText)
+        }, resultChildrenArr.length));
+        accText = [];
+    };
+    childrenArr.forEach(function(element, idx) {
+        var isFirstChild = idx === 0;
+        var isLastChild = idx === length - 1;
+        var isIconElement = /*#__PURE__*/ React.isValidElement(element);
+        if (isIconElement) {
+            if (accText.length) {
+                flushAccText();
+            }
+            var _size;
+            var sizeInPx = (_size = element.props.size) !== null && _size !== void 0 ? _size : defaultIconSize;
+            resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    marginLeft: isFirstChild ? 0 : ICON_MARGIN_PX,
+                    marginRight: isLastChild ? 0 : ICON_MARGIN_PX
+                },
+                children: /*#__PURE__*/ React.cloneElement(element, {
+                    size: (0, _css).pxToRem(sizeInPx)
+                })
+            }, resultChildrenArr.length));
+        } else {
+            accText.push(element);
+            if (isLastChild) {
+                flushAccText();
+            }
+        }
+    });
+    return resultChildrenArr;
+};
 var Button = function Button(props) {
     var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
     var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
@@ -321,24 +368,6 @@ var Button = function Button(props) {
         shouldRenderSpinner,
         formStatus
     ]);
-    var spinnerSizeRem = (0, _css).pxToRem(props.small ? 16 : 24);
-    var renderText = function renderText(text) {
-        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-            size: 14,
-            lineHeight: 20,
-            weight: "medium",
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        });
-    };
     var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
         if (eventFormat === "google-analytics-4") {
             return {
@@ -354,6 +383,25 @@ var Button = function Button(props) {
             };
         }
     };
+    var defaultIconSize = props.small ? SMALL_ICON_SIZE : ICON_SIZE;
+    var spinnerSizeRem = (0, _css).pxToRem(props.small ? SMALL_SPINNER_SIZE : SPINNER_SIZE);
+    var renderText = function renderText(element) {
+        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+            size: 14,
+            lineHeight: 20,
+            weight: "medium",
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -371,16 +419,24 @@ var Button = function Button(props) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     "aria-hidden": showSpinner ? true : undefined,
                     className: classes.textContent,
-                    children: renderText(props.children)
+                    children: renderButtonContent({
+                        content: props.children,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.loadingFiller,
                     "aria-hidden": true,
                     style: {
                         paddingLeft: spinnerSizeRem,
-                        paddingRight: SPINNER_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
+                        paddingRight: ICON_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
                     },
-                    children: renderText(loadingText)
+                    children: renderButtonContent({
+                        content: loadingText,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                     "aria-hidden": showSpinner ? undefined : true,
@@ -405,7 +461,11 @@ var Button = function Button(props) {
                         }),
                         loadingText ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                             paddingLeft: 8,
-                            children: renderText(loadingText)
+                            children: renderButtonContent({
+                                content: loadingText,
+                                defaultIconSize: defaultIconSize,
+                                renderText: renderText
+                            })
                         }) : null
                     ]
                 })
@@ -460,12 +520,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",
@@ -481,6 +542,14 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             }),
             "&[disabled]": disabledStyle
         },
+        textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg": {
+                display: "block"
+            }
+        },
         inverse: {
             color: theme.colors.textLinkInverse,
             "&:enabled:active": {
@@ -493,7 +562,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             })
         },
         aligned: {
-            marginLeft: -padding
+            marginLeft: -paddingX
         }
     };
 });
@@ -517,17 +586,27 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             };
         }
     };
+    var renderText = function renderText(element) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            children: props.children
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            className: classes.textContent,
+            children: renderButtonContent({
+                content: props.children,
+                defaultIconSize: SMALL_ICON_SIZE,
+                renderText: renderText
+            })
         }),
         disabled: props.disabled || formStatus === "sending"
     };

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",