@beinformed/ui 1.59.21 → 1.59.22

package/lib/react-theme/ThemeProvider.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _styledComponents = require("styled-components");
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ */
+const ThemeProvider = _ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  const storedTheme = (0, _reactRedux.useSelector)(_ref2 => {
+    let {
+      preferences
+    } = _ref2;
+    return preferences.theme;
+  });
+  const finalTheme = (0, _createTheme.default)(storedTheme, theme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
+    theme: finalTheme,
+    children: children
+  });
+};
+ThemeProvider.displayName = "BI.ThemeProvider";
+var _default = exports.default = ThemeProvider;
+//# sourceMappingURL=ThemeProvider.cjs.map

package/lib/react-theme/ThemeProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.cjs","names":["_reactRedux","require","_styledComponents","_createTheme","_interopRequireDefault","_jsxRuntime","ThemeProvider","_ref","theme","children","storedTheme","useSelector","_ref2","preferences","finalTheme","createTheme","jsx","displayName","_default","exports","default"],"sources":["../../src/react-theme/ThemeProvider.js"],"sourcesContent":["// @flow\nimport { useSelector } from \"react-redux\";\nimport { ThemeProvider as SCThemeProvider } from \"styled-components\";\n\nimport createTheme from \"./createTheme\";\n\nimport type { Node } from \"react\";\nimport type { Theme } from \"./types\";\n\nexport type Props = {\n  +theme?: Theme | Array<Theme>,\n  +children: Node,\n};\n\n/**\n */\nconst ThemeProvider = ({ theme, children }: Props): Node => {\n  const storedTheme = useSelector(({ preferences }) => preferences.theme);\n  const finalTheme = createTheme(storedTheme, theme);\n\n  return <SCThemeProvider theme={finalTheme}>{children}</SCThemeProvider>;\n};\nThemeProvider.displayName = \"BI.ThemeProvider\";\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAwC,IAAAI,WAAA,GAAAJ,OAAA;AAUxC;AACA;AACA,MAAMK,aAAa,GAAGC,IAAA,IAAsC;EAAA,IAArC;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAAF,IAAA;EAC/C,MAAMG,WAAW,GAAG,IAAAC,uBAAW,EAACC,KAAA;IAAA,IAAC;MAAEC;IAAY,CAAC,GAAAD,KAAA;IAAA,OAAKC,WAAW,CAACL,KAAK;EAAA,EAAC;EACvE,MAAMM,UAAU,GAAG,IAAAC,oBAAW,EAACL,WAAW,EAAEF,KAAK,CAAC;EAElD,oBAAO,IAAAH,WAAA,CAAAW,GAAA,EAACd,iBAAA,CAAAI,aAAe;IAACE,KAAK,EAAEM,UAAW;IAAAL,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AACzE,CAAC;AACDH,aAAa,CAACW,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEhCd,aAAa","ignoreList":[]}

package/lib/react-theme/ThemeProvider.d.cts

@@ -0,0 +1,8 @@
+type Props = {};
+export default ThemeProvider;
+/**
+ */
+declare function ThemeProvider({ theme, children }: Props): Node;
+declare namespace ThemeProvider {
+    let displayName: string;
+}

