@laerdal/life-react-components 2.1.0 → 2.1.1-dev.15

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\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  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\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    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\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\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  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\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>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\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>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","dataTestId","focusOnClick","rest","event","stopPropagation","defaultOnMouseDownHandler","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { Testable } from 'src/types';\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  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\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    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\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\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  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n  focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      dataTestId,\n      focusOnClick,\n      ...rest\n    }: IconButtonProps,\n    ref,\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={dataTestId}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            \n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={dataTestId}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Testable } from 'src/types';
 interface HeaderItemProps {
     hideOnLowWidth: boolean;
     inMobileMenu?: boolean;
@@ -16,7 +17,7 @@ export declare const IconButtonContent: import("styled-components").StyledCompon
 export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
+export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
     variant?: 'primary' | 'secondary';
     shape?: 'square' | 'circular';
     action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
@@ -31,6 +32,7 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     focusBackgroundColor?: string;
     children?: React.ReactNode;
     invertFocus?: boolean;
+    focusOnClick?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/Button/Iconbutton.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
+var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -76,6 +76,8 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
+    dataTestId = _ref.dataTestId,
+    focusOnClick = _ref.focusOnClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Let's render button
   switch (variant) {
@@ -83,7 +85,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/_jsx(StyledSecondaryIconButton, _objectSpread(_objectSpread({
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
-        "data-testid": id,
+        "data-testid": dataTestId,
         ref: ref,
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -98,7 +100,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -112,7 +114,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/_jsx(StyledPrimaryIconButton, _objectSpread(_objectSpread({
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
-        "data-testid": id,
+        "data-testid": dataTestId,
         flatEdge: flatEdge,
         ref: ref,
         onClick: function onClick(event) {
@@ -127,7 +129,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -151,7 +153,8 @@ IconButton.propTypes = {
   borderRadius: _pt.number,
   focusBackgroundColor: _pt.string,
   children: _pt.node,
-  invertFocus: _pt.bool
+  invertFocus: _pt.bool,
+  focusOnClick: _pt.bool
 };
 export default IconButton;
 //# sourceMappingURL=Iconbutton.js.map

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\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  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\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    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\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\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  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\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>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\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>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","dataTestId","focusOnClick","rest","event","stopPropagation","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { Testable } from 'src/types';\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  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\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    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\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\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  ${IconButtonContent} {\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\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\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\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\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\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\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  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n  focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      dataTestId,\n      focusOnClick,\n      ...rest\n    }: IconButtonProps,\n    ref,\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={dataTestId}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            \n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={dataTestId}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
+type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
 export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
 export {};

package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
+type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
 export declare const HorizontalCardBody: React.FunctionComponent<Props>;
 export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HorizontalCardProps } from './types';
-declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
+type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
 export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
 export {};

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

@@ -4,14 +4,14 @@ import { ToggleButtonProps } from '../../Toggles/ToggleButton';
 import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
 import { TagVariants } from '../../Tag';
 import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
+export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
-export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
     componentType: 'toggle';
 };
-export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
     componentType: 'dropdown';
     icon: React.ReactNode;
 };
@@ -20,7 +20,7 @@ export interface HorizontalCardTag {
     icon?: React.ReactNode;
     variant?: TagVariants;
 }
-export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
 export interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
     variant?: 'outline' | 'elevated';
     action?: () => void;

package/dist/Chips/ActionChip.cjs

@@ -14,7 +14,7 @@ var _types = require("../types");
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["icon", "text", "size", "disabled", "onClick", "className"];
+var _excluded = ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,6 +27,7 @@ var ActionChip = function ActionChip(_ref) {
     disabled = _ref.disabled,
     _onClick = _ref.onClick,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * Return Action Chip component.
@@ -37,6 +38,7 @@ var ActionChip = function ActionChip(_ref) {
       return !disabled && _onClick && _onClick();
     },
     onMouseDown: _common.defaultOnMouseDownHandler,
+    "data-testid": dataTestId,
     role: "button",
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","rest","defaultOnMouseDownHandler","e","key","icons"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAKA;AACA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAQ2B;EAAA,IAPrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKN,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAChH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEG,iCAA0B;IACvC,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCE,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCY,kBAAK,CAACZ,IAAI,CAAC,CAAC;YAACO,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGN;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}
+{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key","icons"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAKA;AACA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCa,kBAAK,CAACb,IAAI,CAAC,CAAC;YAACO,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGN;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}

package/dist/Chips/ActionChip.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "text", "size", "disabled", "onClick", "className"];
+var _excluded = ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -33,6 +33,7 @@ var ActionChip = function ActionChip(_ref) {
     disabled = _ref.disabled,
     _onClick = _ref.onClick,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * Return Action Chip component.
@@ -43,6 +44,7 @@ var ActionChip = function ActionChip(_ref) {
       return !disabled && _onClick && _onClick();
     },
     onMouseDown: defaultOnMouseDownHandler,
+    "data-testid": dataTestId,
     role: "button",
     onKeyDown: function onKeyDown(e) {
       return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.js","names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,IAAIC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAQ2B;EAAA,IAPrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKL,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAChH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAU,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACL,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCE,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERP,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCP,KAAK,CAACO,IAAI,CAAC,CAAC;YAACM,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGL;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}
+{"version":3,"file":"ActionChip.js","names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icons[icon]({className: 'icon'})}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,WAAW,IAAIC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCP,KAAK,CAACO,IAAI,CAAC,CAAC;YAACM,SAAS,EAAE;UAAM,CAAC;QAAC,EAC7B,eAER;UAAA,UACGL;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}

package/dist/Chips/ChipTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipTypes.cjs","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}
+{"version":3,"file":"ChipTypes.cjs","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}

package/dist/Chips/ChipTypes.d.ts

@@ -1,9 +1,9 @@
-import { Size, States } from '../types';
+import { Size, States, Testable } from '../types';
 import React from 'react';
 /**
  * Types for the chips.
  */
-export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'> {
+export interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'> {
     size?: Size;
     disabled?: boolean;
 }
@@ -25,7 +25,7 @@ export interface ActionChipProps extends ChipProps {
     icon?: ChipIcons;
     onClick?: () => void;
 }
-export interface ChoiceChipProps {
+export interface ChoiceChipProps extends Testable {
     selected: string;
     values: ChipValue[];
     onClick?: (value: ChipValue) => void;
@@ -36,5 +36,5 @@ export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
     label: string;
     size?: Size;
 }
-export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckMark' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
-export declare type ChipVariant = States.Default | States.Invalid;
+export type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckMark' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
+export type ChipVariant = States.Default | States.Invalid;

package/dist/Chips/ChipTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipTypes.js","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}
+{"version":3,"file":"ChipTypes.js","names":[],"sources":["../../src/Chips/ChipTypes.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\n/**\n * Types for the chips.\n */\nexport interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'>{\n  size?: Size;\n  disabled?: boolean;\n}\n\nexport interface InputChipProps extends ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  icon?: ChipIcons;\n  disableRemove?: boolean;\n  onRemove: (e: any) => void;\n  onClick?: () => void;\n}\n\nexport interface FilterChipProps extends ChipProps {\n  text: string;\n  selected: boolean;\n  onClick?: () => void;\n}\n\nexport interface ActionChipProps extends ChipProps {\n  text: string;\n  icon?: ChipIcons;\n  onClick?: () => void;\n}\n\nexport interface ChoiceChipProps extends Testable  {\n  selected: string;\n  values: ChipValue[];\n  onClick?: (value: ChipValue) => void;\n  disabled?: boolean;\n}\n\nexport interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {\n  value: string;\n  label: string;\n  size?: Size;\n}\n\nexport type ChipIcons =\n  | 'Add'\n  | 'ArrowDropDown'\n  | 'ArrowDropUp'\n  | 'ArrowLineDown'\n  | 'ArrowLineLeft'\n  | 'ArrowLineRight'\n  | 'ArrowLineUp'\n  | 'ArrowStopLeft'\n  | 'ArrowStopRight'\n  | 'Attachment'\n  | 'Attention'\n  | 'BackwardsFiveSec'\n  | 'Book'\n  | 'BookmarkOff'\n  | 'BookmarkOn'\n  | 'Bullet'\n  | 'Calendar'\n  | 'CheckboxOff'\n  | 'CheckboxOn'\n  | 'CheckboxSemi'\n  | 'CheckMark'\n  | 'ChevronDown'\n  | 'ChevronLeft'\n  | 'ChevronRight'\n  | 'ChevronUp'\n  | 'Clear'\n  | 'Close'\n  | 'ClosedCaptionOn'\n  | 'CloudAttention'\n  | 'CloudCheck'\n  | 'CloudDownload'\n  | 'CloudLocked'\n  | 'CloudNoConnection'\n  | 'CloudSyncing'\n  | 'CloudUpload'\n  | 'Cloud'\n  | 'Dashboard'\n  | 'Delete'\n  | 'Download'\n  | 'DragHandle'\n  | 'DragIndicator'\n  | 'Edit'\n  | 'Educator'\n  | 'Equals'\n  | 'EventLog'\n  | 'ExtendTextArea'\n  | 'Filter'\n  | 'Forward'\n  | 'ForwardSlash'\n  | 'ForwardFiveSec'\n  | 'FullscreenExit'\n  | 'Fullscreen'\n  | 'GearSettings'\n  | 'GridView'\n  | 'Group'\n  | 'GuidedTour'\n  | 'Help'\n  | 'Hierarchy'\n  | 'History'\n  | 'Home'\n  | 'Information'\n  | 'Institute'\n  | 'Language'\n  | 'ListView'\n  | 'LoadingMedium'\n  | 'LoadingSmall'\n  | 'LockedOff'\n  | 'LockedOn'\n  | 'Login'\n  | 'Logout'\n  | 'Loop'\n  | 'Mail'\n  | 'Manikin'\n  | 'MapPoint'\n  | 'Menu'\n  | 'Minus'\n  | 'MoreHorizontal'\n  | 'MoreVertical'\n  | 'NotificationNew'\n  | 'Notification'\n  | 'OpenFolder'\n  | 'OpenNewWindow'\n  | 'Pause'\n  | 'PlayOutline'\n  | 'Play'\n  | 'Plus'\n  | 'PointDown'\n  | 'PointLeft'\n  | 'PointRight'\n  | 'PointUp'\n  | 'RadioButtonOff'\n  | 'RadioButtonOn'\n  | 'Record'\n  | 'Refresh'\n  | 'Replay'\n  | 'Rewind'\n  | 'Save'\n  | 'Search'\n  | 'Share'\n  | 'ShoppingCart'\n  | 'StarFilled'\n  | 'StarOutlined'\n  | 'Stop'\n  | 'Support'\n  | 'Team'\n  | 'ThumbsDown'\n  | 'ThumbsUp'\n  | 'TimeLimited'\n  | 'Time'\n  | 'Tip'\n  | 'Upload'\n  | 'Usb'\n  | 'User'\n  | 'Video'\n  | 'VisibleOff'\n  | 'VisibleOn'\n  | 'VolumeDown'\n  | 'VolumeOff'\n  | 'VolumeUp';\n\nexport type ChipVariant = States.Default | States.Invalid;\n"],"mappings":""}

package/dist/Chips/ChoiceChips.cjs

@@ -23,7 +23,8 @@ var ChoiceChips = function ChoiceChips(_ref) {
   var selected = _ref.selected,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
-    values = _ref.values;
+    values = _ref.values,
+    dataTestId = _ref.dataTestId;
   /**
    * Globally used variables within the component.
    */
@@ -61,6 +62,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "radiogroup",
+    "data-testid": dataTestId,
     children: values.map(function (item) {
       var value = item.value,
         _item$size = item.size,

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.cjs","names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Size","Medium","label","className","rest","defaultOnMouseDownHandler"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: 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 && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\">\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AAMA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,WAAqD,GAAG,SAAxDA,WAAqD,OAK2B;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;EAErE;AACF;AACA;EACE,sBAAwCC,KAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA3DC,YAAY;IAAEC,eAAe;;EAEpC;AACF;AACA;EACEH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpBD,eAAe,CAACP,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,IAAMS,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAgB,EAAK;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAK,CAAC;EAC3B,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAEF,KAAgB,EAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACE;IAAK,IAAI,EAAC,YAAY;IAAA,UACnBP,MAAM,CAACW,GAAG,CAAC,UAACC,IAAe,EAAK;MAC/B,IAAOL,KAAK,GAAoDK,IAAI,CAA7DL,KAAK;QAAA,aAAoDK,IAAI,CAAtDC,IAAI;QAAJA,IAAI,2BAAGC,WAAI,CAACC,MAAM;QAAEC,KAAK,GAAyBJ,IAAI,CAAlCI,KAAK;QAAEC,SAAS,GAAcL,IAAI,CAA3BK,SAAS;QAAKC,IAAI,0CAAKN,IAAI;MACpE,oBACE,qBAAC,yBAAa;QACZ,IAAI,EAAC,OAAO;QAEZ,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5B,SAAS,YAAKe,IAAI,cAAIf,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIK,YAAY,KAAKI,KAAK,GAAG,SAAS,GAAG,SAAS,0BAAgBU,SAAS,IAAI,EAAE,CAAG;QACpI,WAAW,EAAEE,iCAA0B;QACvC,OAAO,EAAE;UAAA,OAAM,CAACrB,QAAQ,IAAIQ,YAAY,CAACM,IAAI,CAAC;QAAA,CAAC;QAC/C,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACX,QAAQ,IAAIU,aAAa,CAACC,CAAC,EAAEG,IAAI,CAAC;QAAA;MAAC,GAChDM,IAAI;QAAA,uBACR,qBAAC,gCAAoB;UAAA,uBACnB,qBAAC,uBAAW;YAAA,UACTF;UAAK;QACM;MACO,IAXlBT,KAAK,CAYI;IAEpB,CAAC;EAAC,EACE;AAEV,CAAC;AAAC,eAEaX,WAAW;AAAA"}
+{"version":3,"file":"ChoiceChips.cjs","names":["ChoiceChips","selected","disabled","onClick","values","dataTestId","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Size","Medium","label","className","rest","defaultOnMouseDownHandler"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values,\n                                                                 dataTestId\n                                                               }: 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 && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\" data-testid={dataTestId}>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AAMA;AACA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAE9B,IAAMA,WAAqD,GAAG,SAAxDA,WAAqD,OAM2B;EAAA,IALrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;EAEzE;AACF;AACA;EACE,sBAAwCC,KAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA3DC,YAAY;IAAEC,eAAe;;EAEpC;AACF;AACA;EACEH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpBD,eAAe,CAACR,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,IAAMU,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAgB,EAAK;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAT,OAAO,IAAIA,OAAO,CAACS,KAAK,CAAC;EAC3B,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAEF,KAAgB,EAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACE;IAAK,IAAI,EAAC,YAAY;IAAC,eAAaP,UAAW;IAAA,UAC5CD,MAAM,CAACY,GAAG,CAAC,UAACC,IAAe,EAAK;MAC/B,IAAOL,KAAK,GAAoDK,IAAI,CAA7DL,KAAK;QAAA,aAAoDK,IAAI,CAAtDC,IAAI;QAAJA,IAAI,2BAAGC,WAAI,CAACC,MAAM;QAAEC,KAAK,GAAyBJ,IAAI,CAAlCI,KAAK;QAAEC,SAAS,GAAcL,IAAI,CAA3BK,SAAS;QAAKC,IAAI,0CAAKN,IAAI;MACpE,oBACE,qBAAC,yBAAa;QACZ,IAAI,EAAC,OAAO;QAEZ,QAAQ,EAAEf,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5B,SAAS,YAAKgB,IAAI,cAAIhB,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIM,YAAY,KAAKI,KAAK,GAAG,SAAS,GAAG,SAAS,0BAAgBU,SAAS,IAAI,EAAE,CAAG;QACpI,WAAW,EAAEE,iCAA0B;QACvC,OAAO,EAAE;UAAA,OAAM,CAACtB,QAAQ,IAAIS,YAAY,CAACM,IAAI,CAAC;QAAA,CAAC;QAC/C,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACZ,QAAQ,IAAIW,aAAa,CAACC,CAAC,EAAEG,IAAI,CAAC;QAAA;MAAC,GAChDM,IAAI;QAAA,uBACR,qBAAC,gCAAoB;UAAA,uBACnB,qBAAC,uBAAW;YAAA,UACTF;UAAK;QACM;MACO,IAXlBT,KAAK,CAYI;IAEpB,CAAC;EAAC,EACE;AAEV,CAAC;AAAC,eAEaZ,WAAW;AAAA"}

package/dist/Chips/ChoiceChips.js

@@ -25,7 +25,8 @@ var ChoiceChips = function ChoiceChips(_ref) {
   var selected = _ref.selected,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
-    values = _ref.values;
+    values = _ref.values,
+    dataTestId = _ref.dataTestId;
   /**
    * Globally used variables within the component.
    */
@@ -63,6 +64,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
    */
   return /*#__PURE__*/_jsx("div", {
     role: "radiogroup",
+    "data-testid": dataTestId,
     children: values.map(function (item) {
       var value = item.value,
         _item$size = item.size,

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Medium","label","className","rest"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: 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 && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\">\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,IAAI,QAAO,UAAU;AAAC;AAE9B,IAAMC,WAAqD,GAAG,SAAxDA,WAAqD,OAK2B;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;EAErE;AACF;AACA;EACE,sBAAwCV,KAAK,CAACW,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA3DC,YAAY;IAAEC,eAAe;;EAEpC;AACF;AACA;EACEb,KAAK,CAACc,SAAS,CAAC,YAAM;IACpBD,eAAe,CAACN,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,IAAMQ,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAgB,EAAK;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAP,OAAO,IAAIA,OAAO,CAACO,KAAK,CAAC;EAC3B,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAEF,KAAgB,EAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACE;IAAK,IAAI,EAAC,YAAY;IAAA,UACnBN,MAAM,CAACU,GAAG,CAAC,UAACC,IAAe,EAAK;MAC/B,IAAOL,KAAK,GAAoDK,IAAI,CAA7DL,KAAK;QAAA,aAAoDK,IAAI,CAAtDC,IAAI;QAAJA,IAAI,2BAAGjB,IAAI,CAACkB,MAAM;QAAEC,KAAK,GAAyBH,IAAI,CAAlCG,KAAK;QAAEC,SAAS,GAAcJ,IAAI,CAA3BI,SAAS;QAAKC,IAAI,4BAAKL,IAAI;MACpE,oBACE,KAAC,aAAa;QACZ,IAAI,EAAC,OAAO;QAEZ,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5B,SAAS,YAAKc,IAAI,cAAId,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAII,YAAY,KAAKI,KAAK,GAAG,SAAS,GAAG,SAAS,0BAAgBS,SAAS,IAAI,EAAE,CAAG;QACpI,WAAW,EAAErB,yBAA0B;QACvC,OAAO,EAAE;UAAA,OAAM,CAACI,QAAQ,IAAIO,YAAY,CAACM,IAAI,CAAC;QAAA,CAAC;QAC/C,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACV,QAAQ,IAAIS,aAAa,CAACC,CAAC,EAAEG,IAAI,CAAC;QAAA;MAAC,GAChDK,IAAI;QAAA,uBACR,KAAC,oBAAoB;UAAA,uBACnB,KAAC,WAAW;YAAA,UACTF;UAAK;QACM;MACO,IAXlBR,KAAK,CAYI;IAEpB,CAAC;EAAC,EACE;AAEV,CAAC;AAED,eAAeV,WAAW"}
+{"version":3,"file":"ChoiceChips.js","names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","dataTestId","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","item","size","Medium","label","className","rest"],"sources":["../../src/Chips/ChoiceChips.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values,\n                                                                 dataTestId\n                                                               }: 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 && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <div role=\"radiogroup\" data-testid={dataTestId}>\n      {values.map((item: ChipValue) => {\n        const {value, size = Size.Medium, label, className, ...rest } = item;\n        return (\n          <ChipContainer\n            role=\"radio\"\n            key={value}\n            tabIndex={disabled ? -1 : 0}\n            className={`${size} ${disabled ? 'disabled' : ''} ${selectedChip === value ? 'default' : 'outline'} interactive ${className || ''}`}\n            onMouseDown={defaultOnMouseDownHandler}\n            onClick={() => !disabled && onSelectChip(item)}\n            onKeyDown={e => !disabled && handleKeyDown(e, item)}\n            {...rest}>\n            <ChipContentContainer>\n              <ChipContent>\n                {label}\n              </ChipContent>\n            </ChipContentContainer>\n          </ChipContainer>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ChoiceChips;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,IAAI,QAAO,UAAU;AAAC;AAE9B,IAAMC,WAAqD,GAAG,SAAxDA,WAAqD,OAM2B;EAAA,IALrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;EAEzE;AACF;AACA;EACE,sBAAwCX,KAAK,CAACY,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA3DC,YAAY;IAAEC,eAAe;;EAEpC;AACF;AACA;EACEd,KAAK,CAACe,SAAS,CAAC,YAAM;IACpBD,eAAe,CAACP,QAAQ,CAAC;EAC3B,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEd;AACF;AACA;AACA;EACE,IAAMS,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAgB,EAAK;IACzC;IACAH,eAAe,CAACG,KAAK,CAACA,KAAK,CAAC;;IAE5B;IACAR,OAAO,IAAIA,OAAO,CAACQ,KAAK,CAAC;EAC3B,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAEF,KAAgB,EAAK;IAClD,IAAIE,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCJ,YAAY,CAACC,KAAK,CAAC;IACrB;EACF,CAAC;;EAED;AACF;AACA;EACE,oBACE;IAAK,IAAI,EAAC,YAAY;IAAC,eAAaN,UAAW;IAAA,UAC5CD,MAAM,CAACW,GAAG,CAAC,UAACC,IAAe,EAAK;MAC/B,IAAOL,KAAK,GAAoDK,IAAI,CAA7DL,KAAK;QAAA,aAAoDK,IAAI,CAAtDC,IAAI;QAAJA,IAAI,2BAAGlB,IAAI,CAACmB,MAAM;QAAEC,KAAK,GAAyBH,IAAI,CAAlCG,KAAK;QAAEC,SAAS,GAAcJ,IAAI,CAA3BI,SAAS;QAAKC,IAAI,4BAAKL,IAAI;MACpE,oBACE,KAAC,aAAa;QACZ,IAAI,EAAC,OAAO;QAEZ,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QAC5B,SAAS,YAAKe,IAAI,cAAIf,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIK,YAAY,KAAKI,KAAK,GAAG,SAAS,GAAG,SAAS,0BAAgBS,SAAS,IAAI,EAAE,CAAG;QACpI,WAAW,EAAEtB,yBAA0B;QACvC,OAAO,EAAE;UAAA,OAAM,CAACI,QAAQ,IAAIQ,YAAY,CAACM,IAAI,CAAC;QAAA,CAAC;QAC/C,SAAS,EAAE,mBAAAH,CAAC;UAAA,OAAI,CAACX,QAAQ,IAAIU,aAAa,CAACC,CAAC,EAAEG,IAAI,CAAC;QAAA;MAAC,GAChDK,IAAI;QAAA,uBACR,KAAC,oBAAoB;UAAA,uBACnB,KAAC,WAAW;YAAA,UACTF;UAAK;QACM;MACO,IAXlBR,KAAK,CAYI;IAEpB,CAAC;EAAC,EACE;AAEV,CAAC;AAED,eAAeX,WAAW"}

package/dist/Chips/FilterChip.cjs

@@ -14,7 +14,7 @@ var _index = require("../icons/index");
 var _ChipStyles = require("./ChipStyles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["selected", "text", "size", "disabled", "onClick", "className"];
+var _excluded = ["selected", "text", "size", "disabled", "onClick", "className", "dataTestId"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,12 +27,14 @@ var FilterChip = function FilterChip(_ref) {
     disabled = _ref.disabled,
     _onClick = _ref.onClick,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * Return Filter Chip component.
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
     role: "checkbox",
+    "data-testid": dataTestId,
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),
     tabIndex: disabled || !_onClick ? -1 : 0,
     onKeyDown: function onKeyDown(e) {