@onewelcome/react-lib-components 11.1.0-delta → 12.1.0-alpha

package/dist/components/Tooltip/Tooltip.module.scss.es.js

@@ -0,0 +1,59 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode('.Tooltip_sr-only_7l1Pc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Tooltip_hidden_7l1Pc{display:none}.Tooltip_slide-in_7l1Pc{animation:Tooltip_slide-in_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Tooltip_slide-in_7l1Pc{animation-duration:.1ms}}.Tooltip_slide-out_7l1Pc{animation:Tooltip_slide-out_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Tooltip_slide-out_7l1Pc{animation-duration:.1ms}}@keyframes Tooltip_slide-in_7l1Pc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Tooltip_slide-out_7l1Pc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Tooltip_wrapper_7l1Pc{display:flex;align-items:center}.Tooltip_tooltip-wrapper_7l1Pc .Tooltip_icon_7l1Pc{margin-left:.5rem;color:var(--greyed-out);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tooltip_tooltip-wrapper_7l1Pc .Tooltip_icon_7l1Pc{transition-duration:.1ms}}.Tooltip_tooltip-wrapper_7l1Pc .Tooltip_icon_7l1Pc:hover{color:var(--default)}.Tooltip_tooltip-wrapper_7l1Pc .Tooltip_icon_7l1Pc.Tooltip_error_7l1Pc{color:var(--error)}.Tooltip_tooltip_7l1Pc{position:fixed;font-size:var(--font-size-sub);line-height:1.33;border-radius:.125rem;padding:.75rem;color:var(--light);max-width:20.625rem;opacity:0;transform:scale(0);transform-origin:center center;pointer-events:none;box-shadow:0 .0625rem .3125rem #0105324d;word-break:break-word;z-index:var(--tooltip-index);transition-property:opacity,transform;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Tooltip_tooltip_7l1Pc{transition-duration:.1ms}}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc{background-color:var(--tooltip-background-color)}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_top_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;left:50%;right:initial;transform:translate(-50%);top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_top-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;right:.75rem;left:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_top-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--tooltip-background-color);position:absolute;left:1rem;right:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_bottom_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;left:50%;right:initial;transform:translate(-50%);bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_bottom-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;right:.75rem;left:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_bottom-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--tooltip-background-color);position:absolute;left:1rem;right:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_left_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_left-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;bottom:.9375rem;top:initial;left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_left-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--tooltip-background-color);position:absolute;top:.875rem;bottom:initial;left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_right_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_right-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;bottom:.9375rem;top:initial;right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_black_7l1Pc.Tooltip_right-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--tooltip-background-color);position:absolute;top:.875rem;bottom:initial;right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc{background-color:var(--color-blue-grey500)}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_top_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;left:50%;right:initial;transform:translate(-50%);top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_top-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;right:.75rem;left:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_top-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-top-color:var(--color-blue-grey500);position:absolute;left:1rem;right:initial;top:100%;border-bottom-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_bottom_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;left:50%;right:initial;transform:translate(-50%);bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_bottom-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;right:.75rem;left:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_bottom-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-bottom-color:var(--color-blue-grey500);position:absolute;left:1rem;right:initial;bottom:100%;border-top-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_left_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_left-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;bottom:.9375rem;top:initial;left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_left-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-left-color:var(--color-blue-grey500);position:absolute;top:.875rem;bottom:initial;left:100%;border-right-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_right_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;top:50%;bottom:initial;transform:translateY(-50%);right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_right-start_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;bottom:.9375rem;top:initial;right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc.Tooltip_blue_7l1Pc.Tooltip_right-end_7l1Pc:after{width:0;height:0;border-style:solid;border-width:.25rem;border-color:transparent;border-right-color:var(--color-blue-grey500);position:absolute;top:.875rem;bottom:initial;right:100%;border-left-width:0}.Tooltip_tooltip_7l1Pc:after{content:""}.Tooltip_tooltip_7l1Pc.Tooltip_visible_7l1Pc{opacity:1;transform:scale(1)}.Tooltip_label_7l1Pc:focus-visible{outline:.0313rem dashed var(--color-primary)}.Tooltip_tooltip-title_7l1Pc{font-weight:500;font-size:var(--font-size-form-label);line-height:1.43;display:block;margin-bottom:.25rem}')),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+const hidden = "Tooltip_hidden_7l1Pc";
+const wrapper = "Tooltip_wrapper_7l1Pc";
+const icon = "Tooltip_icon_7l1Pc";
+const error = "Tooltip_error_7l1Pc";
+const tooltip = "Tooltip_tooltip_7l1Pc";
+const black = "Tooltip_black_7l1Pc";
+const top = "Tooltip_top_7l1Pc";
+const bottom = "Tooltip_bottom_7l1Pc";
+const left = "Tooltip_left_7l1Pc";
+const right = "Tooltip_right_7l1Pc";
+const blue = "Tooltip_blue_7l1Pc";
+const visible = "Tooltip_visible_7l1Pc";
+const label = "Tooltip_label_7l1Pc";
+const classes = {
+  "sr-only": "Tooltip_sr-only_7l1Pc",
+  hidden,
+  "slide-in": "Tooltip_slide-in_7l1Pc",
+  "slide-out": "Tooltip_slide-out_7l1Pc",
+  wrapper,
+  "tooltip-wrapper": "Tooltip_tooltip-wrapper_7l1Pc",
+  icon,
+  error,
+  tooltip,
+  black,
+  top,
+  "top-start": "Tooltip_top-start_7l1Pc",
+  "top-end": "Tooltip_top-end_7l1Pc",
+  bottom,
+  "bottom-start": "Tooltip_bottom-start_7l1Pc",
+  "bottom-end": "Tooltip_bottom-end_7l1Pc",
+  left,
+  "left-start": "Tooltip_left-start_7l1Pc",
+  "left-end": "Tooltip_left-end_7l1Pc",
+  right,
+  "right-start": "Tooltip_right-start_7l1Pc",
+  "right-end": "Tooltip_right-end_7l1Pc",
+  blue,
+  visible,
+  label,
+  "tooltip-title": "Tooltip_tooltip-title_7l1Pc"
+};
+export {
+  black,
+  blue,
+  bottom,
+  classes as default,
+  error,
+  hidden,
+  icon,
+  label,
+  left,
+  right,
+  tooltip,
+  top,
+  visible,
+  wrapper
+};
+//# sourceMappingURL=Tooltip.module.scss.es.js.map

package/dist/components/Tooltip/Tooltip.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Typography/Typography.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("./Typography.module.scss.cjs.js"),s=require("../../hooks/useSpacing.cjs.js"),r=["h1","h2","h3","h4","body","body-bold","sub-text","code"],t=e.forwardRef((({children:t,variant:o,tag:c,style:n,spacing:i,align:d,className:l="",...u},h)=>{if(!r.includes(o))throw new Error(`You entered an invalid variant. You can choose from: ${r}, you entered: ${o}`);const y=s.useSpacing(i,n);if(!c)switch(o){case"h1":case"h2":case"h3":case"h4":case"code":c=o;break;case"body":case"body-bold":c="p";break;case"sub-text":c="span";break;default:c="div"}const p=c;return e.createElement(p,{...u,ref:h,style:{...y,textAlign:d},className:`${a.default["typography_style_"+o]} ${l}`},t)}));exports.Typography=t,exports.validVariants=r;
+//# sourceMappingURL=Typography.cjs.js.map

