@laerdal/life-react-components 2.1.1-dev.3 → 2.1.1-dev.31

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.cjs

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
+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) { (0, _defineProperty2.default)(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; }
@@ -87,6 +87,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
+    dataTestId = _ref.dataTestId,
     focusOnClick = _ref.focusOnClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's render button
@@ -95,7 +96,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.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();
@@ -124,7 +125,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.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) {

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","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';\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  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      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={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={!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={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={!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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"}
+{"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;

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", "focusOnClick"];
+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,7 @@ 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
@@ -84,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();
@@ -113,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) {

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","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';\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  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      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={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={!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={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={!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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"}
+{"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/HorizontalCardThumbnail.js

@@ -4,8 +4,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../../styles';
 import { ImageWithFallbacks } from "../../Image";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
 var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));

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;

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) {