@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/src/Card/HorizontalCard/HorizontalCardBody.js

@@ -1,23 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
-import { LinearProgress } from '../../LinearProgress';
-import { Tag } from '../../Tag';
-export var HorizontalCardBodyContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px;\n"])));
-export var HorizontalCardBodyTitle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"], ["\n  ", "\n  .disabled & {\n    color: ", ";\n  }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
-export var HorizontalCardBodyDescription = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var HorizontalCardBodyTagsContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 4px 0;\n  gap: 4px;\n"])));
-export var HorizontalCardBody = function (_a) {
-    var title = _a.title, description = _a.description, progress = _a.progress, tags = _a.tags;
-    return (React.createElement(HorizontalCardBodyContainer, null,
-        React.createElement(HorizontalCardBodyTitle, null, title),
-        description && React.createElement(HorizontalCardBodyDescription, null, description),
-        tags &&
-            React.createElement(HorizontalCardBodyTagsContainer, null, tags.map(function (tag, index) { return (React.createElement(Tag, { key: index, label: tag.label, variant: tag.variant, icon: tag.icon })); })),
-        progress && React.createElement(LinearProgress, { value: progress.value, max: progress.max })));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/Card/HorizontalCard/HorizontalCardThumbnail.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
-export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
-export {};

package/dist/src/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -1,21 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../../styles';
-import { ImageWithFallbacks } from "../../Image";
-export var HorizontalCardIconContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
-export var HorizontalCardImageContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"], ["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
-export var HorizontalCardThumbnail = function (_a) {
-    var _b, _c;
-    var image = _a.image, icon = _a.icon;
-    return (React.createElement(React.Fragment, null,
-        icon &&
-            React.createElement(HorizontalCardIconContainer, null, React.cloneElement(icon, { width: 48, height: 48 })),
-        image &&
-            React.createElement(HorizontalCardImageContainer, null,
-                React.createElement(ImageWithFallbacks, { fallbacks: (_b = image.fallbackSrc) !== null && _b !== void 0 ? _b : '', src: image.src, alt: image.alt, loader: (_c = image.loader) !== null && _c !== void 0 ? _c : false, width: image.width, height: image.height }))));
-};
-var templateObject_1, templateObject_2;

package/dist/src/Card/HorizontalCard/index.d.ts

@@ -1,4 +0,0 @@
-export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';

package/dist/src/Card/HorizontalCard/index.js

@@ -1,4 +0,0 @@
-export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';

package/dist/src/Card/HorizontalCard/types.d.ts

@@ -1,59 +0,0 @@
-import { IconButtonProps } from '../../Button/Iconbutton';
-import React, { ReactNode } from 'react';
-import { ToggleButtonProps } from '../../Toggles/ToggleButton';
-import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
-import { TagVariants } from '../../Tag';
-import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-import { Testable } from '../../types';
-export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
-    componentType: 'toggle';
-};
-export interface CustomContentProps extends Testable {
-    content: ReactNode;
-}
-export declare type HorizontalCardCustomContent = CustomContentProps & {
-    componentType: 'custom';
-};
-export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
-    componentType: 'dropdown';
-    icon: React.ReactNode;
-};
-export interface HorizontalCardTag {
-    label: string;
-    icon?: React.ReactNode;
-    variant?: TagVariants;
-}
-export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
-    /** 'Outline' or 'Elevated' style of container. */
-    variant?: 'outline' | 'elevated';
-    /** Action that will be triggered when user clicks on card. */
-    action?: () => void;
-    /** If disabled user will not be able to click on the card, also card will be greyed out. */
-    disabled?: boolean;
-    /** Title of the card */
-    title: string | React.ReactNode;
-    /** Description of the card */
-    description?: string | React.ReactNode;
-    /** Icon to be shown on the left side of the card. */
-    icon?: React.ReactElement;
-    /** Properties of the image shown on the left side of the card. */
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    /** Array of tags to be shown under the description. */
-    tags?: HorizontalCardTag[];
-    /** Progress bar to be shown under the tags. */
-    progress?: HorizontalCardLinearProgression;
-    /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */
-    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
-}