package/lib/react-theme/createTheme.cjs

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+var _flattenDeep = _interopRequireDefault(require("lodash/flattenDeep"));
+var _objects = require("../utils/helpers/objects");
+var _Settings = require("../constants/Settings");
+const replacePlaceholders = inputTheme => {
+  var _context;
+  const possibleKeys = (0, _map.default)(_context = (0, _keys.default)(inputTheme)).call(_context, key => `\\b${key}\\b`).join("|");
+  const re = new RegExp(`\\$(${possibleKeys})`, "g");
+  (0, _entries.default)(inputTheme).forEach(_ref => {
+    let [key, value] = _ref;
+    if (key !== "settings" && typeof value === "string") {
+      inputTheme[key] = value.replace(re,
+      // $FlowIssue[incompatible-call]
+      (match, capture) => inputTheme[capture]);
+    }
+  });
+  return inputTheme;
+};
+const generateTheme = function (storedTheme) {
+  const storedSettings = storedTheme?.settings ?? {};
+  let generatedTheme = {
+    settings: {}
+  };
+  for (var _len = arguments.length, themeElements = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    themeElements[_key - 1] = arguments[_key];
+  }
+  for (const element of themeElements) {
+    if (typeof element === "function") {
+      generatedTheme = element(replacePlaceholders(generatedTheme));
+    } else if ((0, _objects.isPlainObject)(element)) {
+      const generatedSettings = generatedTheme.settings;
+      // $FlowFixMe[cannot-spread-indexer]
+      generatedTheme = {
+        ...generatedTheme,
+        ...element,
+        ...storedTheme
+      };
+      if ("settings" in element) {
+        generatedTheme.settings = {
+          ...generatedSettings,
+          ...element.settings,
+          ...storedSettings
+        };
+      }
+    }
+  }
+
+  // final - replace any assignments inside the theme
+  return replacePlaceholders(generatedTheme);
+};
+
+/**
+ * Create a theme from multiple theme configuration objects.
+ * Properties are overwriten by iterating the configuration objects from left to right.
+ *
+ * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.
+ * Thus a stored configuration is leading as it can be configured by a modeller through the repository.
+ *
+ * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.
+ *
+ * Both objects and function can be used, where a function receives the previous objects as input arguments.
+ * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:
+ *
+ * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))
+ *
+ * @example
+ * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,
+ * but the button bg still uses the yiq function of the default theme:
+ *
+ * const DefaultTheme = {
+ *   PRIMARY_COLOR: "#0000ff",
+ *   SECONDARY_COLOR: "#00ff00",
+ *   BUTTON_COLOR: "$PRIMARY_COLOR"
+ * }
+ *
+ * const createDefaultTheme = (input) => ({
+ *   ...input,
+ *   BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)
+ * })
+ *
+ * const CustomTheme = {
+ *   PRIMARY_COLOR: "#ff0000"
+ * }
+ *
+ * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);
+ *
+ * // Result:
+ * {
+ *   PRIMARY_COLOR: "#ff0000",
+ *   BUTTON_COLOR: "#ff0000",
+ *   BUTTON_BG: "#fff",
+ *   SECONDARY_COLOR: "#00ff00",
+ * }
+ */
+const createTheme = function (storedTheme) {
+  for (var _len2 = arguments.length, themeConfigs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    themeConfigs[_key2 - 1] = arguments[_key2];
+  }
+  const customTheme = generateTheme(storedTheme, ...(0, _flattenDeep.default)(themeConfigs));
+  if (customTheme) {
+    (0, _Settings.setSettings)(customTheme.settings);
+  }
+  return customTheme;
+};
+var _default = exports.default = createTheme;
+//# sourceMappingURL=createTheme.cjs.map