package/dist/components/Typography/Typography.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.cjs.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from \"react\";\nimport classes from \"./Typography.module.scss\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\n\nexport const validVariants = [\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"body\",\n  \"body-bold\",\n  \"sub-text\",\n  \"code\"\n] as const;\nexport type Variant = (typeof validVariants)[number];\n\ntype Tags =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"div\"\n  | \"code\"\n  | \"span\"\n  | \"sup\"\n  | \"sub\"\n  | \"strong\"\n  | \"em\"\n  | \"small\"\n  | \"mark\"\n  | \"del\"\n  | \"ins\"\n  | \"blockquote\";\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nexport interface Props extends ComponentPropsWithRef<any> {\n  children: ReactNode;\n  variant: Variant;\n  tag?: Tags;\n  spacing?: Spacing;\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nconst TypographyComponent: ForwardRefRenderFunction<unknown, Omit<Props, \"ref\">> = (\n  { children, variant, tag, style, spacing, align, className = \"\", ...rest },\n  ref\n) => {\n  if (!validVariants.includes(variant)) {\n    throw new Error(\n      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`\n    );\n  }\n\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  if (!tag) {\n    switch (variant) {\n      case \"h1\":\n      case \"h2\":\n      case \"h3\":\n      case \"h4\":\n      case \"code\":\n        tag = variant;\n        break;\n      case \"body\":\n        tag = \"p\";\n        break;\n      case \"body-bold\":\n        tag = \"p\";\n        break;\n      case \"sub-text\":\n        tag = \"span\";\n        break;\n      default:\n        tag = \"div\";\n        break;\n    }\n  }\n\n  const TagName = tag;\n\n  return (\n    <TagName\n      {...rest}\n      ref={ref}\n      style={{ ...styleWithSpacing, textAlign: align }}\n      className={`${classes[\"typography_style_\" + variant]} ${className}`}\n    >\n      {children}\n    </TagName>\n  );\n};\n\nexport const Typography = React.forwardRef(TypographyComponent);\n"],"names":["validVariants","Typography","React","forwardRef","children","variant","tag","style","spacing","align","className","rest","ref","includes","Error","styleWithSpacing","useSpacing","TagName","createElement","textAlign","classes"],"mappings":"iMAoBaA,EAAgB,CAC3B,KACA,KACA,KACA,KACA,OACA,YACA,WACA,QAkFWC,EAAaC,EAAMC,YAlDmD,EAC/EC,WAAUC,UAASC,MAAKC,QAAOC,UAASC,QAAOC,YAAY,MAAOC,GACpEC,KAEA,IAAKZ,EAAca,SAASR,GAC1B,MAAM,IAAIS,MACR,wDAAwDd,mBAA+BK,KAIrF,MAAAU,EAAmBC,EAAAA,WAAWR,EAASD,GAE7C,IAAKD,EACH,OAAQD,GACN,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,OACGC,EAAAD,EACN,MACF,IAAK,OAGL,IAAK,YACGC,EAAA,IACN,MACF,IAAK,WACGA,EAAA,OACN,MACF,QACQA,EAAA,MAKZ,MAAMW,EAAUX,EAGd,OAAAJ,EAAAgB,cAACD,EAAA,IACKN,EACJC,MACAL,MAAO,IAAKQ,EAAkBI,UAAWV,GACzCC,UAAW,GAAGU,UAAQ,oBAAsBf,MAAYK,KAEvDN,EACH"}

package/dist/components/Typography/Typography.es.js

@@ -0,0 +1,61 @@
+import React from "react";
+import classes from "./Typography.module.scss.es.js";
+import { useSpacing } from "../../hooks/useSpacing.es.js";
+const validVariants = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "body",
+  "body-bold",
+  "sub-text",
+  "code"
+];
+const TypographyComponent = ({ children, variant, tag, style, spacing, align, className = "", ...rest }, ref) => {
+  if (!validVariants.includes(variant)) {
+    throw new Error(
+      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
+    );
+  }
+  const styleWithSpacing = useSpacing(spacing, style);
+  if (!tag) {
+    switch (variant) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "code":
+        tag = variant;
+        break;
+      case "body":
+        tag = "p";
+        break;
+      case "body-bold":
+        tag = "p";
+        break;
+      case "sub-text":
+        tag = "span";
+        break;
+      default:
+        tag = "div";
+        break;
+    }
+  }
+  const TagName = tag;
+  return /* @__PURE__ */ React.createElement(
+    TagName,
+    {
+      ...rest,
+      ref,
+      style: { ...styleWithSpacing, textAlign: align },
+      className: `${classes["typography_style_" + variant]} ${className}`
+    },
+    children
+  );
+};
+const Typography = React.forwardRef(TypographyComponent);
+export {
+  Typography,
+  validVariants
+};
+//# sourceMappingURL=Typography.es.js.map

package/dist/components/Typography/Typography.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.es.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from \"react\";\nimport classes from \"./Typography.module.scss\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\n\nexport const validVariants = [\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"body\",\n  \"body-bold\",\n  \"sub-text\",\n  \"code\"\n] as const;\nexport type Variant = (typeof validVariants)[number];\n\ntype Tags =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"div\"\n  | \"code\"\n  | \"span\"\n  | \"sup\"\n  | \"sub\"\n  | \"strong\"\n  | \"em\"\n  | \"small\"\n  | \"mark\"\n  | \"del\"\n  | \"ins\"\n  | \"blockquote\";\n\n/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\nexport interface Props extends ComponentPropsWithRef<any> {\n  children: ReactNode;\n  variant: Variant;\n  tag?: Tags;\n  spacing?: Spacing;\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nconst TypographyComponent: ForwardRefRenderFunction<unknown, Omit<Props, \"ref\">> = (\n  { children, variant, tag, style, spacing, align, className = \"\", ...rest },\n  ref\n) => {\n  if (!validVariants.includes(variant)) {\n    throw new Error(\n      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`\n    );\n  }\n\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  if (!tag) {\n    switch (variant) {\n      case \"h1\":\n      case \"h2\":\n      case \"h3\":\n      case \"h4\":\n      case \"code\":\n        tag = variant;\n        break;\n      case \"body\":\n        tag = \"p\";\n        break;\n      case \"body-bold\":\n        tag = \"p\";\n        break;\n      case \"sub-text\":\n        tag = \"span\";\n        break;\n      default:\n        tag = \"div\";\n        break;\n    }\n  }\n\n  const TagName = tag;\n\n  return (\n    <TagName\n      {...rest}\n      ref={ref}\n      style={{ ...styleWithSpacing, textAlign: align }}\n      className={`${classes[\"typography_style_\" + variant]} ${className}`}\n    >\n      {children}\n    </TagName>\n  );\n};\n\nexport const Typography = React.forwardRef(TypographyComponent);\n"],"names":[],"mappings":";;;AAoBO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA+BA,MAAM,sBAA6E,CACjF,EAAE,UAAU,SAAS,KAAK,OAAO,SAAS,OAAO,YAAY,IAAI,GAAG,KAAA,GACpE,QACG;AACH,MAAI,CAAC,cAAc,SAAS,OAAO,GAAG;AACpC,UAAM,IAAI;AAAA,MACR,wDAAwD,aAAa,kBAAkB,OAAO;AAAA,IAChG;AAAA,EAAA;AAGI,QAAA,mBAAmB,WAAW,SAAS,KAAK;AAElD,MAAI,CAAC,KAAK;AACR,YAAQ,SAAS;AAAA,MACf,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACG,cAAA;AACN;AAAA,MACF,KAAK;AACG,cAAA;AACN;AAAA,MACF,KAAK;AACG,cAAA;AACN;AAAA,MACF,KAAK;AACG,cAAA;AACN;AAAA,MACF;AACQ,cAAA;AACN;AAAA,IAAA;AAAA,EACJ;AAGF,QAAM,UAAU;AAGd,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,GAAG,kBAAkB,WAAW,MAAM;AAAA,MAC/C,WAAW,GAAG,QAAQ,sBAAsB,OAAO,CAAC,IAAI,SAAS;AAAA,IAAA;AAAA,IAEhE;AAAA,EACH;AAEJ;AAEa,MAAA,aAAa,MAAM,WAAW,mBAAmB;"}

package/dist/components/Typography/Typography.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Typography_sr-only_7l1Pc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Typography_hidden_7l1Pc{display:none}.Typography_slide-in_7l1Pc{animation:Typography_slide-in_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Typography_slide-in_7l1Pc{animation-duration:.1ms}}.Typography_slide-out_7l1Pc{animation:Typography_slide-out_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Typography_slide-out_7l1Pc{animation-duration:.1ms}}@keyframes Typography_slide-in_7l1Pc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Typography_slide-out_7l1Pc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Typography_typography_style_h1_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h1);font-style:normal;font-variant:normal;line-height:1.2;font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-h1);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h2_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h2);font-style:normal;font-variant:normal;line-height:1.42857;font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-h2);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h3_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h3);font-style:normal;font-variant:normal;line-height:1.16666;font-weight:500;text-transform:none;letter-spacing:0;color:var(--font-color-h3);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h4_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h4);font-style:normal;font-variant:normal;line-height:1.2;font-weight:500;text-transform:none;letter-spacing:0;color:var(--font-color-h4);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_body_7l1Pc{font-family:var(--font-family);font-size:var(--font-size);font-style:normal;font-variant:normal;line-height:var(--default-line-height);font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-body);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_body-bold_7l1Pc{font-family:var(--font-family);font-size:var(--font-size);font-style:normal;font-variant:normal;line-height:var(--default-line-height);font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-body);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_sub-text_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-sub);font-style:normal;font-variant:normal;line-height:var(--font-size);font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-h4);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_code_7l1Pc{font-family:var(--font-family-code);font-size:var(--font-size-code);font-style:normal;font-variant:normal;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-code);margin:0 0 calc(1 * var(--font-size)) 0}')),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y="Typography_hidden_7l1Pc",p="Typography_typography_style_h1_7l1Pc",_="Typography_typography_style_h2_7l1Pc",t="Typography_typography_style_h3_7l1Pc",o="Typography_typography_style_h4_7l1Pc",e="Typography_typography_style_body_7l1Pc",h="Typography_typography_style_code_7l1Pc",r={"sr-only":"Typography_sr-only_7l1Pc",hidden:y,"slide-in":"Typography_slide-in_7l1Pc","slide-out":"Typography_slide-out_7l1Pc",typography_style_h1:p,typography_style_h2:_,typography_style_h3:t,typography_style_h4:o,typography_style_body:e,"typography_style_body-bold":"Typography_typography_style_body-bold_7l1Pc","typography_style_sub-text":"Typography_typography_style_sub-text_7l1Pc",typography_style_code:h};exports.default=r,exports.hidden=y,exports.typography_style_body=e,exports.typography_style_code=h,exports.typography_style_h1=p,exports.typography_style_h2=_,exports.typography_style_h3=t,exports.typography_style_h4=o;
+//# sourceMappingURL=Typography.module.scss.cjs.js.map