package/dist/src/Card/HorizontalCard/types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/Card/VerticalCard/Card.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { CardTopSectionProps } from './CardTopSection';
-import { CardMiddleSectionProps } from './CardMiddleSection';
-import { CardBottomSectionProps } from './CardBottomSection';
-export declare const CardTopLevelContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    /** Action to be executed when Card is clicked. */
-    onCardClicked?: () => void;
-    /** If disabled then users can not click on the card, also styles are greyed out.*/
-    disabled?: boolean;
-    /** Maximum width of the card. */
-    maxWidth?: number | string;
-    /** Properties of Card top section. */
-    topSectionProps?: CardTopSectionProps;
-    /** Properties of Card middle section. */
-    middleSectionProps?: CardMiddleSectionProps;
-    /** Properties of Card bottom section. */
-    bottomSectionProps?: CardBottomSectionProps;
-    /** Card container style variant. */
-    variant?: 'outline' | 'elevated';
-}
-declare const Card: React.FunctionComponent<CardProps>;
-export default Card;

package/dist/src/Card/VerticalCard/Card.js

@@ -1,61 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import CardTopSection from './CardTopSection';
-import CardMiddleSection from './CardMiddleSection';
-import CardBottomSection from './CardBottomSection';
-import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
-export var CardTopLevelContainerStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"], ["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
-export var CardContainerStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"], ["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainerStyles, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, COLORS.neutral_100);
-var Card = function (_a) {
-    var onCardClicked = _a.onCardClicked, topSectionProps = _a.topSectionProps, middleSectionProps = _a.middleSectionProps, bottomSectionProps = _a.bottomSectionProps, disabled = _a.disabled, _b = _a.variant, variant = _b === void 0 ? 'elevated' : _b, className = _a.className, _c = _a.maxWidth, maxWidth = _c === void 0 ? 560 : _c, rest = __rest(_a, ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"]);
-    var _d = React.useState([]), actionsRefs = _d[0], setActionsRefs = _d[1];
-    var checkBoxRef = React.useRef(null);
-    var containerRef = React.useRef(null);
-    useActionWithin(containerRef, __spreadArray(__spreadArray([], actionsRefs, true), [checkBoxRef], false));
-    var cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant, " ").concat(className || '');
-    return (React.createElement(CardContainerStyles, __assign({ ref: containerRef, className: cls, tabIndex: !!onCardClicked && !disabled ? 0 : -1, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (a) { return a.key === 'Enter' && !disabled && onCardClicked && onCardClicked(); }, onClick: function (e) { return !disabled && onCardClicked && onCardClicked(); }, "data-testid": 'card-wrapper' }, rest),
-        React.createElement(CardTopLevelContainerStyles, { style: { maxWidth: maxWidth } },
-            topSectionProps &&
-                React.createElement(CardTopSection, __assign({ ref: checkBoxRef }, topSectionProps, { disabled: disabled })),
-            middleSectionProps &&
-                React.createElement(CardMiddleSection, __assign({}, middleSectionProps, { disabled: disabled })),
-            bottomSectionProps &&
-                React.createElement(CardBottomSection, __assign({ ref: function (instance) { return setActionsRefs(instance !== null && instance !== void 0 ? instance : []); } }, bottomSectionProps, { disabled: disabled })))));
-};
-export default Card;
-var templateObject_1, templateObject_2;

package/dist/src/Card/VerticalCard/CardBottomSection.d.ts

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { LinearProgressType } from '../../index';
-export interface ActionItem {
-    icon: React.ReactNode;
-    onClick: () => void;
-}
-export interface CardBottomSectionProps {
-    /** Optional. Current progress level shown in the progress bar. */
-    progressLevel?: number;
-    /** Optional. Maximum level of progress in the progress bar. */
-    progressMax?: number;
-    /** Optional. Type of the progress bar. */
-    progressType?: LinearProgressType;
-    /** Optional. Note text shown on the left side of the section. */
-    noteLeft?: string;
-    /** Optional. Note icon shown on the left side of the section. */
-    noteLeftIcon?: React.ReactNode;
-    /** Optional. Note text shown on the right side of the section. */
-    noteRight?: string;
-    /** Optional. Note icon shown on the right side of the section. */
-    noteRightIcon?: React.ReactNode;
-    /** Author name shown at the bottom-left part of the section.  */
-    authorName?: string;
-    /** Array of actions shown on the bottom-right corner of the section. */
-    actions?: ActionItem[];
-    /** Logo shown on the right side of the section, in front of AuthorName. */
-    logo?: React.ReactNode;
-    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
-    disabled?: boolean;
-}
-export declare const CardBottomSectionProgressStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNotesStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionAuthorStyles: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardBottomSectionDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNoteLeftStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionNoteRightStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionButtonRowContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
-export default CardBottomSection;

