@uva-glass/component-library 3.55.1 → 3.55.2

package/dist/CheckboxButtonBar-CalU0IYK.js

@@ -0,0 +1,79 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { t } from "./Label-o0BcWTUS.js";
+import { t as n } from "./FeedbackBox-Bu7uB9DP.js";
+import { t as r } from "./ControlsButton-zemVxTlg.js";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import './assets/CheckboxButtonBar.css';//#region src/components/CheckboxButtonBar/CheckboxButtonBar.module.css
+var s = {
+	"checkbox-button-bar__container": "_checkbox-button-bar__container_1jark_1",
+	"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1jark_6",
+	"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1jark_12",
+	"checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1jark_18",
+	"checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_1jark_24",
+	"checkbox-button-bar__row": "_checkbox-button-bar__row_1jark_18",
+	"checkbox-button-bar__row--not-valid": "_checkbox-button-bar__row--not-valid_1jark_39",
+	"checkbox-button-bar__sub-text": "_checkbox-button-bar__sub-text_1jark_43"
+}, c = ({ checkboxes: c, defaultValues: l, label: u, subLabel: d = "", labelPosition: f = "top", required: p = !1, notValid: m = !1, notValidatedText: h = "", actAsRadioButtonBar: g = !1, footerText: _ = "", disableGroup: v = !1, segmented: y = !1, forceSquared: b = !1, onSetValues: x }) => {
+	let [S, C] = i(l && !g ? l.map(String) : l && g ? l.slice(0, 1) : []), w = (e) => {
+		let t = S;
+		g ? (C([e]), x([e])) : (t = t.includes(e) ? t.filter((t) => t !== e) : [...t, e], C(t), x(t));
+	};
+	return /* @__PURE__ */ o("div", {
+		className: e(s["checkbox-button-bar__container"], s[`checkbox-button-bar__container--label-${f}`]),
+		children: [
+			(u || d) && /* @__PURE__ */ o("div", { children: [u && /* @__PURE__ */ a(t, {
+				htmlFor: "",
+				required: p,
+				children: u
+			}), d && f === "top" && /* @__PURE__ */ a("div", {
+				className: s["checkbox-button-bar__sub-text"],
+				children: d
+			})] }),
+			/* @__PURE__ */ a("div", {
+				className: e(s["checkbox-button-bar__row-container"], { [s["checkbox-button-bar__row-container--segmented"]]: y }),
+				children: y ? c.map(({ label: t, value: n, prefix: i, tooltip: o, tooltipPosition: c, disabled: l }) => /* @__PURE__ */ a("div", {
+					className: e(s["checkbox-button-bar__row"], { [s["checkbox-button-bar__row--not-valid"]]: m || h }),
+					children: /* @__PURE__ */ a(r, {
+						type: g ? "radio" : "checkbox",
+						label: t,
+						prefix: i,
+						tooltip: o,
+						tooltipPosition: c,
+						forceSquared: b,
+						value: n,
+						checked: S.includes(n),
+						disabled: l || v,
+						onSetValue: (e) => w(e.target.value)
+					})
+				}, n)) : /* @__PURE__ */ a("div", {
+					className: e(s["checkbox-button-bar__row"], { [s["checkbox-button-bar__row--not-valid"]]: m || h }),
+					children: c.map(({ label: e, value: t, prefix: n, tooltip: i, tooltipPosition: o, disabled: s }) => /* @__PURE__ */ a(r, {
+						type: g ? "radio" : "checkbox",
+						label: e,
+						prefix: n,
+						tooltip: i,
+						tooltipPosition: o,
+						forceSquared: b,
+						value: t,
+						checked: S.includes(t),
+						disabled: s || v,
+						onSetValue: (e) => w(e.target.value)
+					}, t))
+				})
+			}),
+			_ && /* @__PURE__ */ a("div", {
+				className: s["checkbox-button-bar__sub-text"],
+				children: _
+			}),
+			h !== "" && /* @__PURE__ */ a(n, {
+				level: "error",
+				feedback: h
+			})
+		]
+	});
+};
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=CheckboxButtonBar-CalU0IYK.js.map

