@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.8

package/dist/Button/DualFunctionButton.js.map

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

package/dist/Button/Iconbutton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface IconButtonProps {
+    id?: string;
+    variant?: 'primary' | 'secondary';
+    shape?: 'square' | 'circular';
+    action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    hideOnLowWidth?: boolean;
+    flatEdge?: 'right' | 'left' | 'none' | undefined;
+    isInMobileMenu?: boolean;
+    disabled?: boolean;
+    useTransparentBackground?: boolean;
+    iconColor?: string;
+    unsetIconSize?: boolean;
+    tabIndex?: number;
+    borderRadius?: number;
+    onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
+    focusBackgroundColor?: string;
+    type?: 'submit' | 'reset' | 'button' | undefined;
+    children?: React.ReactNode;
+    hidden?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/Button/Iconbutton.js

@@ -0,0 +1,175 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var getBorderRadius = function getBorderRadius(props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+};
+
+var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
+  var radius = getBorderRadius(props);
+
+  switch (props.flatEdge) {
+    case 'left':
+      return "0px ".concat(radius, " ").concat(radius, " 0px");
+
+    case 'right':
+      return "".concat(radius, " 0px 0px ").concat(radius);
+
+    case 'none':
+    default:
+      return "".concat(radius);
+  }
+};
+
+var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n"])), function (props) {
+  return props.hideOnLowWidth ? 'none' : 'block';
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
+}, getBorderRadiusStyle, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+}, function (props) {
+  return props.unsetIconSize ? 'unset' : '24px';
+});
+var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.white;
+}, COLORS.primary_700, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.neutral_200, COLORS.white, COLORS.white, function (props) {
+  return props.focusBackgroundColor || COLORS.primary_700;
+}, COLORS.white);
+var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ", ";\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ", " !important;\n      box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, function (props) {
+  return props.iconColor || COLORS.neutral_600;
+}, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, function (props) {
+  return props.useTransparentBackground ? 'transparent' : COLORS.white;
+}, COLORS.neutral_300, COLORS.neutral_300, function (props) {
+  return props.focusBackgroundColor || 'transparent';
+}, COLORS.primary_500, COLORS.neutral_600);
+var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      variant = _ref.variant,
+      shape = _ref.shape,
+      action = _ref.action,
+      hideOnLowWidth = _ref.hideOnLowWidth,
+      isInMobileMenu = _ref.isInMobileMenu,
+      children = _ref.children,
+      useTransparentBackground = _ref.useTransparentBackground,
+      disabled = _ref.disabled,
+      iconColor = _ref.iconColor,
+      unsetIconSize = _ref.unsetIconSize,
+      tabIndex = _ref.tabIndex,
+      flatEdge = _ref.flatEdge,
+      borderRadius = _ref.borderRadius,
+      onKeyPress = _ref.onKeyPress,
+      focusBackgroundColor = _ref.focusBackgroundColor,
+      type = _ref.type,
+      hidden = _ref.hidden;
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  }; // Let's render button
+
+
+  switch (variant) {
+    case 'secondary':
+      return /*#__PURE__*/_jsx(StyledSecondaryIconButton, {
+        id: id,
+        type: type !== null && type !== void 0 ? type : 'button',
+        "data-testid": id,
+        ref: ref,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          action(event);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnter(e) ? action() : null;
+        },
+        disabled: disabled,
+        hideOnLowWidth: hideOnLowWidth || false,
+        inMobileMenu: isInMobileMenu,
+        useTransparentBackground: useTransparentBackground,
+        iconColor: iconColor,
+        unsetIconSize: unsetIconSize,
+        tabIndex: tabIndex || 0,
+        borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+        onMouseDown: defaultOnMouseDownHandler,
+        onKeyPress: onKeyPress,
+        hidden: hidden,
+        focusBackgroundColor: focusBackgroundColor,
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      });
+
+    case 'primary':
+    default:
+      return /*#__PURE__*/_jsx(StyledPrimaryIconButton, {
+        id: id,
+        type: type !== null && type !== void 0 ? type : 'button',
+        "data-testid": id,
+        flatEdge: flatEdge,
+        ref: ref,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          action(event);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return isPressingEnter(e) ? action() : null;
+        },
+        disabled: disabled,
+        hideOnLowWidth: hideOnLowWidth || false,
+        inMobileMenu: isInMobileMenu,
+        useTransparentBackground: useTransparentBackground,
+        iconColor: iconColor,
+        unsetIconSize: unsetIconSize,
+        tabIndex: tabIndex || 0,
+        borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+        onMouseDown: defaultOnMouseDownHandler,
+        onKeyPress: onKeyPress,
+        hidden: hidden,
+        focusBackgroundColor: focusBackgroundColor,
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      });
+  }
+});
+IconButton.propTypes = {
+  id: _pt.string,
+  variant: _pt.oneOf(['primary', 'secondary']),
+  shape: _pt.oneOf(['square', 'circular']),
+  action: _pt.func.isRequired,
+  hideOnLowWidth: _pt.bool,
+  isInMobileMenu: _pt.bool,
+  disabled: _pt.bool,
+  useTransparentBackground: _pt.bool,
+  iconColor: _pt.string,
+  unsetIconSize: _pt.bool,
+  tabIndex: _pt.number,
+  borderRadius: _pt.number,
+  onKeyPress: _pt.func,
+  focusBackgroundColor: _pt.string,
+  children: _pt.node,
+  hidden: _pt.bool
+};
+export default IconButton;
+//# sourceMappingURL=Iconbutton.js.map