package/dist/src/Card/VerticalCard/CardBottomSection.js

@@ -1,45 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
-import { IconButton } from '../../Button';
-export var CardBottomSectionProgressStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 0;\n"], ["\n  padding: 8px 0;\n"])));
-export var CardBottomSectionNotesStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), COLORS.neutral_500);
-export var CardBottomSectionAuthorStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) { return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : ''; });
-export var CardBottomSectionDivider = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"], ["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
-export var CardBottomSectionNoteLeftStyles = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionNoteRightStyles = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionButtonRowContainerStyles = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
-export var CardBottomSectionContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"], ["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-var CardBottomSection = React.forwardRef(function (_a, ref) {
-    var progressLevel = _a.progressLevel, progressMax = _a.progressMax, _b = _a.progressType, progressType = _b === void 0 ? LinearProgressType.Line : _b, noteLeft = _a.noteLeft, noteLeftIcon = _a.noteLeftIcon, noteRight = _a.noteRight, noteRightIcon = _a.noteRightIcon, authorName = _a.authorName, logo = _a.logo, actions = _a.actions, disabled = _a.disabled;
-    var _c = React.useState([]), elRefs = _c[0], setElRefs = _c[1];
-    var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-    React.useEffect(function () {
-        setElRefs(Array(length || 0).fill(null).map(function () { return React.createRef(); }));
-    }, [length]);
-    React.useImperativeHandle(ref, function () { return elRefs; }, [elRefs]);
-    var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
-    return (React.createElement(CardBottomSectionContainer, { "data-testid": 'card-bottomSection' },
-        haveAtLeastSomething && React.createElement(CardBottomSectionDivider, null),
-        progressLevel != undefined && React.createElement(CardBottomSectionProgressStyles, null,
-            React.createElement(LinearProgress, { size: Size.Small, type: progressType, variant: LinearProgressVariant.Normal, value: progressLevel, max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel })),
-        (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && React.createElement(CardBottomSectionNotesStyles, null,
-            (noteLeft || noteLeftIcon) && (React.createElement(CardBottomSectionNoteLeftStyles, null,
-                noteLeftIcon,
-                React.createElement(ComponentXXS, { color: COLORS.neutral_500, textStyle: ComponentTextStyle.Bold }, noteLeft))),
-            (noteRight || noteRightIcon) && (React.createElement(CardBottomSectionNoteRightStyles, null,
-                noteRightIcon,
-                React.createElement(ComponentXXS, { color: COLORS.neutral_500, textStyle: ComponentTextStyle.Bold }, noteRight)))),
-        (authorName || logo) && React.createElement(CardBottomSectionAuthorStyles, { disabled: disabled, "data-testid": 'card-bottomSection-author' },
-            React.createElement(ComponentXXS, null, authorName),
-            logo),
-        actions && React.createElement(CardBottomSectionButtonRowContainerStyles, null, actions.map(function (x, index) { return (React.createElement(IconButton, { ref: elRefs[index], key: index, disabled: disabled, variant: "secondary", shape: "circular", action: function (e) {
-                x.onClick();
-            } }, x.icon)); }))));
-});
-export default CardBottomSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/Card/VerticalCard/CardMiddleSection.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { TagVariants } from '../../index';
-import { ReactNode } from 'react';
-export interface CardMiddleSectionProps {
-    /** Color of the band to be shown on the top of middle section. */
-    colorBandColor?: string;
-    /** Icon to be shown on the left side of the categoryLabel. */
-    categoryIcon?: React.ReactNode;
-    /** Label to be shown at the top part of the middle section. */
-    categoryLabel?: string;
-    /** Main title of the Card component. */
-    title: string;
-    /** Description of the Card. */
-    description?: string;
-    /** Tags to be shown under the description. */
-    tags?: CardTag[];
-    /** Second row of tags if needed. */
-    row2Tags?: CardTag[];
-    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
-    disabled?: boolean;
-}
-export interface CardTag {
-    label: string;
-    variant?: TagVariants;
-    icon?: ReactNode;
-}
-export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardMiddleSectionColorBandStyles: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;
-export declare const CardMiddleSectionTagsStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardMiddleSectionCategoryStyles: import("styled-components").StyledComponent<"div", any, {
-    extraTopMargin: boolean;
-    bottomMargin: boolean;
-}, never>;
-declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
-export default CardMiddleSection;

package/dist/src/Card/VerticalCard/CardMiddleSection.js

@@ -1,32 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
-export var CardMiddleSectionContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"], ["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-export var CardMiddleSectionColorBandStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"], ["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) { return props.$color; });
-export var CardMiddleSectionTagsStyles = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-export var CardMiddleSectionCategoryStyles = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), COLORS.neutral_500);
-var CardMiddleSection = function (_a) {
-    var colorBandColor = _a.colorBandColor, categoryIcon = _a.categoryIcon, categoryLabel = _a.categoryLabel, title = _a.title, description = _a.description, tags = _a.tags, row2Tags = _a.row2Tags, disabled = _a.disabled;
-    return (React.createElement(CardMiddleSectionContainer, { "data-testid": 'card-middleSection' },
-        colorBandColor && React.createElement(CardMiddleSectionColorBandStyles, { "$color": colorBandColor }),
-        (categoryIcon || categoryLabel) &&
-            React.createElement(CardMiddleSectionCategoryStyles, { extraTopMargin: Boolean(colorBandColor), bottomMargin: Boolean(categoryIcon || categoryLabel) },
-                categoryIcon,
-                React.createElement(ComponentS, { textStyle: ComponentTextStyle.Bold, color: COLORS.neutral_500 }, categoryLabel)),
-        React.createElement(ComponentXL, { className: "titleBlock", textStyle: ComponentTextStyle.Bold, color: disabled ? COLORS.neutral_500 : COLORS.black }, title),
-        description && (React.createElement(ComponentS, { className: "descriptionBlock", color: COLORS.neutral_600 }, description)),
-        tags && (React.createElement(CardMiddleSectionTagsStyles, null, tags.map(function (x, index) {
-            var _a;
-            return (React.createElement(Tag, { key: "".concat(x.label, "_").concat(index), label: x.label, variant: (_a = x.variant) !== null && _a !== void 0 ? _a : 'neutral', icon: x.icon }));
-        }))),
-        row2Tags && (React.createElement(CardMiddleSectionTagsStyles, null, row2Tags.map(function (x, index) {
-            var _a;
-            return (React.createElement(Tag, { key: "".concat(x.label, "_").concat(index), label: x.label, variant: (_a = x.variant) !== null && _a !== void 0 ? _a : 'neutral', icon: x.icon }));
-        })))));
-};
-export default CardMiddleSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/Card/VerticalCard/CardTopSection.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { TagVariants } from '../../Tag';
-export interface CardTopSectionProps {
-    /** Sets initial state of select Checkbox. */
-    selected?: boolean;
-    /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */
-    setSelected?: (arg0: boolean) => void;
-    /** Label shown in the tag in the top-left corner of the Card. */
-    tagLabel?: string;
-    /** Icon shown in the tag in the top-left corner of the Card. */
-    tagIcon?: React.ReactNode;
-    /** Tag variant shown in the tag in the top-left corner of the Card. */
-    tagVariant?: TagVariants;
-    /** Text shown in the Ribbon, under the Image.  */
-    highlightRibbonText?: string;
-    /** Icon shown in the Ribbon, under the Image.  */
-    highlightRibbonIcon?: React.ReactNode;
-    /** Content color (text and image) of the Ribbon, under the Image.  */
-    highlightRibbonContentColor?: string;
-    /** Background color of the Ribbon, shown under the Image.  */
-    highlightRibbonBgColor?: string;
-    /** Details of the Image shown in the section. */
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */
-    disabled?: boolean;
-}
-export declare const CardTopSectionImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopSectionTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardTopSectionRibbonContainer: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-    $backgroundColor: string;
-}, never>;
-export declare const CardTopSectionCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
-export default CardTopSection;