package/dist/components/Typography/Typography.module.scss.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.module.scss.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Typography/Typography.module.scss.es.js

@@ -0,0 +1,33 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Typography_sr-only_7l1Pc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Typography_hidden_7l1Pc{display:none}.Typography_slide-in_7l1Pc{animation:Typography_slide-in_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Typography_slide-in_7l1Pc{animation-duration:.1ms}}.Typography_slide-out_7l1Pc{animation:Typography_slide-out_7l1Pc .5s forwards}@media (prefers-reduced-motion: reduce){.Typography_slide-out_7l1Pc{animation-duration:.1ms}}@keyframes Typography_slide-in_7l1Pc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Typography_slide-out_7l1Pc{0%{transform:translateY(0)}to{transform:translateY(100vh)}}/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the "License");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an "AS IS" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.Typography_typography_style_h1_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h1);font-style:normal;font-variant:normal;line-height:1.2;font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-h1);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h2_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h2);font-style:normal;font-variant:normal;line-height:1.42857;font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-h2);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h3_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h3);font-style:normal;font-variant:normal;line-height:1.16666;font-weight:500;text-transform:none;letter-spacing:0;color:var(--font-color-h3);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_h4_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-h4);font-style:normal;font-variant:normal;line-height:1.2;font-weight:500;text-transform:none;letter-spacing:0;color:var(--font-color-h4);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_body_7l1Pc{font-family:var(--font-family);font-size:var(--font-size);font-style:normal;font-variant:normal;line-height:var(--default-line-height);font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-body);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_body-bold_7l1Pc{font-family:var(--font-family);font-size:var(--font-size);font-style:normal;font-variant:normal;line-height:var(--default-line-height);font-weight:700;text-transform:none;letter-spacing:0;color:var(--font-color-body);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_sub-text_7l1Pc{font-family:var(--font-family);font-size:var(--font-size-sub);font-style:normal;font-variant:normal;line-height:var(--font-size);font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-h4);margin:0 0 calc(1 * var(--font-size)) 0}.Typography_typography_style_code_7l1Pc{font-family:var(--font-family-code);font-size:var(--font-size-code);font-style:normal;font-variant:normal;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--font-color-code);margin:0 0 calc(1 * var(--font-size)) 0}')),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const hidden = "Typography_hidden_7l1Pc";
+const typography_style_h1 = "Typography_typography_style_h1_7l1Pc";
+const typography_style_h2 = "Typography_typography_style_h2_7l1Pc";
+const typography_style_h3 = "Typography_typography_style_h3_7l1Pc";
+const typography_style_h4 = "Typography_typography_style_h4_7l1Pc";
+const typography_style_body = "Typography_typography_style_body_7l1Pc";
+const typography_style_code = "Typography_typography_style_code_7l1Pc";
+const classes = {
+  "sr-only": "Typography_sr-only_7l1Pc",
+  hidden,
+  "slide-in": "Typography_slide-in_7l1Pc",
+  "slide-out": "Typography_slide-out_7l1Pc",
+  typography_style_h1,
+  typography_style_h2,
+  typography_style_h3,
+  typography_style_h4,
+  typography_style_body,
+  "typography_style_body-bold": "Typography_typography_style_body-bold_7l1Pc",
+  "typography_style_sub-text": "Typography_typography_style_sub-text_7l1Pc",
+  typography_style_code
+};
+export {
+  classes as default,
+  hidden,
+  typography_style_body,
+  typography_style_code,
+  typography_style_h1,
+  typography_style_h2,
+  typography_style_h3,
+  typography_style_h4
+};
+//# sourceMappingURL=Typography.module.scss.es.js.map

