@laerdal/life-react-components 6.0.0-dev.8.full → 6.0.1

package/dist/InputFields/styling.cjs

@@ -51,10 +51,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
 
   border: 0;
   -webkit-appearance: none;
-  ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
-      -moz-box-shadow: none;
-      box-shadow: none;
-      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
+  ${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
   componentType: 'border',
   defaultVariant: 'default'
 }, props.theme)};

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","exports","styled","div","props","$readOnly","$disabled","$margin","TooltipTrigger","readOnlyState","css","COLORS","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","Warning","ComponentXXSStyling","Regular","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n      `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/styling.d.ts

@@ -9,7 +9,6 @@ export declare const activeErrorMessageState: import("styled-components").RuleSe
 declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     $activeErrorMessage?: boolean;
     $active?: boolean;
-    $withoutBorder?: boolean;
     $size?: string;
     $suppressReadOnlyStyles?: boolean;
     $extraRightPadding?: number;

package/dist/InputFields/styling.js

@@ -43,10 +43,7 @@ const InputFieldStyling = styled.input`
 
   border: 0;
   -webkit-appearance: none;
-  ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
-      -moz-box-shadow: none;
-      box-shadow: none;
-      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
+  ${props => `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({
   componentType: 'border',
   defaultVariant: 'default'
 }, props.theme)};

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","Warning","Regular","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","generateToken","componentType","state","theme","defaultVariant","activeErrorMessageState","InputFieldStyling","input","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","Warning","Regular","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'disabled'}, props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default'}, props.theme)} !important;\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant:'subtle'}, props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n      `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.generateToken({componentType: 'border', defaultVariant: 'default'}, props.theme)};`}\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant: 'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text'}, props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType: 'border', state: 'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)} !important;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'critical'}, props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'positive'}, props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'hover'}, props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.generateToken({componentType: 'border', state: 'active'}, props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant: 'critical'}, props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'positive'}, theme);\r\n  else if (type === States.Default)\r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, theme);\r\n  else \r\n    return COLORS.generateToken({componentType: 'text', defaultVariant: 'critical'}, theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n`;\r\n\r\nexport { InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LinearProgress/__tests__/LinearProgress.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import LinearProgress, {Bar, Dot, Line, LinearProgressType, LineFill} from '../LinearProgress';
+
+
+
+describe('LinearProgress', () => {
+  it('should render dots', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Dots} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Dot}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Dot}.active`)).toHaveLength(6)
+  });
+
+  it('should render bars', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Bars} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Bar}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Bar}.active`)).toHaveLength(6)
+  });
+
+  it('should render line', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Line} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Line}`)).toHaveLength(1)
+    expect(wrapper.container.querySelectorAll(`${LineFill}`).item(0).getAttribute('style')).toEqual(`width: ${6 / 11 * 100}%;`)
+  });
+});

package/dist/List/__tests__/ListRow.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import {ListRow} from '../index';
+import {Size} from '../../types';
+import {SystemIcons} from '../../icons';
+
+describe('<ListRow />', () => {
+  it('Renders', async () => {
+    const {getByText} = render(
+      <ListRow
+        icon={<SystemIcons.Institute/>}
+        mainText={'Laerdal Medical AS'}
+        size={Size.Small}
+        disabled={false}/>,
+    );
+    expect(getByText('Laerdal Medical AS')).toBeDefined();
+  });
+});

package/dist/LoadingPage/__tests__/GlobalLoadingPage.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { GlobalLoadingPage } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+
+
+
+describe('<GlobalLoadingPage />', () => {
+  it('Renders GlobalLoadingPage', async () => {
+    const optionalMessage = 'This is the optional message';
+    const { queryByText, getByTestId } = render(<GlobalLoadingPage optionalMessage={optionalMessage} />);
+    expect(queryByText(optionalMessage)).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('background-color', COLORS.primary_20);
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('height', '100%');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toBeDefined();
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('position', 'absolute');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('align-items', 'center');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('bottom', '36px');
+  });
+});

package/dist/MiniProductCard/MiniProductCard.cjs

@@ -12,6 +12,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _icons = require("../icons");
 var _HyperLink = require("../HyperLink/HyperLink");
+var _Navigation = require("../Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -80,11 +81,23 @@ const RightIconWrapper = _styledComponents.default.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
+  const {
+    navigate
+  } = (0, _Navigation.useNavigation)();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -109,7 +122,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _propTypes.default.string,
-  target: _propTypes.default.string
+  target: _propTypes.default.string,
+  external: _propTypes.default.bool
 };
 var _default = exports.default = MiniProductCard;
 //# sourceMappingURL=MiniProductCard.cjs.map

package/dist/MiniProductCard/MiniProductCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","useTheme","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAGA,IAAAI,UAAA,GAAAJ,OAAA;AAAoD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAOpD,MAAMkC,WAAW,GAAG,IAAAC,yBAAM,EAACC,KAAK,iBAAI,IAAAtC,WAAA,CAAAuC,GAAA,EAACxC,UAAA,CAAAyC,UAAU,EAAAX,aAAA,KAAKS,KAAK,CAAG,CAAC,CAAC;AAC9D;AACA;AACA;AACA,WAAWA,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACzD;AACA;AACA,IAAIC,mBAAW,CAACC,MAAM;AACtB;AACA;AACA,CAAC;AAED,MAAMC,YAAY,GAAGT,yBAAM,CAACU,GAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACrE;AACA;AACA,cAAcL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAClE;AACA;AACA;AACA,kBAAkBL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACtE;AACA;AACA,cAAcL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAClE;AACA;AACA,CAAC;AAED,MAAMK,YAAY,GAAGX,yBAAM,CAACY,GAAG;AAC/B;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGb,yBAAM,CAACc,EAAE;AAC7B,IAAIb,KAAK,IAAI,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEb,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjG;AACA;AACA,CAAC;AAED,MAAMY,WAAW,GAAGlB,yBAAM,CAACmB,IAAI;AAC/B,IAAIlB,KAAK,IAAI,IAAAmB,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEb,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjG;AACA,CAAC;AAED,MAAMe,mBAAmB,GAAGrB,yBAAM,CAACU,GAAG;AACtC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMY,gBAAgB,GAAGtB,yBAAM,CAACU,GAAG;AACnC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMa,eAA8D,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,GAAG;IAAEC,OAAO;IAAEC,MAAM,GAAG;EAA8B,CAAC,GAAAH,IAAA;EAC9H,MAAMlB,KAAK,GAAG,IAAAsB,0BAAQ,EAAC,CAAC;EACxB,oBACE,IAAAjE,WAAA,CAAAuC,GAAA,EAACH,WAAW;IAAC8B,QAAQ,EAAC,WAAW;IAACC,IAAI,EAAEL,GAAG,IAAI,EAAG;IAACE,MAAM,EAAEA,MAAO;IAAAI,QAAA,eAChE,IAAApE,WAAA,CAAAqE,IAAA,EAACvB,YAAY;MAAAsB,QAAA,GACVL,OAAO,CAACO,KAAK,iBAAI,IAAAtE,WAAA,CAAAuC,GAAA,EAACS,YAAY;QAACuB,GAAG,EAAER,OAAO,CAACO;MAAM,CAAE,CAAC,eACtD,IAAAtE,WAAA,CAAAqE,IAAA,EAACX,mBAAmB;QAAAU,QAAA,gBAClB,IAAApE,WAAA,CAAAuC,GAAA,EAACW,WAAW;UAAAkB,QAAA,EAAEL,OAAO,CAACS;QAAI,CAAc,CAAC,eACzC,IAAAxE,WAAA,CAAAuC,GAAA,EAACgB,WAAW;UAAAa,QAAA,EAAEL,OAAO,CAACU;QAAI,CAAc,CAAC;MAAA,CACtB,CAAC,eACtB,IAAAzE,WAAA,CAAAuC,GAAA,EAACoB,gBAAgB;QAAAS,QAAA,eACf,IAAApE,WAAA,CAAAuC,GAAA,EAACzC,MAAA,CAAA4E,WAAW,CAACC,YAAY;UAACC,KAAK,EAAEnC,cAAM,CAACC,QAAQ,CAAC,SAAS,EAAEC,KAAK,CAAE;UAACkC,SAAS,EAAE,uBAAwB;UAACC,IAAI,EAAE;QAAO,CAAE;MAAC,CACxG,CAAC;IAAA,CACP;EAAC,CACJ,CAAC;AAElB,CAAC;AAAClB,eAAA,CAAAmB,SAAA;EAtFAjB,GAAG,EAAAkB,UAAA,CAAAzE,OAAA,CAAA0E,MAAA;EACHjB,MAAM,EAAAgB,UAAA,CAAAzE,OAAA,CAAA0E;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAuFOqD,eAAe","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_Navigation","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","useTheme","navigate","useNavigation","onClick","preventDefault","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","bool","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -4,6 +4,7 @@ export type MiniProductCardProps = {
     product: Product;
     url?: string;
     target?: string;
+    external?: boolean;
 };
 declare const MiniProductCard: React.FunctionComponent<MiniProductCardProps>;
 export default MiniProductCard;

package/dist/MiniProductCard/MiniProductCard.js

@@ -8,6 +8,7 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { SystemIcons } from '../icons';
 import { ComponentMStyling, ComponentSStyling } from '../styles';
 import { StyledLink } from '../HyperLink/HyperLink';
+import { useNavigation } from '../Navigation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ProductLink = styled(props => /*#__PURE__*/_jsx(StyledLink, _objectSpread({}, props)))`
   display: flex;
@@ -72,11 +73,23 @@ const RightIconWrapper = styled.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = useTheme();
+  const {
+    navigate
+  } = useNavigation();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/_jsx(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -101,7 +114,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _pt.string,
-  target: _pt.string
+  target: _pt.string,
+  external: _pt.bool
 };
 export default MiniProductCard;
 //# sourceMappingURL=MiniProductCard.js.map

package/dist/MiniProductCard/MiniProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","useNavigation","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","navigate","onClick","e","preventDefault","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string","bool"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}