package/lib/react-theme/createTheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.cjs","names":["_flattenDeep","_interopRequireDefault","require","_objects","_Settings","replacePlaceholders","inputTheme","_context","possibleKeys","_map","default","_keys","call","key","join","re","RegExp","_entries","forEach","_ref","value","replace","match","capture","generateTheme","storedTheme","storedSettings","settings","generatedTheme","_len","arguments","length","themeElements","Array","_key","element","isPlainObject","generatedSettings","createTheme","_len2","themeConfigs","_key2","customTheme","flattenDeep","setSettings","_default","exports"],"sources":["../../src/react-theme/createTheme.js"],"sourcesContent":["// @flow\nimport flattenDeep from \"lodash/flattenDeep\";\n\nimport { isPlainObject } from \"../utils/helpers/objects\";\n\nimport { setSettings } from \"../constants/Settings\";\n\nimport type { Theme } from \"./types\";\n\nconst replacePlaceholders = (inputTheme: Theme) => {\n  const possibleKeys = Object.keys(inputTheme)\n    .map((key) => `\\\\b${key}\\\\b`)\n    .join(\"|\");\n\n  const re = new RegExp(`\\\\$(${possibleKeys})`, \"g\");\n  Object.entries(inputTheme).forEach(([key, value]) => {\n    if (key !== \"settings\" && typeof value === \"string\") {\n      inputTheme[key] = value.replace(\n        re,\n        // $FlowIssue[incompatible-call]\n        (match, capture) => inputTheme[capture],\n      );\n    }\n  });\n\n  return inputTheme;\n};\n\nconst generateTheme = (storedTheme: Theme, ...themeElements: Array<Theme>) => {\n  const storedSettings = storedTheme?.settings ?? {};\n\n  let generatedTheme = { settings: {} };\n  for (const element of themeElements) {\n    if (typeof element === \"function\") {\n      generatedTheme = element(replacePlaceholders(generatedTheme));\n    } else if (isPlainObject(element)) {\n      const generatedSettings = generatedTheme.settings;\n      // $FlowFixMe[cannot-spread-indexer]\n      generatedTheme = { ...generatedTheme, ...element, ...storedTheme };\n      if (\"settings\" in element) {\n        generatedTheme.settings = {\n          ...generatedSettings,\n          ...element.settings,\n          ...storedSettings,\n        };\n      }\n    }\n  }\n\n  // final - replace any assignments inside the theme\n  return replacePlaceholders(generatedTheme);\n};\n\n/**\n * Create a theme from multiple theme configuration objects.\n * Properties are overwriten by iterating the configuration objects from left to right.\n *\n * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.\n * Thus a stored configuration is leading as it can be configured by a modeller through the repository.\n *\n * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.\n *\n * Both objects and function can be used, where a function receives the previous objects as input arguments.\n * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:\n *\n * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))\n *\n * @example\n * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,\n * but the button bg still uses the yiq function of the default theme:\n *\n * const DefaultTheme = {\n *   PRIMARY_COLOR: \"#0000ff\",\n *   SECONDARY_COLOR: \"#00ff00\",\n *   BUTTON_COLOR: \"$PRIMARY_COLOR\"\n * }\n *\n * const createDefaultTheme = (input) => ({\n *   ...input,\n *   BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)\n * })\n *\n * const CustomTheme = {\n *   PRIMARY_COLOR: \"#ff0000\"\n * }\n *\n * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);\n *\n * // Result:\n * {\n *   PRIMARY_COLOR: \"#ff0000\",\n *   BUTTON_COLOR: \"#ff0000\",\n *   BUTTON_BG: \"#fff\",\n *   SECONDARY_COLOR: \"#00ff00\",\n * }\n */\nconst createTheme = (\n  storedTheme: Theme,\n  ...themeConfigs: Array<Theme | Array<Theme> | void>\n):\n  | any\n  | {}\n  | {\n      INPUT_FOCUS_BORDER_COLOR?: string,\n      LINK_HOVER_COLOR?: string,\n      PAGING_HOVER_COLOR?: string,\n      settings?: { [settingName: string]: string },\n    } => {\n  const customTheme = generateTheme(storedTheme, ...flattenDeep(themeConfigs));\n\n  if (customTheme) {\n    setSettings(customTheme.settings);\n  }\n\n  return customTheme;\n};\n\nexport default createTheme;\n"],"mappings":"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","ignoreList":[]}

package/lib/react-theme/createTheme.d.cts

@@ -0,0 +1,53 @@
+export default createTheme;
+/**
+ * Create a theme from multiple theme configuration objects.
+ * Properties are overwriten by iterating the configuration objects from left to right.
+ *
+ * The first argument represents a stored theme part, this is optional. The stored theme part will overwrite every part in the collection of theme parts.
+ * Thus a stored configuration is leading as it can be configured by a modeller through the repository.
+ *
+ * Placeholders can be used, they are replaced before calling a function theme part or at the end of the theme creation.
+ *
+ * Both objects and function can be used, where a function receives the previous objects as input arguments.
+ * For example using the method createTheme(ThemeObject, ThemeObject2, ThemeFunction, ThemeFunction2), will be handled as:
+ *
+ * ThemeFunction2(ThemeFunction1({ ...ThemeObject, ...ThemeObject2 }))
+ *
+ * @example
+ * Example where the primary color of the default theme is overwritten with a primary color of the custom theme,
+ * but the button bg still uses the yiq function of the default theme:
+ *
+ * const DefaultTheme = {
+ *   PRIMARY_COLOR: "#0000ff",
+ *   SECONDARY_COLOR: "#00ff00",
+ *   BUTTON_COLOR: "$PRIMARY_COLOR"
+ * }
+ *
+ * const createDefaultTheme = (input) => ({
+ *   ...input,
+ *   BUTTON_BG: getContrastYIQ(input.BUTTON_COLOR)
+ * })
+ *
+ * const CustomTheme = {
+ *   PRIMARY_COLOR: "#ff0000"
+ * }
+ *
+ * createTheme(null, DefaultTheme, CustomTheme, createDefaultTheme);
+ *
+ * // Result:
+ * {
+ *   PRIMARY_COLOR: "#ff0000",
+ *   BUTTON_COLOR: "#ff0000",
+ *   BUTTON_BG: "#fff",
+ *   SECONDARY_COLOR: "#00ff00",
+ * }
+ */
+declare function createTheme(storedTheme: Theme, ...themeConfigs: Array<Theme | Array<Theme> | void>): any | {} | {
+    INPUT_FOCUS_BORDER_COLOR?: string;
+    LINK_HOVER_COLOR?: string;
+    PAGING_HOVER_COLOR?: string;
+    settings?: {
+        [settingName: string]: string;
+    };
+};
+import { Theme } from "./types";