package/dist/components/Typography/Typography.module.scss.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.module.scss.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/_BaseStyling_/BaseStyling.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),o=require("./buttonBaseStyling.cjs.js");exports.BaseStyling=({children:e,properties:l={}})=>{const a={colorPrimary50:"#E6E7F4",colorPrimary100:"#CDD0EA",colorPrimary300:"#6871BF",colorPrimary500:"#041295",colorPrimary600:"#030F77",colorPrimary700:"#020B59",colorPrimary900:"#01041E",colorBlueGrey25:"#F7F7F9",colorBlueGrey50:"#EEEFF3",colorBlueGrey100:"#DEDEE6",colorBlueGrey200:"#BCBECE",colorBlueGrey300:"#9A9DB5",colorBlueGrey400:"#797D9C",colorBlueGrey500:"#5D607E",colorBlueGrey700:"#383A4B",colorBlueGrey800:"#252733",colorBlueGrey900:"#131319",colorGreen50:"#E8F3ED",colorGreen100:"#D1E6DA",colorGreen200:"#A2CDB4",colorGreen500:"#178244",colorGreen600:"#126836",colorGreen700:"#0E4E29",colorOrange50:"#FCF2E6",colorOrange100:"#FFE0B2",colorOrange500:"#E07900",colorOrange600:"#B36100",colorOrange700:"#864900",colorRed50:"#FCE9E6",colorRed100:"#FFCDD2",colorRed200:"#F3A599",colorRed500:"#E01E00",colorRed600:"#B31800",colorRed700:"#861200",colorRed900:"#2D0600",colorBlack100:"#000000",colorBlack50:"rgba(0, 0, 0, 0.5)",colorBlack20:"rgba(0, 0, 0, 0.2)",colorBlack10:"rgba(0, 0, 0, 0.1)",colorWhite:"#FFFFFF",colorFocus:"var(--color-primary300)",colorPrimary:"var(--color-primary500)",colorSuccess:"var(--color-green500)",colorWarning:"var(--color-orange500)",colorDanger:"var(--color-red500)",defaultPressedColor:"var(--color-blue-grey100)",defaultHoverColor:"var(--color-blue-grey25)",defaultLineHeight:"1.5",dataGridLineHeight:"1.25",defaultBorderRadius:"0.25rem",focusBorderRadius:"0.125rem",buttonBorderRadius:"0.125rem",buttonBorderWidth:"2px",buttonFontSize:"0.875rem",buttonBorderStyle:"solid",...o.defaultButtonColors,buttonFillTextColor:"var(--light)",buttonOutlineHoverTextColor:"var(--color-primary600)",checkboxUncheckedColor:"var(--color-blue-grey500)",checkboxUncheckedHoverColor:"var(--color-blue-grey50)",checkboxUncheckedPressedColor:"var(--default-pressed-color)",checkboxCheckedColor:"var(--color-primary)",checkboxCheckedHoverColor:"var(--color-primary600)",checkboxCheckedPressedColor:"var(--color-primary700)",radioHoverBackgroundColor:"var(--color-blue-grey50)",radioPressedBackgroundColor:"var(--default-pressed-color)",radioCheckedColor:"var(--color-primary)",radioHoverColor:"var(--color-primary600)",radioPressedColor:"var(--color-primary700)",inputBorderRadius:"2px",inputBorderWidth:"1px",inputBorderWidthFocus:"1px",inputBorderStyle:"solid",fileUploadBorderWidth:"1px",dragDropBorderStyle:"dashed",inputBorderColor:"var(--color-blue-grey500)",inputBackgroundColor:"var(--light)",inputHelperTextColor:"var(--color-blue-grey500)",inputHoverBackgroundColor:"var(--default-hover-color)",inputDisabledBackgroundColor:"var(--input-hover-background-color)",inputFontSize:"0.875rem",dragBorderStyle:"solid",modalTitleColor:"var(--font-color-h4)",modalShadowColor:"rgba(0, 0, 0, 0.16)",modalBackgroundColor:"var(--light)",modalBackdropColor:"var(--default)",modalContentFontSize:"0.875rem",sideSheetShadowColorOne:"#01053214",sideSheetShadowColorTwo:"#0105320a",skeletonBackgroundColor:"var(--disabled)",skeletonAnimationColorRgb:"255, 255, 255",alertFontSize:"0.875rem",alertTextColor:"var(--default)",alertTextInvertedColor:"var(--color-blue-grey25)",alertNeutralBackgroundColor:"var(--color-blue-grey50)",alertNeutralInvertedColor:"var(--color-blue-grey500)",alertInfoBackgroundColor:"var(--color-primary50)",alertInfoInvertedColor:"var(--color-primary500)",alertSuccessBackgroundColor:"var(--color-green50)",alertSuccessInvertedColor:"var(--color-green500)",alertErrorBackgroundColor:"var(--color-red50)",alertErrorInvertedColor:"var(--color-red500)",alertWarningBackgroundColor:"var(--color-orange50)",alertWarningInvertedColor:"var(--color-orange600)",alertBorderWidth:"4px",alertBorderRadius:"2px",stepperWaitingColor:"var(--color-blue-grey200)",stepperWaitingHoverColor:"var(--color-blue-grey300)",stepperWaitingActiveColor:"var(--color-blue-grey400)",stepperWaitingDisabledColor:"var(--color-blue-grey100)",stepperCurrentColor:"var(--color-primary500)",stepperCurrentHoverColor:"var(--color-primary600)",stepperCurrentActiveColor:"var(--color-primary700)",stepperCurrentDisabledColor:"var(--color-primary100)",stepperDoneColor:"var(--color-green500)",stepperDoneHoverColor:"var(--color-green600)",stepperDoneActiveColor:"var(--color-green700)",stepperDoneDisabledColor:"var(--color-green200)",stepperErrorColor:"var(--color-red500)",stepperErrorHoverColor:"var(--color-red600)",stepperErrorActiveColor:"var(--color-red700)",stepperErrorDisabledColor:"var(--color-red200)",stepperDefaultTextColor:"var(--color-white)",stepperLineColor:"var(--color-blue-grey300)",stepperLineBoldColor:"var(--color-blue-grey700)",stepperLineDisabledColor:"var(--color-blue-grey100)",stepperLineBoldDisabledColor:"var(--color-blue-grey300)",stepperLabelColor:"var(--color-blue-grey900)",stepperCaptionColor:"var(--color-blue-grey500)",stepperCaptionErrorColor:"var(--color-red500)",stepperLabelDisabledColor:"var(--color-blue-grey400)",stepperCaptionDisabledColor:"var(--color-blue-grey400)",stepperCaptionErrorDisabledColor:"var(--color-red200)",bannerBorderRadius:"2px",bannerBorderWidth:"4px",dataGridRowBackgroundColor:"transparent",dataGridRowHoverBackgroundColor:"var(--default-hover-color)",progressBarBackgroundColor:"var(--disabled)",tabsBackgroundColor:"var(--light)",tabActiveBorderHeight:"0.25rem",tabActiveBorderColor:"var(--color-primary)",tabActiveTextColor:"var(--color-primary)",tablistBorderWidth:"0.0625rem",tablistBorderStyle:"solid",tablistBorderColor:"var(--color-blue-grey100)",tabTextColor:"var(--color-blue-grey900)",tabHoverColor:"var(--default-hover-color)",tabPressedColor:"var(--default-pressed-color)",toggleBackgroundColor:"var(--color-blue-grey100)",tooltipBackgroundColor:"var(--default)",contextMenuHoverColor:"var(--default-hover-color)",contextMenuActiveColor:"var(--color-primary)",contextMenuPressedColor:"var(--default-pressed-color)",contextMenuFontSize:"0.875rem",linkFontSize:"var(--font-size)",linkPrimaryDefaultColor:"var(--color-primary)",linkPrimaryVisitedColor:"var(--button-primary-pressed-color)",linkSuccessDefaultColor:"var(--color-success)",linkSuccessVisitedColor:"var(--button-success-pressed-color)",linkDangerDefaultColor:"var(--color-danger)",linkDangerVisitedColor:"var(--button-danger-pressed-color)",linkWarningDefaultColor:"var(--color-warning)",linkWarningVisitedColor:"var(--button-warning-pressed-color)",leftNavItemActiveRibbonColor:"var(--color-primary)",leftNavItemActiveBackgroundColor:"var(--color-primary50)",default:"var(--color-blue-grey900)",success:"var(--color-green500)",error:"var(--color-red500)",info:"var(--color-primary500)",disabled:"var(--color-blue-grey100)",greyedOut:"var(--color-blue-grey400)",lightGreyBorder:"var(--color-blue-grey100)",warning:"var(--color-orange500)",light:"var(--color-white)",fontFamily:"Roboto, sans-serif",fontFamilyCode:"'Roboto Mono', monospace",fontSizeFormLabel:"0.875rem",fontSize:"1rem",fontColorBody:"var(--default)",fontSizeH1:"2.5rem",fontColorH1:"var(--default)",fontSizeH2:"1.625rem",fontColorH2:"var(--default)",fontSizeH3:"1.5rem",fontColorH3:"var(--default)",fontSizeH4:"1.25rem",fontColorH4:"var(--default)",fontSizeSub:"0.75rem",fontColorSub:"var(--default)",fontSizeCode:"1rem",fontColorCode:"var(--default)",fontSizeSmall:"0.625rem",fontSizeBig:"1.25rem",readOnlyBorderColor:"var(--color-blue-grey100)",readOnlyTextColor:"var(--color-blue-grey900)",formControlFontSize:"0.875rem",fontSizeDataGrid:"0.875rem",iconFontBig:"1.125rem",tooltipIndex:"12"},[t,c]=r.useState(!0),n=r.useRef(null),i=r=>{for(const[o,e]of Object.entries(r)){const r=o.replace(/([A-Z])/g,(r=>`-${r.toLowerCase()}`));n.current.style.setProperty(`--${r}`,e)}};return r.useEffect((()=>{if(0!==Object.keys(l).length&&n.current){const r={...a,...l};i(r)}else n.current&&i(a);c(!1)}),[l,n.current]),r.createElement("div",{className:"basestyling-wrapper",ref:n},t?null:e)};
+//# sourceMappingURL=BaseStyling.cjs.js.map

