@laerdal/life-react-components 6.0.0-dev.27.full → 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,154 +1,150 @@
 {
-    "name":  "@laerdal/life-react-components",
-    "version":  "6.0.0-dev.27.full",
-    "private":  false,
-    "author":  "Erik Martirosyan \u003cerik.martirosyan@laerdal.com\u003e",
-    "contributors":  [
-
-                     ],
-    "description":  "Laerdal LIFE component library for React.",
-    "keywords":  [
-
-                 ],
-    "license":  "UNLICENSED",
-    "repository":  {
-                       "type":  "git",
-                       "url":  "https://github.com/Laerdal-Medical/dcs-life-react-js"
-                   },
-    "main":  "dist/index.cjs",
-    "module":  "dist/index.js",
-    "types":  "dist/index.d.ts",
-    "exports":  {
-                    ".":  {
-                              "require":  "./dist/index.cjs",
-                              "import":  "./dist/index.js",
-                              "types":  "./dist/index.d.ts"
-                          }
-                },
-    "sideEffects":  false,
-    "files":  [
-                  "dist"
-              ],
-    "scripts":  {
-                    "bump":  "yarn version --patch",
-                    "build":  "yarn extract-design-tokens \u0026\u0026 yarn build:babel:esm \u0026\u0026 yarn build:babel:cjs \u0026\u0026 tsc --emitDeclarationOnly --declaration --declarationDir dist \u0026\u0026 node scripts/copyTS.cjs",
-                    "extract-design-tokens":  "node scripts/extractDesignTokens.js",
-                    "build:babel:esm":  "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js --copy-files",
-                    "build:babel:cjs":  "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs --copy-files",
-                    "clean":  "rimraf dist",
-                    "develop":  "yarn build:babel:esm --skip-initial-build --watch --verbose",
-                    "test":  "jest src/",
-                    "test:coverage":  "jest --collectCoverage src/",
-                    "test-watch":  "jest --watch",
-                    "storybook":  "storybook dev -p 6006",
-                    "build-storybook":  "storybook build"
-                },
-    "eslintConfig":  {
-                         "extends":  [
-                                         "react-app",
-                                         "plugin:storybook/recommended"
-                                     ]
-                     },
-    "browserslist":  {
-                         "production":  [
-                                            "\u003e0.2%",
-                                            "not dead",
-                                            "not op_mini all"
-                                        ],
-                         "development":  [
-                                             "last 1 chrome version",
-                                             "last 1 firefox version",
-                                             "last 1 safari version"
-                                         ]
-                     },
-    "omlet":  {
-                  "exports":  {
-                                  ".":  "src/index.ts"
-                              }
-              },
-    "dependencies":  {
-                         "@babel/plugin-transform-typescript":  "^7.28.0",
-                         "@laerdal/figma-svg":  "^5.2.2",
-                         "@types/node":  "^18.0.6",
-                         "animated-scroll-to":  "^2.3.0",
-                         "dayjs":  "^1.11.5",
-                         "nanoid":  "3.3.11",
-                         "react":  "^19.0.0",
-                         "react-datepicker":  "^8.4.0",
-                         "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",
-                         "styled-components":  "^6.1.13",
-                         "typescript":  "^5.1.2"
-                     },
-    "devDependencies":  {
-                            "@babel/cli":  "^7.22.0",
-                            "@babel/plugin-proposal-class-properties":  "^7.18.6",
-                            "@babel/plugin-proposal-decorators":  "^7.27.1",
-                            "@babel/plugin-proposal-export-default-from":  "^7.22.0",
-                            "@babel/plugin-proposal-numeric-separator":  "^7.18.6",
-                            "@babel/plugin-proposal-object-rest-spread":  "^7.18.6",
-                            "@babel/plugin-transform-runtime":  "^7.22.0",
-                            "@babel/preset-env":  "^7.22.0",
-                            "@babel/preset-react":  "^7.22.0",
-                            "@babel/preset-typescript":  "^7.27.0",
-                            "@babel/runtime":  "^7.22.0",
-                            "@chromatic-com/storybook":  "1.4.0",
-                            "@laerdal-medical/life-design-tokens":  "^1.5.1-beta",
-                            "@laerdal/life-react-components":  "5.1.0",
-                            "@laerdal/navigation":  "^3.2.0",
-                            "@storybook/addon-essentials":  "^8.1.3",
-                            "@storybook/addon-interactions":  "^8.1.3",
-                            "@storybook/addon-links":  "^8.1.3",
-                            "@storybook/addon-onboarding":  "^8.1.3",
-                            "@storybook/addon-webpack5-compiler-swc":  "1.0.2",
-                            "@storybook/addons":  "^7.6.17",
-                            "@storybook/blocks":  "^8.1.3",
-                            "@storybook/react":  "^8.1.3",
-                            "@storybook/react-webpack5":  "^8.1.3",
-                            "@storybook/test":  "^8.1.3",
-                            "@testing-library/dom":  "^10.4.0",
-                            "@testing-library/jest-dom":  "^6.5.0",
-                            "@testing-library/react":  "^16.0.1",
-                            "@testing-library/user-event":  "^14.5.2",
-                            "@types/jest":  "^29.5.12",
-                            "@types/react":  "^19.1.2",
-                            "@types/react-datepicker":  "^4.4.2",
-                            "@types/react-dom":  "^18.3.0",
-                            "@types/react-modal":  "^3.13.1",
-                            "babel-plugin-inline-react-svg":  "^2.0.1",
-                            "babel-plugin-typescript-to-proptypes":  "^2.0.0",
-                            "concurrently":  "^5.2.0",
-                            "cross-env":  "^7.0.3",
-                            "css-loader":  "^7.1.2",
-                            "eslint-plugin-storybook":  "^0.8.0",
-                            "history":  "^5.3.0",
-                            "jest":  "^29.7.0",
-                            "jest-environment-jsdom":  "^29.7.0",
-                            "jest-styled-components":  "^7.2.0",
-                            "jest-svg-transformer":  "^1.0.0",
-                            "react-router":  "^6.0.0",
-                            "react-share":  "^5.1.0",
-                            "regenerator-runtime":  "^0.13.9",
-                            "storybook":  "^8.1.3",
-                            "storybook-addon-themes":  "^6.1.0",
-                            "style-loader":  "^4.0.0",
-                            "ts-jest":  "^29.2.5",
-                            "webpack":  "^5.99.9",
-                            "webpack-cli":  "^6.0.1",
-                            "webpack-dev-server":  "^5.2.1"
-                        },
-    "peerDependencies":  {
-                             "@babel/core":  "^7.0.0",
-                             "react":  "^19",
-                             "react-dom":  "^19"
-                         },
-    "resolutions":  {
-                        "nwsapi":  "2.2.9",
-                        "date-fns":  "2.24.0",
-                        "@types/react":  "19.1.2"
-                    }
+  "name": "@laerdal/life-react-components",
+  "version": "6.0.0-dev.30",
+  "private": false,
+  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
+  "contributors": [],
+  "description": "Laerdal LIFE component library for React.",
+  "keywords": [],
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Laerdal-Medical/dcs-life-react-js"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "bump": "yarn version --patch",
+    "build": "yarn extract-design-tokens && yarn build:babel:esm && yarn build:babel:cjs && tsc --emitDeclarationOnly --declaration --declarationDir dist && node scripts/copyTS.cjs",
+    "extract-design-tokens": "node scripts/extractDesignTokens.js",
+    "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js --copy-files",
+    "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs --copy-files",
+    "clean": "rimraf dist",
+    "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
+    "test": "jest src/",
+    "test:coverage": "jest --collectCoverage src/",
+    "test-watch": "jest --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "omlet": {
+    "exports": {
+      ".": "src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@babel/plugin-transform-typescript": "^7.28.0",
+    "@laerdal/figma-svg": "^5.2.2",
+    "@types/node": "^18.0.6",
+    "animated-scroll-to": "^2.3.0",
+    "dayjs": "^1.11.5",
+    "nanoid": "3.3.11",
+    "react": "^19.0.0",
+    "react-datepicker": "^8.4.0",
+    "react-dom": "^19.0.0",
+    "react-inlinesvg": "^4.2.0",
+    "react-modal": "^3.16.0",
+    "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"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-proposal-export-default-from": "^7.22.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/preset-typescript": "^7.27.0",
+    "@babel/runtime": "^7.22.0",
+    "@chromatic-com/storybook": "1.4.0",
+    "@laerdal-medical/life-design-tokens": "^1.5.1-beta",
+    "@laerdal/life-react-components": "5.1.0",
+    "@laerdal/navigation": "^3.2.0",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-interactions": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-onboarding": "^8.1.3",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.2",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/react": "^8.1.3",
+    "@storybook/react-webpack5": "^8.1.3",
+    "@storybook/test": "^8.1.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^19.1.2",
+    "@types/react-datepicker": "^4.4.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-modal": "^3.13.1",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-typescript-to-proptypes": "^2.0.0",
+    "concurrently": "^5.2.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "history": "^5.3.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
+    "jest-svg-transformer": "^1.0.0",
+    "react-router": "^6.0.0",
+    "react-share": "^5.1.0",
+    "regenerator-runtime": "^0.13.9",
+    "storybook": "^8.1.3",
+    "storybook-addon-themes": "^6.1.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.0.0",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "resolutions": {
+    "nwsapi": "2.2.9",
+    "date-fns": "2.24.0",
+    "@types/react": "19.1.2"
+  }
 }