package/dist/src/Card/VerticalCard/CardTopSection.js

@@ -1,33 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { ComponentS, ComponentTextStyle } from '../../styles/typography';
-import Checkbox from '../../InputFields/Checkbox';
-import { Tag } from '../../Tag';
-import { COLORS } from '../../index';
-import { ImageWithFallbacks } from "../../Image";
-export var CardTopSectionImageContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"], ["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
-export var CardTopSectionTagContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"], ["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
-export var CardTopSectionContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"], ["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) { return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : ''; });
-export var CardTopSectionRibbonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"], ["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) { return props.$backgroundColor; }, function (props) { return props.$color; });
-export var CardTopSectionCheckboxContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
-var CardTopSection = React.forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var selected = _a.selected, setSelected = _a.setSelected, image = _a.image, tagLabel = _a.tagLabel, tagIcon = _a.tagIcon, _e = _a.tagVariant, tagVariant = _e === void 0 ? 'positive' : _e, highlightRibbonIcon = _a.highlightRibbonIcon, highlightRibbonText = _a.highlightRibbonText, highlightRibbonContentColor = _a.highlightRibbonContentColor, highlightRibbonBgColor = _a.highlightRibbonBgColor, disabled = _a.disabled;
-    return (React.createElement(CardTopSectionContainer, { disabled: disabled, "data-testid": 'card-topSection', style: { height: (_b = image === null || image === void 0 ? void 0 : image.height) !== null && _b !== void 0 ? _b : 200 } },
-        image &&
-            React.createElement(CardTopSectionImageContainer, null,
-                React.createElement(ImageWithFallbacks, { fallbacks: (_c = image.fallbackSrc) !== null && _c !== void 0 ? _c : '', src: image.src, alt: image.alt, loader: (_d = image.loader) !== null && _d !== void 0 ? _d : false, width: image.width, height: image.height })),
-        (!!selected || !!setSelected) && (React.createElement(CardTopSectionCheckboxContainer, { "data-testid": 'card-topSection-checkbox' },
-            React.createElement(Checkbox, { ref: ref, disabled: disabled, select: function (selected) { return setSelected && setSelected(selected); }, selected: selected || false }))),
-        (tagLabel || tagIcon) && (React.createElement(CardTopSectionTagContainer, null,
-            React.createElement(Tag, { label: tagLabel, variant: tagVariant, icon: tagIcon }))),
-        (highlightRibbonIcon || highlightRibbonText) && (React.createElement(CardTopSectionRibbonContainer, { "data-testid": 'card-topSection-ribbon', "$color": highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '', "$backgroundColor": disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '' },
-            highlightRibbonIcon,
-            highlightRibbonText && (React.createElement(ComponentS, { color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '', textStyle: ComponentTextStyle.Regular }, highlightRibbonText))))));
-});
-export default CardTopSection;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/Card/VerticalCard/index.d.ts

