@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/esm/index.js

@@ -25,4 +25,5 @@ export * from './Paginator';
 export * from './Table';
 export * from './Toggles';
 export * from './HyperLink';
+export * from './NotificationDot';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';"],"file":"index.js"}

package/dist/esm/types.js

@@ -1,6 +1,7 @@
 export let Size;
 
 (function (Size) {
+  Size["XSmall"] = "xsmall";
   Size["Small"] = "small";
   Size["Medium"] = "medium";
   Size["Large"] = "large";

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;AA6BZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n  id: string;\n  name: string;\n  type: string;\n  image: string;\n}\n\nexport enum Size {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\nexport interface NavOption {\n  label: string;\n  to: string;\n  disabled?: boolean;\n  exact?: boolean;\n  onClick?: () => void;\n}\n\nexport interface NavButton {\n  label: string;\n  action: any;\n  disabled?: boolean;\n}\n\nexport interface ActionOptions {\n  search?: () => void;\n  apps?: () => void;\n  language?: () => void;\n  notification?: () => void;\n  settings?: () => void;\n  user?: () => void;\n}\n\nexport enum ToastColor {\n  BLACK,\n  WHITE,\n  BLUE,\n  GREEN,\n  ORANGE,\n  RED,\n}\n\nexport enum ToastActionType{\n  PRIMARY,\n  SECONDARY\n}\n\nexport enum ToastPosition {\n  TOPLEFT,\n  TOPMIDDLE,\n  TOPRIGHT,\n  BOTTOMLEFT,\n  BOTTOMMIDDLE,\n  BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n  TOP,\n  BOTTOM,\n  LEFT,\n  RIGHT\n}\n\nexport interface SwitcherNavItem {\n  label: string;\n  url: string;\n  disabled?: boolean;\n  Icon?: any;\n  as?: any;\n  testId?: string;\n}\n\nexport interface UserMenuItem {\n  label: string;\n  to: string;\n  icon: any;\n  isExternal?: boolean;\n  onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n  key?: string;\n  label: string;\n  action: any;\n}\n\nexport interface NavLink {\n  label: string;\n  to: string;\n  target?: string;\n}\n\nexport interface NavSection {\n  header: string;\n  links: NavLink[];\n}\n\nexport interface NavOptions {\n  sections: NavSection[];\n}\n"],"file":"types.js"}
+{"version":3,"sources":["../../src/types.ts"],"names":["Size","ToastColor","ToastActionType","ToastPosition","ToastEntryDirection"],"mappings":"AAOA,WAAYA,IAAZ;;WAAYA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;AAAAA,EAAAA,I;GAAAA,I,KAAAA,I;;AA8BZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AASZ,WAAYC,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAKZ,WAAYC,aAAZ;;WAAYA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;AAAAA,EAAAA,a,CAAAA,a;GAAAA,a,KAAAA,a;;AASZ,WAAYC,mBAAZ;;WAAYA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;AAAAA,EAAAA,mB,CAAAA,mB;GAAAA,mB,KAAAA,mB","sourcesContent":["export interface Product {\n  id: string;\n  name: string;\n  type: string;\n  image: string;\n}\n\nexport enum Size {\n  XSmall = 'xsmall',\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\nexport interface NavOption {\n  label: string;\n  to: string;\n  disabled?: boolean;\n  exact?: boolean;\n  onClick?: () => void;\n}\n\nexport interface NavButton {\n  label: string;\n  action: any;\n  disabled?: boolean;\n}\n\nexport interface ActionOptions {\n  search?: () => void;\n  apps?: () => void;\n  language?: () => void;\n  notification?: () => void;\n  settings?: () => void;\n  user?: () => void;\n}\n\nexport enum ToastColor {\n  BLACK,\n  WHITE,\n  BLUE,\n  GREEN,\n  ORANGE,\n  RED,\n}\n\nexport enum ToastActionType{\n  PRIMARY,\n  SECONDARY\n}\n\nexport enum ToastPosition {\n  TOPLEFT,\n  TOPMIDDLE,\n  TOPRIGHT,\n  BOTTOMLEFT,\n  BOTTOMMIDDLE,\n  BOTTOMRIGHT,\n}\n\nexport enum ToastEntryDirection{\n  TOP,\n  BOTTOM,\n  LEFT,\n  RIGHT\n}\n\nexport interface SwitcherNavItem {\n  label: string;\n  url: string;\n  disabled?: boolean;\n  Icon?: any;\n  as?: any;\n  testId?: string;\n}\n\nexport interface UserMenuItem {\n  label: string;\n  to: string;\n  icon: any;\n  isExternal?: boolean;\n  onClick?: () => void;\n}\n\nexport interface ListRowDropdownOption {\n  key?: string;\n  label: string;\n  action: any;\n}\n\nexport interface NavLink {\n  label: string;\n  to: string;\n  target?: string;\n}\n\nexport interface NavSection {\n  header: string;\n  links: NavLink[];\n}\n\nexport interface NavOptions {\n  sections: NavSection[];\n}\n"],"file":"types.js"}

package/dist/js/Breadcrumb/Breadcrumb.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { Size } from '..';
 import { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';
-declare type availableSizes = 'xsmall' | 'small' | 'medium';
 declare type BreadcrumbProps = {
+    homeIcon?: boolean;
+    homeLabel?: string;
+    homeUrl?: string;
     items?: BreadcrumbItem[];
-    size?: availableSizes;
+    size?: Size;
 };
 declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;
 export default Breadcrumb;

package/dist/js/Breadcrumb/Breadcrumb.js

@@ -17,11 +17,13 @@ var _styles = require("../styles");
 
 var _ = require("..");
 
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 
 var _typography = require("../styles/typography");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _DropdownButton = _interopRequireDefault(require("../Dropdown/DropdownButton"));
+
+var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,64 +33,120 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BreadcrumbContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display:flex;\n  align-items: center;\n"])));
+var marginRight = function marginRight(size) {
+  return size == _.Size.Small || size == _.Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+
+var BreadcrumbContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
+  return FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
+}, function (props) {
+  return marginRight(props.size);
+}, function (props) {
+  return marginRight(props.size);
+}, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
 
 var FontStyles = function FontStyles(size, textStyle, color) {
   switch (size) {
-    case 'xsmall':
+    case _.Size.XSmall:
       return (0, _typography.ComponentXXSStyling)(textStyle, color);
 
-    case 'medium':
+    case _.Size.Medium:
       return (0, _typography.ComponentMStyling)(textStyle, color);
 
-    case 'small':
+    case _.Size.Small:
     default:
       return (0, _typography.ComponentSStyling)(textStyle, color);
   }
 };
 
-var LastBreadcrumbItem = _styledComponents.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin: 0 7px;\n"])), function (props) {
+var LastBreadcrumbItem = _styledComponents.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
   return FontStyles(props.size, _.ComponentTextStyle.Bold, _styles.COLORS.neutral_800);
-});
-
-var LinkWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: center;\n  ", "\n  \n  a {\n    text-decoration: none;\n    ", "\n    margin: 0 7px;\n\n    svg{\n      padding:4px 0 0 0;\n    }\n  }\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
-  return FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
 }, function (props) {
-  return FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
-}, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+  return marginRight(props.size);
+});
 
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
-      size = _ref.size;
-  size = size || 'small';
-  var iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';
-  return /*#__PURE__*/React.createElement(BreadcrumbContainer, null, /*#__PURE__*/React.createElement(LinkWrapper, {
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _.Size.Small : _ref$size,
+      _ref$homeIcon = _ref.homeIcon,
+      homeIcon = _ref$homeIcon === void 0 ? true : _ref$homeIcon,
+      _ref$homeLabel = _ref.homeLabel,
+      homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
+      _ref$homeUrl = _ref.homeUrl,
+      homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl;
+  var history = (0, _reactRouter.useHistory)();
+  var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) {
+    return {
+      value: x.url,
+      displayLabel: x.label
+    };
+  }) : [];
+
+  var navigate = function navigate(links) {
+    history.push(links[0]);
+  };
+
+  var chevronSize = size == _.Size.Medium ? "24px" : size == _.Size.Small ? "20px" : "16px";
+  return /*#__PURE__*/React.createElement(BreadcrumbContainer, {
     size: size
-  }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
-    to: '/'
+  }, homeIcon ? /*#__PURE__*/React.createElement(_.IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    action: function action() {
+      return history.push(homeUrl);
+    }
   }, /*#__PURE__*/React.createElement(_.SystemIcons.Home, {
-    size: iconSize
-  }))), !!items && items.length > 2 && items.slice(0, items.length - 2).map(function (item, i) {
-    return /*#__PURE__*/React.createElement(LinkWrapper, {
-      size: size,
-      key: i
-    }, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
-      to: item.url
-    }, "..."));
-  }), !!items && items.length > 1 && /*#__PURE__*/React.createElement(LinkWrapper, {
-    size: size
-  }, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
-    to: items[items.length - 2].url
-  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(LinkWrapper, {
-    size: size
-  }, "/", /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
+    size: chevronSize
+  })) : /*#__PURE__*/React.createElement(_.HyperLink, {
+    id: "homelink",
+    variant: "default",
+    href: homeUrl
+  }, homeLabel), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: _styles.COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(_DropdownButton.default, {
+    alignLeft: true,
+    items: dropdownItems,
+    size: size,
+    icon: /*#__PURE__*/React.createElement(_.SystemIcons.MoreHorizontal, {
+      color: _styles.COLORS.neutral_600,
+      size: "20px"
+    }),
+    onClick: navigate
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: _styles.COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(_.HyperLink, {
+    id: "link-item-" + (items.length - 3),
+    target: "_self",
+    variant: "default",
+    href: items[items.length - 3].url
+  }, items[items.length - 3].label))), !!items && items.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: _styles.COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(_.HyperLink, {
+    id: "link-item-" + (items.length - 2),
+    target: "_self",
+    variant: "default",
+    href: items[items.length - 2].url
+  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: _styles.COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
     size: size
   }, items[items.length - 1].label)));
 };
 
 Breadcrumb.propTypes = {
-  items: _propTypes.default.array,
-  size: _propTypes.default.oneOf(['xsmall', 'small', 'medium'])
+  homeIcon: _propTypes.default.bool,
+  homeLabel: _propTypes.default.string,
+  homeUrl: _propTypes.default.string,
+  items: _propTypes.default.array
 };
 var _default = Breadcrumb;
 exports.default = _default;