package/dist/Button/Iconbutton.js.map

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

package/dist/Button/index.d.ts

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

package/dist/Button/index.js

@@ -0,0 +1,5 @@
+export { default as IconButton } from './Iconbutton';
+export { default as Button } from './Button';
+export { default as BackButton } from './BackButton';
+export { default as DualFunctionButton } from './DualFunctionButton';
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/index.ts"],"names":["default","IconButton","Button","BackButton","DualFunctionButton"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAnB,QAAoC,cAApC;AACA,SAAQD,OAAO,IAAIE,MAAnB,QAAgC,UAAhC;AACA,SAAQF,OAAO,IAAIG,UAAnB,QAAoC,cAApC;AACA,SAAQH,OAAO,IAAII,kBAAnB,QAA4C,sBAA5C","sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"file":"index.js"}

package/dist/Chips/ActionChip.js

@@ -0,0 +1,69 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+
+import { SystemIcons as icons } from '../icons/index';
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+
+import { ActionChipContainer } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var ActionChip = function ActionChip(_ref) {
+  var icon = _ref.icon,
+      text = _ref.text,
+      variant = _ref.variant,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      _onClick = _ref.onClick;
+
+  /**
+   * Retrieves icon size based on the chip size.
+   * @returns A string indicating the icon size.
+   */
+  var getIconSize = function getIconSize() {
+    var iconSize; // Calculate correct icon size
+
+    if (size === Size.Small) {
+      iconSize = '16px';
+    } else if (size === Size.Medium) {
+      iconSize = '20px';
+    } else {
+      iconSize = '24px';
+    }
+
+    return iconSize;
+  };
+  /**
+   * Return Action Chip component.
+   */
+
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(ActionChipContainer, {
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : variant, " ").concat(icon && 'icon-chip'),
+      onClick: function onClick() {
+        return _onClick();
+      },
+      children: [icon && icons[icon]({
+        size: getIconSize(),
+        className: 'icon'
+      }), text]
+    })
+  });
+};
+
+export default ActionChip;
+//# sourceMappingURL=ActionChip.js.map