package/lib/react-theme/index.cjs

@@ -0,0 +1,110 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  createTheme: true,
+  ThemeProvider: true
+};
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
+Object.defineProperty(exports, "createTheme", {
+  enumerable: true,
+  get: function () {
+    return _createTheme.default;
+  }
+});
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+var _useTheme = require("./useTheme");
+_Object$keys(_useTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTheme[key];
+    }
+  });
+});
+var _themeProps = require("./utils/themeProps");
+_Object$keys(_themeProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _themeProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _themeProps[key];
+    }
+  });
+});
+var _background = require("./utils/background");
+_Object$keys(_background).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _background[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _background[key];
+    }
+  });
+});
+var _colors = require("./utils/colors");
+_Object$keys(_colors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colors[key];
+    }
+  });
+});
+var _contrast = require("./utils/contrast");
+_Object$keys(_contrast).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _contrast[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _contrast[key];
+    }
+  });
+});
+var _corners = require("./utils/corners");
+_Object$keys(_corners).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _corners[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _corners[key];
+    }
+  });
+});
+var _spacers = require("./utils/spacers");
+_Object$keys(_spacers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _spacers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _spacers[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/lib/react-theme/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["_createTheme","_interopRequireDefault","require","_ThemeProvider","_useTheme","_Object$keys","forEach","key","Object","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_themeProps","_background","_colors","_contrast","_corners","_spacers"],"sources":["../../src/react-theme/index.js"],"sourcesContent":["// @flow\nexport { default as createTheme } from \"./createTheme\";\nexport { default as ThemeProvider } from \"./ThemeProvider\";\n\nexport * from \"./useTheme\";\n\nexport * from \"./utils/themeProps\";\n\nexport * from \"./utils/background\";\nexport * from \"./utils/colors\";\nexport * from \"./utils/contrast\";\nexport * from \"./utils/corners\";\nexport * from \"./utils/spacers\";\n\nexport type * from \"./types\";\n"],"mappings":"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","ignoreList":[]}

package/lib/react-theme/index.d.cts

@@ -0,0 +1,10 @@
+export { default as createTheme } from "./createTheme";
+export { default as ThemeProvider } from "./ThemeProvider";
+export * from "./useTheme";
+export * from "./utils/themeProps";
+export * from "./utils/background";
+export * from "./utils/colors";
+export * from "./utils/contrast";
+export * from "./utils/corners";
+export * from "./utils/spacers";
+export type * from "./types";

package/lib/react-theme/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

package/lib/react-theme/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/react-theme/types.js"],"sourcesContent":["// @flow\nexport type ThemePropValue =\n  | string\n  | number\n  | { [key: string]: ThemePropValue, ... };\n\nexport type UtilThemeProps = {\n  theme: Theme,\n  ...\n};\n\nexport type Theme = {\n  settings: { [settingName: string]: string },\n  [key: string]: ThemePropValue,\n  ...\n};\n"],"mappings":"","ignoreList":[]}

package/lib/react-theme/types.d.cts

@@ -0,0 +1,13 @@
+type ThemePropValue = string | number | {
+    [key: string]: ThemePropValue;
+};
+type UtilThemeProps = {
+    theme: Theme;
+};
+type Theme = {
+    [key: string]: ThemePropValue;
+    settings: {
+        [settingName: string]: string;
+    };
+};
+export {};

package/lib/react-theme/useTheme.cjs

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = void 0;
+var _react = require("react");
+var _styledComponents = require("styled-components");
+/**
+ */
+const useTheme = () => {
+  return (0, _react.useContext)(_styledComponents.ThemeContext);
+};
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme.cjs.map

package/lib/react-theme/useTheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.cjs","names":["_react","require","_styledComponents","useTheme","useContext","ThemeContext","exports"],"sources":["../../src/react-theme/useTheme.js"],"sourcesContent":["// @flow\nimport { useContext } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport type { Theme } from \"./types\";\n\n/**\n */\nconst useTheme = (): Theme => {\n  return useContext(ThemeContext);\n};\n\nexport { useTheme };\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAIA;AACA;AACA,MAAME,QAAQ,GAAGA,CAAA,KAAa;EAC5B,OAAO,IAAAC,iBAAU,EAACC,8BAAY,CAAC;AACjC,CAAC;AAACC,OAAA,CAAAH,QAAA,GAAAA,QAAA","ignoreList":[]}

package/lib/react-theme/useTheme.d.cts

@@ -0,0 +1,4 @@
+/**
+ */
+export function useTheme(): Theme;
+import { Theme } from "./types";

package/lib/react-theme/utils/background.cjs

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderBackground = void 0;
+var _themeProps = require("./themeProps");
+/**
+ */
+const renderBackground = (path, defaultValue) => _ref => {
+  let {
+    theme
+  } = _ref;
+  const value = (0, _themeProps.getThemeProp)(theme, path, defaultValue);
+  if (typeof value === "string") {
+    return `background: ${value}`;
+  }
+  return value;
+};
+exports.renderBackground = renderBackground;
+//# sourceMappingURL=background.cjs.map

package/lib/react-theme/utils/background.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.cjs","names":["_themeProps","require","renderBackground","path","defaultValue","_ref","theme","value","getThemeProp","exports"],"sources":["../../../src/react-theme/utils/background.js"],"sourcesContent":["// @flow\nimport { getThemeProp } from \"./themeProps\";\n\nimport type { ThemePropValue, UtilThemeProps } from \"../types\";\n\n/**\n */\nconst renderBackground =\n  (path: string, defaultValue?: string): ((UtilThemeProps) => ThemePropValue) =>\n  ({ theme }: UtilThemeProps) => {\n    const value = getThemeProp(theme, path, defaultValue);\n\n    if (typeof value === \"string\") {\n      return `background: ${value}`;\n    }\n\n    return value;\n  };\n\nexport { renderBackground };\n"],"mappings":";;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AAIA;AACA;AACA,MAAMC,gBAAgB,GACpBA,CAACC,IAAY,EAAEC,YAAqB,KACpCC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACxB,MAAME,KAAK,GAAG,IAAAC,wBAAY,EAACF,KAAK,EAAEH,IAAI,EAAEC,YAAY,CAAC;EAErD,IAAI,OAAOG,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAO,eAAeA,KAAK,EAAE;EAC/B;EAEA,OAAOA,KAAK;AACd,CAAC;AAACE,OAAA,CAAAP,gBAAA,GAAAA,gBAAA","ignoreList":[]}

package/lib/react-theme/utils/background.d.cts

@@ -0,0 +1,4 @@
+/**
+ */
+export function renderBackground(path: string, defaultValue?: string): ((UtilThemeProps: any) => ThemePropValue);
+import { ThemePropValue } from "../types";

package/lib/react-theme/utils/colors.cjs

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightenColor = exports.darkenColor = exports.changeHSL = void 0;
+var _polished = require("polished");
+var _themeProps = require("./themeProps");
+/*
+ * Themed color x amount darkened
+ */
+/**
+ */
+const darkenColor = (amount, path, defaultValue) => _ref => {
+  let {
+    theme
+  } = _ref;
+  return (0, _polished.darken)(amount, (0, _themeProps.getThemeProp)(theme, path, defaultValue));
+};
+
+/*
+ * Themed color x amount lightened
+ */
+/**
+ */
+exports.darkenColor = darkenColor;
+const lightenColor = (amount, path, defaultValue) => _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return (0, _polished.lighten)(amount, (0, _themeProps.getThemeProp)(theme, path, defaultValue));
+};
+
+/*
+ * Make a color lighter or darker in the same color family
+ */
+/**
+ */
+exports.lightenColor = lightenColor;
+const changeHSL = function (color, saturation, lightness) {
+  let hueAdjustment = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return (0, _polished.hsl)((0, _polished.parseToHsl)(color).hue + hueAdjustment, saturation, lightness);
+};
+exports.changeHSL = changeHSL;
+//# sourceMappingURL=colors.cjs.map