package/dist/js/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["BreadcrumbContainer","styled","div","FontStyles","size","textStyle","color","LastBreadcrumbItem","label","props","ComponentTextStyle","Bold","COLORS","neutral_800","LinkWrapper","Regular","neutral_600","primary_700","primary_800","Breadcrumb","items","iconSize","length","slice","map","item","i","url"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\n\ntype availableSizes = 'xsmall' | 'small' | 'medium';\n\ntype BreadcrumbProps = {\n  items?: BreadcrumbItem[];\n  size?: availableSizes;\n};\n\nconst BreadcrumbContainer = styled.div`\n  display:flex;\n  align-items: center;\n`;\n\nconst FontStyles = (size: availableSizes | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case 'xsmall':\n      return ComponentXXSStyling(textStyle, color);\n    case 'medium':\n      return ComponentMStyling(textStyle, color);\n    case 'small':\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: availableSizes}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  margin: 0 7px;\n`;\n\nconst LinkWrapper = styled.div<{size: availableSizes | undefined}>`\n  align-items: center;\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n  \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    margin: 0 7px;\n\n    svg{\n      padding:4px 0 0 0;\n    }\n  }\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size }) => {\n\n  size = size || 'small';\n\n  const iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';\n\n  return (\n    <BreadcrumbContainer>\n      <LinkWrapper size={size}>\n        <Link to={'/'}>\n          <SystemIcons.Home size={iconSize} />\n        </Link>\n      </LinkWrapper>\n\n      { !!items && items.length > 2 && \n        items.slice(0, items.length - 2).map((item, i)=> {\n          return (\n          <LinkWrapper size={size} key={i}>\n            /\n            <Link to={item.url}>\n              ...\n            </Link>\n          </LinkWrapper>\n      )})}\n\n      { !!items && items.length > 1 && \n        <LinkWrapper size={size}>\n          /\n          <Link to={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </Link>\n        </LinkWrapper>\n      }\n\n      { !!items && items.length > 0 && \n        <LinkWrapper size={size}>\n          /\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </LinkWrapper>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["marginRight","size","Size","Small","Medium","BreadcrumbContainer","styled","div","props","FontStyles","ComponentTextStyle","Regular","COLORS","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

package/dist/js/Button/DualFunctionButton.d.ts

@@ -5,7 +5,6 @@ export interface ButtonOption {
     label: string;
 }
 export interface DualButtonProps extends ButtonProps {
-    isButton: boolean;
     dropdownCustomizationProps: DropdownCustomizationProps;
 }
 declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;

package/dist/js/Button/DualFunctionButton.js

@@ -150,9 +150,6 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
   })));
 };
 