package/dist/Chips/ActionChip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ActionChipContainer","ActionChip","icon","text","variant","size","disabled","onClick","getIconSize","iconSize","Small","Medium","className"],"mappings":"AAAA;AACA;AACA;AACC,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACD;AACA;;AACC,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACD;AACA;;AACC,SAASC,mBAAT,QAAoC,cAApC;AAEA;AACD;AACA;;;;;;AAGC,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAAuE;AAAA,MAApEC,IAAoE,QAApEA,IAAoE;AAAA,MAA9DC,IAA8D,QAA9DA,IAA8D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,IAA+C,QAA/CA,IAA+C;AAAA,MAAzCC,QAAyC,QAAzCA,QAAyC;AAAA,MAA/BC,QAA+B,QAA/BA,OAA+B;;AAClI;AACH;AACA;AACA;AACG,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAc;AAChC,QAAIC,QAAJ,CADgC,CAGhC;;AACA,QAAIJ,IAAI,KAAKN,IAAI,CAACW,KAAlB,EAAyB;AACvBD,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFD,MAEO,IAAIJ,IAAI,KAAKN,IAAI,CAACY,MAAlB,EAA0B;AAC/BF,MAAAA,QAAQ,GAAG,MAAX;AACD,KAFM,MAEA;AACLA,MAAAA,QAAQ,GAAG,MAAX;AACD;;AAED,WAAOA,QAAP;AACD,GAbD;AAeA;AACH;AACA;;;AACG,sBACE;AAAA,2BACE,MAAC,mBAAD;AAAqB,MAAA,SAAS,YAAKJ,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgBF,OAArC,cAAgDF,IAAI,IAAI,WAAxD,CAA9B;AAAqG,MAAA,OAAO,EAAE;AAAA,eAAMK,QAAO,EAAb;AAAA,OAA9G;AAAA,iBAEGL,IAAI,IAAIJ,KAAK,CAACI,IAAD,CAAL,CAAY;AAAEG,QAAAA,IAAI,EAAEG,WAAW,EAAnB;AAAuBI,QAAAA,SAAS,EAAE;AAAlC,OAAZ,CAFX,EAKGT,IALH;AAAA;AADF,IADF;AAWD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\n import * as React from 'react';\n\n /**\n  * Import custom components.\n  */\n import {SystemIcons as icons} from '../icons/index';\n import {Size} from '../types'; \n /**\n  * Import custom styles.\n  */\n import { ActionChipContainer } from './ChipStyles';\n \n /**\n  * Import custom types.\n  */\n import { ActionChipProps } from './ChipTypes';\n \n const ActionChip: React.FunctionComponent<ActionChipProps> = ({ icon, text, variant, size, disabled, onClick }: ActionChipProps) => {\n   /**\n    * Retrieves icon size based on the chip size.\n    * @returns A string indicating the icon size.\n    */\n   const getIconSize = (): string => {\n     let iconSize: string;\n \n     // Calculate correct icon size\n     if (size === Size.Small) {\n       iconSize = '16px';\n     } else if (size === Size.Medium) {\n       iconSize = '20px';\n     } else {\n       iconSize = '24px';\n     }\n \n     return iconSize;\n   }\n \n   /**\n    * Return Action Chip component.\n    */\n   return (\n     <>\n       <ActionChipContainer className={`${size} ${disabled ? 'disabled' : variant} ${icon && 'icon-chip'}`} onClick={() => onClick()}>\n         { /* Let's render icon if it is passed */ }\n         {icon && icons[icon]({ size: getIconSize(), className: 'icon' })}\n         \n         { /* Let's render text */ }\n         {text}\n       </ActionChipContainer>\n     </>\n   );\n };\n \n export default ActionChip;\n "],"file":"ActionChip.js"}

package/dist/Chips/ChipInput.js

@@ -0,0 +1,182 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+
+import { InputChip } from './index';
+import { Size } from '../types';
+import { WarningMessage, ErrorMessage } from '../InputFields/styling';
+import { COLORS } from '../styles';
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+/**
+ * Import custom styles.
+ */
+
+import { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';
+/**
+ * Import custom types.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var ChipInput = function ChipInput(_ref) {
+  var values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      required = _ref.required,
+      icon = _ref.icon,
+      placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange;
+  // Globally used variables within the chip input
+  var chipInput;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      chips = _React$useState2[0],
+      setChips = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      value = _React$useState4[0],
+      setValue = _React$useState4[1];
+  /**
+   * Sets initial values for the chips.
+   */
+
+
+  React.useEffect(function () {
+    // Let's add initial chip values
+    setChips(values);
+  }, [values]);
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
+   */
+
+  var onAddChip = function onAddChip(event) {
+    // Let's trigger only on enter, comma and space key press
+    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
+      // Let's prevent default action - adding new key to the value
+      event.preventDefault(); // Let's add the chip
+
+      setChips([].concat(_toConsumableArray(chips), [value]));
+      onValueChange([].concat(_toConsumableArray(chips), [value])); // Let's clear the old value
+
+      chipInput.value = '';
+      setValue('');
+    }
+  };
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
+   * @param elementToAdd - Element which needs to be added in the deleted element place.
+   */
+
+
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
+    // Let's copy the chips
+    var newChips = _toConsumableArray(chips); // Let's delete the chip
+    // If necessary, let's replace it with a different chip
+
+
+    if (elementToAdd) {
+      newChips.splice(index, 1, elementToAdd);
+    } else {
+      newChips.splice(index, 1);
+    } // Let's update the chip list
+
+
+    setChips(_toConsumableArray(newChips));
+    onValueChange(_toConsumableArray(newChips));
+  };
+  /**
+   * Changes a status of the chip to edit.
+   * @param text - Text of the chip that is being edited.
+   * @param index - Index of the chip in the array.
+   */
+
+
+  var onEditChip = function onEditChip(text, index) {
+    // Let's check if we have to add value as a chip (in case we have entered something in the input field)
+    if (chipInput.value !== '') {
+      // Let's replace the chip
+      onRemoveChip(index, chipInput.value);
+    } else {
+      // Let's just remove the chip
+      onRemoveChip(index);
+    } // Let's update the text value of input field
+
+
+    chipInput.value = text;
+    setValue(text);
+  };
+  /**
+   * Return Chip Input component.
+   */
+
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [required && /*#__PURE__*/_jsx(RequiredStar, {
+      children: "*"
+    }), /*#__PURE__*/_jsxs(ChipInputContainer, {
+      onClick: function onClick() {
+        return chipInput.focus();
+      },
+      id: inputId,
+      className: validationType,
+      children: [chips.map(function (chip, index) {
+        return /*#__PURE__*/_jsx(InputChip, {
+          icon: icon,
+          size: Size.Medium,
+          variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/_jsx(ChipInputEl, {
+        type: "text",
+        onChange: function onChange(event) {
+          return setValue(event.target.value);
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && chips.length === 0 ? placeholder : '',
+        ref: function ref(input) {
+          chipInput = input;
+        }
+      })]
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+export default ChipInput;
+//# sourceMappingURL=ChipInput.js.map

package/dist/Chips/ChipInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChipInput.tsx"],"names":["React","InputChip","Size","WarningMessage","ErrorMessage","COLORS","TechnicalWarning","ChipInputContainer","ChipInputEl","RequiredStar","ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Medium","length","target","input","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n  values,\n  inputId,\n  variants,\n  required,\n  icon,\n  placeholder,\n  validationType,\n  validationMessage,\n  onValueChange,\n}: ChipInputProps) => {\n  // Globally used variables within the chip input\n  let chipInput: HTMLInputElement;\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n      // Let's prevent default action - adding new key to the value\n      event.preventDefault();\n\n      // Let's add the chip\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      // Let's clear the old value\n      chipInput.value = '';\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   * @param elementToAdd - Element which needs to be added in the deleted element place.\n   */\n  const onRemoveChip = (index: number, elementToAdd?: string): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    if (elementToAdd) {\n      newChips.splice(index, 1, elementToAdd);\n    } else {\n      newChips.splice(index, 1);\n    }\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange([...newChips]);\n  };\n\n  /**\n   * Changes a status of the chip to edit.\n   * @param text - Text of the chip that is being edited.\n   * @param index - Index of the chip in the array.\n   */\n  const onEditChip = (text: string, index: number): void => {\n    // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n    if (chipInput.value !== '') {\n      // Let's replace the chip\n      onRemoveChip(index, chipInput.value);\n    } else {\n      // Let's just remove the chip\n      onRemoveChip(index);\n    }\n\n    // Let's update the text value of input field\n    chipInput.value = text;\n    setValue(text);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <>\n      {required && <RequiredStar>*</RequiredStar>}\n      <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n        {chips.map((chip: string, index: number) => (\n          <InputChip\n            icon={icon}\n            size={Size.Medium}\n            variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n            text={chip}\n            onRemove={() => onRemoveChip(index)}\n            onClick={() => onEditChip(chip, index)}\n            key={`chip_${index}`}></InputChip>\n        ))}\n        <ChipInputEl\n          type=\"text\"\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n            onAddChip(event);\n          }}\n          placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n          ref={(input: HTMLInputElement) => {\n            chipInput = input;\n          }}\n        />\n      </ChipInputContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </>\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}

package/dist/Chips/ChipStyles.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+/**
+ * Import custom style properties.
+ */
+
+import { COLORS } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
+/**
+ *
+ * Chip styles.
+ */
+
+export var ChipContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  color: ", ";\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ", ";\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ", "\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ", "\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ", "\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ", ";\n    color: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.normal {\n    background: ", ";\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.warning {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n\n  &.error {\n    color: ", ";\n    background: ", ";\n\n    > button > div > .remove > path {\n      fill: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  }\n"])), COLORS.white, COLORS.white, COLORS.white, ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white), ComponentSStyling(ComponentTextStyle.Bold, COLORS.white), ComponentMStyling(ComponentTextStyle.Bold, COLORS.white), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_700, COLORS.primary_800, COLORS.black, COLORS.warning_100, COLORS.warning_500, COLORS.warning_400, COLORS.warning_400, COLORS.black, COLORS.critical_100, COLORS.critical_500, COLORS.critical_400, COLORS.critical_400);
+export var ChipInputContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ", "\n  color: ", " !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), COLORS.neutral_400, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black, COLORS.warning_500, COLORS.warning_500, COLORS.warning_500, COLORS.critical_500, COLORS.critical_500, COLORS.critical_500, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700);
+export var RequiredStar = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var FilterChipContainer = styled(ChipContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_600, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_200, COLORS.primary_100, COLORS.primary_800, COLORS.primary_300, COLORS.focus_25, COLORS.focus, COLORS.primary_500, COLORS.white, COLORS.primary_500, COLORS.primary_700, COLORS.white, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.focus_25, COLORS.focus);
+export var ActionChipContainer = styled(ChipContainer)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &.normal {\n    background: ", ";\n    color: ", ";\n    border: 2px solid;\n    border-color: ", ";\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n    }\n\n    &:active,\n    &:focus {\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_600, COLORS.neutral_200, COLORS.primary_20, COLORS.primary_600, COLORS.primary_200, COLORS.primary_100, COLORS.primary_800, COLORS.primary_300, COLORS.focus_25, COLORS.focus);
+export var ChipInputEl = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ", "\n  color: ", " !important;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black);
+//# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ChipContainer","div","white","Bold","neutral_100","neutral_300","primary_500","primary_700","primary_800","black","warning_100","warning_500","warning_400","critical_100","critical_500","critical_400","ChipInputContainer","neutral_400","Regular","RequiredStar","span","FilterChipContainer","neutral_600","neutral_200","primary_20","primary_600","primary_200","primary_100","primary_300","focus_25","focus","ActionChipContainer","ChipInputEl","input"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n/**\n *\n * Chip styles.\n */\nexport const ChipContainer = styled.div`\n  cursor: pointer;\n  color: ${COLORS.white};\n  display: inline-block;\n\n  > button > div > .remove > path {\n    fill: ${COLORS.white};\n  }\n\n  &:hover,\n  &:focus {\n    > button > div > .remove > path {\n      fill: ${COLORS.white};\n    }\n  }\n\n  button {\n    background: transparent;\n    display: inline-block;\n    padding: 0;\n    width: auto;\n    height: auto;\n    color: inherit;\n\n    div {\n      color: inherit;\n      width: auto;\n      height: auto;\n\n      svg {\n        color: inherit;\n      }\n    }\n\n    &:hover,\n    &:hover:not(:disabled),\n    :focus,\n    :focus:not(:disabled) {\n      background: transparent;\n      display: inline-block;\n      padding: 0;\n      width: auto;\n      height: auto;\n      color: inherit;\n      outline: none;\n\n      div {\n        box-shadow: none;\n        background-color: transparent;\n\n        svg {\n          color: inherit;\n        }\n      }\n    }\n  }\n\n  &.small {\n    ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 40px;\n    height: 24px;\n    padding: 0px 12px;\n    margin: 12px 0px;\n    border-radius: 40px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.button-chip {\n      padding: 0px 8px 0px 12px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 8px;\n    }\n\n    > button {\n      width: 16px;\n      height: 16px;\n\n      > div {\n        width: 16px;\n        height: 16px;\n\n        svg {\n          padding: 0px;\n          margin-left: 4x;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 4px;\n      }\n\n      &.remove {\n        margin-left: 4px;\n      }\n    }\n  }\n\n  &.medium {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 80px;\n    height: 40px;\n    padding: 0px 16px;\n    margin: 4px 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 16px 0px 12px;\n    }\n\n    &.button-chip {\n      padding: 0px 12px 0px 16px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 12px;\n    }\n\n    > button {\n      width: 20px;\n      height: 20px;\n\n      > div {\n        width: 20px;\n        height: 20px;\n\n        svg {\n          padding: 0px;\n          margin-left: 6px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 6px;\n      }\n\n      &.remove {\n        margin-left: 6px;\n      }\n    }\n  }\n\n  &.large {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.white)}\n    border-radius: 120px;\n    height: 56px;\n    padding: 0px 20px;\n    margin: 0px;\n    display: inline-flex;\n    align-items: center;\n\n    &.icon-chip {\n      padding: 0px 20px 0px 16px;\n    }\n\n    &.button-chip {\n      padding: 0px 16px 0px 20px;\n    }\n\n    &.icon-chip.button-chip {\n      padding: 0px 16px;\n    }\n\n    > button {\n      width: 24px;\n      height: 24px;\n\n      > div {\n        width: 24px;\n        height: 24px;\n\n        svg {\n          padding: 0px;\n          margin-left: 8px;\n        }\n      }\n    }\n\n    svg {\n      vertical-align: middle;\n\n      &.icon {\n        margin-right: 8px;\n      }\n\n      &.remove {\n        margin-left: 8px;\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    background: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.neutral_300};\n    }\n\n    &:hover {\n      background: ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.neutral_100};\n    }\n  }\n\n  &.normal {\n    background: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n    }\n\n    &:active {\n      background: ${COLORS.primary_800};\n    }\n  }\n\n  &.warning {\n    color: ${COLORS.black};\n    background: ${COLORS.warning_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.warning_500};\n    }\n\n    &:hover {\n      background: ${COLORS.warning_400};\n    }\n\n    &:active {\n      background: ${COLORS.warning_400};\n    }\n  }\n\n  &.error {\n    color: ${COLORS.black};\n    background: ${COLORS.critical_100};\n\n    > button > div > .remove > path {\n      fill: ${COLORS.critical_500};\n    }\n\n    &:hover {\n      background: ${COLORS.critical_400};\n    }\n\n    &:active {\n      background: ${COLORS.critical_400};\n    }\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  box-sizing: border-box;\n  width: 100%;\n  cursor: text;\n  outline: none;\n  border-radius: 4.5px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const FilterChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n\n  &.selected {\n    background: ${COLORS.primary_500};\n    color: ${COLORS.white};\n    border: 2px solid;\n    border-color: ${COLORS.primary_500};\n\n    &:hover {\n      background: ${COLORS.primary_700};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_700};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_800};\n      color: ${COLORS.white};\n      border-color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n    }\n  }\n`;\n\nexport const ActionChipContainer = styled(ChipContainer)`\n  &.normal {\n    background: ${COLORS.white};\n    color: ${COLORS.neutral_600};\n    border: 2px solid;\n    border-color: ${COLORS.neutral_200};\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n      border-color: ${COLORS.primary_200};\n    }\n\n    &:active,\n    &:focus {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      border-color: ${COLORS.primary_300};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    }\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n`;\n"],"file":"ChipStyles.js"}