package/lib/react-theme/utils/colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.cjs","names":["_polished","require","_themeProps","darkenColor","amount","path","defaultValue","_ref","theme","darken","getThemeProp","exports","lightenColor","_ref2","lighten","changeHSL","color","saturation","lightness","hueAdjustment","arguments","length","undefined","hsl","parseToHsl","hue"],"sources":["../../../src/react-theme/utils/colors.js"],"sourcesContent":["// @flow\nimport { darken, hsl, lighten, parseToHsl } from \"polished\";\nimport { getThemeProp } from \"./themeProps\";\n\nimport type { UtilThemeProps } from \"../types\";\n\n/*\n * Themed color x amount darkened\n */\n/**\n */\nconst darkenColor =\n  (\n    amount: number | string,\n    path: string,\n    defaultValue?: string,\n  ): ((UtilThemeProps) => string) =>\n  ({ theme }: UtilThemeProps) =>\n    darken(amount, getThemeProp(theme, path, defaultValue));\n\n/*\n * Themed color x amount lightened\n */\n/**\n */\nconst lightenColor =\n  (\n    amount: number | string,\n    path: string,\n    defaultValue?: string,\n  ): ((UtilThemeProps) => string) =>\n  ({ theme }: UtilThemeProps) =>\n    lighten(amount, getThemeProp(theme, path, defaultValue));\n\n/*\n * Make a color lighter or darker in the same color family\n */\n/**\n */\nconst changeHSL = (\n  color: string,\n  saturation?: number,\n  lightness?: number,\n  hueAdjustment: number = 0,\n): string => hsl(parseToHsl(color).hue + hueAdjustment, saturation, lightness);\n\nexport { darkenColor, lightenColor, changeHSL };\n"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA,MAAME,WAAW,GACfA,CACEC,MAAuB,EACvBC,IAAY,EACZC,YAAqB,KAEvBC,IAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EAAA,OACxB,IAAAE,gBAAM,EAACL,MAAM,EAAE,IAAAM,wBAAY,EAACF,KAAK,EAAEH,IAAI,EAAEC,YAAY,CAAC,CAAC;AAAA;;AAE3D;AACA;AACA;AACA;AACA;AADAK,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEA,MAAMS,YAAY,GAChBA,CACER,MAAuB,EACvBC,IAAY,EACZC,YAAqB,KAEvBO,KAAA;EAAA,IAAC;IAAEL;EAAsB,CAAC,GAAAK,KAAA;EAAA,OACxB,IAAAC,iBAAO,EAACV,MAAM,EAAE,IAAAM,wBAAY,EAACF,KAAK,EAAEH,IAAI,EAAEC,YAAY,CAAC,CAAC;AAAA;;AAE5D;AACA;AACA;AACA;AACA;AADAK,OAAA,CAAAC,YAAA,GAAAA,YAAA;AAEA,MAAMG,SAAS,GAAG,SAAAA,CAChBC,KAAa,EACbC,UAAmB,EACnBC,SAAkB;EAAA,IAClBC,aAAqB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EAAA,OACd,IAAAG,aAAG,EAAC,IAAAC,oBAAU,EAACR,KAAK,CAAC,CAACS,GAAG,GAAGN,aAAa,EAAEF,UAAU,EAAEC,SAAS,CAAC;AAAA;AAACP,OAAA,CAAAI,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/react-theme/utils/colors.d.cts