-DualFunctionButton.propTypes = {
-  isButton: _propTypes.default.bool.isRequired
-};
 var _default = DualFunctionButton;
 exports.default = _default;
 //# sourceMappingURL=DualFunctionButton.js.map

package/dist/js/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType","isButton"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  isButton: boolean;\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    focused={focused}\n                    setFocused={setFocused}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\" />\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}
+{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n            <Button\n            {...renderProps}\n            onClick={onClick}\n            disabled={disabled}\n            type={type}\n            loading={loading}\n            icon={icon}\n            size={size}\n            width={width}\n            variant={variant}\n            flatEdge=\"right\">\n                {children}\n            </Button>\n              <DropdownContent\n                    customizationProps={dropdownCustomizationProps}\n                    filter=''\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n                    setSelectedValues={setSelectedValues}\n                    isButton={true}\n                    setIsOpen={setIsOpen}\n                    focused={focused}\n                    setFocused={setFocused}\n                    hideOnClickOutside={true}\n                    size={size}\n                    isOpen={isOpen}\n                    id={id ?? 'dropdownId'}\n                    messageOnNoResults=''\n                    alignLeft={true} />\n          </Dropdown>\n          <Button variant={variant}\n          {...renderProps}\n          disabled={disabled}\n          type={type}\n          size={size}\n          minWidth={'unset'}\n          onClick={() => setIsOpen(!isOpen)}\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n          flatEdge=\"left\" />\n      </ButtonsContainer>;\n  };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}

package/dist/js/Button/Iconbutton.js

@@ -165,7 +165,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }
         },
         onBlur: function onBlur() {
-          return setTabbedHere(false);
+          setTabbedHere(false);
         },
         tabbedHere: tabbedHere,
         onKeyPress: onKeyPress,
