@laerdal/life-react-components 1.2.2-dev.17 → 1.2.2-dev.19

package/dist/esm/Dropdown/BasicDropdown.js

@@ -15,6 +15,7 @@ const BasicDropdown = ({
   list,
   placeholder,
   onSelect,
+  setDropdownMenuValues,
   initalValue,
   disableSorting,
   messageOnNoResults,
@@ -35,7 +36,9 @@ const BasicDropdown = ({
   activeValidationMessage,
   autofilledMessage,
   size,
-  margin = '4px 0'
+  margin = '4px 0',
+  dropdownMenuValues,
+  minWidth
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -74,11 +77,12 @@ const BasicDropdown = ({
   };
 
   React.useEffect(() => {
-    if (initalValue) {
-      setInput(initalValue);
+    if (initalValue || dropdownMenuValues) {
+      const initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
+      setInput(initValue);
       setRestartFilter(true);
     }
-  }, [initalValue]);
+  }, [initalValue, dropdownMenuValues]);
   React.useEffect(() => {
     document.addEventListener('keypress', handleKeyPress);
     return () => {
@@ -104,7 +108,8 @@ const BasicDropdown = ({
     className: size ? size : '',
     locked: locked,
     disabled: disabled,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth
   }, /*#__PURE__*/React.createElement(StyledField, {
     ref: styledFieldRef,
     className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -118,7 +123,8 @@ const BasicDropdown = ({
     locked: locked || false,
     showValidationMessage: !!activeValidationMessage,
     placeholder: placeholderSearch,
-    isPlaceholder: !input
+    isPlaceholder: !input,
+    minWidth: minWidth
   }, /*#__PURE__*/React.createElement(InputField, {
     type: "search",
     readOnly: true,
@@ -170,8 +176,8 @@ const BasicDropdown = ({
     setIsOpen: customSetIsOpen,
     messageOnNoResults: messageOnNoResults ?? '',
     isButton: isButton || false,
-    selectedValues: selectedValues,
-    setSelectedValues: setSelectedValues,
+    selectedValues: dropdownMenuValues ?? selectedValues,
+    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
     id: `${id}_dropdowncontent`
   })), activeValidationMessage && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
     size: "20px",
@@ -197,6 +203,7 @@ BasicDropdown.propTypes = {
   maxHeight: _pt.string,
   placeholder: _pt.string,
   onSelect: _pt.func,
+  setDropdownMenuValues: _pt.func,
   initalValue: _pt.string,
   disableSorting: _pt.bool,
   messageOnNoResults: _pt.string,
@@ -205,7 +212,8 @@ BasicDropdown.propTypes = {
   isButton: _pt.bool,
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,
-  margin: _pt.string
+  margin: _pt.string,
+  dropdownMenuValues: _pt.arrayOf(_pt.string)
 };
 export default BasicDropdown;
 //# sourceMappingURL=BasicDropdown.js.map

package/dist/esm/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/esm/Dropdown/CommonStyling.js

@@ -7,7 +7,7 @@ import { Z_INDEXES } from '../styles/z-indexes';
 export const Dropdown = styled.div`
   position: relative;
   display: inline-block;
-  ${props => !props.isButton && 'width: 100%; min-width: 344px;'}
+  ${props => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}
   ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 
@@ -94,7 +94,7 @@ export const StyledField = styled.div`
 
   padding: 12px 16px;
   height: 48px;
-  min-width: 344px;
+  min-width: ${props => props.minWidth ? `${props.minWidth}` : '344px'};
   width: 100%;
 
   background: ${COLORS.white};
@@ -106,8 +106,8 @@ export const StyledField = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
-  
-  input{
+
+  input {
     font-size: inherit;
     line-height: inherit;
     color: inherit;
@@ -253,96 +253,95 @@ export const DropdownButton = styled.button`
 `;
 export const DropdownButtonCSS = size => {
   return css`
-
-  ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
-  ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
+    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
   ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
 
   position: relative;
-  text-decoration: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};
-  background-color: ${COLORS.white};
-  border: none;
-  cursor: pointer;
-  background: transparent;
-  width: 100%;
-  text-align: left;
-
-  span {
-    margin: auto 0 auto 16px;
-    line-height: 48px;
-  }
-
-  div.item-content {
-    margin: auto 0 auto 16px;
+    text-decoration: none;
     display: flex;
+    flex-direction: row;
     align-items: center;
+    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};
+    background-color: ${COLORS.white};
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: 100%;
+    text-align: left;
 
-    div.item-label {
-      flex: 1 0 calc(100% - 40px);
+    span {
+      margin: auto 0 auto 16px;
+      line-height: 48px;
     }
 
-    div.item-icon {
-      margin-right: 6px;
-    }
-    div.item-icon-old {
-      flex: 1 0 40px;
+    div.item-content {
+      margin: auto 0 auto 16px;
       display: flex;
-      justify-content: flex-end;
+      align-items: center;
+
+      div.item-label {
+        flex: 1 0 calc(100% - 40px);
+      }
+
+      div.item-icon {
+        margin-right: 6px;
+      }
+      div.item-icon-old {
+        flex: 1 0 40px;
+        display: flex;
+        justify-content: flex-end;
+      }
     }
-  }
 
-  ${CommonInteractionStyling};
+    ${CommonInteractionStyling};
 
-  &.active {
-    background: ${COLORS.neutral_20};
+    &.active {
+      background: ${COLORS.neutral_20};
 
-    &::after {
-      position: absolute;
-      content: ' ';
-      width: 4px;
-      top: 0;
-      bottom: 0;
-      left: 2px;
-      background-color: ${COLORS.primary_500};
+      &::after {
+        position: absolute;
+        content: ' ';
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        left: 2px;
+        background-color: ${COLORS.primary_500};
 
-      border-radius: 2px;
+        border-radius: 2px;
+      }
     }
-  }
 
-  &:disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-    color: ${COLORS.neutral_200}
-  }
+    &:disabled {
+      background-color: transparent;
+      cursor: not-allowed;
+      color: ${COLORS.neutral_200};
+    }
 
-  &.active:hover {
-    background-color: ${COLORS.primary_20};
+    &.active:hover {
+      background-color: ${COLORS.primary_20};
 
-    svg {
-      color: ${COLORS.primary_600};
-    }
+      svg {
+        color: ${COLORS.primary_600};
+      }
 
-    &::after {
-      background-color: ${COLORS.primary_500};
+      &::after {
+        background-color: ${COLORS.primary_500};
+      }
     }
-  }
 
-  &.active:active {
-    background-color: ${COLORS.primary_100};
+    &.active:active {
+      background-color: ${COLORS.primary_100};
 
-    svg {
-      color: ${COLORS.primary_800};
-    }
+      svg {
+        color: ${COLORS.primary_800};
+      }
 
-    &::after {
-      background-color: ${COLORS.primary_500};
+      &::after {
+        background-color: ${COLORS.primary_500};
+      }
     }
-  }
-`;
+  `;
 };
 export const ButtonDropdownWrapper = styled.div`
   box-sizing: border-box;

package/dist/esm/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Z_INDEXES","Dropdown","div","props","isButton","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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CAAC6B,OAApB,EAA6B9B,MAAM,CAACqB,WAApC,CAAiD;AAC7F,IAAI4B,IAAI,IAAI1C,IAAI,CAAC6C,KAAb,IAAsBjD,iBAAiB,CAACF,kBAAkB,CAAC6B,OAApB,EAA6B9B,MAAM,CAACqB,WAApC,CAAiD;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB4B,IAAI,IAAI1C,IAAI,CAAC6C,KAAb,GAAqB,MAArB,GAA8BH,IAAI,IAAI1C,IAAI,CAAC4C,MAAb,GAAsB,MAAtB,GAA+B,MAAO;AACpF,sBAAsBnD,MAAM,CAACuB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIzB,wBAAyB;AAC7B;AACA;AACA,kBAAkBE,MAAM,CAACuC,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BvC,MAAM,CAACqD,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAarD,MAAM,CAAC6C,WAAY;AAChC;AACA;AACA;AACA,wBAAwB7C,MAAM,CAACsD,UAAW;AAC1C;AACA;AACA,eAAetD,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BhB,MAAM,CAACqD,WAAY;AAC7C;AACA;AACA;AACA;AACA,wBAAwBrD,MAAM,CAACuD,WAAY;AAC3C;AACA;AACA,eAAevD,MAAM,CAACiB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BjB,MAAM,CAACqD,WAAY;AAC7C;AACA;AACA,CA1FE;AA2FD,CA5FM;AA8FP,OAAO,MAAMG,qBAAqB,GAAG5D,MAAM,CAACc,GAA8C;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACE,MAAN,IAAgBF,KAAK,CAACG,QAAtB,GAAiC,sBAAjC,GAA0D,kBAAoB;AAC9F,IAAKH,KAAD,IAAYA,KAAK,CAACG,QAAN,GAAiB,uBAAjB,GAA2C,EAAI;AAC/D;AACA;AACA;AACA,wBAAwBd,MAAM,CAACsD,UAAW;AAC1C,aAAatD,MAAM,CAACyD,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBzD,MAAM,CAACuD,WAAY;AAC3C,aAAavD,MAAM,CAACiB,WAAY;AAChC;AACA;AACA,EA5CO","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling} from '../styles/typography';\nimport { Size } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && 'width: 100%; min-width: 344px;'}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 344px;\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  \n  input{\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{size? : Size}>`\n  ${props => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size? : Size) => {\n  return css`\n\n  ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n  background-color: ${COLORS.white};\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ${CommonInteractionStyling};\n\n  &.active {\n    background: ${COLORS.neutral_20};\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    background-color: transparent;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_200}\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n`;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Size","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\nexport const DropdownButton = styled.button<{ size?: Size }>`\n  ${(props) => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size?: Size) => {\n  return css`\n    ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n    text-decoration: none;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n    background-color: ${COLORS.white};\n    border: none;\n    cursor: pointer;\n    background: transparent;\n    width: 100%;\n    text-align: left;\n\n    span {\n      margin: auto 0 auto 16px;\n      line-height: 48px;\n    }\n\n    div.item-content {\n      margin: auto 0 auto 16px;\n      display: flex;\n      align-items: center;\n\n      div.item-label {\n        flex: 1 0 calc(100% - 40px);\n      }\n\n      div.item-icon {\n        margin-right: 6px;\n      }\n      div.item-icon-old {\n        flex: 1 0 40px;\n        display: flex;\n        justify-content: flex-end;\n      }\n    }\n\n    ${CommonInteractionStyling};\n\n    &.active {\n      background: ${COLORS.neutral_20};\n\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 0;\n        bottom: 0;\n        left: 2px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 2px;\n      }\n    }\n\n    &:disabled {\n      background-color: transparent;\n      cursor: not-allowed;\n      color: ${COLORS.neutral_200};\n    }\n\n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_600};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n\n      &::after {\n        background-color: ${COLORS.primary_500};\n      }\n    }\n  `;\n};\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -1,13 +1,14 @@
 import _pt from "prop-types";
 import * as React from 'react';
-import { HyperLink } from '..';
 import { Button, IconButton } from '../Button';
 import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
 import { Size } from '../types';
 import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader } from './ModalStyles';
 import { ModalNote } from './ModalNote';
+import { TooltipWrapper } from '../Tooltips';
+import { HyperLink } from '..';
 export const ModalDialog = ({
   size,
   isModalOpen,
@@ -24,8 +25,6 @@ export const ModalDialog = ({
   note,
   state
 }) => {
-  const [tooltipOpen, setTooltipOpen] = React.useState(false);
-
   const getMinWidth = () => {
     switch (size) {
       case Size.Small:
@@ -126,6 +125,23 @@ export const ModalDialog = ({
     }
   };
 
+  const ModalTootip = tooltip => {
+    return /*#__PURE__*/React.createElement(TooltipWrapper, {
+      size: Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: () => {}
+    }, /*#__PURE__*/React.createElement(Help, {
+      size: "24px",
+      color: COLORS.neutral_600
+    })));
+  };
+
   const ModalCloseButton = onClick => {
     return /*#__PURE__*/React.createElement(CloseButtonWrapper, {
       hasImage: !!topImage,
@@ -222,15 +238,9 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
-    id: "tooltip"
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseOver: () => setTooltipOpen(true),
-    onMouseOut: () => setTooltipOpen(false)
-  }, /*#__PURE__*/React.createElement(Help, {
-    size: "24px",
-    color: COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalBody, {
+  }), /*#__PURE__*/React.createElement(ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalTitleSection, null, /*#__PURE__*/React.createElement(FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalBody, {
     size: size
   }, children), note && /*#__PURE__*/React.createElement(ModalNote, {
     note: note,

package/dist/esm/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","HyperLink","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalTitleSection","StyledModalHeader","ModalNote","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","tooltipOpen","setTooltipOpen","useState","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","neutral_600","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HyperLink } from '..';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { ButtonAction, LeftFooterAction, LeftFooterActionBase, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","icon","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <TooltipWrapper size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n          <Help size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n      </TooltipWrapper>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} />}\n\n          <ModalFooter size={size}>\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}