@@ -0,0 +1,9 @@
+/**
+ */
+export function darkenColor(amount: number | string, path: string, defaultValue?: string): ((UtilThemeProps: any) => string);
+/**
+ */
+export function lightenColor(amount: number | string, path: string, defaultValue?: string): ((UtilThemeProps: any) => string);
+/**
+ */
+export function changeHSL(color: string, saturation?: number, lightness?: number, hueAdjustment?: number): string;

package/lib/react-theme/utils/contrast.cjs

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderContrastColor = exports.getYIQ = exports.getContrastYIQ = exports.getColorContrast = void 0;
+var _polished = require("polished");
+var _themeProps = require("./themeProps");
+var _exceptions = require("../../exceptions");
+/**
+ * calculate the contrast ratio of two colors
+ */
+const getColorContrast = (color1, color2) => {
+  const luminance1 = (0, _polished.getLuminance)(color1);
+  const luminance2 = (0, _polished.getLuminance)(color2);
+  return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2));
+};
+
+/*
+ * The YIQ equation converts the RGB color (0 to 255) into a YIQ color space.
+ * YIQ is the standard formula for calculating the perceived brightness of a color,
+ * and is recommended by the World Wide Web Consortium (W3C).
+ */
+/**
+ */
+exports.getColorContrast = getColorContrast;
+const getYIQ = color => {
+  const rgb = (0, _polished.parseToRgb)(color);
+  return (rgb.red * 299 + rgb.green * 587 + rgb.blue * 114) / 1000;
+};
+
+/**
+ * Get dark or light color, depending on the given color
+ * When the contrast between the color and the light or dark color is too low,
+ * the preferred color is returned
+ */
+exports.getYIQ = getYIQ;
+const getContrastYIQ = function (color) {
+  let dark = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "#212529";
+  let light = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "#fff";
+  let preferredColor = arguments.length > 3 ? arguments[3] : undefined;
+  const yiqColor = getYIQ(color);
+  if (preferredColor && getColorContrast(color, preferredColor) >= 4.5) {
+    return preferredColor;
+  }
+  const darkColor = getYIQ(dark) < 127.5 ? dark : "#212529";
+  const lightColor = getYIQ(light) > 127.5 ? light : "#fff";
+  if (yiqColor > 127.5) {
+    if (getColorContrast(color, darkColor) < 3) {
+      return "#212529";
+    }
+    return darkColor;
+  }
+  if (getColorContrast(color, lightColor) < 3) {
+    return "#fff";
+  }
+  return lightColor;
+};
+
+/**
+ */
+exports.getContrastYIQ = getContrastYIQ;
+const getBackgroundColor = (theme, bgColorProperty, defaultValue) => {
+  let bgColor = (0, _themeProps.getProp)(theme, bgColorProperty, defaultValue);
+  if (typeof bgColor === "object") {
+    bgColor = bgColor?.backgroundColor ?? defaultValue;
+  }
+  if (typeof bgColor === "string") {
+    return bgColor;
+  }
+  throw new _exceptions.ThemePropertyException(`${bgColorProperty} is not a string, but: ${typeof bgColor}`);
+};
+
+/**
+ * Retrieve the contrast color for the given background property,
+ * based on theme properties
+ */
+const renderContrastColor = function (bgColorProperty, preferredColorProperty) {
+  let standardDarkProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "YIQ_DARK_COLOR";
+  let standardLightProperty = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "YIQ_LIGHT_COLOR";
+  return _ref => {
+    let {
+      theme = {
+        settings: {}
+      }
+    } = _ref;
+    const bgColor = getBackgroundColor(theme, bgColorProperty, "#ffffff");
+    const preferredColor = (0, _themeProps.getThemeStringProp)(theme, preferredColorProperty);
+    const darkColor = (0, _themeProps.getThemeStringProp)(theme, standardDarkProperty, "#212529");
+    const lightColor = (0, _themeProps.getThemeStringProp)(theme, standardLightProperty, "#fff");
+    return getContrastYIQ(bgColor, darkColor, lightColor, preferredColor);
+  };
+};
+exports.renderContrastColor = renderContrastColor;
+//# sourceMappingURL=contrast.cjs.map

