npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.14 → 1.2.2-dev.14.full - Mend

@laerdal/life-react-components 1.2.2-dev.14 → 1.2.2-dev.14.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/esm/Dropdown/BasicDropdown.js +8 -15
package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
package/dist/esm/Dropdown/CommonStyling.js +69 -68
package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
package/dist/esm/GlobalNavigationBar/Avatar.js +2 -2
package/dist/esm/GlobalNavigationBar/Avatar.js.map +1 -1
package/dist/esm/GlobalNavigationBar/Logo.js +10 -10
package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
package/dist/js/Dropdown/BasicDropdown.d.ts +1 -4
package/dist/js/Dropdown/BasicDropdown.js +8 -15
package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
package/dist/js/Dropdown/CommonStyling.d.ts +0 -1
package/dist/js/Dropdown/CommonStyling.js +3 -3
package/dist/js/Dropdown/CommonStyling.js.map +1 -1
package/dist/js/GlobalNavigationBar/Avatar.js +2 -2
package/dist/js/GlobalNavigationBar/Avatar.js.map +1 -1
package/dist/js/GlobalNavigationBar/Logo.js +9 -9
package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
package/dist/umd/Dropdown/BasicDropdown.js +8 -15
package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
package/dist/umd/Dropdown/CommonStyling.js +69 -68
package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
package/dist/umd/GlobalNavigationBar/Avatar.js +2 -2
package/dist/umd/GlobalNavigationBar/Avatar.js.map +1 -1
package/dist/umd/GlobalNavigationBar/Logo.js +10 -10
package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
package/package.json +1 -1

package/dist/esm/Dropdown/BasicDropdown.js CHANGED Viewed

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

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

	@@ -1 +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","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?: number;\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 <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"}
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"}

package/dist/esm/Dropdown/CommonStyling.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { Z_INDEXES } from '../styles/z-indexes';
 export const Dropdown = styled.div`
   position: relative;
   display: inline-block;
-  ${props => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth}px` : 'width: 100%; min-width: 344px;')}
+  ${props => !props.isButton && 'width: 100%; min-width: 344px;'}
   ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
@@ -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,95 +253,96 @@ 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;
+  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;
     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-label {
+      flex: 1 0 calc(100% - 40px);
     }
-    div.item-content {
-      margin: auto 0 auto 16px;
+    div.item-icon {
+      margin-right: 6px;
+    }
+    div.item-icon-old {
+      flex: 1 0 40px;
       display: flex;
-      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;
-      }
+      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 CHANGED Viewed

	@@ -1 +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","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?: number }>`\n position: relative;\n display: inline-block;\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth}px` : '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 ${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"}
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"}

package/dist/esm/GlobalNavigationBar/Avatar.js CHANGED Viewed