package/dist/components/_BaseStyling_/BaseStyling.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseStyling.cjs.js","sources":["../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\nimport { ButtonColorProps, defaultButtonColors } from \"./buttonBaseStyling\";\n\nexport interface CSSProperties extends ButtonColorProps {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorPrimary50?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen50?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorOrange50?: string;\n  colorOrange100?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed50?: string;\n  colorRed100?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorRed900?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack50?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  dataGridLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  /**@deprecated*/\n  buttonOutlineHoverTextColor?: string;\n  buttonFillTextColor?: string;\n  checkboxUncheckedColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioCheckedColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  inputFontSize?: string;\n  dragBorderStyle?: string;\n  modalTitleColor?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  modalContentFontSize?: string;\n  sideSheetShadowColorOne?: string;\n  sideSheetShadowColorTwo?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n\n  alertFontSize?: string;\n  alertTextColor?: string;\n  alertTextInvertedColor?: string;\n  alertNeutralBackgroundColor?: string;\n  alertInfoBackgroundColor?: string;\n  alertSuccessBackgroundColor?: string;\n  alertErrorBackgroundColor?: string;\n  alertWarningBackgroundColor?: string;\n  alertNeutralInvertedColor?: string;\n  alertInfoInvertedColor?: string;\n  alertSuccessInvertedColor?: string;\n  alertErrorInvertedColor?: string;\n  alertWarningInvertedColor?: string;\n  alertBorderWidth?: string;\n  alertBorderRadius?: string;\n\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n\n  contextMenuHoverColor?: string;\n  contextMenuActiveColor?: string;\n  contextMenuPressedColor?: string;\n  contextMenuFontSize?: string;\n\n  linkFontSize?: string;\n  linkPrimaryDefaultColor?: string;\n  linkPrimaryVisitedColor?: string;\n  linkSuccessDefaultColor?: string;\n  linkSuccessVisitedColor?: string;\n  linkDangerDefaultColor?: string;\n  linkDangerVisitedColor?: string;\n  linkWarningDefaultColor?: string;\n  linkWarningVisitedColor?: string;\n\n  leftNavItemActiveRibbonColor?: string;\n  leftNavItemActiveBackgroundColor?: string;\n\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontColorBody?: string;\n  fontSizeH1?: string;\n  fontColorH1?: string;\n  fontSizeH2?: string;\n  fontColorH2?: string;\n  fontSizeH3?: string;\n  fontColorH3?: string;\n  fontSizeH4?: string;\n  fontColorH4?: string;\n  fontSizeSub?: string;\n  fontColorSub?: string;\n  fontSizeCode?: string;\n  fontColorCode?: string;\n  fontSizeSmall?: string;\n  fontSizeBig?: string;\n\n  formControlFontSize?: string;\n  fileUploadBorderWidth?: string;\n  dragDropBorderStyle?: string;\n  fontSizeDataGrid?: string;\n  readOnlyBorderColor?: string;\n  readOnlyTextColor?: string;\n  iconFontBig?: string;\n  tooltipIndex?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary50: \"#E6E7F4\",\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen50: \"#E8F3ED\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorOrange50: \"#FCF2E6\",\n    colorOrange100: \"#FFE0B2\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed50: \"#FCE9E6\",\n    colorRed100: \"#FFCDD2\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorRed900: \"#2D0600\",\n    colorBlack100: \"#000000\",\n    colorBlack50: \"rgba(0, 0, 0, 0.5)\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSuccess: \"var(--color-green500)\",\n    colorWarning: \"var(--color-orange500)\",\n    colorDanger: \"var(--color-red500)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\",\n    dataGridLineHeight: \"1.25\",\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"0.125rem\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"0.875rem\",\n    buttonBorderStyle: \"solid\",\n    ...defaultButtonColors,\n    buttonFillTextColor: \"var(--light)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\", //TODO: to be removed, it's not used anywhere within component library\n    checkboxUncheckedColor: \"var(--color-blue-grey500)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedColor: \"var(--color-primary)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioCheckedColor: \"var(--color-primary)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    fileUploadBorderWidth: \"1px\",\n    dragDropBorderStyle: \"dashed\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    inputFontSize: \"0.875rem\",\n    dragBorderStyle: \"solid\",\n    modalTitleColor: \"var(--font-color-h4)\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    modalContentFontSize: \"0.875rem\",\n    sideSheetShadowColorOne: \"#01053214\",\n    sideSheetShadowColorTwo: \"#0105320a\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n\n    alertFontSize: \"0.875rem\",\n    alertTextColor: \"var(--default)\",\n    alertTextInvertedColor: \"var(--color-blue-grey25)\",\n\n    alertNeutralBackgroundColor: \"var(--color-blue-grey50)\",\n    alertNeutralInvertedColor: \"var(--color-blue-grey500)\",\n    alertInfoBackgroundColor: \"var(--color-primary50)\",\n    alertInfoInvertedColor: \"var(--color-primary500)\",\n    alertSuccessBackgroundColor: \"var(--color-green50)\",\n    alertSuccessInvertedColor: \"var(--color-green500)\",\n    alertErrorBackgroundColor: \"var(--color-red50)\",\n    alertErrorInvertedColor: \"var(--color-red500)\",\n    alertWarningBackgroundColor: \"var(--color-orange50)\",\n    alertWarningInvertedColor: \"var(--color-orange600)\",\n    alertBorderWidth: \"4px\",\n    alertBorderRadius: \"2px\",\n\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuActiveColor: \"var(--color-primary)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    contextMenuFontSize: \"0.875rem\",\n\n    linkFontSize: \"var(--font-size)\",\n    linkPrimaryDefaultColor: \"var(--color-primary)\",\n    linkPrimaryVisitedColor: \"var(--button-primary-pressed-color)\",\n    linkSuccessDefaultColor: \"var(--color-success)\",\n    linkSuccessVisitedColor: \"var(--button-success-pressed-color)\",\n    linkDangerDefaultColor: \"var(--color-danger)\",\n    linkDangerVisitedColor: \"var(--button-danger-pressed-color)\",\n    linkWarningDefaultColor: \"var(--color-warning)\",\n    linkWarningVisitedColor: \"var(--button-warning-pressed-color)\",\n\n    leftNavItemActiveRibbonColor: \"var(--color-primary)\",\n    leftNavItemActiveBackgroundColor: \"var(--color-primary50)\",\n\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\",\n    fontSize: \"1rem\",\n    fontColorBody: \"var(--default)\",\n    fontSizeH1: \"2.5rem\",\n    fontColorH1: \"var(--default)\",\n    fontSizeH2: \"1.625rem\",\n    fontColorH2: \"var(--default)\",\n    fontSizeH3: \"1.5rem\",\n    fontColorH3: \"var(--default)\",\n    fontSizeH4: \"1.25rem\",\n    fontColorH4: \"var(--default)\",\n    fontSizeSub: \"0.75rem\",\n    fontColorSub: \"var(--default)\",\n    fontSizeCode: \"1rem\",\n    fontColorCode: \"var(--default)\",\n    fontSizeSmall: \"0.625rem\",\n    fontSizeBig: \"1.25rem\",\n\n    readOnlyBorderColor: \"var(--color-blue-grey100)\",\n    readOnlyTextColor: \"var(--color-blue-grey900)\",\n    formControlFontSize: \"0.875rem\",\n    fontSizeDataGrid: \"0.875rem\",\n    iconFontBig: \"1.125rem\",\n    tooltipIndex: \"12\"\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":["children","properties","defaultProperties","colorPrimary50","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorBlueGrey25","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen50","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorOrange50","colorOrange100","colorOrange500","colorOrange600","colorOrange700","colorRed50","colorRed100","colorRed200","colorRed500","colorRed600","colorRed700","colorRed900","colorBlack100","colorBlack50","colorBlack20","colorBlack10","colorWhite","colorFocus","colorPrimary","colorSuccess","colorWarning","colorDanger","defaultPressedColor","defaultHoverColor","defaultLineHeight","dataGridLineHeight","defaultBorderRadius","focusBorderRadius","buttonBorderRadius","buttonBorderWidth","buttonFontSize","buttonBorderStyle","defaultButtonColors","buttonFillTextColor","buttonOutlineHoverTextColor","checkboxUncheckedColor","checkboxUncheckedHoverColor","checkboxUncheckedPressedColor","checkboxCheckedColor","checkboxCheckedHoverColor","checkboxCheckedPressedColor","radioHoverBackgroundColor","radioPressedBackgroundColor","radioCheckedColor","radioHoverColor","radioPressedColor","inputBorderRadius","inputBorderWidth","inputBorderWidthFocus","inputBorderStyle","fileUploadBorderWidth","dragDropBorderStyle","inputBorderColor","inputBackgroundColor","inputHelperTextColor","inputHoverBackgroundColor","inputDisabledBackgroundColor","inputFontSize","dragBorderStyle","modalTitleColor","modalShadowColor","modalBackgroundColor","modalBackdropColor","modalContentFontSize","sideSheetShadowColorOne","sideSheetShadowColorTwo","skeletonBackgroundColor","skeletonAnimationColorRgb","alertFontSize","alertTextColor","alertTextInvertedColor","alertNeutralBackgroundColor","alertNeutralInvertedColor","alertInfoBackgroundColor","alertInfoInvertedColor","alertSuccessBackgroundColor","alertSuccessInvertedColor","alertErrorBackgroundColor","alertErrorInvertedColor","alertWarningBackgroundColor","alertWarningInvertedColor","alertBorderWidth","alertBorderRadius","stepperWaitingColor","stepperWaitingHoverColor","stepperWaitingActiveColor","stepperWaitingDisabledColor","stepperCurrentColor","stepperCurrentHoverColor","stepperCurrentActiveColor","stepperCurrentDisabledColor","stepperDoneColor","stepperDoneHoverColor","stepperDoneActiveColor","stepperDoneDisabledColor","stepperErrorColor","stepperErrorHoverColor","stepperErrorActiveColor","stepperErrorDisabledColor","stepperDefaultTextColor","stepperLineColor","stepperLineBoldColor","stepperLineDisabledColor","stepperLineBoldDisabledColor","stepperLabelColor","stepperCaptionColor","stepperCaptionErrorColor","stepperLabelDisabledColor","stepperCaptionDisabledColor","stepperCaptionErrorDisabledColor","bannerBorderRadius","bannerBorderWidth","dataGridRowBackgroundColor","dataGridRowHoverBackgroundColor","progressBarBackgroundColor","tabsBackgroundColor","tabActiveBorderHeight","tabActiveBorderColor","tabActiveTextColor","tablistBorderWidth","tablistBorderStyle","tablistBorderColor","tabTextColor","tabHoverColor","tabPressedColor","toggleBackgroundColor","tooltipBackgroundColor","contextMenuHoverColor","contextMenuActiveColor","contextMenuPressedColor","contextMenuFontSize","linkFontSize","linkPrimaryDefaultColor","linkPrimaryVisitedColor","linkSuccessDefaultColor","linkSuccessVisitedColor","linkDangerDefaultColor","linkDangerVisitedColor","linkWarningDefaultColor","linkWarningVisitedColor","leftNavItemActiveRibbonColor","leftNavItemActiveBackgroundColor","default","success","error","info","disabled","greyedOut","lightGreyBorder","warning","light","fontFamily","fontFamilyCode","fontSizeFormLabel","fontSize","fontColorBody","fontSizeH1","fontColorH1","fontSizeH2","fontColorH2","fontSizeH3","fontColorH3","fontSizeH4","fontColorH4","fontSizeSub","fontColorSub","fontSizeCode","fontColorCode","fontSizeSmall","fontSizeBig","readOnlyBorderColor","readOnlyTextColor","formControlFontSize","fontSizeDataGrid","iconFontBig","tooltipIndex","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","createElement","className","ref"],"mappings":"qKA+O2B,EAAGA,WAAUC,aAAa,OACnD,MAAMC,EAAmC,CACvCC,eAAgB,UAChBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,gBAAiB,UACjBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,iBAAkB,UAClBC,aAAc,UACdC,cAAe,UACfC,cAAe,UACfC,cAAe,UACfC,cAAe,UACfC,cAAe,UACfC,cAAe,UACfC,eAAgB,UAChBC,eAAgB,UAChBC,eAAgB,UAChBC,eAAgB,UAChBC,WAAY,UACZC,YAAa,UACbC,YAAa,UACbC,YAAa,UACbC,YAAa,UACbC,YAAa,UACbC,YAAa,UACbC,cAAe,UACfC,aAAc,qBACdC,aAAc,qBACdC,aAAc,qBACdC,WAAY,UACZC,WAAY,0BACZC,aAAc,0BACdC,aAAc,wBACdC,aAAc,yBACdC,YAAa,sBACbC,oBAAqB,4BACrBC,kBAAmB,2BACnBC,kBAAmB,MACnBC,mBAAoB,OACpBC,oBAAqB,UACrBC,kBAAmB,WACnBC,mBAAoB,WACpBC,kBAAmB,MACnBC,eAAgB,WAChBC,kBAAmB,WAChBC,EAAAA,oBACHC,oBAAqB,eACrBC,4BAA6B,0BAC7BC,uBAAwB,4BACxBC,4BAA6B,2BAC7BC,8BAA+B,+BAC/BC,qBAAsB,uBACtBC,0BAA2B,0BAC3BC,4BAA6B,0BAC7BC,0BAA2B,2BAC3BC,4BAA6B,+BAC7BC,kBAAmB,uBACnBC,gBAAiB,0BACjBC,kBAAmB,0BACnBC,kBAAmB,MACnBC,iBAAkB,MAClBC,sBAAuB,MACvBC,iBAAkB,QAClBC,sBAAuB,MACvBC,oBAAqB,SACrBC,iBAAkB,4BAClBC,qBAAsB,eACtBC,qBAAsB,4BACtBC,0BAA2B,6BAC3BC,6BAA8B,sCAC9BC,cAAe,WACfC,gBAAiB,QACjBC,gBAAiB,uBACjBC,iBAAkB,sBAClBC,qBAAsB,eACtBC,mBAAoB,iBACpBC,qBAAsB,WACtBC,wBAAyB,YACzBC,wBAAyB,YACzBC,wBAAyB,kBACzBC,0BAA2B,gBAE3BC,cAAe,WACfC,eAAgB,iBAChBC,uBAAwB,2BAExBC,4BAA6B,2BAC7BC,0BAA2B,4BAC3BC,yBAA0B,yBAC1BC,uBAAwB,0BACxBC,4BAA6B,uBAC7BC,0BAA2B,wBAC3BC,0BAA2B,qBAC3BC,wBAAyB,sBACzBC,4BAA6B,wBAC7BC,0BAA2B,yBAC3BC,iBAAkB,MAClBC,kBAAmB,MAEnBC,oBAAqB,4BACrBC,yBAA0B,4BAC1BC,0BAA2B,4BAC3BC,4BAA6B,4BAC7BC,oBAAqB,0BACrBC,yBAA0B,0BAC1BC,0BAA2B,0BAC3BC,4BAA6B,0BAC7BC,iBAAkB,wBAClBC,sBAAuB,wBACvBC,uBAAwB,wBACxBC,yBAA0B,wBAC1BC,kBAAmB,sBACnBC,uBAAwB,sBACxBC,wBAAyB,sBACzBC,0BAA2B,sBAC3BC,wBAAyB,qBACzBC,iBAAkB,4BAClBC,qBAAsB,4BACtBC,yBAA0B,4BAC1BC,6BAA8B,4BAC9BC,kBAAmB,4BACnBC,oBAAqB,4BACrBC,yBAA0B,sBAC1BC,0BAA2B,4BAC3BC,4BAA6B,4BAC7BC,iCAAkC,sBAClCC,mBAAoB,MACpBC,kBAAmB,MACnBC,2BAA4B,cAC5BC,gCAAiC,6BACjCC,2BAA4B,kBAC5BC,oBAAqB,eACrBC,sBAAuB,UACvBC,qBAAsB,uBACtBC,mBAAoB,uBACpBC,mBAAoB,YACpBC,mBAAoB,QACpBC,mBAAoB,4BACpBC,aAAc,4BACdC,cAAe,6BACfC,gBAAiB,+BACjBC,sBAAuB,4BACvBC,uBAAwB,iBAExBC,sBAAuB,6BACvBC,uBAAwB,uBACxBC,wBAAyB,+BACzBC,oBAAqB,WAErBC,aAAc,mBACdC,wBAAyB,uBACzBC,wBAAyB,sCACzBC,wBAAyB,uBACzBC,wBAAyB,sCACzBC,uBAAwB,sBACxBC,uBAAwB,qCACxBC,wBAAyB,uBACzBC,wBAAyB,sCAEzBC,6BAA8B,uBAC9BC,iCAAkC,yBAElCC,QAAS,4BACTC,QAAS,wBACTC,MAAO,sBACPC,KAAM,0BACNC,SAAU,4BACVC,UAAW,4BACXC,gBAAiB,4BACjBC,QAAS,yBACTC,MAAO,qBAEPC,WAAY,qBACZC,eAAgB,2BAChBC,kBAAmB,WACnBC,SAAU,OACVC,cAAe,iBACfC,WAAY,SACZC,YAAa,iBACbC,WAAY,WACZC,YAAa,iBACbC,WAAY,SACZC,YAAa,iBACbC,WAAY,UACZC,YAAa,iBACbC,YAAa,UACbC,aAAc,iBACdC,aAAc,OACdC,cAAe,iBACfC,cAAe,WACfC,YAAa,UAEbC,oBAAqB,4BACrBC,kBAAmB,4BACnBC,oBAAqB,WACrBC,iBAAkB,WAClBC,YAAa,WACbC,aAAc,OAITC,EAAWC,GAAgBC,EAAAA,UAAS,GACrCC,EAAqBC,SAAO,MAE5BC,EAAoBC,IACxB,IAAA,MAAYC,EAAKC,KAAUC,OAAOC,QAAQJ,GAAsB,CACxD,MAAAK,EAAwBJ,EAAIK,QAAQ,eAAmB,IAAIC,EAAIC,kBACpEX,EAAmBY,QAAyBC,MAAMC,YACjD,KAAKN,IACLH,EACF,GAeF,OAXFU,EAAAA,WAAU,KACR,GAAuC,IAAnCT,OAAOU,KAAK5N,GAAY6N,QAAgBjB,EAAmBY,QAAS,CACtE,MAAMM,EAAc,IAAK7N,KAAsBD,GAC/C8M,EAAiBgB,EAAW,MACnBlB,EAAmBY,SAC5BV,EAAiB7M,GAEnByM,GAAa,EAAK,GACjB,CAAC1M,EAAY4M,EAAmBY,UAGjCO,EAAAC,cAAC,OAAIC,UAAU,sBAAsBC,IAAKtB,GACtCH,EAAuB,KAAX1M,EAChB"}