@@ -1,7 +0,0 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';

package/dist/src/Card/VerticalCard/index.js

@@ -1,7 +0,0 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';

package/dist/src/Card/index.d.ts

@@ -1,2 +0,0 @@
-export * from './VerticalCard';
-export * from './HorizontalCard';

package/dist/src/Card/index.js

@@ -1,2 +0,0 @@
-export * from './VerticalCard';
-export * from './HorizontalCard';

package/dist/src/Chips/ActionChip.d.ts

@@ -1,10 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ActionChipProps } from './ChipTypes';
-declare const ActionChip: React.FunctionComponent<ActionChipProps>;
-export default ActionChip;

package/dist/src/Chips/ActionChip.js

@@ -1,45 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Import custom styles.
- */
-import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
-import { defaultOnMouseDownHandler } from '../common';
-var ActionChip = function (_a) {
-    var icon = _a.icon, text = _a.text, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, disabled = _a.disabled, onClick = _a.onClick, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"]);
-    /**
-     * Return Action Chip component.
-     */
-    return (React.createElement(ChipContainer, __assign({ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!onClick ? 'interactive' : '', " ").concat(className || ''), onClick: function () { return !disabled && onClick && onClick(); }, onMouseDown: defaultOnMouseDownHandler, "data-testid": dataTestId, role: "button", onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick(); }, tabIndex: disabled || !onClick ? -1 : 0 }, rest),
-        React.createElement(ChipContentContainer, null,
-            React.createElement(ChipContent, null,
-                icon &&
-                    React.createElement("div", { className: 'chip-icon icon-left' }, icon),
-                React.createElement("div", null, text)))));
-};
-export default ActionChip;

package/dist/src/Chips/ChipStyles.d.ts

@@ -1,3 +0,0 @@
-export declare const ChipContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/src/Chips/ChipStyles.js

@@ -1,16 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-/**
- * Import custom style properties.
- */
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
-export var ChipContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
-export var ChipContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n"], ["\n  ", "\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-export var ChipContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"], ["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
-var templateObject_1, templateObject_2, templateObject_3;