@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-dev.20

package/dist/Button/Button.js

@@ -36,7 +36,7 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
   }
 };
 
-var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
+var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.size === Size.Large ? '56px' : '48px';
 }, function (props) {
   return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
@@ -55,7 +55,7 @@ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplat
 }, function (props) {
   return props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px';
 }, function (props) {
-  return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px';
+  return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '';
 }, function (props) {
   return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
 }, function (props) {
@@ -91,7 +91,7 @@ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplat
 }, function (props) {
   return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
 });
-var Secondary = styled(Primary)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
+var Secondary = styled(Primary)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    border-width: 2px;\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\n  switch (flatEdge) {\n    case 'left':\n      return `0px ${radius}px ${radius}px 0px`;\n\n    case 'right':\n      return `${radius}px 0px 0px ${radius}px`;\n\n    case 'none':\n    default:\n      return `${radius}px`;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${(props) => getBorderRadius(props.flatEdge, 8)};\n    border-width: 2px;\n    border-style: solid;\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${(props) => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? (props.iconOnly ? '-2px -8px' : '') : props.size === Size.Small ? (props.iconOnly ? '-2px -6px' : '') : '-2px -8px')};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.correct_500};\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.correct_700};\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.correct_800};\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    border-color: ${COLORS.critical_500};\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ${COLORS.critical_700};\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ${COLORS.critical_800};\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n    border-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', minWidth = '64px', testId, disabled, flatEdge, icon, ...props }, ref) => {\n    // Let's filter out properties that we don't need to render.\n    const { loading, ...renderProps } = props;\n\n    const renderContent = () => (\n      <>\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n        {loading && <LoadingIndicator />}\n      </>\n    );\n\n    let ButtonStyled = Primary;\n    switch (variant) {\n      case 'secondary':\n        ButtonStyled = Secondary;\n        break;\n      case 'tertiary':\n        ButtonStyled = Tertiary;\n        break;\n      case 'positive':\n        ButtonStyled = Positive;\n        break;\n      case 'critical':\n        ButtonStyled = Critical;\n        break;\n    }\n\n    return (\n      <ButtonStyled\n        {...renderProps}\n        ref={ref}\n        disabled={disabled}\n        iconOnly={!children}\n        type={type}\n        size={size}\n        flatEdge={flatEdge}\n        width={width}\n        minWidth={minWidth}\n        data-testid={testId}\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n        onMouseDown={defaultOnMouseDownHandler}>\n        <div className=\"button-content\">{renderContent()}</div>\n      </ButtonStyled>\n    );\n  },\n);\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius}px ${radius}px 0px`;\r\n\r\n    case 'right':\r\n      return `${radius}px 0px 0px ${radius}px`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}px`;\r\n  }\r\n};\r\n\r\nconst Primary = styled.button<ButtonProps>`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  div.button-content {\r\n    ${(props) =>\r\n      props.size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : props.size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-radius: ${(props) => getBorderRadius(props.flatEdge, 8)};\r\n    border-width: 0px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n\r\n    width: ${(props) => props.width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\r\n    min-width: ${(props) => props.minWidth};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '' ))};\r\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .label {\r\n      margin: 0 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n`;\r\n\r\nconst Secondary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n    border-width: 2px;\r\n  }\r\n\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n`;\r\n\r\nconst Tertiary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\r\n    border-color: transparent;\r\n    background-color: transparent;\r\n    border-width: 1px;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: white !important;\r\n    color: ${COLORS.neutral_300};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nconst Positive = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.correct_500};\r\n    background-color: ${COLORS.correct_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.correct_700};\r\n    background-color: ${COLORS.correct_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.correct_800};\r\n    background-color: ${COLORS.correct_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nconst Critical = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.critical_500};\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.critical_700};\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.critical_800};\r\n    background-color: ${COLORS.critical_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  role?: 'button' | string;\r\n  title?: string;\r\n  size?: Size;\r\n  colorTheme?: 'teal' | 'dark';\r\n  invertFocus?: boolean;\r\n  width?: 'auto' | string;\r\n  loading?: boolean;\r\n  testId?: string;\r\n  icon?: React.ReactNode;\r\n  minWidth?: string;\r\n  iconOnly?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', minWidth = '64px', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\r\n\r\n    const renderContent = () => (\r\n      <>\r\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n        {loading && <LoadingIndicator />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = Primary;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = Secondary;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = Tertiary;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = Positive;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = Critical;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        ref={ref}\r\n        disabled={disabled}\r\n        iconOnly={!children}\r\n        type={type}\r\n        size={size}\r\n        flatEdge={flatEdge}\r\n        width={width}\r\n        minWidth={minWidth}\r\n        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <div className=\"button-content\">{renderContent()}</div>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"file":"Button.js"}

package/dist/Button/DualFunctionButton.cjs.map

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

package/dist/Button/DualFunctionButton.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
-export interface ButtonOption {
-    label: string;
-}
-export interface DualButtonProps extends ButtonProps {
-    dropdownCustomizationProps: DropdownCustomizationProps;
-    dropdownMenuValues?: string[];
-    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
-}
-declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;
-export default DualFunctionButton;
+import * as React from 'react';
+import { ButtonProps } from './Button';
+import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
+export interface ButtonOption {
+    label: string;
+}
+export interface DualButtonProps extends ButtonProps {
+    dropdownCustomizationProps: DropdownCustomizationProps;
+    dropdownMenuValues?: string[];
+    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
+}
+declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;
+export default DualFunctionButton;

package/dist/Button/DualFunctionButton.js.map

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

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"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","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler","className"],"mappings":"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","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\nconst 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 {\n  id?: string;\n  className?: 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  shouldNotInteract?: 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  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\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 || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\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 || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"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","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler","className"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport styled, { css, CSSProperties } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\ninterface HeaderItemProps {\r\n  hideOnLowWidth: boolean;\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  focusBackgroundColor?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContent = styled.div``;\r\n\r\nconst StyledIconButton = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: block;\r\n  }\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContent} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContent} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.white};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.white};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContent} {\r\n      background: ${COLORS.primary_800};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.neutral_200};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContent} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContent} {\r\n      background: ${COLORS.primary_100};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContent} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps {\r\n  id?: string;\r\n  className?: string;\r\n  variant?: 'primary' | 'secondary';\r\n  shape?: 'square' | 'circular';\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  hideOnLowWidth?: boolean;\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  isInMobileMenu?: boolean;\r\n  disabled?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  shouldNotInteract?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  tabIndex?: number;\r\n  borderRadius?: number;\r\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\r\n  focusBackgroundColor?: string;\r\n  type?: 'submit' | 'reset' | 'button' | undefined;\r\n  children?: React.ReactNode;\r\n  hidden?: boolean;\r\n  style?: CSSProperties | undefined;\r\n  invertFocus?: boolean;\r\n}\r\n\r\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      hideOnLowWidth,\r\n      isInMobileMenu,\r\n      children,\r\n      useTransparentBackground,\r\n      shouldNotInteract,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      onKeyPress,\r\n      focusBackgroundColor,\r\n      type,\r\n      hidden,\r\n      style,\r\n      invertFocus,\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n    // Let's render button\r\n    switch (variant) {\r\n      case 'secondary':\r\n        return (\r\n          <StyledSecondaryIconButton\r\n            id={id}\r\n            type={type ?? 'button'}\r\n            data-testid={id}\r\n            ref={ref}\r\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n              event.stopPropagation();\r\n              action(event);\r\n            }}\r\n            disabled={disabled}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            inMobileMenu={isInMobileMenu}\r\n            useTransparentBackground={useTransparentBackground}\r\n            shouldNotInteract={shouldNotInteract}\r\n            iconColor={iconColor}\r\n            unsetIconSize={unsetIconSize}\r\n            tabIndex={tabIndex || 0}\r\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onKeyPress={onKeyPress}\r\n            hidden={hidden}\r\n            style={style}\r\n            invertFocus={invertFocus}\r\n            focusBackgroundColor={focusBackgroundColor}>\r\n            <IconButtonContent>{children}</IconButtonContent>\r\n          </StyledSecondaryIconButton>\r\n        );\r\n      case 'primary':\r\n      default:\r\n        return (\r\n          <StyledPrimaryIconButton\r\n            id={id}\r\n            type={type ?? 'button'}\r\n            data-testid={id}\r\n            flatEdge={flatEdge}\r\n            ref={ref}\r\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n              event.stopPropagation();\r\n              action(event);\r\n            }}\r\n            disabled={disabled}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            inMobileMenu={isInMobileMenu}\r\n            useTransparentBackground={useTransparentBackground}\r\n            iconColor={iconColor}\r\n            unsetIconSize={unsetIconSize}\r\n            tabIndex={tabIndex || 0}\r\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onKeyPress={onKeyPress}\r\n            hidden={hidden}\r\n            style={style}\r\n            invertFocus={invertFocus}\r\n            focusBackgroundColor={focusBackgroundColor}>\r\n            <IconButtonContent>{children}</IconButtonContent>\r\n          </StyledPrimaryIconButton>\r\n        );\r\n    }\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.d.ts

@@ -1,44 +1,44 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-interface HeaderItemProps {
-    hideOnLowWidth: boolean;
-    inMobileMenu?: boolean;
-    useTransparentBackground?: boolean;
-    iconColor?: string;
-    unsetIconSize?: boolean;
-    borderRadius?: number;
-    shape?: string;
-    flatEdge?: string;
-    focusBackgroundColor?: string;
-    invertFocus?: boolean;
-    shouldNotInteract?: boolean;
-}
-export declare const IconButtonContent: import("styled-components").StyledComponent<"div", any, {}, 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 {
-    id?: string;
-    className?: 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;
-    shouldNotInteract?: 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;
-    style?: CSSProperties | undefined;
-    invertFocus?: boolean;
-}
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default IconButton;
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+interface HeaderItemProps {
+    hideOnLowWidth: boolean;
+    inMobileMenu?: boolean;
+    useTransparentBackground?: boolean;
+    iconColor?: string;
+    unsetIconSize?: boolean;
+    borderRadius?: number;
+    shape?: string;
+    flatEdge?: string;
+    focusBackgroundColor?: string;
+    invertFocus?: boolean;
+    shouldNotInteract?: boolean;
+}
+export declare const IconButtonContent: import("styled-components").StyledComponent<"div", any, {}, 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 {
+    id?: string;
+    className?: 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;
+    shouldNotInteract?: 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;
+    style?: CSSProperties | undefined;
+    invertFocus?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"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","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","className"],"mappings":"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","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\nconst 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 {\n  id?: string;\n  className?: 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  shouldNotInteract?: 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  style?: CSSProperties | undefined;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      onKeyPress,\n      focusBackgroundColor,\n      type,\n      hidden,\n      style,\n      invertFocus,\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 || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\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 || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            onKeyPress={onKeyPress}\n            hidden={hidden}\n            style={style}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"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","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","className"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport styled, { css, CSSProperties } from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\ninterface HeaderItemProps {\r\n  hideOnLowWidth: boolean;\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  focusBackgroundColor?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\r\n  const radius = getBorderRadius(props);\r\n  switch (props.flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContent = styled.div``;\r\n\r\nconst StyledIconButton = styled.button<HeaderItemProps>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n\r\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: block;\r\n  }\r\n\r\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\r\n  ${IconButtonContent} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${getBorderRadiusStyle};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContent} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.white};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.white};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContent} {\r\n      background: ${COLORS.primary_800};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.neutral_200};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.white};\r\n      }\r\n      fill: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\r\n  ${IconButtonContent} {\r\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n\r\n    svg {\r\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      path {\r\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContent} {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContent} {\r\n      background: ${COLORS.primary_100};\r\n    }\r\n    ${IconButtonContent} svg path,\r\n    ${IconButtonContent} svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContent} {\r\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps {\r\n  id?: string;\r\n  className?: string;\r\n  variant?: 'primary' | 'secondary';\r\n  shape?: 'square' | 'circular';\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  hideOnLowWidth?: boolean;\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  isInMobileMenu?: boolean;\r\n  disabled?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  shouldNotInteract?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  tabIndex?: number;\r\n  borderRadius?: number;\r\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\r\n  focusBackgroundColor?: string;\r\n  type?: 'submit' | 'reset' | 'button' | undefined;\r\n  children?: React.ReactNode;\r\n  hidden?: boolean;\r\n  style?: CSSProperties | undefined;\r\n  invertFocus?: boolean;\r\n}\r\n\r\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      hideOnLowWidth,\r\n      isInMobileMenu,\r\n      children,\r\n      useTransparentBackground,\r\n      shouldNotInteract,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      onKeyPress,\r\n      focusBackgroundColor,\r\n      type,\r\n      hidden,\r\n      style,\r\n      invertFocus,\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n    // Let's render button\r\n    switch (variant) {\r\n      case 'secondary':\r\n        return (\r\n          <StyledSecondaryIconButton\r\n            id={id}\r\n            type={type ?? 'button'}\r\n            data-testid={id}\r\n            ref={ref}\r\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n              event.stopPropagation();\r\n              action(event);\r\n            }}\r\n            disabled={disabled}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            inMobileMenu={isInMobileMenu}\r\n            useTransparentBackground={useTransparentBackground}\r\n            shouldNotInteract={shouldNotInteract}\r\n            iconColor={iconColor}\r\n            unsetIconSize={unsetIconSize}\r\n            tabIndex={tabIndex || 0}\r\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onKeyPress={onKeyPress}\r\n            hidden={hidden}\r\n            style={style}\r\n            invertFocus={invertFocus}\r\n            focusBackgroundColor={focusBackgroundColor}>\r\n            <IconButtonContent>{children}</IconButtonContent>\r\n          </StyledSecondaryIconButton>\r\n        );\r\n      case 'primary':\r\n      default:\r\n        return (\r\n          <StyledPrimaryIconButton\r\n            id={id}\r\n            type={type ?? 'button'}\r\n            data-testid={id}\r\n            flatEdge={flatEdge}\r\n            ref={ref}\r\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n              event.stopPropagation();\r\n              action(event);\r\n            }}\r\n            disabled={disabled}\r\n            hideOnLowWidth={hideOnLowWidth || false}\r\n            inMobileMenu={isInMobileMenu}\r\n            useTransparentBackground={useTransparentBackground}\r\n            iconColor={iconColor}\r\n            unsetIconSize={unsetIconSize}\r\n            tabIndex={tabIndex || 0}\r\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            onKeyPress={onKeyPress}\r\n            hidden={hidden}\r\n            style={style}\r\n            invertFocus={invertFocus}\r\n            focusBackgroundColor={focusBackgroundColor}>\r\n            <IconButtonContent>{children}</IconButtonContent>\r\n          </StyledPrimaryIconButton>\r\n        );\r\n    }\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"file":"Iconbutton.js"}

package/dist/Button/index.cjs.map

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

package/dist/Button/index.d.ts

@@ -1,4 +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';
+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.map

@@ -1 +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"}
+{"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';\r\nexport {default as Button} from './Button';\r\nexport {default as BackButton} from './BackButton';\r\nexport {default as DualFunctionButton} from './DualFunctionButton';\r\n"],"file":"index.js"}