@uva-glass/component-library 3.20.0 → 3.21.1

package/dist/assets/ControlsButton.css

@@ -0,0 +1 @@
+._controls-button_105b3_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_105b3_17{width:2.25rem}._controls-input_105b3_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_105b3_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_105b3_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_105b3_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_105b3_21:disabled+label,._controls-input_105b3_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_105b3_21:hover+label{background-color:var(--new-color-grey-300)}

package/dist/assets/PageOverlay.css

@@ -1 +1 @@
-._page-overlay__container_g079c_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_g079c_1{background:var(--new-color-uva-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_g079c_18{width:100vw}._page-overlay--with-gutters_g079c_22{max-width:87.5rem;width:100%}._page-overlay__content_g079c_27{background-color:var(--new-color-grey-300);display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__children_g079c_39{padding-bottom:1rem}._page-overlay__title-wrapper_g079c_43{position:relative}._page-overlay__title_g079c_43{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_g079c_54{background-color:var(--new-color-uva-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_g079c_54:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_g079c_80:before{opacity:1}._page-overlay__close_g079c_85{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_g079c_22{margin:0 .75rem}}
+._page-overlay__container_1wy1h_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_1wy1h_1{background:var(--new-color-uva-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_1wy1h_18{width:100vw}._page-overlay--with-gutters_1wy1h_22{max-width:87.5rem;width:100%}._page-overlay__content_1wy1h_27{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__content--grey_1wy1h_38{background-color:var(--new-color-grey-300)}._page-overlay__content--white_1wy1h_42{background-color:var(--new-color-uva-white)}._page-overlay__children_1wy1h_46{padding-bottom:1rem}._page-overlay__title-wrapper_1wy1h_50{position:relative}._page-overlay__title_1wy1h_50{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_1wy1h_61{background-color:var(--new-color-uva-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_1wy1h_61:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_1wy1h_87:before{opacity:1}._page-overlay__close_1wy1h_92{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_1wy1h_22{margin:0 .75rem}}

package/dist/assets/RadioTabSelector.css

@@ -0,0 +1 @@
+._radio-tab-selector-button-bar__container_a4wnc_1{display:flex;flex-wrap:wrap}._radio-tab-selector-button-bar__container--label-left_a4wnc_6{align-items:baseline;flex-direction:row;gap:1rem}._radio-tab-selector-button-bar__container--label-top_a4wnc_12{align-items:flex-start;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row-container_a4wnc_18{display:flex;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row_a4wnc_18{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._radio-tab-selector-button-bar__row--not-validated_a4wnc_35{border-color:var(--new-color-red-600)}

package/dist/components/Buttons/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
-import { fn as l } from "../../index-BCvy9BiK.js";
+import { fn as l } from "../../index-Dwqes6RH.js";
 import { Button as n } from "./Button.js";
 const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
   title: "Atoms/Buttons/Button",

package/dist/components/Buttons/LinkButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { fn as s } from "../../index-BCvy9BiK.js";
+import { fn as s } from "../../index-Dwqes6RH.js";
 import { BrowserRouter as c } from "react-router";
 import { LinkButton as n } from "./LinkButton.js";
 const d = `

package/dist/components/Buttons/MenuButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as s, Fragment as l } from "react/jsx-runtime";
-import { fn as c } from "../../index-BCvy9BiK.js";
+import { fn as c } from "../../index-Dwqes6RH.js";
 import { MenuButton as t } from "./MenuButton.js";
 const d = `
 // Has all LabelHTMLAttributes props available except "className" and "style" 

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { fn as e } from "../../index-BCvy9BiK.js";
+import { fn as e } from "../../index-Dwqes6RH.js";
 import { Checkbox as n } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
 import { Label as i } from "../Label/Label.js";

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -1,66 +1,69 @@
-import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { useRef as p } from "react";
-import { c as l } from "../../clsx-OuTLNxxd.js";
-import { CheckboxButton as w } from "../CheckboxButton/CheckboxButton.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { c as s } from "../../clsx-OuTLNxxd.js";
 import { Label as z } from "../Label/Label.js";
 import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
-import '../../assets/CheckboxButtonBar.css';const r = {
+import { ControlsButton as B } from "../ControlsButton/ControlsButton.js";
+import '../../assets/CheckboxButtonBar.css';const t = {
   "checkbox-button-bar__container": "_checkbox-button-bar__container_e14sz_1",
   "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_e14sz_6",
   "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_e14sz_12",
   "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_e14sz_18",
   "checkbox-button-bar__row": "_checkbox-button-bar__row_e14sz_18",
   "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_e14sz_35"
-}, S = ({
-  checkboxes: s,
-  defaultValues: t,
+}, F = ({
+  checkboxes: i,
+  defaultValues: n,
   label: a,
   labelPosition: h = "top",
-  required: k = !1,
-  notValidated: x = !1,
-  notValidatedText: b = "",
-  disableGroup: u = !1,
+  required: u = !1,
+  notValidated: k = !1,
+  notValidatedText: c = "",
+  disableGroup: x = !1,
   onSetValues: m
 }) => {
-  const e = p(t ? t.map(String) : []), d = (n, o) => {
-    n === null ? e.current = e.current.filter((_) => _ !== o) : e.current = [...e.current, o], m(e.current);
+  const [_, d] = w(n ? n.map(String) : []), f = (e) => {
+    let o = _;
+    o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], d(o), m(o);
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: l(
-        r["checkbox-button-bar__container"],
-        r[`checkbox-button-bar__container--label-${h}`]
+      className: s(
+        t["checkbox-button-bar__container"],
+        t[`checkbox-button-bar__container--label-${h}`]
       ),
       children: [
-        a && /* @__PURE__ */ c(z, { htmlFor: "", required: k, children: a }),
-        /* @__PURE__ */ i("div", { className: r["checkbox-button-bar__row-container"], children: [
-          /* @__PURE__ */ c(
+        a && /* @__PURE__ */ r(z, { htmlFor: "", required: u, children: a }),
+        /* @__PURE__ */ l("div", { className: t["checkbox-button-bar__row-container"], children: [
+          /* @__PURE__ */ r(
             "div",
             {
-              className: l(r["checkbox-button-bar__row"], {
-                [r["checkbox-button-bar__row--not-validated"]]: x || b
+              className: s(t["checkbox-button-bar__row"], {
+                [t["checkbox-button-bar__row--not-validated"]]: k || c
               }),
-              children: s.map(({ label: n, value: o, disabled: _ }) => /* @__PURE__ */ c(
-                w,
+              children: i.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
+                B,
                 {
-                  label: n,
+                  type: "checkbox",
+                  label: e,
+                  forceSquared: !0,
                   value: o,
-                  isChecked: t ? t.includes(o) : !1,
-                  disabled: _ || u,
-                  onSetValue: (f) => d(f, o)
+                  checked: _.includes(o),
+                  disabled: b || x,
+                  onSetValue: (p) => f(p.target.value)
                 },
                 `${o}`
               ))
             }
           ),
-          b !== "" && /* @__PURE__ */ c(v, { level: "error", feedback: b })
+          c !== "" && /* @__PURE__ */ r(v, { level: "error", feedback: c })
         ] })
       ]
     }
   );
 };
 export {
-  S as CheckboxButtonBar
+  F as CheckboxButtonBar
 };
 //# sourceMappingURL=CheckboxButtonBar.js.map

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\n\ntype CheckboxProps = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value */\n  checkboxes: CheckboxProps[];\n  //** array with values */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show missing in validation; otherwise, `false`. */\n  notValidated?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidated = false,\n  notValidatedText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n  const handleChange = (setValue: string | null, value: string) => {\n    if (setValue === null) {\n      values.current = values.current.filter((val) => val !== value);\n    } else {\n      values.current = [...values.current, value];\n    }\n    onSetValues(values.current);\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['checkbox-button-bar__row-container']}>\n        <div\n          className={clsx(styles['checkbox-button-bar__row'], {\n            [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n          })}\n        >\n          {checkboxes.map(({ label, value, disabled }) => (\n            <CheckboxButton\n              key={`${value}`}\n              label={label}\n              value={value}\n              isChecked={defaultValues ? defaultValues.includes(value) : false}\n              disabled={disabled || disableGroup}\n              onSetValue={(newValue) => handleChange(newValue, value)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBT,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAExEU,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAC5B;AAGE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCd,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAgB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAf,GACf,UACHF,GAAA;AAAA,QAED,gBAAAa,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGZ,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAO,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBAEC,OAAOnB;AAAAA,kBACP,OAAAW;AAAA,kBACA,WAAWZ,IAAgBA,EAAc,SAASY,CAAK,IAAI;AAAA,kBAC3D,UAAUO,KAAYb;AAAA,kBACtB,YAAY,CAACe,MAAaX,EAAaW,GAAUT,CAAK;AAAA,gBAAA;AAAA,gBALjD,GAAGA,CAAK;AAAA,cAOhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAY,EAACK,KAAY,OAAM,SAAQ,UAAUjB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value */\n  checkboxes: CheckboxProps[];\n  //** array with values */\n  defaultValues?: string[];\n  label?: string;\n  /** 'top' | 'left' */\n  labelPosition?: 'top' | 'left';\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show missing in validation; otherwise, `false`. */\n  notValidated?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  labelPosition = 'top',\n  required = false,\n  notValidated = false,\n  notValidatedText = '',\n  disableGroup = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (values.includes(value)) {\n      values = values.filter((val) => val !== value);\n    } else {\n      values = [...values, value];\n    }\n    setCurrentValues(values);\n    onSetValues(values);\n  };\n\n  return (\n    <div\n      className={clsx(\n        styles['checkbox-button-bar__container'],\n        styles[`checkbox-button-bar__container--label-${labelPosition}`]\n      )}\n    >\n      {label && (\n        <Label htmlFor=\"\" required={required}>\n          {label}\n        </Label>\n      )}\n      <div className={styles['checkbox-button-bar__row-container']}>\n        <div\n          className={clsx(styles['checkbox-button-bar__row'], {\n            [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n          })}\n        >\n          {checkboxes.map(({ label, value, disabled }) => (\n            <ControlsButton\n              type=\"checkbox\"\n              key={`${value}`}\n              label={label}\n              forceSquared={true}\n              value={value}\n              checked={currentValues.includes(value)}\n              disabled={disabled || disableGroup}\n              onSetValue={(event) => handleChange(event.target.value)}\n            />\n          ))}\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBV,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAErGW,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAET,IAAAK,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCf,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAiB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAhB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAc,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGb,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAQ,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,OAAOpB;AAAAA,kBACP,cAAc;AAAA,kBACd,OAAAW;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUQ,KAAYd;AAAA,kBACtB,YAAY,CAACgB,MAAUX,EAAaW,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBANjD,GAAGV,CAAK;AAAA,cAQhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAa,EAACK,KAAY,OAAM,SAAQ,UAAUlB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { fn as t } from "../../index-BCvy9BiK.js";
+import { fn as t } from "../../index-Dwqes6RH.js";
 import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
 const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
   title: "Molecules/CheckboxButtonBar",

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _, jsxs as A } from "react/jsx-runtime";
-import { fn as w } from "../../index-BCvy9BiK.js";
+import { fn as w } from "../../index-Dwqes6RH.js";
 import { s as g, j as V, V as j } from "../../index-DH9Vbk37.js";
 import { useState as D } from "react";
 import { CheckboxTree as O } from "./CheckboxTree.js";

package/dist/components/Chip/Chip.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { fn as t } from "../../index-BCvy9BiK.js";
+import { fn as t } from "../../index-Dwqes6RH.js";
 import { Chip as e } from "./Chip.js";
 const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
   title: "Atoms/Chip",

package/dist/components/ControlsButton/ControlsButton.d.ts

@@ -0,0 +1,18 @@
+import { ChangeEvent } from 'react';
+export interface ControlsButtonProps {
+    /** to set type/behaviour of input radio or checkbox */
+    type?: 'radio' | 'checkbox';
+    label: string;
+    value: string;
+    /** set if used as radiogroup */
+    name?: string;
+    /** `true` to set squared button; otherwise, `false`. The default is `false`. */
+    forceSquared?: boolean;
+    /** to set default status */
+    checked?: boolean;
+    /** `true` to disable the button; otherwise, `false`. The default is `false`. */
+    disabled?: boolean;
+    /** The callback function that is invoked when the radio button changes value. */
+    onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const ControlsButton: ({ type, label, value, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlsButton/ControlsButton.js

@@ -0,0 +1,46 @@
+import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useId as b } from "react";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import '../../assets/ControlsButton.css';const t = {
+  "controls-button": "_controls-button_105b3_1",
+  "controls-button--squared": "_controls-button--squared_105b3_17",
+  "controls-input": "_controls-input_105b3_21"
+}, g = ({
+  type: c = "checkbox",
+  label: o,
+  value: e,
+  name: s,
+  forceSquared: l = !1,
+  checked: u,
+  disabled: i,
+  onSetValue: a
+}) => {
+  const n = b();
+  return /* @__PURE__ */ m(p, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: c,
+        id: `${n}${o.replace(/\s+/g, "_")}`,
+        name: s || o.replace(/\s+/g, "_"),
+        disabled: i,
+        value: e,
+        checked: u,
+        onChange: (_) => a(_),
+        className: t["controls-input"]
+      }
+    ),
+    /* @__PURE__ */ r(
+      "label",
+      {
+        htmlFor: `${n}${o}`,
+        className: d(t["controls-button"], [l && t["controls-button--squared"]]),
+        children: o
+      }
+    )
+  ] });
+};
+export {
+  g as ControlsButton
+};
+//# sourceMappingURL=ControlsButton.js.map

package/dist/components/ControlsButton/ControlsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  label: string;\r\n  value: string;\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. */\r\n  forceSquared?: boolean;\r\n  /** to set default status */\r\n  checked?: boolean;\r\n  /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n  disabled?: boolean;\r\n  /** The callback function that is invoked when the radio button changes value. */\r\n  onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n  type = 'checkbox',\r\n  label,\r\n  value,\r\n  name,\r\n  forceSquared = false,\r\n  checked,\r\n  disabled,\r\n  onSetValue,\r\n}: ControlsButtonProps) => {\r\n  const idPrefix = useId();\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n        name={name ? name : label.replace(/\\s+/g, '_')}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={(event) => onSetValue(event)}\r\n        className={styles['controls-input']}\r\n      />\r\n      <label\r\n        htmlFor={`${idPrefix}${label}`}\r\n        className={clsx(styles['controls-button'], [forceSquared && styles['controls-button--squared']])}\r\n      >\r\n        {label}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"names":["ControlsButton","type","label","value","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx"],"mappings":";;;;;;;GAwBaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM;AAEvB,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAZ;AAAA,QACA,IAAI,GAAGQ,CAAQ,GAAGP,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAME,KAAcF,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAK;AAAA,QACA,OAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IACpC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGJ,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWc,EAAKD,EAAO,iBAAiB,GAAG,CAACV,KAAgBU,EAAO,0BAA0B,CAAC,CAAC;AAAA,QAE9F,UAAAb;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/ControlsButton/ControlsButton.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ControlsButtonProps } from './ControlsButton';
+declare const _default: Meta<ControlsButtonProps>;
+export default _default;
+export declare const ControlsButtonExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;

package/dist/components/ControlsButton/ControlsButton.stories.js

@@ -0,0 +1,45 @@
+import { jsx as e } from "react/jsx-runtime";
+import { fn as n } from "../../index-Dwqes6RH.js";
+import { ControlsButton as o } from "./ControlsButton.js";
+const r = "<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
+  title: "Atoms/ControlsButton",
+  component: o,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    value: {
+      control: "string"
+    },
+    forceSquared: {
+      control: "boolean"
+    },
+    isChecked: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    onSetValue: {
+      table: {
+        disable: !0
+      }
+    }
+  },
+  parameters: {
+    inspectComponent: o,
+    codeString: r
+  }
+}, l = (t) => /* @__PURE__ */ e(o, { ...t }), a = l.bind({});
+a.args = {
+  type: "checkbox",
+  label: "1.2",
+  value: "1.2",
+  forceSquared: !0,
+  onSetValue: n()
+};
+export {
+  a as ControlsButtonExample,
+  u as default
+};
+//# sourceMappingURL=ControlsButton.stories.js.map

package/dist/components/ControlsButton/ControlsButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n  '<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/ControlsButton',\r\n  component: ControlsButton,\r\n  argTypes: {\r\n    label: {\r\n      control: 'text',\r\n    },\r\n    value: {\r\n      control: 'string',\r\n    },\r\n    forceSquared: {\r\n      control: 'boolean',\r\n    },\r\n    isChecked: {\r\n      control: 'boolean',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n    },\r\n    onSetValue: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: ControlsButton,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n  type: 'checkbox',\r\n  label: '1.2',\r\n  value: '1.2',\r\n  forceSquared: true,\r\n  onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,qJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}

package/dist/components/ControlsButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ControlsButton';

package/dist/components/ControlsButton/index.js

@@ -0,0 +1,5 @@
+import { ControlsButton as r } from "./ControlsButton.js";
+export {
+  r as ControlsButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { fn as m } from "../../index-BCvy9BiK.js";
+import { fn as m } from "../../index-Dwqes6RH.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as i } from "../../index-BCvy9BiK.js";
+import { fn as i } from "../../index-Dwqes6RH.js";
 import { FormInput as a } from "./FormInput.js";
 import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
 const m = `

package/dist/components/IconButton/IconButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { fn as r } from "../../index-BCvy9BiK.js";
+import { fn as r } from "../../index-Dwqes6RH.js";
 import { IconButton as t } from "./IconButton.js";
 import { Icon as i } from "../Icon/Icon.js";
 const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>

package/dist/components/InputField/InputField.stories.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g } from "react";
-import { fn as l } from "../../index-BCvy9BiK.js";
+import { fn as l } from "../../index-Dwqes6RH.js";
 import { InputField as e } from "./InputField.js";
 import { Container as u } from "../../storyComponents/Container/Container.js";
 import { Icon as h } from "../Icon/Icon.js";

package/dist/components/ModalDialog/ModalDialog.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { ModalProvider as r } from "@react-aria/overlays";
-import { fn as i } from "../../index-BCvy9BiK.js";
+import { fn as i } from "../../index-Dwqes6RH.js";
 import { ModalDialog as t } from "./ModalDialog.js";
 import { Button as s } from "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { fn as d } from "../../index-BCvy9BiK.js";
+import { fn as d } from "../../index-Dwqes6RH.js";
 import { useState as p } from "react";
 import { M as e } from "../../TablePlugin-hxs9O_ox.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";

package/dist/components/MultiSelectBox/MultiSelectBox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { fn as o } from "../../index-BCvy9BiK.js";
+import { fn as o } from "../../index-Dwqes6RH.js";
 import { MultiSelectBox as e } from "./MultiSelectBox.js";
 const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", b = {
   title: "Organisms/MultiSelectBox",

package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { fn as a } from "../../index-BCvy9BiK.js";
+import { fn as a } from "../../index-Dwqes6RH.js";
 import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
 import { Container as l } from "../../storyComponents/Container/Container.js";
 const n = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {

package/dist/components/PageOverlay/PageOverlay.d.ts

@@ -22,6 +22,8 @@ export interface PageOverlayProps {
     headerContent?: ReactNode;
     /** The variant styling of the dialog. */
     variant?: 'full-screen' | 'with-gutters';
+    /** The content background color of the dialog. Default grey-300*/
+    contentBackgroundColor?: 'grey' | 'white';
 }
 /** Represents a component for a modal dialog. */
-export declare function PageOverlay({ buttons, children, isLoading, spinnerAriaValueText, closeButtonAriaValueText, isOpen, noValidate, onClose, onSubmit, title, headerContent, variant, }: PropsWithChildren<PageOverlayProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare function PageOverlay({ buttons, children, isLoading, spinnerAriaValueText, closeButtonAriaValueText, isOpen, noValidate, onClose, onSubmit, title, headerContent, variant, contentBackgroundColor, }: PropsWithChildren<PageOverlayProps>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/PageOverlay/PageOverlay.js

@@ -1,95 +1,102 @@
-import { jsx as o, Fragment as j, jsxs as _ } from "react/jsx-runtime";
+import { jsx as o, Fragment as $, jsxs as c } from "react/jsx-runtime";
 import { useDialog as A } from "@react-aria/dialog";
 import { FocusScope as C } from "@react-aria/focus";
 import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
 import { c as i } from "../../clsx-OuTLNxxd.js";
-import { useRef as d, useState as f, useEffect as $ } from "react";
-import { OverlayCloseButton as q } from "../OverlayCloseButton/OverlayCloseButton.js";
-import { Spinner as G } from "../Spinner/Spinner.js";
-import { Backdrop as J } from "../Backdrop/Backdrop.js";
+import { useRef as m, useState as d, useEffect as q } from "react";
+import { OverlayCloseButton as G } from "../OverlayCloseButton/OverlayCloseButton.js";
+import { Spinner as J } from "../Spinner/Spinner.js";
+import { Backdrop as O } from "../Backdrop/Backdrop.js";
 import '../../assets/PageOverlay.css';const e = {
-  "page-overlay__container": "_page-overlay__container_g079c_1",
-  "page-overlay": "_page-overlay_g079c_1",
-  "page-overlay--full-screen": "_page-overlay--full-screen_g079c_18",
-  "page-overlay--with-gutters": "_page-overlay--with-gutters_g079c_22",
-  "page-overlay__content": "_page-overlay__content_g079c_27",
-  "page-overlay__children": "_page-overlay__children_g079c_39",
-  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_g079c_43",
-  "page-overlay__title": "_page-overlay__title_g079c_43",
-  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_g079c_54",
-  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_g079c_80",
-  "page-overlay__close": "_page-overlay__close_g079c_85"
+  "page-overlay__container": "_page-overlay__container_1wy1h_1",
+  "page-overlay": "_page-overlay_1wy1h_1",
+  "page-overlay--full-screen": "_page-overlay--full-screen_1wy1h_18",
+  "page-overlay--with-gutters": "_page-overlay--with-gutters_1wy1h_22",
+  "page-overlay__content": "_page-overlay__content_1wy1h_27",
+  "page-overlay__content--grey": "_page-overlay__content--grey_1wy1h_38",
+  "page-overlay__content--white": "_page-overlay__content--white_1wy1h_42",
+  "page-overlay__children": "_page-overlay__children_1wy1h_46",
+  "page-overlay__title-wrapper": "_page-overlay__title-wrapper_1wy1h_50",
+  "page-overlay__title": "_page-overlay__title_1wy1h_50",
+  "page-overlay__buttons-bar": "_page-overlay__buttons-bar_1wy1h_61",
+  "page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_1wy1h_87",
+  "page-overlay__close": "_page-overlay__close_1wy1h_92"
 };
-function ae({
+function le({
   buttons: t,
-  children: h,
-  isLoading: b,
-  spinnerAriaValueText: w = "Loading",
+  children: f,
+  isLoading: w,
+  spinnerAriaValueText: b = "Loading",
   closeButtonAriaValueText: S = "Close",
   isOpen: a,
   noValidate: N = !1,
   onClose: p,
   onSubmit: P,
-  title: s,
-  headerContent: c,
-  variant: g = "full-screen"
+  title: _,
+  headerContent: n,
+  variant: y = "full-screen",
+  contentBackgroundColor: T = "grey"
 }) {
-  const n = d(null), v = d(null), [T, E] = f(!1), [x, L] = f(!1), { dialogProps: B, titleProps: F } = A({ role: "dialog" }, n), { modalProps: H } = K({ isDisabled: !a }), { overlayProps: k, underlayProps: z } = M({ isOpen: a, onClose: p }, n);
-  U({ isDisabled: !a }), $(() => {
-    const r = v.current;
+  const s = m(null), g = m(null), [E, x] = d(!1), [L, B] = d(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !a }), { overlayProps: z, underlayProps: D } = M({ isOpen: a, onClose: p }, s);
+  U({ isDisabled: !a }), q(() => {
+    const r = g.current;
     if (!r) return;
-    function u() {
-      const y = r.scrollHeight, m = r.clientHeight, R = r.scrollTop;
-      E(y > m), L(R + m >= y);
+    function v() {
+      const u = r.scrollHeight, h = r.clientHeight, j = r.scrollTop;
+      x(u > h), B(j + h >= u);
     }
     function l() {
-      u();
+      v();
     }
     r.addEventListener("scroll", l), window.addEventListener("resize", l);
-    const I = setTimeout(() => {
-      u();
+    const R = setTimeout(() => {
+      v();
     }, 0);
     return () => {
-      r.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(I);
+      r.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(R);
     };
-  }, [a, c]);
-  function D(r) {
+  }, [a, n]);
+  function I(r) {
     r.stopPropagation();
   }
-  return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(J, { ...z, children: b ? /* @__PURE__ */ o(G, { ariaValueText: w }) : /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
+  return a ? /* @__PURE__ */ o(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ o(O, { ...D, children: w ? /* @__PURE__ */ o(J, { ariaValueText: b }) : /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
     "div",
     {
-      ...B,
-      ...H,
+      ...F,
       ...k,
+      ...z,
       className: i(e["page-overlay"], {
-        [e[`page-overlay--${g}`]]: g
+        [e[`page-overlay--${y}`]]: y
       }),
-      onKeyUp: D,
+      onKeyUp: I,
       role: "presentation",
-      ref: n,
+      ref: s,
       children: [
-        (s || c) && /* @__PURE__ */ _("div", { className: e["page-overlay__title-wrapper"], children: [
-          s && /* @__PURE__ */ o("h1", { ...F, className: e["page-overlay__title"], children: s }),
-          c,
-          /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(q, { "aria-label": S, onClick: p }) })
+        (_ || n) && /* @__PURE__ */ c("div", { className: e["page-overlay__title-wrapper"], children: [
+          _ && /* @__PURE__ */ o("h1", { ...H, className: e["page-overlay__title"], children: _ }),
+          n,
+          /* @__PURE__ */ o("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ o(G, { "aria-label": S, onClick: p }) })
         ] }),
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ c(
           "form",
           {
-            className: i(e["page-overlay__content"], {
-              [e["page-overlay--content-with-buttons"]]: t
-            }),
+            className: i(
+              e["page-overlay__content"],
+              e[`page-overlay__content--${T}`],
+              {
+                [e["page-overlay--content-with-buttons"]]: t
+              }
+            ),
             onSubmit: P,
             noValidate: N,
-            ref: v,
+            ref: g,
             children: [
-              /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: h }),
+              /* @__PURE__ */ o("div", { className: e["page-overlay__children"], children: f }),
               t && /* @__PURE__ */ o(
                 "div",
                 {
                   className: i(e["page-overlay__buttons-bar"], {
-                    [e["page-overlay__buttons-bar--shadow"]]: T && !x
+                    [e["page-overlay__buttons-bar--shadow"]]: E && !L
                   }),
                   children: t
                 }
@@ -102,6 +109,6 @@ function ae({
   ) }) }) }) }) : null;
 }
 export {
-  ae as PageOverlay
+  le as PageOverlay
 };
 //# sourceMappingURL=PageOverlay.js.map