@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Card/VerticalCard/CardTopSection.js

@@ -1,33 +1,101 @@
-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;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var CardTopSectionImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
+export var CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _image$height, _image$fallbackSrc, _image$loader;
+  var selected = _ref.selected,
+    setSelected = _ref.setSelected,
+    image = _ref.image,
+    tagLabel = _ref.tagLabel,
+    tagIcon = _ref.tagIcon,
+    _ref$tagVariant = _ref.tagVariant,
+    tagVariant = _ref$tagVariant === void 0 ? 'positive' : _ref$tagVariant,
+    highlightRibbonIcon = _ref.highlightRibbonIcon,
+    highlightRibbonText = _ref.highlightRibbonText,
+    highlightRibbonContentColor = _ref.highlightRibbonContentColor,
+    highlightRibbonBgColor = _ref.highlightRibbonBgColor,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
+    disabled: disabled,
+    "data-testid": 'card-topSection',
+    style: {
+      height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
+    },
+    children: [image && /*#__PURE__*/_jsx(CardTopSectionImageContainer, {
+      children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
+        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
+        src: image.src,
+        alt: image.alt,
+        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
+        width: image.width,
+        height: image.height
+      })
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardTopSectionCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        ref: ref,
+        disabled: disabled,
+        select: function select(selected) {
+          return setSelected && setSelected(selected);
+        },
+        selected: selected || false
+      })
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopSectionTagContainer, {
+      children: /*#__PURE__*/_jsx(Tag, {
+        label: tagLabel,
+        variant: tagVariant,
+        icon: tagIcon
+      })
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardTopSectionRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
+      $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+      $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
+      children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
+        color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+        textStyle: ComponentTextStyle.Regular,
+        children: highlightRibbonText
+      })]
+    })]
+  });
+});
+CardTopSection.propTypes = {
+  selected: _pt.bool,
+  setSelected: _pt.func,
+  tagLabel: _pt.string,
+  tagIcon: _pt.node,
+  highlightRibbonText: _pt.string,
+  highlightRibbonIcon: _pt.node,
+  highlightRibbonContentColor: _pt.string,
+  highlightRibbonBgColor: _pt.string,
+  image: _pt.shape({
+    src: _pt.string.isRequired,
+    fallbackSrc: _pt.string,
+    alt: _pt.string.isRequired,
+    height: _pt.string,
+    width: _pt.string,
+    loader: _pt.bool
+  }),
+  disabled: _pt.bool
+};
+export default CardTopSection;
+//# sourceMappingURL=CardTopSection.js.map

package/dist/Card/VerticalCard/index.js

@@ -1,7 +1,8 @@
-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';
+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';
+//# sourceMappingURL=index.js.map

package/dist/Card/index.js

@@ -1,2 +1,3 @@
-export * from './VerticalCard';
-export * from './HorizontalCard';
+export * from './VerticalCard';
+export * from './HorizontalCard';
+//# sourceMappingURL=index.js.map

package/dist/Chips/ActionChip.js

@@ -1,45 +1,67 @@
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
+ */
+import * as React from 'react';
+
+/**
+ * Import custom components.
+ */
+
+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;
+ */
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
+
+/**
+ * Import custom types.
+ */
+
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ActionChip = function ActionChip(_ref) {
+  var icon = _ref.icon,
+    text = _ref.text,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    disabled = _ref.disabled,
+    _onClick = _ref.onClick,
+    className = _ref.className,
+    dataTestId = _ref.dataTestId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * Return Action Chip component.
+   */
+  return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
+    onClick: function onClick() {
+      return !disabled && _onClick && _onClick();
+    },
+    onMouseDown: defaultOnMouseDownHandler,
+    "data-testid": dataTestId,
+    role: "button",
+    onKeyDown: function onKeyDown(e) {
+      return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
+    },
+    tabIndex: disabled || !_onClick ? -1 : 0
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ChipContentContainer, {
+      children: /*#__PURE__*/_jsxs(ChipContent, {
+        children: [icon && /*#__PURE__*/_jsx("div", {
+          className: 'chip-icon icon-left',
+          children: icon
+        }), /*#__PURE__*/_jsx("div", {
+          children: text
+        })]
+      })
+    })
+  }));
+};
+export default ActionChip;
+//# sourceMappingURL=ActionChip.js.map

package/dist/Chips/ChipStyles.js

@@ -1,16 +1,15 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
+ */
+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;
+ */
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
+export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
+export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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);
+//# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipTypes.d.ts