package/dist/components/_BaseStyling_/BaseStyling.es.js

@@ -0,0 +1,231 @@
+import React, { useState, useRef, useEffect } from "react";
+import { defaultButtonColors } from "./buttonBaseStyling.es.js";
+const BaseStyling = ({ children, properties = {} }) => {
+  const defaultProperties = {
+    colorPrimary50: "#E6E7F4",
+    colorPrimary100: "#CDD0EA",
+    colorPrimary300: "#6871BF",
+    colorPrimary500: "#041295",
+    colorPrimary600: "#030F77",
+    colorPrimary700: "#020B59",
+    colorPrimary900: "#01041E",
+    colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey50: "#EEEFF3",
+    colorBlueGrey100: "#DEDEE6",
+    colorBlueGrey200: "#BCBECE",
+    colorBlueGrey300: "#9A9DB5",
+    colorBlueGrey400: "#797D9C",
+    colorBlueGrey500: "#5D607E",
+    colorBlueGrey700: "#383A4B",
+    colorBlueGrey800: "#252733",
+    colorBlueGrey900: "#131319",
+    colorGreen50: "#E8F3ED",
+    colorGreen100: "#D1E6DA",
+    colorGreen200: "#A2CDB4",
+    colorGreen500: "#178244",
+    colorGreen600: "#126836",
+    colorGreen700: "#0E4E29",
+    colorOrange50: "#FCF2E6",
+    colorOrange100: "#FFE0B2",
+    colorOrange500: "#E07900",
+    colorOrange600: "#B36100",
+    colorOrange700: "#864900",
+    colorRed50: "#FCE9E6",
+    colorRed100: "#FFCDD2",
+    colorRed200: "#F3A599",
+    colorRed500: "#E01E00",
+    colorRed600: "#B31800",
+    colorRed700: "#861200",
+    colorRed900: "#2D0600",
+    colorBlack100: "#000000",
+    colorBlack50: "rgba(0, 0, 0, 0.5)",
+    colorBlack20: "rgba(0, 0, 0, 0.2)",
+    colorBlack10: "rgba(0, 0, 0, 0.1)",
+    colorWhite: "#FFFFFF",
+    colorFocus: "var(--color-primary300)",
+    colorPrimary: "var(--color-primary500)",
+    colorSuccess: "var(--color-green500)",
+    colorWarning: "var(--color-orange500)",
+    colorDanger: "var(--color-red500)",
+    defaultPressedColor: "var(--color-blue-grey100)",
+    defaultHoverColor: "var(--color-blue-grey25)",
+    defaultLineHeight: "1.5",
+    dataGridLineHeight: "1.25",
+    defaultBorderRadius: "0.25rem",
+    focusBorderRadius: "0.125rem",
+    buttonBorderRadius: "0.125rem",
+    buttonBorderWidth: "2px",
+    buttonFontSize: "0.875rem",
+    buttonBorderStyle: "solid",
+    ...defaultButtonColors,
+    buttonFillTextColor: "var(--light)",
+    buttonOutlineHoverTextColor: "var(--color-primary600)",
+    //TODO: to be removed, it's not used anywhere within component library
+    checkboxUncheckedColor: "var(--color-blue-grey500)",
+    checkboxUncheckedHoverColor: "var(--color-blue-grey50)",
+    checkboxUncheckedPressedColor: "var(--default-pressed-color)",
+    checkboxCheckedColor: "var(--color-primary)",
+    checkboxCheckedHoverColor: "var(--color-primary600)",
+    checkboxCheckedPressedColor: "var(--color-primary700)",
+    radioHoverBackgroundColor: "var(--color-blue-grey50)",
+    radioPressedBackgroundColor: "var(--default-pressed-color)",
+    radioCheckedColor: "var(--color-primary)",
+    radioHoverColor: "var(--color-primary600)",
+    radioPressedColor: "var(--color-primary700)",
+    inputBorderRadius: "2px",
+    inputBorderWidth: "1px",
+    inputBorderWidthFocus: "1px",
+    inputBorderStyle: "solid",
+    fileUploadBorderWidth: "1px",
+    dragDropBorderStyle: "dashed",
+    inputBorderColor: "var(--color-blue-grey500)",
+    inputBackgroundColor: "var(--light)",
+    inputHelperTextColor: "var(--color-blue-grey500)",
+    inputHoverBackgroundColor: "var(--default-hover-color)",
+    inputDisabledBackgroundColor: "var(--input-hover-background-color)",
+    inputFontSize: "0.875rem",
+    dragBorderStyle: "solid",
+    modalTitleColor: "var(--font-color-h4)",
+    modalShadowColor: "rgba(0, 0, 0, 0.16)",
+    modalBackgroundColor: "var(--light)",
+    modalBackdropColor: "var(--default)",
+    modalContentFontSize: "0.875rem",
+    sideSheetShadowColorOne: "#01053214",
+    sideSheetShadowColorTwo: "#0105320a",
+    skeletonBackgroundColor: "var(--disabled)",
+    skeletonAnimationColorRgb: "255, 255, 255",
+    alertFontSize: "0.875rem",
+    alertTextColor: "var(--default)",
+    alertTextInvertedColor: "var(--color-blue-grey25)",
+    alertNeutralBackgroundColor: "var(--color-blue-grey50)",
+    alertNeutralInvertedColor: "var(--color-blue-grey500)",
+    alertInfoBackgroundColor: "var(--color-primary50)",
+    alertInfoInvertedColor: "var(--color-primary500)",
+    alertSuccessBackgroundColor: "var(--color-green50)",
+    alertSuccessInvertedColor: "var(--color-green500)",
+    alertErrorBackgroundColor: "var(--color-red50)",
+    alertErrorInvertedColor: "var(--color-red500)",
+    alertWarningBackgroundColor: "var(--color-orange50)",
+    alertWarningInvertedColor: "var(--color-orange600)",
+    alertBorderWidth: "4px",
+    alertBorderRadius: "2px",
+    stepperWaitingColor: "var(--color-blue-grey200)",
+    stepperWaitingHoverColor: "var(--color-blue-grey300)",
+    stepperWaitingActiveColor: "var(--color-blue-grey400)",
+    stepperWaitingDisabledColor: "var(--color-blue-grey100)",
+    stepperCurrentColor: "var(--color-primary500)",
+    stepperCurrentHoverColor: "var(--color-primary600)",
+    stepperCurrentActiveColor: "var(--color-primary700)",
+    stepperCurrentDisabledColor: "var(--color-primary100)",
+    stepperDoneColor: "var(--color-green500)",
+    stepperDoneHoverColor: "var(--color-green600)",
+    stepperDoneActiveColor: "var(--color-green700)",
+    stepperDoneDisabledColor: "var(--color-green200)",
+    stepperErrorColor: "var(--color-red500)",
+    stepperErrorHoverColor: "var(--color-red600)",
+    stepperErrorActiveColor: "var(--color-red700)",
+    stepperErrorDisabledColor: "var(--color-red200)",
+    stepperDefaultTextColor: "var(--color-white)",
+    stepperLineColor: "var(--color-blue-grey300)",
+    stepperLineBoldColor: "var(--color-blue-grey700)",
+    stepperLineDisabledColor: "var(--color-blue-grey100)",
+    stepperLineBoldDisabledColor: "var(--color-blue-grey300)",
+    stepperLabelColor: "var(--color-blue-grey900)",
+    stepperCaptionColor: "var(--color-blue-grey500)",
+    stepperCaptionErrorColor: "var(--color-red500)",
+    stepperLabelDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionDisabledColor: "var(--color-blue-grey400)",
+    stepperCaptionErrorDisabledColor: "var(--color-red200)",
+    bannerBorderRadius: "2px",
+    bannerBorderWidth: "4px",
+    dataGridRowBackgroundColor: "transparent",
+    dataGridRowHoverBackgroundColor: "var(--default-hover-color)",
+    progressBarBackgroundColor: "var(--disabled)",
+    tabsBackgroundColor: "var(--light)",
+    tabActiveBorderHeight: "0.25rem",
+    tabActiveBorderColor: "var(--color-primary)",
+    tabActiveTextColor: "var(--color-primary)",
+    tablistBorderWidth: "0.0625rem",
+    tablistBorderStyle: "solid",
+    tablistBorderColor: "var(--color-blue-grey100)",
+    tabTextColor: "var(--color-blue-grey900)",
+    tabHoverColor: "var(--default-hover-color)",
+    tabPressedColor: "var(--default-pressed-color)",
+    toggleBackgroundColor: "var(--color-blue-grey100)",
+    tooltipBackgroundColor: "var(--default)",
+    contextMenuHoverColor: "var(--default-hover-color)",
+    contextMenuActiveColor: "var(--color-primary)",
+    contextMenuPressedColor: "var(--default-pressed-color)",
+    contextMenuFontSize: "0.875rem",
+    linkFontSize: "var(--font-size)",
+    linkPrimaryDefaultColor: "var(--color-primary)",
+    linkPrimaryVisitedColor: "var(--button-primary-pressed-color)",
+    linkSuccessDefaultColor: "var(--color-success)",
+    linkSuccessVisitedColor: "var(--button-success-pressed-color)",
+    linkDangerDefaultColor: "var(--color-danger)",
+    linkDangerVisitedColor: "var(--button-danger-pressed-color)",
+    linkWarningDefaultColor: "var(--color-warning)",
+    linkWarningVisitedColor: "var(--button-warning-pressed-color)",
+    leftNavItemActiveRibbonColor: "var(--color-primary)",
+    leftNavItemActiveBackgroundColor: "var(--color-primary50)",
+    default: "var(--color-blue-grey900)",
+    success: "var(--color-green500)",
+    error: "var(--color-red500)",
+    info: "var(--color-primary500)",
+    disabled: "var(--color-blue-grey100)",
+    greyedOut: "var(--color-blue-grey400)",
+    lightGreyBorder: "var(--color-blue-grey100)",
+    warning: "var(--color-orange500)",
+    light: "var(--color-white)",
+    fontFamily: "Roboto, sans-serif",
+    fontFamilyCode: "'Roboto Mono', monospace",
+    fontSizeFormLabel: "0.875rem",
+    fontSize: "1rem",
+    fontColorBody: "var(--default)",
+    fontSizeH1: "2.5rem",
+    fontColorH1: "var(--default)",
+    fontSizeH2: "1.625rem",
+    fontColorH2: "var(--default)",
+    fontSizeH3: "1.5rem",
+    fontColorH3: "var(--default)",
+    fontSizeH4: "1.25rem",
+    fontColorH4: "var(--default)",
+    fontSizeSub: "0.75rem",
+    fontColorSub: "var(--default)",
+    fontSizeCode: "1rem",
+    fontColorCode: "var(--default)",
+    fontSizeSmall: "0.625rem",
+    fontSizeBig: "1.25rem",
+    readOnlyBorderColor: "var(--color-blue-grey100)",
+    readOnlyTextColor: "var(--color-blue-grey900)",
+    formControlFontSize: "0.875rem",
+    fontSizeDataGrid: "0.875rem",
+    iconFontBig: "1.125rem",
+    tooltipIndex: "12"
+  };
+  const [isLoading, setIsLoading] = useState(true);
+  const baseStylingWrapper = useRef(null);
+  const setCSSProperties = (CSSPropertiesObject) => {
+    for (const [key, value] of Object.entries(CSSPropertiesObject)) {
+      const formattedPropertyName = key.replace(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
+      baseStylingWrapper.current.style.setProperty(
+        `--${formattedPropertyName}`,
+        value
+      );
+    }
+  };
+  useEffect(() => {
+    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {
+      const mergedState = { ...defaultProperties, ...properties };
+      setCSSProperties(mergedState);
+    } else if (baseStylingWrapper.current) {
+      setCSSProperties(defaultProperties);
+    }
+    setIsLoading(false);
+  }, [properties, baseStylingWrapper.current]);
+  return /* @__PURE__ */ React.createElement("div", { className: "basestyling-wrapper", ref: baseStylingWrapper }, !isLoading ? children : null);
+};
+export {
+  BaseStyling
+};
+//# sourceMappingURL=BaseStyling.es.js.map

package/dist/components/_BaseStyling_/BaseStyling.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseStyling.es.js","sources":["../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\nimport { ButtonColorProps, defaultButtonColors } from \"./buttonBaseStyling\";\n\nexport interface CSSProperties extends ButtonColorProps {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorPrimary50?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen50?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorOrange50?: string;\n  colorOrange100?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed50?: string;\n  colorRed100?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorRed900?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack50?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  dataGridLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  /**@deprecated*/\n  buttonOutlineHoverTextColor?: string;\n  buttonFillTextColor?: string;\n  checkboxUncheckedColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioCheckedColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  inputFontSize?: string;\n  dragBorderStyle?: string;\n  modalTitleColor?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  modalContentFontSize?: string;\n  sideSheetShadowColorOne?: string;\n  sideSheetShadowColorTwo?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n\n  alertFontSize?: string;\n  alertTextColor?: string;\n  alertTextInvertedColor?: string;\n  alertNeutralBackgroundColor?: string;\n  alertInfoBackgroundColor?: string;\n  alertSuccessBackgroundColor?: string;\n  alertErrorBackgroundColor?: string;\n  alertWarningBackgroundColor?: string;\n  alertNeutralInvertedColor?: string;\n  alertInfoInvertedColor?: string;\n  alertSuccessInvertedColor?: string;\n  alertErrorInvertedColor?: string;\n  alertWarningInvertedColor?: string;\n  alertBorderWidth?: string;\n  alertBorderRadius?: string;\n\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n\n  contextMenuHoverColor?: string;\n  contextMenuActiveColor?: string;\n  contextMenuPressedColor?: string;\n  contextMenuFontSize?: string;\n\n  linkFontSize?: string;\n  linkPrimaryDefaultColor?: string;\n  linkPrimaryVisitedColor?: string;\n  linkSuccessDefaultColor?: string;\n  linkSuccessVisitedColor?: string;\n  linkDangerDefaultColor?: string;\n  linkDangerVisitedColor?: string;\n  linkWarningDefaultColor?: string;\n  linkWarningVisitedColor?: string;\n\n  leftNavItemActiveRibbonColor?: string;\n  leftNavItemActiveBackgroundColor?: string;\n\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontColorBody?: string;\n  fontSizeH1?: string;\n  fontColorH1?: string;\n  fontSizeH2?: string;\n  fontColorH2?: string;\n  fontSizeH3?: string;\n  fontColorH3?: string;\n  fontSizeH4?: string;\n  fontColorH4?: string;\n  fontSizeSub?: string;\n  fontColorSub?: string;\n  fontSizeCode?: string;\n  fontColorCode?: string;\n  fontSizeSmall?: string;\n  fontSizeBig?: string;\n\n  formControlFontSize?: string;\n  fileUploadBorderWidth?: string;\n  dragDropBorderStyle?: string;\n  fontSizeDataGrid?: string;\n  readOnlyBorderColor?: string;\n  readOnlyTextColor?: string;\n  iconFontBig?: string;\n  tooltipIndex?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary50: \"#E6E7F4\",\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen50: \"#E8F3ED\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorOrange50: \"#FCF2E6\",\n    colorOrange100: \"#FFE0B2\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed50: \"#FCE9E6\",\n    colorRed100: \"#FFCDD2\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorRed900: \"#2D0600\",\n    colorBlack100: \"#000000\",\n    colorBlack50: \"rgba(0, 0, 0, 0.5)\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSuccess: \"var(--color-green500)\",\n    colorWarning: \"var(--color-orange500)\",\n    colorDanger: \"var(--color-red500)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\",\n    dataGridLineHeight: \"1.25\",\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"0.125rem\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"0.875rem\",\n    buttonBorderStyle: \"solid\",\n    ...defaultButtonColors,\n    buttonFillTextColor: \"var(--light)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\", //TODO: to be removed, it's not used anywhere within component library\n    checkboxUncheckedColor: \"var(--color-blue-grey500)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedColor: \"var(--color-primary)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioCheckedColor: \"var(--color-primary)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    fileUploadBorderWidth: \"1px\",\n    dragDropBorderStyle: \"dashed\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    inputFontSize: \"0.875rem\",\n    dragBorderStyle: \"solid\",\n    modalTitleColor: \"var(--font-color-h4)\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    modalContentFontSize: \"0.875rem\",\n    sideSheetShadowColorOne: \"#01053214\",\n    sideSheetShadowColorTwo: \"#0105320a\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n\n    alertFontSize: \"0.875rem\",\n    alertTextColor: \"var(--default)\",\n    alertTextInvertedColor: \"var(--color-blue-grey25)\",\n\n    alertNeutralBackgroundColor: \"var(--color-blue-grey50)\",\n    alertNeutralInvertedColor: \"var(--color-blue-grey500)\",\n    alertInfoBackgroundColor: \"var(--color-primary50)\",\n    alertInfoInvertedColor: \"var(--color-primary500)\",\n    alertSuccessBackgroundColor: \"var(--color-green50)\",\n    alertSuccessInvertedColor: \"var(--color-green500)\",\n    alertErrorBackgroundColor: \"var(--color-red50)\",\n    alertErrorInvertedColor: \"var(--color-red500)\",\n    alertWarningBackgroundColor: \"var(--color-orange50)\",\n    alertWarningInvertedColor: \"var(--color-orange600)\",\n    alertBorderWidth: \"4px\",\n    alertBorderRadius: \"2px\",\n\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuActiveColor: \"var(--color-primary)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    contextMenuFontSize: \"0.875rem\",\n\n    linkFontSize: \"var(--font-size)\",\n    linkPrimaryDefaultColor: \"var(--color-primary)\",\n    linkPrimaryVisitedColor: \"var(--button-primary-pressed-color)\",\n    linkSuccessDefaultColor: \"var(--color-success)\",\n    linkSuccessVisitedColor: \"var(--button-success-pressed-color)\",\n    linkDangerDefaultColor: \"var(--color-danger)\",\n    linkDangerVisitedColor: \"var(--button-danger-pressed-color)\",\n    linkWarningDefaultColor: \"var(--color-warning)\",\n    linkWarningVisitedColor: \"var(--button-warning-pressed-color)\",\n\n    leftNavItemActiveRibbonColor: \"var(--color-primary)\",\n    leftNavItemActiveBackgroundColor: \"var(--color-primary50)\",\n\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\",\n    fontSize: \"1rem\",\n    fontColorBody: \"var(--default)\",\n    fontSizeH1: \"2.5rem\",\n    fontColorH1: \"var(--default)\",\n    fontSizeH2: \"1.625rem\",\n    fontColorH2: \"var(--default)\",\n    fontSizeH3: \"1.5rem\",\n    fontColorH3: \"var(--default)\",\n    fontSizeH4: \"1.25rem\",\n    fontColorH4: \"var(--default)\",\n    fontSizeSub: \"0.75rem\",\n    fontColorSub: \"var(--default)\",\n    fontSizeCode: \"1rem\",\n    fontColorCode: \"var(--default)\",\n    fontSizeSmall: \"0.625rem\",\n    fontSizeBig: \"1.25rem\",\n\n    readOnlyBorderColor: \"var(--color-blue-grey100)\",\n    readOnlyTextColor: \"var(--color-blue-grey900)\",\n    formControlFontSize: \"0.875rem\",\n    fontSizeDataGrid: \"0.875rem\",\n    iconFontBig: \"1.125rem\",\n    tooltipIndex: \"12\"\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}