package/dist/CheckboxButtonBar-CalU0IYK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxButtonBar-CalU0IYK.js","names":[],"sources":["../src/components/CheckboxButtonBar/CheckboxButtonBar.module.css","../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":[".checkbox-button-bar__container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.checkbox-button-bar__container--label-left {\n  align-items: baseline;\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.checkbox-button-bar__container--label-top {\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-button-bar__row-container--segmented {\n  flex-direction: row;\n}\n\n.checkbox-button-bar__row {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-700);\n  border-radius: 0.5rem;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.checkbox-button-bar__row--not-valid {\n  border-color: var(--color-red-600);\n}\n\n.checkbox-button-bar__sub-text {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\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 | ReactNode;\n  value: string;\n  prefix?: string;\n  tooltip?: ReactNode;\n  tooltipPosition?: 'left' | 'center' | 'right';\n  disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n  /** array with objects with label, value, prefix and disabled*/\n  checkboxes: CheckboxProps[];\n  //** array with value(s) */\n  defaultValues?: string[];\n  label?: string;\n  /** optional sub-label text (only displayed when label is positioned 'top') */\n  subLabel?: 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 not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** error text to display under the bar */\n  notValidatedText?: string;\n  /** returns an array with only one value */\n  actAsRadioButtonBar?: boolean;\n  /** optional footer text */\n  footerText?: string;\n  /** disables all checkboxes in the bar */\n  disableGroup?: boolean;\n  /** `true` to sepearte each button in their own bordered container */\n  segmented?: boolean;\n  /** `true` sets forceSquared on all buttons */\n  forceSquared?: boolean;\n  onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n  checkboxes,\n  defaultValues,\n  label,\n  subLabel = '',\n  labelPosition = 'top',\n  required = false,\n  notValid = false,\n  notValidatedText = '',\n  actAsRadioButtonBar = false,\n  footerText = '',\n  disableGroup = false,\n  segmented = false,\n  forceSquared = false,\n  onSetValues,\n}: CheckboxButtonBarProps) => {\n  const [currentValues, setCurrentValues] = useState<string[]>(\n    defaultValues && !actAsRadioButtonBar\n      ? defaultValues.map(String)\n      : defaultValues && actAsRadioButtonBar\n        ? defaultValues.slice(0, 1)\n        : []\n  );\n\n  const handleChange = (value: string) => {\n    let values = currentValues;\n\n    if (actAsRadioButtonBar) {\n      setCurrentValues([value]);\n      onSetValues([value]);\n    } else {\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\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 || subLabel) && (\n        <div>\n          {label && (\n            <Label htmlFor=\"\" required={required}>\n              {label}\n            </Label>\n          )}\n\n          {subLabel && labelPosition === 'top' && (\n            <div className={styles['checkbox-button-bar__sub-text']}>{subLabel}</div>\n          )}\n        </div>\n      )}\n\n      <div\n        className={clsx(styles['checkbox-button-bar__row-container'], {\n          [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n        })}\n      >\n        {segmented ? (\n          checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n            <div\n              key={value}\n              className={clsx(styles['checkbox-button-bar__row'], {\n                [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n              })}\n            >\n              <ControlsButton\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            </div>\n          ))\n        ) : (\n          <div\n            className={clsx(styles['checkbox-button-bar__row'], {\n              [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n            })}\n          >\n            {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n              <ControlsButton\n                key={value}\n                type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n                label={label}\n                prefix={prefix}\n                tooltip={tooltip}\n                tooltipPosition={tooltipPosition}\n                forceSquared={forceSquared}\n                value={value}\n                checked={currentValues.includes(value)}\n                disabled={disabled || disableGroup}\n                onSetValue={(event) => handleChange(event.target.value)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {footerText && <div className={styles['checkbox-button-bar__sub-text']}>{footerText}</div>}\n      {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;GCiDa,KAAqB,EAChC,eACA,kBACA,UACA,cAAW,IACX,mBAAgB,OAChB,cAAW,IACX,cAAW,IACX,sBAAmB,IACnB,yBAAsB,IACtB,gBAAa,IACb,kBAAe,IACf,eAAY,IACZ,kBAAe,IACf,qBAC4B;CAC5B,IAAM,CAAC,GAAe,KAAoB,EACxC,KAAiB,CAAC,IACd,EAAc,IAAI,OAAO,GACzB,KAAiB,IACf,EAAc,MAAM,GAAG,EAAE,GACzB,EAAE,CACT,EAEK,KAAgB,MAAkB;EACtC,IAAI,IAAS;AAEb,EAAI,KACF,EAAiB,CAAC,EAAM,CAAC,EACzB,EAAY,CAAC,EAAM,CAAC,KAEpB,AAGE,IAHE,EAAO,SAAS,EAAM,GACf,EAAO,QAAQ,MAAQ,MAAQ,EAAM,GAErC,CAAC,GAAG,GAAQ,EAAM,EAE7B,EAAiB,EAAO,EACxB,EAAY,EAAO;;AAIvB,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,mCACP,EAAO,yCAAyC,KACjD;YAJH;IAMI,KAAS,MACT,kBAAC,OAAD,EAAA,UAAA,CACG,KACC,kBAAC,GAAD;IAAO,SAAQ;IAAa;cACzB;IACK,CAAA,EAGT,KAAY,MAAkB,SAC7B,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;IAAe,CAAA,CAEvE,EAAA,CAAA;GAGR,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,uCAAuC,GAC3D,EAAO,mDAAmD,GAC5D,CAAC;cAED,IACC,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBAChE,kBAAC,OAAD;KAEE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,GAC9D,CAAC;eAEF,kBAAC,GAAD;MACE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,EAAM;MACtC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,MAAM;MACvD,CAAA;KACE,EAjBC,EAiBD,CACN,GAEF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,6BAA6B,GACjD,EAAO,yCAAyC,KAAY,GAC9D,CAAC;eAED,EAAW,KAAK,EAAE,UAAO,UAAO,WAAQ,YAAS,oBAAiB,kBACjE,kBAAC,GAAD;MAEE,MAAM,IAAsB,UAAU;MAC/B;MACC;MACC;MACQ;MACH;MACP;MACP,SAAS,EAAc,SAAS,EAAM;MACtC,UAAU,KAAY;MACtB,aAAa,MAAU,EAAa,EAAM,OAAO,MAAM;MACvD,EAXK,EAWL,CACF;KACE,CAAA;IAEJ,CAAA;GAEL,KAAc,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAmC;IAAiB,CAAA;GACzF,MAAqB,MAAM,kBAAC,GAAD;IAAa,OAAM;IAAQ,UAAU;IAAoB,CAAA;GACjF"}

package/dist/Chip-DJHvFToV.js

@@ -0,0 +1,22 @@
+import { Icon as e } from "./components/Icon/Icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/Chip.css';var r = {
+	chip: "_chip_12dmi_1",
+	chip__label: "_chip__label_12dmi_25",
+	"chip__close-button": "_chip__close-button_12dmi_32"
+}, i = ({ label: i, onDelete: a }) => /* @__PURE__ */ n("button", {
+	className: r.chip,
+	onClick: () => a(i),
+	children: [/* @__PURE__ */ t("span", {
+		className: r.chip__label,
+		children: i
+	}), /* @__PURE__ */ t(e, {
+		name: "Cross",
+		size: 20,
+		className: r["chip__close-button"]
+	})]
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=Chip-DJHvFToV.js.map

package/dist/Chip-DJHvFToV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-DJHvFToV.js","names":[],"sources":["../src/components/Chip/Chip.module.css","../src/components/Chip/Chip.tsx"],"sourcesContent":[".chip {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-400);\n  border-radius: 1rem;\n  cursor: pointer;\n  display: grid;\n  font-family: inherit;\n  grid-template-columns: auto 1fr;\n  min-height: 2rem;\n  padding: 0 0 0 1rem;\n  user-select: none;\n  width: fit-content;\n}\n\n.chip:hover {\n  background-color: var(--color-grey-400);\n}\n\n.chip:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.chip__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.chip__close-button {\n  margin: 0 0.5rem;\n}\n","import styles from './Chip.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface ChipProps {\n  /** Text on the chip */\n  label: string;\n  /** Function to remove chip from chip-list on label-text*/\n  onDelete: (label: string) => void;\n}\n\nexport const Chip = ({ label, onDelete }: ChipProps) => {\n  return (\n    <button className={styles['chip']} onClick={() => onDelete(label)}>\n      <span className={styles['chip__label']}>{label}</span>\n      <Icon name=\"Cross\" size={20} className={styles['chip__close-button']} />\n    </button>\n  );\n};\n"],"mappings":";;;;;;GCWa,KAAQ,EAAE,UAAO,kBAE1B,kBAAC,UAAD;CAAQ,WAAW,EAAO;CAAS,eAAe,EAAS,EAAM;WAAjE,CACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAiB;EAAa,CAAA,EACtD,kBAAC,GAAD;EAAM,MAAK;EAAQ,MAAM;EAAI,WAAW,EAAO;EAAyB,CAAA,CACjE"}

package/dist/ClipboardButton-geHjMl2J.js

@@ -0,0 +1,43 @@
+import { useState as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/ClipboardButton.css';//#region src/storyComponents/ClipboardButton/ClipboardButton.module.css
+var n = { "clipboard-button": "_clipboard-button_1ihmb_1" }, r = 2e3, i = ({ text: i }) => {
+	let [a, o] = e(!1);
+	return /* @__PURE__ */ t("div", {
+		style: { position: "relative" },
+		children: /* @__PURE__ */ t("button", {
+			onClick: () => {
+				a || navigator.clipboard.writeText(i).then(() => {
+					o(!0), setTimeout(() => {
+						o(!1);
+					}, r);
+				});
+			},
+			className: n["clipboard-button"],
+			"aria-label": `Copy ${i}`,
+			children: /* @__PURE__ */ t("svg", {
+				width: "15",
+				height: "15",
+				viewBox: "0 0 15 15",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				className: "h-3 w-3",
+				children: a ? /* @__PURE__ */ t("path", {
+					d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+					fill: "currentColor",
+					fillRule: "evenodd",
+					clipRule: "evenodd"
+				}) : /* @__PURE__ */ t("path", {
+					d: "M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z",
+					fill: "currentColor",
+					fillRule: "evenodd",
+					clipRule: "evenodd"
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=ClipboardButton-geHjMl2J.js.map

package/dist/ClipboardButton-geHjMl2J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipboardButton-geHjMl2J.js","names":[],"sources":["../src/storyComponents/ClipboardButton/ClipboardButton.module.css","../src/storyComponents/ClipboardButton/ClipboardButton.tsx"],"sourcesContent":[".clipboard-button {\n  align-items: center;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: #000;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 1.5rem;\n  justify-content: center;\n  outline: none;\n  transition: all 0.15s;\n  width: 1.5rem;\n}\n\n.clipboard-button:focus-visible {\n  box-shadow: 0 0 0 0.125rem #000;\n  outline: 2px solid #000;\n}\n\n.clipboard-button:hover {\n  color: #bd0032;\n}\n\n.clipboard-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { useState } from 'react';\n\nimport styles from './ClipboardButton.module.css';\n\ninterface ClipboardButtonProps {\n  text: string;\n}\n\nconst DELAY = 2000;\n\nexport const ClipboardButton = ({ text }: ClipboardButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopyClick = () => {\n    if (!isCopied) {\n      void navigator.clipboard.writeText(text).then(() => {\n        setIsCopied(true);\n        setTimeout(() => {\n          setIsCopied(false);\n        }, DELAY);\n      });\n    }\n  };\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <button onClick={handleCopyClick} className={styles['clipboard-button']} aria-label={`Copy ${text}`}>\n        <svg\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 15 15\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"h-3 w-3\"\n        >\n          {isCopied ? (\n            <path\n              d=\"M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          ) : (\n            <path\n              d=\"M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n            />\n          )}\n        </svg>\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;6DCQM,IAAQ,KAED,KAAmB,EAAE,cAAiC;CACjE,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;AAa/C,QACE,kBAAC,OAAD;EAAK,OAAO,EAAE,UAAU,YAAY;YAClC,kBAAC,UAAD;GAAQ,eAbkB;AAC5B,IAAK,KACE,UAAU,UAAU,UAAU,EAAK,CAAC,WAAW;AAElD,KADA,EAAY,GAAK,EACjB,iBAAiB;AACf,QAAY,GAAM;QACjB,EAAM;MACT;;GAMgC,WAAW,EAAO;GAAqB,cAAY,QAAQ;aAC3F,kBAAC,OAAD;IACE,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;IACL,OAAM;IACN,WAAU;cAET,IACC,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;KACT,CAAA,GAEF,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,UAAS;KACT,UAAS;KACT,CAAA;IAEA,CAAA;GACC,CAAA;EACL,CAAA"}

package/dist/Column-BwKEOOuL.js

@@ -0,0 +1,84 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t } from "react/jsx-runtime";
+import './assets/Column.css';//#region src/components/GridRow/GridRow.module.css
+var n = {
+	"page-grid__row": "_page-grid__row_10s51_1",
+	"page-grid__row-mt-0": "_page-grid__row-mt-0_10s51_9",
+	"page-grid__row-mt-025": "_page-grid__row-mt-025_10s51_13",
+	"page-grid__row-mt-050": "_page-grid__row-mt-050_10s51_17",
+	"page-grid__row-mt-075": "_page-grid__row-mt-075_10s51_21",
+	"page-grid__row-mt-100": "_page-grid__row-mt-100_10s51_25",
+	"page-grid__row-mt-125": "_page-grid__row-mt-125_10s51_29",
+	"page-grid__row-mt-150": "_page-grid__row-mt-150_10s51_33",
+	"page-grid__row-mt-175": "_page-grid__row-mt-175_10s51_37",
+	"page-grid__row-mt-200": "_page-grid__row-mt-200_10s51_41",
+	"page-grid__row-mt-250": "_page-grid__row-mt-250_10s51_45",
+	"page-grid__row-mt-300": "_page-grid__row-mt-300_10s51_49",
+	"page-grid__row-mt-350": "_page-grid__row-mt-350_10s51_53",
+	"page-grid__row-mb-0": "_page-grid__row-mb-0_10s51_57",
+	"page-grid__row-mb-025": "_page-grid__row-mb-025_10s51_61",
+	"page-grid__row-mb-050": "_page-grid__row-mb-050_10s51_65",
+	"page-grid__row-mb-075": "_page-grid__row-mb-075_10s51_69",
+	"page-grid__row-mb-100": "_page-grid__row-mb-100_10s51_73",
+	"page-grid__row-mb-125": "_page-grid__row-mb-125_10s51_77",
+	"page-grid__row-mb-150": "_page-grid__row-mb-150_10s51_81",
+	"page-grid__row-mb-175": "_page-grid__row-mb-175_10s51_85",
+	"page-grid__row-mb-200": "_page-grid__row-mb-200_10s51_89",
+	"page-grid__row-mb-250": "_page-grid__row-mb-250_10s51_93",
+	"page-grid__row-mb-300": "_page-grid__row-mb-300_10s51_97",
+	"page-grid__row-mb-350": "_page-grid__row-mb-350_10s51_101",
+	"page-grid__col-12": "_page-grid__col-12_10s51_109",
+	"page-grid__col": "_page-grid__col_10s51_109",
+	"page-grid__col-1": "_page-grid__col-1_10s51_109",
+	"page-grid__col-2": "_page-grid__col-2_10s51_124",
+	"page-grid__col-3": "_page-grid__col-3_10s51_132",
+	"page-grid__col-4": "_page-grid__col-4_10s51_140",
+	"page-grid__col-5": "_page-grid__col-5_10s51_148",
+	"page-grid__col-6": "_page-grid__col-6_10s51_156",
+	"page-grid__col-7": "_page-grid__col-7_10s51_164",
+	"page-grid__col-8": "_page-grid__col-8_10s51_172",
+	"page-grid__col-9": "_page-grid__col-9_10s51_180",
+	"page-grid__col-10": "_page-grid__col-10_10s51_188",
+	"page-grid__col-11": "_page-grid__col-11_10s51_196",
+	"page-grid__col-md-1": "_page-grid__col-md-1_10s51_215",
+	"page-grid__col-md-2": "_page-grid__col-md-2_10s51_223",
+	"page-grid__col-md-3": "_page-grid__col-md-3_10s51_231",
+	"page-grid__col-md-4": "_page-grid__col-md-4_10s51_239",
+	"page-grid__col-md-5": "_page-grid__col-md-5_10s51_247",
+	"page-grid__col-md-6": "_page-grid__col-md-6_10s51_255",
+	"page-grid__col-md-7": "_page-grid__col-md-7_10s51_263",
+	"page-grid__col-md-8": "_page-grid__col-md-8_10s51_271",
+	"page-grid__col-md-9": "_page-grid__col-md-9_10s51_279",
+	"page-grid__col-md-10": "_page-grid__col-md-10_10s51_287",
+	"page-grid__col-md-11": "_page-grid__col-md-11_10s51_295",
+	"page-grid__col-md-12": "_page-grid__col-md-12_10s51_303",
+	"page-grid__col-start-position-1": "_page-grid__col-start-position-1_10s51_312",
+	"page-grid__col-start-position-2": "_page-grid__col-start-position-2_10s51_316",
+	"page-grid__col-start-position-3": "_page-grid__col-start-position-3_10s51_320",
+	"page-grid__col-start-position-4": "_page-grid__col-start-position-4_10s51_324",
+	"page-grid__col-start-position-5": "_page-grid__col-start-position-5_10s51_328",
+	"page-grid__col-start-position-6": "_page-grid__col-start-position-6_10s51_332",
+	"page-grid__col-start-position-7": "_page-grid__col-start-position-7_10s51_336",
+	"page-grid__col-start-position-8": "_page-grid__col-start-position-8_10s51_340",
+	"page-grid__col-start-position-9": "_page-grid__col-start-position-9_10s51_344",
+	"page-grid__col-start-position-10": "_page-grid__col-start-position-10_10s51_348",
+	"page-grid__col-start-position-11": "_page-grid__col-start-position-11_10s51_352",
+	"page-grid__col-md-start-position-1": "_page-grid__col-md-start-position-1_10s51_359",
+	"page-grid__col-md-start-position-2": "_page-grid__col-md-start-position-2_10s51_363",
+	"page-grid__col-md-start-position-3": "_page-grid__col-md-start-position-3_10s51_367",
+	"page-grid__col-md-start-position-4": "_page-grid__col-md-start-position-4_10s51_371",
+	"page-grid__col-md-start-position-5": "_page-grid__col-md-start-position-5_10s51_375",
+	"page-grid__col-md-start-position-6": "_page-grid__col-md-start-position-6_10s51_379",
+	"page-grid__col-md-start-position-7": "_page-grid__col-md-start-position-7_10s51_383",
+	"page-grid__col-md-start-position-8": "_page-grid__col-md-start-position-8_10s51_387",
+	"page-grid__col-md-start-position-9": "_page-grid__col-md-start-position-9_10s51_391",
+	"page-grid__col-md-start-position-10": "_page-grid__col-md-start-position-10_10s51_395",
+	"page-grid__col-md-start-position-11": "_page-grid__col-md-start-position-11_10s51_399"
+}, r = ({ size: r, mediumSize: i, startPositon: a, mediumStartPosition: o, position: s, children: c }) => /* @__PURE__ */ t("div", {
+	className: e(n["page-grid__col"], r && n[`page-grid__col-${r}`], i && n[`page-grid__col-md-${i}`], a && n[`page-grid__col-start-position-${a}`], o && n[`page-grid__col-md-start-position-${o}`], s && n[`page-grid__col-${s}`]),
+	children: c
+});
+//#endregion
+export { n, r as t };
+
+//# sourceMappingURL=Column-BwKEOOuL.js.map

package/dist/Column-BwKEOOuL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column-BwKEOOuL.js","names":[],"sources":["../src/components/GridRow/GridRow.module.css","../src/components/GridRow/Column/Column.tsx"],"sourcesContent":[".page-grid__row {\n  --grid-cols: 12;\n\n  display: flex;\n  flex-wrap: wrap;\n  min-width: 100%;\n}\n\n.page-grid__row-mt-0 {\n  margin-top: 0;\n}\n\n.page-grid__row-mt-025 {\n  margin-top: 0.25rem;\n}\n\n.page-grid__row-mt-050 {\n  margin-top: 0.5rem;\n}\n\n.page-grid__row-mt-075 {\n  margin-top: 0.75rem;\n}\n\n.page-grid__row-mt-100 {\n  margin-top: 1rem;\n}\n\n.page-grid__row-mt-125 {\n  margin-top: 1.25rem;\n}\n\n.page-grid__row-mt-150 {\n  margin-top: 1.5rem;\n}\n\n.page-grid__row-mt-175 {\n  margin-top: 1.75rem;\n}\n\n.page-grid__row-mt-200 {\n  margin-top: 2rem;\n}\n\n.page-grid__row-mt-250 {\n  margin-top: 2.5rem;\n}\n\n.page-grid__row-mt-300 {\n  margin-top: 3rem;\n}\n\n.page-grid__row-mt-350 {\n  margin-top: 3.5rem;\n}\n\n.page-grid__row-mb-0 {\n  margin-bottom: 0;\n}\n\n.page-grid__row-mb-025 {\n  margin-bottom: 0.25rem;\n}\n\n.page-grid__row-mb-050 {\n  margin-bottom: 0.5rem;\n}\n\n.page-grid__row-mb-075 {\n  margin-bottom: 0.75rem;\n}\n\n.page-grid__row-mb-100 {\n  margin-bottom: 1rem;\n}\n\n.page-grid__row-mb-125 {\n  margin-bottom: 1.25rem;\n}\n\n.page-grid__row-mb-150 {\n  margin-bottom: 1.5rem;\n}\n\n.page-grid__row-mb-175 {\n  margin-bottom: 1.75rem;\n}\n\n.page-grid__row-mb-200 {\n  margin-bottom: 2rem;\n}\n\n.page-grid__row-mb-250 {\n  margin-bottom: 2.5rem;\n}\n\n.page-grid__row-mb-300 {\n  margin-bottom: 3rem;\n}\n\n.page-grid__row-mb-350 {\n  margin-bottom: 3.5rem;\n}\n\n[class^=\"page-grid__col\"] {\n  position: relative;\n}\n\n.page-grid__col-12,\n.page-grid__col {\n  flex-basis: 100%;\n  max-width: 100%;\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-1 {\n  --collspan: 1;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-2 {\n  --collspan: 2;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-3 {\n  --collspan: 3;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-4 {\n  --collspan: 4;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-5 {\n  --collspan: 5;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-6 {\n  --collspan: 6;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-7 {\n  --collspan: 7;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-8 {\n  --collspan: 8;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-9 {\n  --collspan: 9;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-10 {\n  --collspan: 10;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-11 {\n  --collspan: 11;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n.page-grid__col-12 {\n  --collspan: 12;\n\n  flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n  max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n  padding: 0 calc(var(--grid-gap) / 2);\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-1 {\n    --collspan: 1;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-2 {\n    --collspan: 2;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-3 {\n    --collspan: 3;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-4 {\n    --collspan: 4;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-5 {\n    --collspan: 5;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-6 {\n    --collspan: 6;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-7 {\n    --collspan: 7;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-8 {\n    --collspan: 8;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-9 {\n    --collspan: 9;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-10 {\n    --collspan: 10;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-11 {\n    --collspan: 11;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n\n  .page-grid__col-md-12 {\n    --collspan: 12;\n\n    flex-basis: calc((var(--collspan) / var(--grid-cols) * 100%));\n    max-width: calc((var(--collspan) / var(--grid-cols) * 100%));\n    padding: 0 calc(var(--grid-gap) / 2);\n  }\n}\n\n.page-grid__col-start-position-1 {\n  margin-left: calc((1 / 12 * 100%));\n}\n\n.page-grid__col-start-position-2 {\n  margin-left: calc((2 / 12 * 100%));\n}\n\n.page-grid__col-start-position-3 {\n  margin-left: calc((3 / 12 * 100%));\n}\n\n.page-grid__col-start-position-4 {\n  margin-left: calc((4 / 12 * 100%));\n}\n\n.page-grid__col-start-position-5 {\n  margin-left: calc((5 / 12 * 100%));\n}\n\n.page-grid__col-start-position-6 {\n  margin-left: calc((6 / 12 * 100%));\n}\n\n.page-grid__col-start-position-7 {\n  margin-left: calc((7 / 12 * 100%));\n}\n\n.page-grid__col-start-position-8 {\n  margin-left: calc((8 / 12 * 100%));\n}\n\n.page-grid__col-start-position-9 {\n  margin-left: calc((9 / 12 * 100%));\n}\n\n.page-grid__col-start-position-10 {\n  margin-left: calc((10 / 12 * 100%));\n}\n\n.page-grid__col-start-position-11 {\n  margin-left: calc((11 / 12 * 100%));\n}\n\n/* Medium 1024px */\n\n@media only screen and (max-width: 64rem) {\n  .page-grid__col-md-start-position-1 {\n    margin-left: calc((1 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-2 {\n    margin-left: calc((2 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-3 {\n    margin-left: calc((3 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-4 {\n    margin-left: calc((4 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-5 {\n    margin-left: calc((5 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-6 {\n    margin-left: calc((6 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-7 {\n    margin-left: calc((7 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-8 {\n    margin-left: calc((8 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-9 {\n    margin-left: calc((9 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-10 {\n    margin-left: calc((10 / 12 * 100%));\n  }\n\n  .page-grid__col-md-start-position-11 {\n    margin-left: calc((11 / 12 * 100%));\n  }\n}\n\n/* Small 640px */\n\n@media only screen and (max-width: 40rem) {\n  .page-grid__col-1,\n  .page-grid__col-2,\n  .page-grid__col-3,\n  .page-grid__col-4,\n  .page-grid__col-5,\n  .page-grid__col-6,\n  .page-grid__col-7,\n  .page-grid__col-8,\n  .page-grid__col-9,\n  .page-grid__col-10,\n  .page-grid__col-11 {\n    flex-basis: 100%;\n    margin-left: 0;\n    max-width: 100%;\n  }\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from 'components/GridRow/GridRow.module.css';\n\ntype columnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';\n\nexport interface ColumnProps {\n  size?: columnSize;\n  mediumSize?: columnSize;\n  startPositon?: columnSize;\n  mediumStartPosition?: columnSize;\n  position?: 'start' | 'center' | 'end';\n}\n\nexport const Column = ({\n  size,\n  mediumSize,\n  startPositon,\n  mediumStartPosition,\n  position,\n  children,\n}: PropsWithChildren<ColumnProps>) => {\n  return (\n    <div\n      className={clsx(\n        styles['page-grid__col'],\n        size && styles[`page-grid__col-${size}`],\n        mediumSize && styles[`page-grid__col-md-${mediumSize}`],\n        startPositon && styles[`page-grid__col-start-position-${startPositon}`],\n        mediumStartPosition && styles[`page-grid__col-md-start-position-${mediumStartPosition}`],\n        position && styles[`page-grid__col-${position}`]\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgBa,KAAU,EACrB,SACA,eACA,iBACA,wBACA,aACA,kBAGE,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,mBACP,KAAQ,EAAO,kBAAkB,MACjC,KAAc,EAAO,qBAAqB,MAC1C,KAAgB,EAAO,iCAAiC,MACxD,KAAuB,EAAO,oCAAoC,MAClE,KAAY,EAAO,kBAAkB,KACtC;CAEA;CACG,CAAA"}

package/dist/Container-BLjtYDqq.js

@@ -0,0 +1,31 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import './assets/Container.css';var i = {
+	container: "_container_1tf56_1",
+	"container--padded": "_container--padded_1tf56_8",
+	"container--small": "_container--small_1tf56_12",
+	"container--medium": "_container--medium_1tf56_17",
+	"container--large": "_container--large_1tf56_22",
+	"container--large-full-height": "_container--large-full-height_1tf56_27",
+	"container--hidden": "_container--hidden_1tf56_31",
+	"container--centered-content": "_container--centered-content_1tf56_35"
+}, a = ({ children: a, size: o = "medium", centerContent: s = !1, visible: c = !0, padded: l = !0 }) => /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("label", {
+	htmlFor: "container",
+	children: l ? "Storybook container with 1rem padding" : "Storybook container"
+}), /* @__PURE__ */ n("div", {
+	id: "container",
+	className: e(i.container, {
+		[i["container--small"]]: o === "small",
+		[i["container--medium"]]: o === "medium",
+		[i["container--large"]]: o === "large",
+		[i["container--large-full-height"]]: o === "large-full-height",
+		[i["container--padded"]]: l,
+		[i["container--centered-content"]]: s,
+		[i["container--hidden"]]: !c
+	}),
+	children: a
+})] });
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=Container-BLjtYDqq.js.map

package/dist/Container-BLjtYDqq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container-BLjtYDqq.js","names":[],"sources":["../src/storyComponents/Container/Container.module.css","../src/storyComponents/Container/Container.tsx"],"sourcesContent":[".container {\n  background-color: var(--color-uva-white);\n  border: 2px dotted var(--color-uva-black);\n  overflow: auto;\n  position: relative;\n}\n\n.container--padded {\n  padding: 1rem;\n}\n\n.container--small {\n  height: 10rem;\n  width: 10rem;\n}\n\n.container--medium {\n  height: 30rem;\n  width: 30rem;\n}\n\n.container--large {\n  height: 50rem;\n  width: 50rem;\n}\n\n.container--large-full-height {\n  width: 50rem;\n}\n\n.container--hidden {\n  display: none;\n}\n\n.container--centered-content {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Container.module.css';\n\ninterface ContainerProps {\n  size?: 'small' | 'medium' | 'large' | 'large-full-height';\n  visible?: boolean;\n  centerContent?: boolean;\n  padded?: boolean;\n}\n\nexport const Container = ({\n  children,\n  size = 'medium',\n  centerContent = false,\n  visible = true,\n  padded = true,\n}: PropsWithChildren<ContainerProps>) => {\n  const label = padded ? 'Storybook container with 1rem padding' : 'Storybook container';\n\n  return (\n    <>\n      <label htmlFor=\"container\">{label}</label>\n      <div\n        id=\"container\"\n        className={clsx(styles['container'], {\n          [styles['container--small']]: size === 'small',\n          [styles['container--medium']]: size === 'medium',\n          [styles['container--large']]: size === 'large',\n          [styles['container--large-full-height']]: size === 'large-full-height',\n          [styles['container--padded']]: padded,\n          [styles['container--centered-content']]: centerContent,\n          [styles['container--hidden']]: !visible,\n        })}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;GCaa,KAAa,EACxB,aACA,UAAO,UACP,mBAAgB,IAChB,aAAU,IACV,YAAS,SAKP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;CAAO,SAAQ;WAJL,IAAS,0CAA0C;CAInB,CAAA,EAC1C,kBAAC,OAAD;CACE,IAAG;CACH,WAAW,EAAK,EAAO,WAAc;GAClC,EAAO,sBAAsB,MAAS;GACtC,EAAO,uBAAuB,MAAS;GACvC,EAAO,sBAAsB,MAAS;GACtC,EAAO,kCAAkC,MAAS;GAClD,EAAO,uBAAuB;GAC9B,EAAO,iCAAiC;GACxC,EAAO,uBAAuB,CAAC;EACjC,CAAC;CAED;CACG,CAAA,CACL,EAAA,CAAA"}

package/dist/ControlsButton-zemVxTlg.js

@@ -0,0 +1,64 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { useId as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import './assets/ControlsButton.css';//#region src/components/ControlsButton/ControlsButton.module.css
+var o = "_periods__item_t81b2_160", s = {
+	"controls-input": "_controls-input_t81b2_1",
+	"controls-button": "_controls-button_t81b2_40",
+	"controls-button--squared": "_controls-button--squared_t81b2_58",
+	"controls-button--with-prefix": "_controls-button--with-prefix_t81b2_70",
+	"controls-button--with-icon": "_controls-button--with-icon_t81b2_76",
+	"controls-button__wrapper": "_controls-button__wrapper_t81b2_80",
+	"controls-button__prefix": "_controls-button__prefix_t81b2_86",
+	"controls-button__tooltip": "_controls-button__tooltip_t81b2_91",
+	"controls-button__tooltip--left": "_controls-button__tooltip--left_t81b2_106",
+	"controls-button__tooltip--center": "_controls-button__tooltip--center_t81b2_110",
+	"controls-button__tooltip--right": "_controls-button__tooltip--right_t81b2_115",
+	"controls-button--checked": "_controls-button--checked_t81b2_160",
+	periods__item: o
+}, c = ({ type: o = "checkbox", label: c, value: l, iconName: u, prefix: d, tooltip: f, tooltipPosition: p = "center", name: m, forceSquared: h = !1, checked: g, disabled: _, onSetValue: v }) => {
+	let y = n(), b = (typeof c == "string" ? c : l).replace(/\s+/g, "_"), x = `${y}${b}`, S = `${x}-tooltip`;
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("input", {
+		type: o,
+		id: x,
+		name: m ?? b,
+		disabled: _,
+		value: l,
+		checked: g,
+		onChange: v,
+		className: s["controls-input"],
+		"aria-describedby": f ? S : void 0
+	}), /* @__PURE__ */ a("label", {
+		htmlFor: x,
+		className: e(s["controls-button"], [
+			h && s["controls-button--squared"],
+			d && s["controls-button--with-prefix"],
+			u && s["controls-button--with-icon"],
+			g && s["controls-button--checked"]
+		]),
+		children: [
+			u && /* @__PURE__ */ i(t, {
+				name: u,
+				size: 20
+			}),
+			/* @__PURE__ */ a("div", {
+				className: s["controls-button__wrapper"],
+				children: [d && /* @__PURE__ */ i("div", {
+					className: s["controls-button__prefix"],
+					children: d
+				}), c]
+			}),
+			f && /* @__PURE__ */ i("div", {
+				id: S,
+				role: "tooltip",
+				className: e(s["controls-button__tooltip"], s[`controls-button__tooltip--${p}`]),
+				children: f
+			})
+		]
+	})] });
+};
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=ControlsButton-zemVxTlg.js.map

package/dist/ControlsButton-zemVxTlg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsButton-zemVxTlg.js","names":[],"sources":["../src/components/ControlsButton/ControlsButton.module.css","../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":[".controls-input {\n  aspect-ratio: unset;\n  cursor: pointer;\n  height: 0;\n  opacity: 0;\n  position: absolute;\n  width: 0;\n}\n\n.controls-input:focus-visible + label {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.controls-input:checked + label,\n[type=\"radio\"]:checked:hover + label {\n  background-color: var(--color-navy-600);\n  color: var(--color-uva-white);\n  font-weight: var(--semibold);\n}\n\n.controls-input:disabled + label,\n.controls-input:disabled:hover + label {\n  background-color: var(--color-grey-400);\n  color: var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.controls-input:disabled:checked + label {\n  background-color: var(--color-grey-500);\n  color: var(--color-grey-900);\n  font-weight: var(--semibold);\n}\n\n.controls-input:hover + label {\n  background-color: var(--color-grey-300);\n  color: var(--color-uva-black);\n}\n\n.controls-button {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-default);\n  height: 2.25rem;\n  justify-content: center;\n  min-width: 2.25rem;\n  padding: 0.5rem;\n  position: relative;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.controls-button--squared {\n  width: 2.25rem;\n}\n\n.controls-button::after {\n  content: \"\";\n  min-height: 2.625rem;\n  min-width: 2.625rem;\n  position: absolute;\n  width: 100%;\n}\n\n.controls-button--with-prefix {\n  height: auto;\n  padding: 0.125rem 0.5rem;\n  width: auto;\n}\n\n.controls-button--with-icon {\n  gap: 0.5rem;\n}\n\n.controls-button__wrapper {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.controls-button__prefix {\n  color: var(--color-uva-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.controls-button__tooltip {\n  background-color: var(--color-uva-white);\n  box-shadow: 0 0 0.25rem 0 rgba(0 0 0 / 25%);\n  color: var(--color-grey-700);\n  display: none;\n  font-size: var(--font-size-text-non-essential);\n  font-style: italic;\n  font-weight: normal;\n  padding: 0.5rem 1rem;\n  position: absolute;\n  text-align: center;\n  top: calc(100% + 0.5rem);\n  z-index: 1;\n}\n\n.controls-button__tooltip--left {\n  left: 0rem;\n}\n\n.controls-button__tooltip--center {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right {\n  right: 0rem;\n}\n\n.controls-button__tooltip::before {\n  border-color: transparent transparent var(--color-grey-400) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: calc(100% + 0.125rem);\n  content: \"\";\n  filter: blur(0.125rem);\n  position: absolute;\n  z-index: -1;\n}\n\n.controls-button__tooltip::after {\n  border-color: transparent transparent var(--color-uva-white) transparent;\n  border-style: solid;\n  border-width: 0.5rem;\n  bottom: 100%;\n  content: \"\";\n  position: absolute;\n}\n\n.controls-button:hover .controls-button__tooltip,\n.controls-input:focus-visible + label .controls-button__tooltip {\n  display: block;\n}\n\n.controls-button__tooltip--left::before,\n.controls-button__tooltip--left::after {\n  left: 0.5rem;\n}\n\n.controls-button__tooltip--center::before,\n.controls-button__tooltip--center::after {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-button__tooltip--right::before,\n.controls-button__tooltip--right::after {\n  right: 0.5rem;\n}\n\n.controls-button--checked span.periods__item,\n.controls-button--checked [data-period-item] {\n  border: 1px solid var(--color-uva-white) !important;\n}\n","import { useId } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { ChangeEvent, ReactNode } from 'react';\r\nimport type { IconProps } from 'components/Icon';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ControlsButtonProps {\r\n  /** to set type/behaviour of input radio or checkbox */\r\n  type?: 'radio' | 'checkbox';\r\n  /** button label */\r\n  label: string | ReactNode;\r\n  /** button value */\r\n  value: string;\r\n  /** set if icon is needed in font of label */\r\n  iconName?: IconProps['name'];\r\n  /** set if prefix is needed above of label */\r\n  prefix?: string;\r\n  /** set tooltip */\r\n  tooltip?: ReactNode;\r\n  /** set horizontal position of the tooltip */\r\n  tooltipPosition?: 'left' | 'center' | 'right';\r\n  /** set if used as radiogroup */\r\n  name?: string;\r\n  /** `true` to set squared button; otherwise, `false`. The default is `false`. Note: hides icon */\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  iconName,\r\n  prefix,\r\n  tooltip,\r\n  tooltipPosition = 'center',\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  const labelString = typeof label === 'string' ? label : value;\r\n  const sanitizedLabel = labelString.replace(/\\s+/g, '_');\r\n  const baseId = `${idPrefix}${sanitizedLabel}`;\r\n  const tooltipId = `${baseId}-tooltip`;\r\n\r\n  return (\r\n    <>\r\n      <input\r\n        type={type}\r\n        id={baseId}\r\n        name={name ?? sanitizedLabel}\r\n        disabled={disabled}\r\n        value={value}\r\n        checked={checked}\r\n        onChange={onSetValue}\r\n        className={styles['controls-input']}\r\n        aria-describedby={tooltip ? tooltipId : undefined}\r\n      />\r\n      <label\r\n        htmlFor={baseId}\r\n        className={clsx(styles['controls-button'], [\r\n          forceSquared && styles['controls-button--squared'],\r\n          prefix && styles['controls-button--with-prefix'],\r\n          iconName && styles['controls-button--with-icon'],\r\n          checked && styles['controls-button--checked'],\r\n        ])}\r\n      >\r\n        {iconName && <Icon name={iconName} size={20} />}\r\n        <div className={styles['controls-button__wrapper']}>\r\n          {prefix && <div className={styles['controls-button__prefix']}>{prefix}</div>}\r\n          {label}\r\n        </div>\r\n        {tooltip && (\r\n          <div\r\n            id={tooltipId}\r\n            role=\"tooltip\"\r\n            className={clsx(styles['controls-button__tooltip'], styles[`controls-button__tooltip--${tooltipPosition}`])}\r\n          >\r\n            {tooltip}\r\n          </div>\r\n        )}\r\n      </label>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;GCqCa,KAAkB,EAC7B,UAAO,YACP,UACA,UACA,aACA,WACA,YACA,qBAAkB,UAClB,SACA,kBAAe,IACf,YACA,aACA,oBACyB;CACzB,IAAM,IAAW,GAAO,EAElB,KADc,OAAO,KAAU,WAAW,IAAQ,GACrB,QAAQ,QAAQ,IAAI,EACjD,IAAS,GAAG,IAAW,KACvB,IAAY,GAAG,EAAO;AAE5B,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,SAAD;EACQ;EACN,IAAI;EACJ,MAAM,KAAQ;EACJ;EACH;EACE;EACT,UAAU;EACV,WAAW,EAAO;EAClB,oBAAkB,IAAU,IAAY,KAAA;EACxC,CAAA,EACF,kBAAC,SAAD;EACE,SAAS;EACT,WAAW,EAAK,EAAO,oBAAoB;GACzC,KAAgB,EAAO;GACvB,KAAU,EAAO;GACjB,KAAY,EAAO;GACnB,KAAW,EAAO;GACnB,CAAC;YAPJ;GASG,KAAY,kBAAC,GAAD;IAAM,MAAM;IAAU,MAAM;IAAM,CAAA;GAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAU,kBAAC,OAAD;KAAK,WAAW,EAAO;eAA6B;KAAa,CAAA,EAC3E,EACG;;GACL,KACC,kBAAC,OAAD;IACE,IAAI;IACJ,MAAK;IACL,WAAW,EAAK,EAAO,6BAA6B,EAAO,6BAA6B,KAAmB;cAE1G;IACG,CAAA;GAEF;IACP,EAAA,CAAA"}

package/dist/CopyableText-DkyhZ6wk.js

@@ -0,0 +1,57 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { Icon as t } from "./components/Icon/Icon.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import './assets/CopyableText.css';//#region src/components/CopyableText/CopyableText.module.css
+var s = {
+	"copyable-text-container": "_copyable-text-container_l97qt_1",
+	"copyable-text-copy-button": "_copyable-text-copy-button_l97qt_8",
+	"copyable-text-copy-visually-hidden": "_copyable-text-copy-visually-hidden_l97qt_32"
+}, c = 2e3, l = ({ text: l, additionalClassName: u = "", ariaLabelCopy: d, ariaLabelHasBeenCopied: f, customCopyValue: p }) => {
+	let [m, h] = i(!1), g = r(null), _ = r(null), [v, y] = i(!1);
+	n(() => () => {
+		g.current && clearTimeout(g.current);
+	}, []);
+	let b = (e) => {
+		e.stopPropagation(), e.preventDefault(), h(!0), g.current = setTimeout(() => {
+			h(!1), y(!1);
+		}, c), navigator.clipboard.writeText(p ?? l).catch(() => h(!1));
+	};
+	return /* @__PURE__ */ o("span", {
+		className: e(s["copyable-text-container"], u),
+		role: "button",
+		tabIndex: 0,
+		onFocus: () => y(!0),
+		onBlur: () => !m && y(!1),
+		onKeyDown: (e) => {
+			y(!0), (e.key === "Enter" || e.key === " ") && (e.preventDefault(), b(e));
+		},
+		onMouseEnter: () => y(!0),
+		onMouseLeave: () => !m && y(!1),
+		children: [l, v && /* @__PURE__ */ o("button", {
+			ref: _,
+			className: e(s["copyable-text-copy-button"], u),
+			onClick: b,
+			type: "button",
+			"aria-keyshortcuts": "Enter Space",
+			"aria-label": m ? f ?? "Copied" : d ?? "Copy to clipboard",
+			tabIndex: -1,
+			children: [
+				l,
+				/* @__PURE__ */ a(t, {
+					name: m ? "CheckSmall" : "Copy",
+					size: 20
+				}),
+				/* @__PURE__ */ a("span", {
+					className: s["copyable-text-copy-visually-hidden"],
+					"aria-live": "polite",
+					children: m ? f ?? "Copied" : d ?? "Copy to clipboard"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=CopyableText-DkyhZ6wk.js.map

package/dist/CopyableText-DkyhZ6wk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText-DkyhZ6wk.js","names":[],"sources":["../src/components/CopyableText/CopyableText.module.css","../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":[".copyable-text-container {\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  width: fit-content;\n}\n\n.copyable-text-copy-button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  gap: 0.25rem;\n  inset: calc(-0.25rem + 1px) auto auto -0.5rem;\n  justify-content: center;\n  padding: 0.25rem 0.5rem;\n  position: absolute;\n  transition: opacity 150ms ease;\n  white-space: nowrap;\n  z-index: 10;\n}\n\n.copyable-text-container:focus-within {\n  outline: none;\n}\n\n.copyable-text-copy-visually-hidden {\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport type { KeyboardEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n  /** The text to be copied */\r\n  text: string;\r\n  /** Additional class name to style the text so it suits the design */\r\n  additionalClassName?: string;\r\n  /** ARIA label for the copy button */\r\n  ariaLabelCopy?: string;\r\n  /** ARIA label for the copied state */\r\n  ariaLabelHasBeenCopied?: string;\r\n  /** custom value to be copied in place of the display text */\r\n  customCopyValue?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n  text,\r\n  additionalClassName = '',\r\n  ariaLabelCopy,\r\n  ariaLabelHasBeenCopied,\r\n  customCopyValue,\r\n}: CopyableTextProps) => {\r\n  const [isCopying, setIsCopying] = useState(false);\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n  const [buttonActive, setButtonActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleCopy = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLSpanElement>) => {\r\n    // prevent event bubbling if placed inside another clikable element\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n\r\n    setIsCopying(true);\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsCopying(false);\r\n      setButtonActive(false);\r\n    }, COPYTIME);\r\n    navigator.clipboard.writeText(customCopyValue ?? text).catch(() => setIsCopying(false));\r\n  };\r\n\r\n  return (\r\n    <span\r\n      className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onFocus={() => setButtonActive(true)}\r\n      onBlur={() => !isCopying && setButtonActive(false)}\r\n      onKeyDown={(event) => {\r\n        setButtonActive(true);\r\n        if (event.key === 'Enter' || event.key === ' ') {\r\n          event.preventDefault();\r\n          handleCopy(event);\r\n        }\r\n      }}\r\n      onMouseEnter={() => setButtonActive(true)}\r\n      onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n    >\r\n      {text}\r\n      {buttonActive && (\r\n        <button\r\n          ref={buttonRef}\r\n          className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n          onClick={handleCopy}\r\n          type=\"button\"\r\n          aria-keyshortcuts=\"Enter Space\"\r\n          aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          tabIndex={-1}\r\n        >\r\n          {text}\r\n          <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n          <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n            {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n          </span>\r\n        </button>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;GCsBM,IAAW,KAEJ,KAAgB,EAC3B,SACA,yBAAsB,IACtB,kBACA,2BACA,yBACuB;CACvB,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM,EAC3C,IAAa,EAA6C,KAAK,EAC/D,IAAY,EAAiC,KAAK,EAClD,CAAC,GAAc,KAAmB,EAAS,GAAM;AAEvD,eACe;AACX,EAAI,EAAW,WAAS,aAAa,EAAW,QAAQ;IAEzD,EAAE,CAAC;CAEN,IAAM,KAAc,MAA0E;AAU5F,EARA,EAAM,iBAAiB,EACvB,EAAM,gBAAgB,EAEtB,EAAa,GAAK,EAClB,EAAW,UAAU,iBAAiB;AAEpC,GADA,EAAa,GAAM,EACnB,EAAgB,GAAM;KACrB,EAAS,EACZ,UAAU,UAAU,UAAU,KAAmB,EAAK,CAAC,YAAY,EAAa,GAAM,CAAC;;AAGzF,QACE,kBAAC,QAAD;EACE,WAAW,EAAK,EAAO,4BAA4B,EAAoB;EACvE,MAAK;EACL,UAAU;EACV,eAAe,EAAgB,GAAK;EACpC,cAAc,CAAC,KAAa,EAAgB,GAAM;EAClD,YAAY,MAAU;AAEpB,GADA,EAAgB,GAAK,GACjB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAW,EAAM;;EAGrB,oBAAoB,EAAgB,GAAK;EACzC,oBAAoB,CAAC,KAAa,EAAgB,GAAM;YAd1D,CAgBG,GACA,KACC,kBAAC,UAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,EAAoB;GACzE,SAAS;GACT,MAAK;GACL,qBAAkB;GAClB,cAAY,IAAa,KAA0B,WAAa,KAAiB;GACjF,UAAU;aAPZ;IASG;IACD,kBAAC,GAAD;KAAM,MAAM,IAAY,eAAe;KAAQ,MAAM;KAAM,CAAA;IAC3D,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuC,aAAU;eACtE,IAAa,KAA0B,WAAa,KAAiB;KACjE,CAAA;IACA;KAEN"}

package/dist/Drawer-Ggofac6y.js

@@ -0,0 +1,77 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { t } from "./Backdrop-D8AHeuBn.js";
+import { t as n } from "./OverlayCloseButton-rttFbAM_.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useDialog as c } from "@react-aria/dialog";
+import { FocusScope as l } from "@react-aria/focus";
+import { OverlayContainer as u, useModal as d, useOverlay as f, usePreventScroll as p } from "@react-aria/overlays";
+import './assets/Drawer.css';//#region src/components/Drawer/Drawer.module.css
+var m = "_drawer_1g9hi_1", h = "_drawer__content_1g9hi_22", g = "_drawer__header_1g9hi_32", _ = "_drawer__footer_1g9hi_39", v = "_drawer__heading_1g9hi_26", y = "_drawer__buttons_1g9hi_64", b = {
+	drawer: m,
+	drawer__content: h,
+	drawer__header: g,
+	drawer__footer: _,
+	drawer__heading: v,
+	"drawer--open": "_drawer--open_1g9hi_59",
+	drawer__buttons: y
+}, x = 200;
+function S({ buttons: m, children: h, isOpen: g, onClose: _, title: v, closeButtonAriaValueText: y = "Close", ...S }) {
+	let [C, w] = a(b.drawer), { modalProps: T } = d({ isDisabled: !g }), E = i(null);
+	function D() {
+		w(b.drawer), globalThis.setTimeout(() => {
+			_();
+		}, x);
+	}
+	let { overlayProps: O, underlayProps: k } = f({
+		isDismissable: !0,
+		isKeyboardDismissDisabled: !1,
+		isOpen: g,
+		onClose: D
+	}, E), { dialogProps: A, titleProps: j } = c({}, E);
+	return p({ isDisabled: !g }), r(() => {
+		w(e(b.drawer, { [b["drawer--open"]]: g }));
+	}, [g]), /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(t, {
+		...k,
+		children: /* @__PURE__ */ o(l, {
+			contain: !0,
+			restoreFocus: !0,
+			children: /* @__PURE__ */ s("aside", {
+				...T,
+				...O,
+				...A,
+				...S,
+				className: C,
+				ref: E,
+				children: [
+					/* @__PURE__ */ s("header", {
+						className: b.drawer__header,
+						children: [/* @__PURE__ */ o("h1", {
+							className: b.drawer__heading,
+							...j,
+							children: v
+						}), /* @__PURE__ */ o(n, {
+							"aria-label": y,
+							onClick: D
+						})]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: b.drawer__content,
+						children: h
+					}),
+					m && /* @__PURE__ */ o("footer", {
+						className: b.drawer__footer,
+						children: /* @__PURE__ */ o("div", {
+							className: b.drawer__buttons,
+							children: m
+						})
+					})
+				]
+			})
+		})
+	}) });
+}
+//#endregion
+export { S as t };
+
+//# sourceMappingURL=Drawer-Ggofac6y.js.map

package/dist/Drawer-Ggofac6y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer-Ggofac6y.js","names":[],"sources":["../src/components/Drawer/Drawer.module.css","../src/components/Drawer/Drawer.tsx"],"sourcesContent":[".drawer {\n  background-color: var(--color-uva-white);\n  bottom: 0;\n  box-shadow: 0 0 0.75rem 0.25rem rgb(0 0 0 / 10%);\n  display: flex;\n  flex-direction: column;\n  left: 10vw;\n  max-width: 90vw;\n  min-width: 25rem;\n  padding: 2.5rem 2rem;\n  position: fixed;\n  right: 0;\n  top: 0;\n  transform: translateX(100%);\n  transform-origin: right;\n  transition-duration: 200ms;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  width: 100%;\n}\n\n.drawer__content {\n  /**\n     * Drawer content height cannot exceed the available height, dictated by its parent.\n     * Subtracting top and bottom padding from .drawer as well as the height and bottom margin of\n     * .drawer__heading from the parent's height gives us the maximum height the content should be.\n     */\n  max-height: calc(100vh - 7rem);\n  overflow-y: auto;\n}\n\n.drawer__header {\n  display: flex;\n  gap: 2rem;\n  justify-content: space-between;\n  position: relative;\n}\n\n.drawer__footer {\n  gap: 2rem;\n  justify-content: flex-end;\n  margin-top: auto;\n}\n\n.drawer__heading {\n  font-size: var(--font-size-s);\n  line-height: var(--line-height-s);\n  margin: 0.25rem 0 0.5rem;\n  padding-right: 2rem;\n}\n\n@media only screen and (min-width: 40rem) {\n  .drawer {\n    left: auto;\n    max-width: 37.5rem;\n  }\n}\n\n.drawer--open {\n  transform: translateX(0);\n  transition-duration: 250ms;\n}\n\n.drawer__buttons {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  margin: 2.5rem 0 0;\n}\n","import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Drawer.module.css';\n\nimport { Backdrop } from 'components/Backdrop/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n  /** The buttons to render in the drawer. */\n  buttons?: ReactNode;\n  /** true if the drawer should be open; otherwise, false. The default is false. */\n  isOpen?: boolean;\n  /** The callback method that is invoked when the drawer is closed. */\n  onClose: () => void;\n  /** The title of the drawer. */\n  title: string;\n  /** The aria-label of the close button. */\n  closeButtonAriaValueText?: string;\n}\n\nconst closingDelay = 200;\n\n/** Represents a Drawer component. */\nexport function Drawer({\n  buttons,\n  children,\n  isOpen,\n  onClose,\n  title,\n  closeButtonAriaValueText = 'Close',\n  ...restProps\n}: PropsWithChildren<DrawerProps>) {\n  const [containerClassNames, setContainerClassNames] = useState(styles.drawer);\n  // Hide content outside the modal from screen readers.\n  const { modalProps } = useModal({ isDisabled: !isOpen });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  function onCloseDrawer() {\n    setContainerClassNames(styles.drawer);\n\n    globalThis.setTimeout(() => {\n      onClose();\n    }, closingDelay);\n  }\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isDismissable: true, isKeyboardDismissDisabled: false, isOpen, onClose: onCloseDrawer },\n    contentRef\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, contentRef);\n\n  usePreventScroll({ isDisabled: !isOpen });\n\n  useEffect(() => {\n    // setting class name after render so that element can slide in after it is mounted and slide out\n    // before it is unmounted\n    setContainerClassNames(clsx(styles.drawer, { [styles['drawer--open']]: isOpen }));\n  }, [isOpen]);\n\n  return (\n    <OverlayContainer>\n      <Backdrop {...underlayProps}>\n        <FocusScope contain restoreFocus>\n          <aside\n            {...modalProps}\n            {...overlayProps}\n            {...dialogProps}\n            {...restProps}\n            className={containerClassNames}\n            ref={contentRef}\n          >\n            <header className={styles.drawer__header}>\n              <h1 className={styles.drawer__heading} {...titleProps}>\n                {title}\n              </h1>\n\n              <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onCloseDrawer} />\n            </header>\n\n            <div className={styles.drawer__content}>{children}</div>\n\n            {buttons && (\n              <footer className={styles.drawer__footer}>\n                <div className={styles.drawer__buttons}>{buttons}</div>\n              </footer>\n            )}\n          </aside>\n        </FocusScope>\n      </Backdrop>\n    </OverlayContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;GC0BM,IAAe;AAGrB,SAAgB,EAAO,EACrB,YACA,aACA,WACA,YACA,UACA,8BAA2B,SAC3B,GAAG,KAC8B;CACjC,IAAM,CAAC,GAAqB,KAA0B,EAAS,EAAO,OAAO,EAEvE,EAAE,kBAAe,EAAS,EAAE,YAAY,CAAC,GAAQ,CAAC,EAClD,IAAa,EAAuB,KAAK;CAE/C,SAAS,IAAgB;AAGvB,EAFA,EAAuB,EAAO,OAAO,EAErC,WAAW,iBAAiB;AAC1B,MAAS;KACR,EAAa;;CAKlB,IAAM,EAAE,iBAAc,qBAAkB,EACtC;EAAE,eAAe;EAAM,2BAA2B;EAAO;EAAQ,SAAS;EAAe,EACzF,EACD,EAGK,EAAE,gBAAa,kBAAe,EAAU,EAAE,EAAE,EAAW;AAU7D,QARA,EAAiB,EAAE,YAAY,CAAC,GAAQ,CAAC,EAEzC,QAAgB;AAGd,IAAuB,EAAK,EAAO,QAAQ,GAAG,EAAO,kBAAkB,GAAQ,CAAC,CAAC;IAChF,CAAC,EAAO,CAAC,EAGV,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,GAAI;YACZ,kBAAC,GAAD;GAAY,SAAA;GAAQ,cAAA;aAClB,kBAAC,SAAD;IACE,GAAI;IACJ,GAAI;IACJ,GAAI;IACJ,GAAI;IACJ,WAAW;IACX,KAAK;cANP;KAQE,kBAAC,UAAD;MAAQ,WAAW,EAAO;gBAA1B,CACE,kBAAC,MAAD;OAAI,WAAW,EAAO;OAAiB,GAAI;iBACxC;OACE,CAAA,EAEL,kBAAC,GAAD;OAAoB,cAAY;OAA0B,SAAS;OAAiB,CAAA,CAC7E;;KAET,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAkB;MAAe,CAAA;KAEvD,KACC,kBAAC,UAAD;MAAQ,WAAW,EAAO;gBACxB,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAkB;OAAc,CAAA;MAChD,CAAA;KAEL;;GACG,CAAA;EACJ,CAAA,EACM,CAAA"}