@@ -70,4 +70,4 @@ export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
     /** Size of the chip. */
     size?: Size;
 }
-export declare type ChipVariant = States.Default | States.Invalid;
+export type ChipVariant = States.Default | States.Invalid;

package/dist/Chips/ChipTypes.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=ChipTypes.js.map

package/dist/Chips/ChoiceChips.js

@@ -1,70 +1,97 @@
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["value", "size", "label", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import custom styles.
- */
-import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
-import { defaultOnMouseDownHandler } from '../common';
-import { Size } from '../types';
-var ChoiceChips = function (_a) {
-    var selected = _a.selected, disabled = _a.disabled, onClick = _a.onClick, values = _a.values, dataTestId = _a.dataTestId;
-    /**
-     * Globally used variables within the component.
-     */
-    var _b = React.useState(''), selectedChip = _b[0], setSelectedChip = _b[1];
-    /**
-     * Set the selected value for the chip.
-     */
-    React.useEffect(function () {
-        setSelectedChip(selected);
-    }, [selected]);
-    /**
-     * Sets selected chip and fires an event to parent component.
-     * @param value - Chip which was selected.
-     */
-    var onSelectChip = function (value) {
-        // Update selected chip
-        setSelectedChip(value.value);
-        // Fire the event
-        onClick && onClick(value);
-    };
-    var handleKeyDown = function (e, value) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            onSelectChip(value);
-        }
-    };
-    /**
-     * Return Choice Chip component.
-     */
-    return (React.createElement("div", { role: "radiogroup", "data-testid": dataTestId }, values.map(function (item) {
-        var value = item.value, _a = item.size, size = _a === void 0 ? Size.Medium : _a, label = item.label, className = item.className, rest = __rest(item, ["value", "size", "label", "className"]);
-        return (React.createElement(ChipContainer, __assign({ role: "radio", key: value, tabIndex: disabled ? -1 : 0, className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''), onMouseDown: defaultOnMouseDownHandler, onClick: function () { return !disabled && onSelectChip(item); }, onKeyDown: function (e) { return !disabled && handleKeyDown(e, item); } }, rest),
-            React.createElement(ChipContentContainer, null,
-                React.createElement(ChipContent, null, label))));
-    })));
-};
-export default ChoiceChips;
+ */
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
+
+/**
+ * Import custom types.
+ */
+
+import { defaultOnMouseDownHandler } from '../common';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChoiceChips = function ChoiceChips(_ref) {
+  var selected = _ref.selected,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    values = _ref.values,
+    dataTestId = _ref.dataTestId;
+  /**
+   * Globally used variables within the component.
+   */
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedChip = _React$useState2[0],
+    setSelectedChip = _React$useState2[1];
+
+  /**
+   * Set the selected value for the chip.
+   */
+  React.useEffect(function () {
+    setSelectedChip(selected);
+  }, [selected]);
+
+  /**
+   * Sets selected chip and fires an event to parent component.
+   * @param value - Chip which was selected.
+   */
+  var onSelectChip = function onSelectChip(value) {
+    // Update selected chip
+    setSelectedChip(value.value);
+
+    // Fire the event
+    onClick && onClick(value);
+  };
+  var handleKeyDown = function handleKeyDown(e, value) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onSelectChip(value);
+    }
+  };
+
+  /**
+   * Return Choice Chip component.
+   */
+  return /*#__PURE__*/_jsx("div", {
+    role: "radiogroup",
+    "data-testid": dataTestId,
+    children: values.map(function (item) {
+      var value = item.value,
+        _item$size = item.size,
+        size = _item$size === void 0 ? Size.Medium : _item$size,
+        label = item.label,
+        className = item.className,
+        rest = _objectWithoutProperties(item, _excluded);
+      return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
+        role: "radio",
+        tabIndex: disabled ? -1 : 0,
+        className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''),
+        onMouseDown: defaultOnMouseDownHandler,
+        onClick: function onClick() {
+          return !disabled && onSelectChip(item);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return !disabled && handleKeyDown(e, item);
+        }
+      }, rest), {}, {
+        children: /*#__PURE__*/_jsx(ChipContentContainer, {
+          children: /*#__PURE__*/_jsx(ChipContent, {
+            children: label
+          })
+        })
+      }), value);
+    })
+  });
+};
+export default ChoiceChips;
+//# sourceMappingURL=ChoiceChips.js.map