package/lib/react-theme/utils/contrast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.cjs","names":["_polished","require","_themeProps","_exceptions","getColorContrast","color1","color2","luminance1","getLuminance","luminance2","parseFloat","toFixed","exports","getYIQ","color","rgb","parseToRgb","red","green","blue","getContrastYIQ","dark","arguments","length","undefined","light","preferredColor","yiqColor","darkColor","lightColor","getBackgroundColor","theme","bgColorProperty","defaultValue","bgColor","getProp","backgroundColor","ThemePropertyException","renderContrastColor","preferredColorProperty","standardDarkProperty","standardLightProperty","_ref","settings","getThemeStringProp"],"sources":["../../../src/react-theme/utils/contrast.js"],"sourcesContent":["// @flow\nimport { getLuminance, parseToRgb } from \"polished\";\n\nimport { getThemeStringProp, getProp } from \"./themeProps\";\n\nimport { ThemePropertyException } from \"../../exceptions\";\n\nimport type { Theme, UtilThemeProps } from \"../types\";\n\n/**\n * calculate the contrast ratio of two colors\n */\nconst getColorContrast = (color1: string, color2: string): number => {\n  const luminance1 = getLuminance(color1);\n  const luminance2 = getLuminance(color2);\n  return parseFloat(\n    (luminance1 > luminance2\n      ? (luminance1 + 0.05) / (luminance2 + 0.05)\n      : (luminance2 + 0.05) / (luminance1 + 0.05)\n    ).toFixed(2),\n  );\n};\n\n/*\n * The YIQ equation converts the RGB color (0 to 255) into a YIQ color space.\n * YIQ is the standard formula for calculating the perceived brightness of a color,\n * and is recommended by the World Wide Web Consortium (W3C).\n */\n/**\n */\nconst getYIQ = (color: string): number => {\n  const rgb = parseToRgb(color);\n\n  return (rgb.red * 299 + rgb.green * 587 + rgb.blue * 114) / 1000;\n};\n\n/**\n * Get dark or light color, depending on the given color\n * When the contrast between the color and the light or dark color is too low,\n * the preferred color is returned\n */\nconst getContrastYIQ = (\n  color: string,\n  dark: string = \"#212529\",\n  light: string = \"#fff\",\n  preferredColor?: string,\n): string => {\n  const yiqColor = getYIQ(color);\n\n  if (preferredColor && getColorContrast(color, preferredColor) >= 4.5) {\n    return preferredColor;\n  }\n\n  const darkColor = getYIQ(dark) < 127.5 ? dark : \"#212529\";\n  const lightColor = getYIQ(light) > 127.5 ? light : \"#fff\";\n\n  if (yiqColor > 127.5) {\n    if (getColorContrast(color, darkColor) < 3) {\n      return \"#212529\";\n    }\n\n    return darkColor;\n  }\n\n  if (getColorContrast(color, lightColor) < 3) {\n    return \"#fff\";\n  }\n  return lightColor;\n};\n\n/**\n */\nconst getBackgroundColor = (\n  theme: Theme,\n  bgColorProperty: string,\n  defaultValue: string,\n) => {\n  let bgColor = getProp(theme, bgColorProperty, defaultValue);\n\n  if (typeof bgColor === \"object\") {\n    bgColor = bgColor?.backgroundColor ?? defaultValue;\n  }\n\n  if (typeof bgColor === \"string\") {\n    return bgColor;\n  }\n\n  throw new ThemePropertyException(\n    `${bgColorProperty} is not a string, but: ${typeof bgColor}`,\n  );\n};\n\n/**\n * Retrieve the contrast color for the given background property,\n * based on theme properties\n */\nconst renderContrastColor =\n  (\n    bgColorProperty: string,\n    preferredColorProperty?: string,\n    standardDarkProperty: string = \"YIQ_DARK_COLOR\",\n    standardLightProperty: string = \"YIQ_LIGHT_COLOR\",\n  ): ((UtilThemeProps) => string) =>\n  ({ theme = { settings: {} } }: UtilThemeProps) => {\n    const bgColor = getBackgroundColor(theme, bgColorProperty, \"#ffffff\");\n    const preferredColor = getThemeStringProp(theme, preferredColorProperty);\n    const darkColor = getThemeStringProp(\n      theme,\n      standardDarkProperty,\n      \"#212529\",\n    );\n    const lightColor = getThemeStringProp(theme, standardLightProperty, \"#fff\");\n\n    return getContrastYIQ(bgColor, darkColor, lightColor, preferredColor);\n  };\n\nexport { getColorContrast, getYIQ, getContrastYIQ, renderContrastColor };\n"],"mappings":"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","ignoreList":[]}

package/lib/react-theme/utils/contrast.d.cts

@@ -0,0 +1,18 @@
+/**
+ * calculate the contrast ratio of two colors
+ */
+export function getColorContrast(color1: string, color2: string): number;
+/**
+ */
+export function getYIQ(color: string): number;
+/**
+ * Get dark or light color, depending on the given color
+ * When the contrast between the color and the light or dark color is too low,
+ * the preferred color is returned
+ */
+export function getContrastYIQ(color: string, dark?: string, light?: string, preferredColor?: string): string;
+/**
+ * Retrieve the contrast color for the given background property,
+ * based on theme properties
+ */
+export function renderContrastColor(bgColorProperty: string, preferredColorProperty?: string, standardDarkProperty?: string, standardLightProperty?: string): ((UtilThemeProps: any) => string);