@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.21.full.full

package/dist/test-utils.cjs

@@ -23,6 +23,7 @@ Object.keys(_react2).forEach(function (key) {
   });
 });
 var _styledComponents = require("styled-components");
+var _Navigation = require("./Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,7 +33,12 @@ const AllTheProviders = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
     theme: {},
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Navigation.NavigationProvider, {
+      currentPath: "",
+      isActiveRoute: () => false,
+      navigate: () => {},
+      children: children
+    })
   });
 };
 const customRender = (ui, options) => (0, _react2.render)(ui, _objectSpread({

package/dist/test-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"test-utils.cjs","names":["_react","_interopRequireDefault","require","_react2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_styledComponents","_jsxRuntime","ownKeys","e","r","t","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","push","apply","_objectSpread","arguments","length","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","AllTheProviders","_ref","children","jsx","ThemeProvider","theme","customRender","ui","options","render","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n  return (\r\n    <ThemeProvider theme={{}}>\r\n        {children}\r\n    </ThemeProvider>\r\n  )\r\n}\r\n\r\nconst customRender = (\r\n  ui: ReactElement<any>,\r\n  options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAgBAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAfA,IAAAS,iBAAA,GAAAd,OAAA;AAA+C,IAAAe,WAAA,GAAAf,OAAA;AAAA,SAAAgB,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAjB,MAAA,CAAAC,IAAA,CAAAc,CAAA,OAAAf,MAAA,CAAAkB,qBAAA,QAAAC,CAAA,GAAAnB,MAAA,CAAAkB,qBAAA,CAAAH,CAAA,GAAAC,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAJ,CAAA,WAAAhB,MAAA,CAAAqB,wBAAA,CAAAN,CAAA,EAAAC,CAAA,EAAAN,UAAA,OAAAO,CAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,CAAA,EAAAE,CAAA,YAAAF,CAAA;AAAA,SAAAO,cAAAT,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAS,SAAA,CAAAC,MAAA,EAAAV,CAAA,UAAAC,CAAA,WAAAQ,SAAA,CAAAT,CAAA,IAAAS,SAAA,CAAAT,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAd,MAAA,CAAAiB,CAAA,OAAAf,OAAA,WAAAc,CAAA,QAAAW,gBAAA,CAAAC,OAAA,EAAAb,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAhB,MAAA,CAAA6B,yBAAA,GAAA7B,MAAA,CAAA8B,gBAAA,CAAAf,CAAA,EAAAf,MAAA,CAAA6B,yBAAA,CAAAZ,CAAA,KAAAH,OAAA,CAAAd,MAAA,CAAAiB,CAAA,GAAAf,OAAA,WAAAc,CAAA,IAAAhB,MAAA,CAAAS,cAAA,CAAAM,CAAA,EAAAC,CAAA,EAAAhB,MAAA,CAAAqB,wBAAA,CAAAJ,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAE/C,MAAMgB,eAAe,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAACC;EAAqC,CAAC,GAAAD,IAAA;EAC9D,oBACE,IAAAnB,WAAA,CAAAqB,GAAA,EAACtB,iBAAA,CAAAuB,aAAa;IAACC,KAAK,EAAE,CAAC,CAAE;IAAAH,QAAA,EACpBA;EAAQ,CACE,CAAC;AAEpB,CAAC;AAED,MAAMI,YAAY,GAAGA,CACnBC,EAAqB,EACrBC,OAAwC,KACrC,IAAAC,cAAM,EAACF,EAAE,EAAAd,aAAA;EAAGiB,OAAO,EAAEV;AAAe,GAAKQ,OAAO,CAAC,CAAC;AAAA/B,OAAA,CAAAgC,MAAA,GAAAH,YAAA","ignoreList":[]}
+{"version":3,"file":"test-utils.cjs","names":["_react","_interopRequireDefault","require","_react2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_styledComponents","_Navigation","_jsxRuntime","ownKeys","e","r","t","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","push","apply","_objectSpread","arguments","length","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","AllTheProviders","_ref","children","jsx","ThemeProvider","theme","NavigationProvider","currentPath","isActiveRoute","navigate","customRender","ui","options","render","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\nimport { NavigationProvider } from './Navigation'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n  return (\r\n    <ThemeProvider theme={{}}>\r\n      <NavigationProvider currentPath='' isActiveRoute={() => false} navigate={() => {}}>\r\n        {children}\r\n      </NavigationProvider>\r\n    </ThemeProvider>\r\n  )\r\n}\r\n\r\nconst customRender = (\r\n  ui: ReactElement<any>,\r\n  options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAmBAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAlBA,IAAAS,iBAAA,GAAAd,OAAA;AACA,IAAAe,WAAA,GAAAf,OAAA;AAAiD,IAAAgB,WAAA,GAAAhB,OAAA;AAAA,SAAAiB,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAlB,MAAA,CAAAC,IAAA,CAAAe,CAAA,OAAAhB,MAAA,CAAAmB,qBAAA,QAAAC,CAAA,GAAApB,MAAA,CAAAmB,qBAAA,CAAAH,CAAA,GAAAC,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAJ,CAAA,WAAAjB,MAAA,CAAAsB,wBAAA,CAAAN,CAAA,EAAAC,CAAA,EAAAP,UAAA,OAAAQ,CAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,CAAA,EAAAE,CAAA,YAAAF,CAAA;AAAA,SAAAO,cAAAT,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAS,SAAA,CAAAC,MAAA,EAAAV,CAAA,UAAAC,CAAA,WAAAQ,SAAA,CAAAT,CAAA,IAAAS,SAAA,CAAAT,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAf,MAAA,CAAAkB,CAAA,OAAAhB,OAAA,WAAAe,CAAA,QAAAW,gBAAA,CAAAC,OAAA,EAAAb,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAjB,MAAA,CAAA8B,yBAAA,GAAA9B,MAAA,CAAA+B,gBAAA,CAAAf,CAAA,EAAAhB,MAAA,CAAA8B,yBAAA,CAAAZ,CAAA,KAAAH,OAAA,CAAAf,MAAA,CAAAkB,CAAA,GAAAhB,OAAA,WAAAe,CAAA,IAAAjB,MAAA,CAAAS,cAAA,CAAAO,CAAA,EAAAC,CAAA,EAAAjB,MAAA,CAAAsB,wBAAA,CAAAJ,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEjD,MAAMgB,eAAe,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAACC;EAAqC,CAAC,GAAAD,IAAA;EAC9D,oBACE,IAAAnB,WAAA,CAAAqB,GAAA,EAACvB,iBAAA,CAAAwB,aAAa;IAACC,KAAK,EAAE,CAAC,CAAE;IAAAH,QAAA,eACvB,IAAApB,WAAA,CAAAqB,GAAA,EAACtB,WAAA,CAAAyB,kBAAkB;MAACC,WAAW,EAAC,EAAE;MAACC,aAAa,EAAEA,CAAA,KAAM,KAAM;MAACC,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAE;MAAAP,QAAA,EAC/EA;IAAQ,CACS;EAAC,CACR,CAAC;AAEpB,CAAC;AAED,MAAMQ,YAAY,GAAGA,CACnBC,EAAqB,EACrBC,OAAwC,KACrC,IAAAC,cAAM,EAACF,EAAE,EAAAlB,aAAA;EAAGqB,OAAO,EAAEd;AAAe,GAAKY,OAAO,CAAC,CAAC;AAAApC,OAAA,CAAAqC,MAAA,GAAAH,YAAA","ignoreList":[]}

package/dist/test-utils.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
+import { NavigationProvider } from './Navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AllTheProviders = _ref => {
   let {
@@ -11,7 +12,12 @@ const AllTheProviders = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(ThemeProvider, {
     theme: {},
-    children: children
+    children: /*#__PURE__*/_jsx(NavigationProvider, {
+      currentPath: "",
+      isActiveRoute: () => false,
+      navigate: () => {},
+      children: children
+    })
   });
 };
 const customRender = (ui, options) => render(ui, _objectSpread({

package/dist/test-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-utils.js","names":["React","render","ThemeProvider","jsx","_jsx","AllTheProviders","_ref","children","theme","customRender","ui","options","_objectSpread","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n  return (\r\n    <ThemeProvider theme={{}}>\r\n        {children}\r\n    </ThemeProvider>\r\n  )\r\n}\r\n\r\nconst customRender = (\r\n  ui: ReactElement<any>,\r\n  options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;AAAA,OAAOA,KAAK,MAAsB,OAAO;AACzC,SAAQC,MAAM,QAAsB,wBAAwB;AAC5D,SAAQC,aAAa,QAAO,mBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/C,MAAMC,eAAe,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAACC;EAAqC,CAAC,GAAAD,IAAA;EAC9D,oBACEF,IAAA,CAACF,aAAa;IAACM,KAAK,EAAE,CAAC,CAAE;IAAAD,QAAA,EACpBA;EAAQ,CACE,CAAC;AAEpB,CAAC;AAED,MAAME,YAAY,GAAGA,CACnBC,EAAqB,EACrBC,OAAwC,KACrCV,MAAM,CAACS,EAAE,EAAAE,aAAA;EAAGC,OAAO,EAAER;AAAe,GAAKM,OAAO,CAAC,CAAC;AAEvD,cAAc,wBAAwB;AACtC,SAAQF,YAAY,IAAIR,MAAM","ignoreList":[]}
+{"version":3,"file":"test-utils.js","names":["React","render","ThemeProvider","NavigationProvider","jsx","_jsx","AllTheProviders","_ref","children","theme","currentPath","isActiveRoute","navigate","customRender","ui","options","_objectSpread","wrapper"],"sources":["../src/test-utils.tsx"],"sourcesContent":["import React, {ReactElement} from 'react'\r\nimport {render, RenderOptions} from '@testing-library/react'\r\nimport {ThemeProvider} from 'styled-components'\r\nimport { NavigationProvider } from './Navigation'\r\n\r\nconst AllTheProviders = ({children}: {children: React.ReactNode}) => {\r\n  return (\r\n    <ThemeProvider theme={{}}>\r\n      <NavigationProvider currentPath='' isActiveRoute={() => false} navigate={() => {}}>\r\n        {children}\r\n      </NavigationProvider>\r\n    </ThemeProvider>\r\n  )\r\n}\r\n\r\nconst customRender = (\r\n  ui: ReactElement<any>,\r\n  options?: Omit<RenderOptions, 'wrapper'>,\r\n) => render(ui, {wrapper: AllTheProviders, ...options})\r\n\r\nexport * from '@testing-library/react'\r\nexport {customRender as render}"],"mappings":";;;AAAA,OAAOA,KAAK,MAAsB,OAAO;AACzC,SAAQC,MAAM,QAAsB,wBAAwB;AAC5D,SAAQC,aAAa,QAAO,mBAAmB;AAC/C,SAASC,kBAAkB,QAAQ,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEjD,MAAMC,eAAe,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAACC;EAAqC,CAAC,GAAAD,IAAA;EAC9D,oBACEF,IAAA,CAACH,aAAa;IAACO,KAAK,EAAE,CAAC,CAAE;IAAAD,QAAA,eACvBH,IAAA,CAACF,kBAAkB;MAACO,WAAW,EAAC,EAAE;MAACC,aAAa,EAAEA,CAAA,KAAM,KAAM;MAACC,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAE;MAAAJ,QAAA,EAC/EA;IAAQ,CACS;EAAC,CACR,CAAC;AAEpB,CAAC;AAED,MAAMK,YAAY,GAAGA,CACnBC,EAAqB,EACrBC,OAAwC,KACrCd,MAAM,CAACa,EAAE,EAAAE,aAAA;EAAGC,OAAO,EAAEX;AAAe,GAAKS,OAAO,CAAC,CAAC;AAEvD,cAAc,wBAAwB;AACtC,SAAQF,YAAY,IAAIZ,MAAM","ignoreList":[]}

package/dist/utils/color-tokens.cjs

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSemanticColorTokenName = generateSemanticColorTokenName;
+exports.getColorToken = getColorToken;
+exports.getFirstTokenFullNameOrDefault = getFirstTokenFullNameOrDefault;
+exports.parseSemanticColorTokenName = parseSemanticColorTokenName;
+function generateSemanticColorTokenName(token) {
+  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && '-' + token.variant) ?? ''}${(token.state && '-' + token.state) ?? ''}`;
+}
+function getFirstTokenFullNameOrDefault(tokens, filter) {
+  let firstMatch = tokens.find(token => token.componentType === filter.componentType && token.state === filter.state && !!token.isOnFill === !!filter.isOnFill);
+  if (!firstMatch) {
+    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);
+  }
+  return generateSemanticColorTokenName(firstMatch);
+}
+function getColorToken(isOnFill, componentType, state, variant) {
+  return {
+    name: '',
+    componentType: componentType ?? 'text',
+    variant: state && (!variant || variant == 'default') ? undefined : variant ?? 'default',
+    isOnFill: isOnFill,
+    state: state
+  };
+}
+function parseSemanticColorTokenName(name) {
+  // Remove the prefix
+  const withoutPrefix = name.replace('--life-color-', '');
+
+  // Split the remaining parts
+  const parts = withoutPrefix.split('-');
+
+  // Determine component type
+  let componentType;
+  if (parts[0] === 'bg') {
+    if (parts.includes('fill')) {
+      componentType = 'bg-fill';
+    } else if (parts.includes('surface')) {
+      componentType = 'bg-surface';
+    } else if (parts.includes('overlay')) {
+      componentType = 'bg-overlay';
+    } else {
+      componentType = 'bg-fill'; // Default for bg
+    }
+  } else if (parts[0] === 'text' && parts.includes('link')) {
+    componentType = 'text-link';
+  } else {
+    componentType = parts[0];
+  }
+  const token = {
+    name,
+    componentType
+  };
+
+  // Handle "on-fill" cases
+  if (parts.includes('on') && parts.includes('fill')) {
+    token.isOnFill = true;
+  }
+
+  // Extract state
+  const states = ['hover', 'active', 'disabled'];
+  for (const state of states) {
+    if (parts.includes(state)) {
+      token.state = state;
+      break;
+    }
+  }
+
+  // Extract variant
+  const variants = ['accent1', 'accent2', 'primary', 'critical', 'positive', 'warning', 'samaritan', 'inverse', 'neutral', 'subtle', 'default', 'selected'];
+  for (const variant of variants) {
+    if (parts.includes(variant)) {
+      token.variant = variant;
+      break;
+    }
+  }
+  return token;
+}
+
+// Example usage:
+// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');
+// Result: {
+//   name: '--life-color-bg-fill-accent1-hover',
+//   componentType: 'bg-fill',
+//   state: 'hover',
+//   variant: 'accent1'
+// }
+//# sourceMappingURL=color-tokens.cjs.map

package/dist/utils/color-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-tokens.cjs","names":["generateSemanticColorTokenName","token","componentType","isOnFill","variant","state","getFirstTokenFullNameOrDefault","tokens","filter","firstMatch","find","getColorToken","defaultVariant","name","undefined","parseSemanticColorTokenName","withoutPrefix","replace","parts","split","includes","states","variants"],"sources":["../../src/utils/color-tokens.ts"],"sourcesContent":["export type ColorComponentType = \r\n  | 'bg-fill' \r\n  | 'bg-surface' \r\n  | 'bg-overlay'\r\n  | 'text' \r\n  | 'text-link'\r\n  | 'icon' \r\n  | 'border';\r\n\r\nexport type ColorState = 'default' | 'hover' | 'active' | 'disabled';\r\nexport type ColorVariant = \r\n  | 'accent1' \r\n  | 'accent2' \r\n  | 'primary' \r\n  | 'critical' \r\n  | 'positive' \r\n  | 'warning' \r\n  | 'samaritan' \r\n  | 'inverse' \r\n  | 'neutral' \r\n  | 'subtle'\r\n  | 'default'\r\n  | 'selected' \r\n  | 'high';\r\n\r\nexport interface ColorToken {\r\n  name: string;\r\n  componentType: ColorComponentType;\r\n  state?: ColorState;\r\n  variant?: ColorVariant;\r\n  isOnFill?: boolean;\r\n}\r\n\r\nexport function generateSemanticColorTokenName(token: ColorToken) : string {\r\n  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && ('-' + token.variant)) ?? ''}${(token.state && ('-' + token.state)) ?? ''}`;\r\n}\r\n\r\nexport function getFirstTokenFullNameOrDefault(tokens: ColorToken[], filter: { isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, defaultVariant?: ColorVariant }) : string  {\r\n  let firstMatch = tokens.find(token => \r\n    token.componentType === filter.componentType && \r\n    token.state === filter.state &&\r\n    !!token.isOnFill === !!filter.isOnFill\r\n  );\r\n  \r\n  if (!firstMatch) {\r\n    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);\r\n  }\r\n  return generateSemanticColorTokenName(firstMatch);\r\n}\r\n\r\n\r\nexport function getColorToken(isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, variant?: ColorVariant): ColorToken {\r\n  return {\r\n    name: '',\r\n    componentType: componentType ?? 'text',\r\n    variant: state && (!variant || variant == 'default') ? undefined : (variant ?? 'default'),\r\n    isOnFill: isOnFill,\r\n    state: state\r\n  };\r\n}\r\n\r\nexport function parseSemanticColorTokenName(name: string): ColorToken {\r\n  // Remove the prefix\r\n  const withoutPrefix = name.replace('--life-color-', '');\r\n  \r\n  // Split the remaining parts\r\n  const parts = withoutPrefix.split('-');\r\n  \r\n  // Determine component type\r\n  let componentType: ColorComponentType;\r\n  if (parts[0] === 'bg') {\r\n    if (parts.includes('fill')) {\r\n      componentType = 'bg-fill';\r\n    } else if (parts.includes('surface')) {\r\n      componentType = 'bg-surface';\r\n    } else if (parts.includes('overlay')) {\r\n      componentType = 'bg-overlay';\r\n    } else {\r\n      componentType = 'bg-fill'; // Default for bg\r\n    }\r\n  } else if (parts[0] === 'text' && parts.includes('link')) {\r\n    componentType = 'text-link';\r\n  } else {\r\n    componentType = parts[0] as ColorComponentType;\r\n  }\r\n\r\n  const token: ColorToken = {\r\n    name,\r\n    componentType,\r\n  };\r\n\r\n  // Handle \"on-fill\" cases\r\n  if (parts.includes('on') && parts.includes('fill')) {\r\n    token.isOnFill = true;\r\n  }\r\n\r\n  // Extract state\r\n  const states: ColorState[] = ['hover', 'active', 'disabled'];\r\n  for (const state of states) {\r\n    if (parts.includes(state)) {\r\n      token.state = state;\r\n      break;\r\n    }\r\n  }\r\n\r\n  // Extract variant\r\n  const variants: ColorVariant[] = [\r\n    'accent1',\r\n    'accent2',\r\n    'primary',\r\n    'critical',\r\n    'positive',\r\n    'warning',\r\n    'samaritan',\r\n    'inverse',\r\n    'neutral',\r\n    'subtle',\r\n    'default',\r\n    'selected'\r\n  ];\r\n\r\n  for (const variant of variants) {\r\n    if (parts.includes(variant)) {\r\n      token.variant = variant;\r\n      break;\r\n    }\r\n  }\r\n\r\n  return token;\r\n}\r\n\r\n// Example usage:\r\n// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');\r\n// Result: {\r\n//   name: '--life-color-bg-fill-accent1-hover',\r\n//   componentType: 'bg-fill',\r\n//   state: 'hover',\r\n//   variant: 'accent1'\r\n// } "],"mappings":"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","ignoreList":[]}

package/dist/utils/color-tokens.d.ts

@@ -0,0 +1,19 @@
+export type ColorComponentType = 'bg-fill' | 'bg-surface' | 'bg-overlay' | 'text' | 'text-link' | 'icon' | 'border';
+export type ColorState = 'default' | 'hover' | 'active' | 'disabled';
+export type ColorVariant = 'accent1' | 'accent2' | 'primary' | 'critical' | 'positive' | 'warning' | 'samaritan' | 'inverse' | 'neutral' | 'subtle' | 'default' | 'selected' | 'high';
+export interface ColorToken {
+    name: string;
+    componentType: ColorComponentType;
+    state?: ColorState;
+    variant?: ColorVariant;
+    isOnFill?: boolean;
+}
+export declare function generateSemanticColorTokenName(token: ColorToken): string;
+export declare function getFirstTokenFullNameOrDefault(tokens: ColorToken[], filter: {
+    isOnFill?: boolean;
+    componentType?: ColorComponentType;
+    state?: ColorState;
+    defaultVariant?: ColorVariant;
+}): string;
+export declare function getColorToken(isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, variant?: ColorVariant): ColorToken;
+export declare function parseSemanticColorTokenName(name: string): ColorToken;

package/dist/utils/color-tokens.js

@@ -0,0 +1,82 @@
+export function generateSemanticColorTokenName(token) {
+  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && '-' + token.variant) ?? ''}${(token.state && '-' + token.state) ?? ''}`;
+}
+export function getFirstTokenFullNameOrDefault(tokens, filter) {
+  let firstMatch = tokens.find(token => token.componentType === filter.componentType && token.state === filter.state && !!token.isOnFill === !!filter.isOnFill);
+  if (!firstMatch) {
+    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);
+  }
+  return generateSemanticColorTokenName(firstMatch);
+}
+export function getColorToken(isOnFill, componentType, state, variant) {
+  return {
+    name: '',
+    componentType: componentType ?? 'text',
+    variant: state && (!variant || variant == 'default') ? undefined : variant ?? 'default',
+    isOnFill: isOnFill,
+    state: state
+  };
+}
+export function parseSemanticColorTokenName(name) {
+  // Remove the prefix
+  const withoutPrefix = name.replace('--life-color-', '');
+
+  // Split the remaining parts
+  const parts = withoutPrefix.split('-');
+
+  // Determine component type
+  let componentType;
+  if (parts[0] === 'bg') {
+    if (parts.includes('fill')) {
+      componentType = 'bg-fill';
+    } else if (parts.includes('surface')) {
+      componentType = 'bg-surface';
+    } else if (parts.includes('overlay')) {
+      componentType = 'bg-overlay';
+    } else {
+      componentType = 'bg-fill'; // Default for bg
+    }
+  } else if (parts[0] === 'text' && parts.includes('link')) {
+    componentType = 'text-link';
+  } else {
+    componentType = parts[0];
+  }
+  const token = {
+    name,
+    componentType
+  };
+
+  // Handle "on-fill" cases
+  if (parts.includes('on') && parts.includes('fill')) {
+    token.isOnFill = true;
+  }
+
+  // Extract state
+  const states = ['hover', 'active', 'disabled'];
+  for (const state of states) {
+    if (parts.includes(state)) {
+      token.state = state;
+      break;
+    }
+  }
+
+  // Extract variant
+  const variants = ['accent1', 'accent2', 'primary', 'critical', 'positive', 'warning', 'samaritan', 'inverse', 'neutral', 'subtle', 'default', 'selected'];
+  for (const variant of variants) {
+    if (parts.includes(variant)) {
+      token.variant = variant;
+      break;
+    }
+  }
+  return token;
+}
+
+// Example usage:
+// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');
+// Result: {
+//   name: '--life-color-bg-fill-accent1-hover',
+//   componentType: 'bg-fill',
+//   state: 'hover',
+//   variant: 'accent1'
+// }
+//# sourceMappingURL=color-tokens.js.map

package/dist/utils/color-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-tokens.js","names":["generateSemanticColorTokenName","token","componentType","isOnFill","variant","state","getFirstTokenFullNameOrDefault","tokens","filter","firstMatch","find","getColorToken","defaultVariant","name","undefined","parseSemanticColorTokenName","withoutPrefix","replace","parts","split","includes","states","variants"],"sources":["../../src/utils/color-tokens.ts"],"sourcesContent":["export type ColorComponentType = \r\n  | 'bg-fill' \r\n  | 'bg-surface' \r\n  | 'bg-overlay'\r\n  | 'text' \r\n  | 'text-link'\r\n  | 'icon' \r\n  | 'border';\r\n\r\nexport type ColorState = 'default' | 'hover' | 'active' | 'disabled';\r\nexport type ColorVariant = \r\n  | 'accent1' \r\n  | 'accent2' \r\n  | 'primary' \r\n  | 'critical' \r\n  | 'positive' \r\n  | 'warning' \r\n  | 'samaritan' \r\n  | 'inverse' \r\n  | 'neutral' \r\n  | 'subtle'\r\n  | 'default'\r\n  | 'selected' \r\n  | 'high';\r\n\r\nexport interface ColorToken {\r\n  name: string;\r\n  componentType: ColorComponentType;\r\n  state?: ColorState;\r\n  variant?: ColorVariant;\r\n  isOnFill?: boolean;\r\n}\r\n\r\nexport function generateSemanticColorTokenName(token: ColorToken) : string {\r\n  return `--life-color-${token.componentType}${(token.isOnFill && '-on-fill') ?? ''}${(token.variant && ('-' + token.variant)) ?? ''}${(token.state && ('-' + token.state)) ?? ''}`;\r\n}\r\n\r\nexport function getFirstTokenFullNameOrDefault(tokens: ColorToken[], filter: { isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, defaultVariant?: ColorVariant }) : string  {\r\n  let firstMatch = tokens.find(token => \r\n    token.componentType === filter.componentType && \r\n    token.state === filter.state &&\r\n    !!token.isOnFill === !!filter.isOnFill\r\n  );\r\n  \r\n  if (!firstMatch) {\r\n    firstMatch = getColorToken(filter.isOnFill, filter.componentType, filter.state, filter.defaultVariant);\r\n  }\r\n  return generateSemanticColorTokenName(firstMatch);\r\n}\r\n\r\n\r\nexport function getColorToken(isOnFill?: boolean, componentType?: ColorComponentType, state?: ColorState, variant?: ColorVariant): ColorToken {\r\n  return {\r\n    name: '',\r\n    componentType: componentType ?? 'text',\r\n    variant: state && (!variant || variant == 'default') ? undefined : (variant ?? 'default'),\r\n    isOnFill: isOnFill,\r\n    state: state\r\n  };\r\n}\r\n\r\nexport function parseSemanticColorTokenName(name: string): ColorToken {\r\n  // Remove the prefix\r\n  const withoutPrefix = name.replace('--life-color-', '');\r\n  \r\n  // Split the remaining parts\r\n  const parts = withoutPrefix.split('-');\r\n  \r\n  // Determine component type\r\n  let componentType: ColorComponentType;\r\n  if (parts[0] === 'bg') {\r\n    if (parts.includes('fill')) {\r\n      componentType = 'bg-fill';\r\n    } else if (parts.includes('surface')) {\r\n      componentType = 'bg-surface';\r\n    } else if (parts.includes('overlay')) {\r\n      componentType = 'bg-overlay';\r\n    } else {\r\n      componentType = 'bg-fill'; // Default for bg\r\n    }\r\n  } else if (parts[0] === 'text' && parts.includes('link')) {\r\n    componentType = 'text-link';\r\n  } else {\r\n    componentType = parts[0] as ColorComponentType;\r\n  }\r\n\r\n  const token: ColorToken = {\r\n    name,\r\n    componentType,\r\n  };\r\n\r\n  // Handle \"on-fill\" cases\r\n  if (parts.includes('on') && parts.includes('fill')) {\r\n    token.isOnFill = true;\r\n  }\r\n\r\n  // Extract state\r\n  const states: ColorState[] = ['hover', 'active', 'disabled'];\r\n  for (const state of states) {\r\n    if (parts.includes(state)) {\r\n      token.state = state;\r\n      break;\r\n    }\r\n  }\r\n\r\n  // Extract variant\r\n  const variants: ColorVariant[] = [\r\n    'accent1',\r\n    'accent2',\r\n    'primary',\r\n    'critical',\r\n    'positive',\r\n    'warning',\r\n    'samaritan',\r\n    'inverse',\r\n    'neutral',\r\n    'subtle',\r\n    'default',\r\n    'selected'\r\n  ];\r\n\r\n  for (const variant of variants) {\r\n    if (parts.includes(variant)) {\r\n      token.variant = variant;\r\n      break;\r\n    }\r\n  }\r\n\r\n  return token;\r\n}\r\n\r\n// Example usage:\r\n// const token = parseColorTokenName('--life-color-bg-fill-accent1-hover');\r\n// Result: {\r\n//   name: '--life-color-bg-fill-accent1-hover',\r\n//   componentType: 'bg-fill',\r\n//   state: 'hover',\r\n//   variant: 'accent1'\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.2.full",
+    "version":  "6.0.0-dev.21.full.full",
     "private":  false,
     "author":  "Erik Martirosyan \u003cerik.martirosyan@laerdal.com\u003e",
     "contributors":  [
@@ -32,8 +32,8 @@
     "scripts":  {
                     "bump":  "yarn version --patch",
                     "build":  "yarn build:babel:esm \u0026\u0026 yarn build:babel:cjs \u0026\u0026 tsc --emitDeclarationOnly --declaration --declarationDir dist \u0026\u0026 node scripts/copyTS.cjs",
-                    "build:babel:esm":  "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js",
-                    "build:babel:cjs":  "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs",
+                    "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/",
@@ -66,13 +66,14 @@
                               }
               },
     "dependencies":  {
+                         "@laerdal-medical/life-design-tokens":  "^1.2.0-beta",
                          "@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.2.1",
+                         "react-datepicker":  "^8.4.0",
                          "react-dom":  "^19.0.0",
                          "react-inlinesvg":  "^4.2.0",
                          "react-modal":  "^3.16.0",
@@ -85,6 +86,7 @@
     "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",
@@ -118,6 +120,7 @@
                             "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",
@@ -128,7 +131,11 @@
                             "react-share":  "^5.1.0",
                             "regenerator-runtime":  "^0.13.9",
                             "storybook":  "^8.1.3",
-                            "ts-jest":  "^29.2.5"
+                            "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",