@@ -32,7 +32,7 @@ const AvatarLink = styled.div`
   }
 `;
 const AvatarImage = styled.div`
-  background-color: ${props => props.color};
+  background-color: ${props => props.$color};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -78,7 +78,7 @@ const Avatar = ({
     onMouseDown: e => e.preventDefault()
   }, /*#__PURE__*/React.createElement(AvatarImage, {
     size: size,
-    color: color,
+    $color: color,
     useInteractionStyling: useInteractionStyling
   }, /*#__PURE__*/React.createElement(AvatarLetter, {
     "data-hj-suppress": true,

package/dist/esm/GlobalNavigationBar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","e","preventDefault","profileMenuLink"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,WAApC;AAEA,MAAMC,WAAW,GAAGH,GAAI;AACxB;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,8BAA8BH,MAAM,CAACI,OAAQ;AAC7C;AACA,CARA;AAUA,MAAMC,YAAY,GAAGN,GAAI;AACzB;AACA,wBAAwBC,MAAM,CAACM,WAAY;AAC3C;AACA;AACA;AACA,kBAAkBN,MAAM,CAACO,WAAY;AACrC;AACA,CARA;AAUA,MAAMC,UAAU,GAAGV,MAAM,CAACW,GAAsD;AAChF;AACA;AACA,~~IAAIC~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACC,qBAAN,GAA8BT,WAA9B,GAA4C,EAAI;~~AAC9D~~;AACA;AACA;AACA;AACA,~~qBAAqBQ~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACC,qBAAN,GAA+B,GAAED,KAAK,CAACE,IAAN,GAAaF,KAAK,CAACE,IAAnB,GAA0B,EAAG,IAA9D,GAAoE,EAAI;~~AACvG~~;AACA,CAVA;AAYA,MAAMC,WAAW,GAAGf,MAAM,CAACW,~~GAAqE~~;~~AAChG~~,~~sBAAsBC~~,~~KAAK~~,~~IAAIA~~,KAAK,CAACI,~~KAAM~~;~~AAC3C~~;AACA;AACA;AACA,~~mBAAmBJ~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACE,IAAN,GAAaF,KAAK,CAACE,IAAnB,GAA0B,EAAI;~~AAC3D~~,~~YAAYF~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACE,IAAN,GAAaF,KAAK,CAACE,IAAnB,GAA0B,EAAI;~~AACpD~~,~~WAAWF~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACE,IAAN,GAAaF,KAAK,CAACE,IAAnB,GAA0B,EAAI;~~AACnD~~;AACA;AACA,~~IAAIF~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACC,qBAAN,GAA8BN,YAA9B,GAA6C,EAAI;~~AAC/D~~,CAXA;AAaA,MAAMU,YAAY,GAAGjB,MAAM,CAACW,GAAsB;AAClD,~~eAAeC~~,~~KAAK~~,~~IAAIA~~,KAAK,CAACE,IAAN,GAAa,CAAb,GAAiB,CAAE;~~AAC3C~~;AACA;AACA;AACA;AACA,~~iBAAiBF~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACE,IAAN,GAAaF,KAAK,CAACE,IAAnB,GAA0B,EAAI;~~AACzD~~,CAPA;AASA,OAAO,MAAMI,eAAe,GAAGlB,MAAM,CAACW,GAAiF;AACvH;AACA;AACA,~~kBAAkBC~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACO,YAAN,GAAqB,KAArB,GAA6B,KAAO;~~AAChE~~,~~iBAAiBP~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACO,YAAN,GAAqB,GAArB,GAA2B,MAAQ;~~AAC9D~~,~~aAAaP~~,~~KAAK~~,~~IAAKA~~,KAAK,CAACQ,cAAN,GAAuB,MAAvB,GAAgC,MAAQ;~~AAC/D~~;AACA,IAAIjB,WAAW,CAACkB,MAAO;AACvB;AACA,~~MAAMT~~,~~KAAK~~,~~IAAI~~,CAACA,KAAK,CAACU,WAAP,GAAqB,eAArB,GAAuC,~~EAAG~~;~~AACzD~~;AACA,CAXO;;AAsBP,MAAMC,MAAM,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,QAAb;AAAuBX,EAAAA,IAAvB;~~AAA6BE~~,EAAAA,KAA7B;~~AAAoCH~~,EAAAA,qBAAqB,GAAG;AAA5D,CAAD,KAAqF;AAClG,sBACE,oBAAC,UAAD;AAAY,IAAA,IAAI,EAAEC,IAAlB;AAAwB,IAAA,QAAQ,EAAE,CAAlC;AAAqC,IAAA,qBAAqB,EAAED,qBAA5D;AAAmF,IAAA,WAAW,~~EAAGa~~,CAAD,IAAYA,CAAC,CAACC,cAAF;AAA5G,kBACE,oBAAC,WAAD;AAAa,IAAA,IAAI,~~EAAEb~~,IAAnB;AAAyB,IAAA,~~KAAK~~,~~EAAEE~~,~~KAAhC~~;~~AAAuC~~,IAAA,qBAAqB,~~EAAEH~~;~~AAA9D~~,kBACE,oBAAC,YAAD;AAAc,4BAAd;AAA+B,IAAA,IAAI,EAAEC;AAArC,KACGU,SAAS,CAAC,CAAD,CADZ,EAEGC,QAAQ,CAAC,CAAD,CAFX,CADF,CADF,CADF;AAUD,CAXD;;;AARED,EAAAA,S;AACAC,EAAAA,Q;AACAX,EAAAA,I;~~AACAE~~,EAAAA,K;~~AACAY~~,EAAAA,e;~~AACAf~~,EAAAA,qB;;AAgBF,eAAeU,MAAf","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n &:focus {\n background: ${COLORS.primary_500};\n outline: none;\n }\n &:focus-within {\n box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n`;\n\nconst ImageStyling = css`\n &:hover {\n background-color: ${COLORS.primary_700};\n }\n\n &:active {\n background: ${COLORS.primary_800};\n }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n text-decoration: none;\n\n ${props => (props.useInteractionStyling ? LinkStyling : '')};\n &:focus {\n outline: none;\n }\n &:focus-within {\n border-radius: ${props => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n }\n`;\n\nconst AvatarImage = styled.div<{ size: number; color: string; useInteractionStyling: boolean }>`\n background-color: ${props => props.color};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${props => (props.size ? props.size : 48)}px;\n height: ${props => (props.size ? props.size : 48)}px;\n width: ${props => (props.size ? props.size : 48)}px;\n cursor: pointer;\n\n ${props => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n font-size: ${props => props.size / 2 - 2}px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ${props => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n flex-direction: column;\n align-self: center;\n margin-right: ${props => (props.inMobileMenu ? '6px' : '8px')};\n margin-left: ${props => (props.inMobileMenu ? '0' : 'auto')};\n display: ${props => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n ${props => !props.hidePadding ? 'padding: 6px;' : ''};\n }\n`;\n\ninterface AvatarProps {\n firstName: string;\n lastName: string;\n size: number;\n color: string;\n profileMenuLink: string;\n useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n return (\n <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n <AvatarImage size={size} color={color} useInteractionStyling={useInteractionStyling}>\n <AvatarLetter data-hj-suppress size={size}>\n {firstName[0]}\n {lastName[0]}\n </AvatarLetter>\n </AvatarImage>\n </AvatarLink>\n );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/Avatar.tsx"],"names":["React","styled","css","COLORS","BREAKPOINTS","LinkStyling","primary_500","primary","ImageStyling","primary_700","primary_800","AvatarLink","div","props","useInteractionStyling","size","AvatarImage","$color","AvatarLetter","AvatarContainer","inMobileMenu","hideOnLowWidth","MEDIUM","hidePadding","Avatar","firstName","lastName","color","e","preventDefault","profileMenuLink"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nconst LinkStyling = css`\n &:focus {\n background: ${COLORS.primary_500};\n outline: none;\n }\n &:focus-within {\n box-shadow: 0px 0px 8px ${COLORS.primary}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n`;\n\nconst ImageStyling = css`\n &:hover {\n background-color: ${COLORS.primary_700};\n }\n\n &:active {\n background: ${COLORS.primary_800};\n }\n`;\n\nconst AvatarLink = styled.div<{ size: number; useInteractionStyling: boolean }>`\n text-decoration: none;\n\n ${(props) => (props.useInteractionStyling ? LinkStyling : '')};\n &:focus {\n outline: none;\n }\n &:focus-within {\n border-radius: ${(props) => (props.useInteractionStyling ? `${props.size ? props.size : 48}px` : '')};\n }\n`;\n\nconst AvatarImage = styled.div<{ size: number; $color: string; useInteractionStyling: boolean }>`\n background-color: ${(props) => props.$color};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${(props) => (props.size ? props.size : 48)}px;\n height: ${(props) => (props.size ? props.size : 48)}px;\n width: ${(props) => (props.size ? props.size : 48)}px;\n cursor: pointer;\n\n ${(props) => (props.useInteractionStyling ? ImageStyling : '')};\n`;\n\nconst AvatarLetter = styled.div<{ size: number }>`\n font-size: ${(props) => props.size / 2 - 2}px;\n color: white;\n font-weight: bold;\n text-transform: uppercase;\n display: inline-block;\n line-height: ${(props) => (props.size ? props.size : 48)}px;\n`;\n\nexport const AvatarContainer = styled.div<{ hideOnLowWidth?: boolean; inMobileMenu?: boolean; hidePadding?: boolean }>`\n flex-direction: column;\n align-self: center;\n margin-right: ${(props) => (props.inMobileMenu ? '6px' : '8px')};\n margin-left: ${(props) => (props.inMobileMenu ? '0' : 'auto')};\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'flex')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n ${(props) => (!props.hidePadding ? 'padding: 6px;' : '')};\n }\n`;\n\ninterface AvatarProps {\n firstName: string;\n lastName: string;\n size: number;\n color: string;\n profileMenuLink: string;\n useInteractionStyling?: boolean;\n}\n\nconst Avatar = ({ firstName, lastName, size, color, useInteractionStyling = true }: AvatarProps) => {\n return (\n <AvatarLink size={size} tabIndex={0} useInteractionStyling={useInteractionStyling} onMouseDown={(e: any) => e.preventDefault()}>\n <AvatarImage size={size} $color={color} useInteractionStyling={useInteractionStyling}>\n <AvatarLetter data-hj-suppress size={size}>\n {firstName[0]}\n {lastName[0]}\n </AvatarLetter>\n </AvatarImage>\n </AvatarLink>\n );\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/esm/GlobalNavigationBar/Logo.js CHANGED Viewed

@@ -16,7 +16,7 @@ const StyledLink = styled(Link)`
   svg {
     width: 66px;
     height: 36px;
-    color: ${props => props.color};
+    color: ${props => props.$color};
     ${BREAKPOINTS.MEDIUM} {
       width: 88px;
       height: 48px;
@@ -44,18 +44,18 @@ const LogoContainer = styled.div`
 const Name = styled.span`
   margin-left: 8px;
   padding-left: 8px;
-  border-left: 1px solid ${props => props.color || COLORS.black};
+  border-left: 1px solid ${props => props.$color || COLORS.black};
   letter-spacing: -0.02em;
-  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
+  ${props => props.noSizeChangeOnMobile ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black) : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
   font-weight: 300 !important;
   line-height: 24px !important;
   ${BREAKPOINTS.MEDIUM} {
     margin-left: 12px;
     padding-left: 12px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}
   }
 `;
 const BetaTag = styled.span`
@@ -66,7 +66,7 @@ const BetaTag = styled.span`
   border-left: none;
   border-radius: 2px;
-  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}
+  ${props => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}
 `;
 const Logo = ({
@@ -87,13 +87,13 @@ const Logo = ({
         onClick();
       }
     },
-    color: color
+    $color: color
   }, color === COLORS.white ? /*#__PURE__*/React.createElement(LaerdalWhiteLogo, null) : /*#__PURE__*/React.createElement(LaerdalLogo, null), /*#__PURE__*/React.createElement(Name, {
-    color: color,
+    $color: color,
     noSizeChangeOnMobile: noSizeChangeOnMobile || false
   }, name), showBetaTag && /*#__PURE__*/React.createElement(BetaTag, {
     backgroundColor: betaTagBackgroundColor,
-    color: betaTagColor
+    $color: betaTagColor
   }, "BETA")));
 };

package/dist/esm/GlobalNavigationBar/Logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,~~SAAQC~~,~~IAAR~~,~~QAAmB~~,~~kBAAnB~~;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,~~SAAQC~~,~~WAAR~~,~~EAAqBC~~,~~gBAArB~~,~~QAA4C~~,~~WAA5C~~;AACA,~~SAAQC~~,~~WAAR~~,~~EAAqBC~~,~~MAArB~~,~~EAA6BC~~,~~kBAA7B~~,~~QAAsD~~,~~WAAtD~~;AACA,~~SAAQC~~,~~iBAAR~~,~~EAA2BC~~,~~kBAA3B~~,~~QAAoD~~,~~sBAApD~~;AAEA,MAAMC,UAAU,GAAGR,MAAM,CAACD,IAAD,~~CAA2B~~;~~AACpD~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcU,KAAD,IAAWA,KAAK,CAACC,~~KAAM~~;~~AACpC~~,MAAMP,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA,CAjBA;AAmBA,MAAMC,aAAa,GAAGZ,MAAM,CAACa,GAAI;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjBA;AAmBA,MAAMG,IAAI,GAAGd,MAAM,CAACe,~~IAAwD~~;~~AAC5E~~;AACA;AACA,2BAA4BN,KAAD,IAAWA,KAAK,CAACC,~~KAAN~~,~~IAAeN~~,MAAM,CAACY,KAAM;~~AAClE~~;AACA;AACA,IAAKP,KAAD,~~IAAWA~~,KAAK,CAACQ,oBAAN,~~GACHX~~,iBAAiB,CAACD,kBAAkB,CAACa,OAApB,EAA6BT,KAAK,CAACC,~~KAAN~~,~~IAAeN~~,MAAM,CAACY,~~KAAnD~~,~~CADd~~,~~GAEHT~~,kBAAkB,CAACF,kBAAkB,CAACa,OAApB,EAA6BT,KAAK,CAACC,~~KAAN~~,~~IAAeN~~,MAAM,CAACY,~~KAAnD~~,~~CAA0D~~;~~AACxF~~;AACA;AACA;AACA;AACA,IAAIb,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,MAAOF,KAAD,IAAWH,iBAAiB,CAACD,kBAAkB,CAACa,OAApB,EAA6BT,KAAK,CAACC,~~KAAN~~,~~IAAeN~~,MAAM,CAACY,~~KAAnD~~,~~CAA0D~~;~~AAC5F~~;AACA,~~CAlBA~~;~~AAoBA~~,MAAMG,OAAO,GAAGnB,MAAM,CAACe,~~IAAmD~~;~~AAC1E~~,sBAAuBN,KAAD,IAAWA,KAAK,CAACW,eAAN,IAAyBhB,MAAM,CAACiB,WAAY;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,IAAKZ,KAAD,IAAWF,kBAAkB,CAACF,kBAAkB,CAACiB,aAApB,EAAmCb,KAAK,CAACC,~~KAAN~~,~~IAAeN~~,MAAM,CAACmB,~~KAAzD~~,~~CAAgE~~;~~AACjG~~,CATA;;AAsBA,MAAMC,IAAI,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,WAAR;AAAqBC,EAAAA,OAArB;AAA8BC,EAAAA,EAA9B;~~AAAkClB~~,EAAAA,KAAlC;~~AAAyCO~~,EAAAA,oBAAzC;AAA+DY,EAAAA,sBAA/D;AAAuFC,EAAAA;AAAvF,CAAD,KAAqJ;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,~~EAAEF~~,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,~~EAAGG~~,CAAD,IAAYA,CAAC,CAACC,cAAF,EAF3B;AAGE,IAAA,OAAO,EAAE,MAAM;AACb,~~UAAIL~~,OAAJ,EAAa;AACXA,QAAAA,OAAO;AACR;AACF,KAPH;AAQE,IAAA,~~KAAK~~,~~EAAEjB~~;~~AART~~,KASGA,KAAK,~~KAAKN~~,MAAM,CAACmB,KAAjB,gBAAyB,oBAAC,gBAAD,OAAzB,gBAAgD,oBAAC,WAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,~~KAAK~~,~~EAAEb~~,~~KAAb~~;~~AAAoB~~,IAAA,oBAAoB,~~EAAEO~~,oBAAoB,IAAI;~~AAAlE~~,KACGQ,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,~~EAAEG~~,sBAA1B;AAAkD,IAAA,~~KAAK~~,EAAEC;~~AAAzD~~,YAdJ,CADF,CADF;AAuBD,CAxBD;;;~~AAVEL~~,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;~~AACAlB~~,EAAAA,K;~~AACAO~~,EAAAA,oB;~~AACAY~~,EAAAA,sB;AACAC,EAAAA,Y;;AA6BF,~~eAAeN~~,IAAf","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.color \|\| COLORS.black};\n letter-spacing: -0.02em;\n\n ${(props) => props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)}\n \n font-weight: 300 !important;\n line-height: 24px !important;\n \n ${BREAKPOINTS.MEDIUM} {\n margin-left: 12px;\n padding-left: 12px;\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color \|\| COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n background-color: ${(props) => props.backgroundColor \|\| COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color \|\| COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to \|\| '/'}\n onMouseDown={(e: any) => e.preventDefault()}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile \|\| false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
1	+ {"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentXSStyling","StyledLink","props","$color","MEDIUM","LogoContainer","div","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n text-align: center;\n text-decoration: none;\n display: flex;\n align-items: center;\n &:focus-within {\n outline: none;\n }\n svg {\n width: 66px;\n height: 36px;\n color: ${(props) => props.$color};\n ${BREAKPOINTS.MEDIUM} {\n width: 88px;\n height: 48px;\n }\n }\n`;\n\nconst LogoContainer = styled.div`\n display: flex;\n align-items: center;\n height: 40px;\n margin-right: 16px;\n box-sizing: border-box;\n padding: 24px 0;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 8px;\n margin-bottom: 7px;\n }\n\n &:focus-within {\n box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n margin-left: 8px;\n padding-left: 8px;\n border-left: 1px solid ${(props) => props.$color \|\| COLORS.black};\n letter-spacing: -0.02em;\n\n ${(props) =>\n props.noSizeChangeOnMobile\n ? ComponentMStyling(ComponentTextStyle.Regular, props.$color \|\| COLORS.black)\n : ComponentXSStyling(ComponentTextStyle.Regular, props.$color \|\| COLORS.black)}\n\n font-weight: 300 !important;\n line-height: 24px !important;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-left: 12px;\n padding-left: 12px;\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color \|\| COLORS.black)}\n }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n background-color: ${(props) => props.backgroundColor \|\| COLORS.accent2_500};\n padding: 4px 8px;\n margin-left: 8px;\n margin-top: 2px;\n border-left: none;\n border-radius: 2px;\n\n ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color \|\| COLORS.white)}\n`;\n\ntype LogoProps = {\n name: string;\n showBetaTag?: boolean;\n onClick?: () => void;\n to?: string;\n color?: string;\n noSizeChangeOnMobile?: boolean;\n betaTagBackgroundColor?: string;\n betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n return (\n <LogoContainer>\n <StyledLink\n to={to \|\| '/'}\n onMouseDown={(e: any) => e.preventDefault()}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n $color={color}>\n {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile \|\| false}>\n {name}\n </Name>\n {showBetaTag && (\n <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n BETA\n </BetaTag>\n )}\n </StyledLink>\n </LogoContainer>\n );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/js/Dropdown/BasicDropdown.d.ts CHANGED Viewed

@@ -17,7 +17,6 @@ interface DropdownFilterProps {
     maxHeight?: string;
     placeholder?: string;
     onSelect?: (value: string[]) => void;
-    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
     initalValue?: string;
     disableSorting?: boolean;
     messageOnNoResults?: string;
@@ -28,8 +27,6 @@ interface DropdownFilterProps {
     autofilledMessage?: string;
     size?: Size.Small | Size.Medium;
     margin?: string;
-    dropdownMenuValues?: string[];
-    minWidth?: number;
 }
-declare const 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, }: DropdownFilterProps) => JSX.Element;
+declare const 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, }: DropdownFilterProps) => JSX.Element;
 export default BasicDropdown;