@laerdal/life-react-components 6.0.0-dev.27 → 6.0.0-dev.30

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "6.0.0-dev.27",
+  "version": "6.0.0-dev.30",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],
@@ -74,9 +74,9 @@
     "react-dom": "^19.0.0",
     "react-inlinesvg": "^4.2.0",
     "react-modal": "^3.16.0",
-    "react-quill": "^2.0.0",
-    "react-resize-detector": "^11.0.1",
-    "rooks": "^7.1.1",
+    "react-quill-new": "^3.6.0",
+    "react-resize-detector": "^12.0.0",
+    "rooks": "8.4.0",
     "styled-components": "^6.1.13",
     "typescript": "^5.1.2"
   },