@@ -203,7 +203,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }
         },
         onBlur: function onBlur() {
-          return setTabbedHere(false);
+          setTabbedHere(false);
         },
         tabbedHere: tabbedHere,
         onKeyPress: onKeyPress,

package/dist/js/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/js/Button/index.d.ts

@@ -1,4 +1,3 @@
 export { default as IconButton } from './Iconbutton';
 export { default as Button } from './Button';
 export { default as BackButton } from './BackButton';
-export { default as Anchor } from './Anchor';

package/dist/js/Button/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "BackButton", {
     return _BackButton.default;
   }
 });
-Object.defineProperty(exports, "Anchor", {
-  enumerable: true,
-  get: function get() {
-    return _Anchor.default;
-  }
-});
 
 var _Iconbutton = _interopRequireDefault(require("./Iconbutton"));
 
@@ -34,7 +28,5 @@ var _Button = _interopRequireDefault(require("./Button"));
 
 var _BackButton = _interopRequireDefault(require("./BackButton"));
 
-var _Anchor = _interopRequireDefault(require("./Anchor"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/dist/js/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\nexport { default as Anchor } from './Anchor';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\n"],"file":"index.js"}

package/dist/js/Chips/ChipTypes.d.ts

@@ -27,6 +27,7 @@ export interface ChoiceChipProps extends ChipProps {
 export interface ChipValue {
     value: string;
     label: string;
+    size: ChipSize;
 }
 export interface ActionChipProps extends ChipProps {
     text: string;

package/dist/js/Chips/ChoiceChips.js

@@ -30,7 +30,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ChoiceChips = function ChoiceChips(_ref) {
   var selected = _ref.selected,
       variant = _ref.variant,
-      size = _ref.size,
       disabled = _ref.disabled,
       onClick = _ref.onClick,
       values = _ref.values;
@@ -76,7 +75,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     return /*#__PURE__*/React.createElement(_ChipStyles.FilterChipContainer, {
       key: value.value,
       tabIndex: disabled ? -1 : 0,
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant),
+      className: "".concat(value.size, " ").concat(disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant),
       onClick: function onClick() {
         return onSelectChip(value);
       },

package/dist/js/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","variant","size","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","label"],"mappings":";;;;;;;;;AAGA;;AAKA;;;;;;;;;;;;;;;;;;AAOA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAA6E;AAAA,MAA1EC,QAA0E,QAA1EA,QAA0E;AAAA,MAAhEC,OAAgE,QAAhEA,OAAgE;AAAA,MAAvDC,IAAuD,QAAvDA,IAAuD;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,MAA8B,QAA9BA,MAA8B;;AACzI;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACT,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMW,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,CAACQ,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE,0CACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,wBACV,oBAAC,+BAAD;AACE,MAAA,GAAG,EAAEA,KAAK,CAACA,KADb;AAEE,MAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,YAAKD,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CX,OAAjF,CAHX;AAIE,MAAA,OAAO,EAAE;AAAA,eAAMU,YAAY,CAACC,KAAD,CAAlB;AAAA,OAJX;AAKE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAAjB;AAAA;AALd,OAMGA,KAAK,CAACK,KANT,CADU;AAAA,GAAX,CADH,CADF;AAcD,CAhDD;;eAkDelB,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, size, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
+{"version":3,"sources":["../../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","variant","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","keyCode","map","size","label"],"mappings":";;;;;;;;;AAGA;;AAKA;;;;;;;;;;;;;;;;;;AAOA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAAuE;AAAA,MAApEC,QAAoE,QAApEA,QAAoE;AAAA,MAA1DC,OAA0D,QAA1DA,OAA0D;AAAA,MAAjDC,QAAiD,QAAjDA,QAAiD;AAAA,MAAvCC,OAAuC,QAAvCA,OAAuC;AAAA,MAA9BC,MAA8B,QAA9BA,MAA8B;;AACnI;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACR,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMU,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,CAACQ,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE,0CACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,wBACV,oBAAC,+BAAD;AACE,MAAA,GAAG,EAAEA,KAAK,CAACA,KADb;AAEE,MAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgBK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,UAA/B,GAA4CV,OAAvF,CAHX;AAIE,MAAA,OAAO,EAAE;AAAA,eAAMS,YAAY,CAACC,KAAD,CAAlB;AAAA,OAJX;AAKE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAID,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAAjB;AAAA;AALd,OAMGA,KAAK,CAACM,KANT,CADU;AAAA,GAAX,CADH,CADF;AAcD,CAhDD;;eAkDelB,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { FilterChipContainer } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipValue, ChoiceChipProps } from './ChipTypes';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({ selected, variant, disabled, onClick, values }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.keyCode === 13) {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <FilterChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : selectedChip === value.value ? 'selected' : variant}`}\n          onClick={() => onSelectChip(value)}\n          onKeyDown={e => handleKeyDown(e, value)}>\n          {value.label}\n        </FilterChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/js/Dropdown/BasicDropdown.d.ts

@@ -2,9 +2,10 @@ import { DropdownItem } from './DropdownContent';
 interface DropdownFilterProps {
     id: string;
     list: DropdownItem[];
-    itemsType: 'normal' | 'checkbox' | 'radio';
+    itemsType?: 'normal' | 'checkbox' | 'radio';
     action?: () => void;
     actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
     pinTopItem?: boolean;
     multiSelect?: boolean;
     scrollable?: boolean;
@@ -22,5 +23,5 @@ interface DropdownFilterProps {
     size?: 'small' | 'medium';
     margin?: string;
 }
-declare const BasicDropdown: ({ id, list, placeholder, onSelect, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, }: DropdownFilterProps) => JSX.Element;
+declare const BasicDropdown: ({ id, list, placeholder, onSelect, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, }: DropdownFilterProps) => JSX.Element;
 export default BasicDropdown;

package/dist/js/Dropdown/BasicDropdown.js

@@ -54,9 +54,11 @@ var BasicDropdown = function BasicDropdown(_ref) {
       initalValue = _ref.initalValue,
       disableSorting = _ref.disableSorting,
       messageOnNoResults = _ref.messageOnNoResults,
-      itemsType = _ref.itemsType,
+      _ref$itemsType = _ref.itemsType,
+      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
       action = _ref.action,
       actionLabel = _ref.actionLabel,
+      actionVariant = _ref.actionVariant,
       pinTopItem = _ref.pinTopItem,
       multiSelect = _ref.multiSelect,
       _ref$scrollable = _ref.scrollable,
@@ -155,6 +157,18 @@ var BasicDropdown = function BasicDropdown(_ref) {
     setIsOpen(isOpen);
   };
 
+  var getDisplayItems = function getDisplayItems() {
+    var values = input.split(',').map(function (val) {
+      return val.trim();
+    });
+    var listDisplayLabels = list.filter(function (item) {
+      return values.includes(item.value);
+    }).map(function (l) {
+      return l.displayLabel;
+    });
+    return listDisplayLabels.join(', ');
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
     isButton: isButton || false,
     className: size ? size : '',
@@ -179,7 +193,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
     type: "search",
     readOnly: true,
     placeholder: placeholderSearch,
-    value: input,
+    value: getDisplayItems(),
     className: size ? "".concat(size, " value") : 'value',
     onClick: function onClick(e) {
       if (!locked && !disabled) {
@@ -208,6 +222,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       itemsType: itemsType,
       action: action !== null && action !== void 0 ? action : function () {},
       actionLabel: actionLabel,
+      actionVariant: actionVariant,
       scrollable: scrollable,
       onValueUpdate: handleValueSelect,
       items: list,
@@ -239,7 +254,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
 BasicDropdown.propTypes = {
   id: _propTypes.default.string.isRequired,
   list: _propTypes.default.array.isRequired,
-  itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']).isRequired,
+  itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']),
   action: _propTypes.default.func,
   actionLabel: _propTypes.default.string,
   pinTopItem: _propTypes.default.bool,