@uva-glass/component-library 3.56.0 → 3.57.1

package/dist/{RadioButton-CKALsbBb.js.map → RadioButton-DmBpXwIS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioButton-CKALsbBb.js","names":[],"sources":["../src/components/RadioButton/RadioButton.module.css","../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":[".radio-button {\n  align-items: center;\n  display: grid;\n  gap: 0 0.5rem;\n  grid-template-columns: auto [label] 1fr;\n}\n\n.radio-button__input {\n  accent-color: var(--color-navy-600);\n}\n\n.radio-button .radio-button__input {\n  cursor: pointer;\n  margin-top: 0;\n}\n\n.radio-button__label {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n\n.radio-button__label::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -1rem;\n  bottom: 0;\n  width: 1rem;\n}\n\n.radio-button__description {\n  color: var(--color-grey-700);\n  grid-area: label;\n  margin: 0;\n}\n\n.radio-button .radio-button__label {\n  width: fit-content;\n}\n\n.radio-button :disabled + .radio-button__label {\n  color: var(--color-grey-700);\n  cursor: unset;\n}\n\n.radio-button--gap-large {\n  column-gap: 1rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** The id of the element. */\n  id: string;\n  /** The label of the radio button. */\n  label: string;\n  /** The description that is shown under the label. */\n  description?: string;\n  /** The gap between the label and radio button. */\n  gap?: 'normal' | 'large';\n}\n\n/** Represents a component for a radio button. */\nexport const RadioButton = ({ id, label, gap = 'normal', description, ...restProps }: RadioButtonProps) => (\n  <div className={clsx(styles['radio-button'], styles[`radio-button--gap-${gap}`])}>\n    <input\n      className={styles['radio-button__input']}\n      {...restProps}\n      id={id}\n      type=\"radio\"\n      aria-describedby={description ? `${id}-description` : undefined}\n    />\n    <label className={styles['radio-button__label']} htmlFor={id}>\n      {label}\n    </label>\n    {description && (\n      <p id={`${id}-description`} className={styles['radio-button__description']}>\n        {description}\n      </p>\n    )}\n  </div>\n);\n"],"mappings":";;;;;;;;;GCkBa,KAAe,EAAE,OAAI,UAAO,SAAM,UAAU,gBAAa,GAAG,QACvE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,iBAAiB,EAAO,qBAAqB,IAAM;WAA/E;EACE,kBAAC,SAAD;GACE,WAAW,EAAO;GAClB,GAAI;GACA;GACJ,MAAK;GACL,oBAAkB,IAAc,GAAG,EAAG,gBAAgB,KAAA;EACvD,CAAA;EACD,kBAAC,SAAD;GAAO,WAAW,EAAO;GAAwB,SAAS;aACvD;EACI,CAAA;EACN,KACC,kBAAC,KAAD;GAAG,IAAI,GAAG,EAAG;GAAe,WAAW,EAAO;aAC3C;EACA,CAAA;CAEF"}
+{"version":3,"file":"RadioButton-DmBpXwIS.js","names":[],"sources":["../src/components/RadioButton/RadioButton.module.css","../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":[".radio-button {\n  align-items: center;\n  display: grid;\n  gap: 0 0.5rem;\n  grid-template-columns: auto [label] 1fr;\n}\n\n.radio-button__input {\n  accent-color: var(--color-navy-600);\n}\n\n.radio-button .radio-button__input {\n  cursor: pointer;\n  margin-top: 0;\n}\n\n.radio-button__label {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n\n.radio-button__label::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -1rem;\n  bottom: 0;\n  width: 1rem;\n}\n\n.radio-button__description {\n  color: var(--color-grey-700);\n  grid-area: label;\n  margin: 0;\n}\n\n.radio-button .radio-button__label {\n  width: fit-content;\n}\n\n.radio-button :disabled + .radio-button__label {\n  color: var(--color-grey-700);\n  cursor: unset;\n}\n\n.radio-button--gap-large {\n  column-gap: 1rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** The id of the element. */\n  id: string;\n  /** The label of the radio button. */\n  label: string;\n  /** The description that is shown under the label. */\n  description?: string;\n  /** The gap between the label and radio button. */\n  gap?: 'normal' | 'large';\n}\n\n/** Represents a component for a radio button. */\nexport const RadioButton = ({ id, label, gap = 'normal', description, ...restProps }: RadioButtonProps) => (\n  <div className={clsx(styles['radio-button'], styles[`radio-button--gap-${gap}`])}>\n    <input\n      className={styles['radio-button__input']}\n      {...restProps}\n      id={id}\n      type=\"radio\"\n      aria-describedby={description ? `${id}-description` : undefined}\n    />\n    <label className={styles['radio-button__label']} htmlFor={id}>\n      {label}\n    </label>\n    {description && (\n      <p id={`${id}-description`} className={styles['radio-button__description']}>\n        {description}\n      </p>\n    )}\n  </div>\n);\n"],"mappings":";;;;;;;;;GCkBa,KAAe,EAAE,OAAI,UAAO,SAAM,UAAU,gBAAa,GAAG,QACvE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,iBAAiB,EAAO,qBAAqB,IAAM;WAA/E;EACE,kBAAC,SAAD;GACE,WAAW,EAAO;GAClB,GAAI;GACA;GACJ,MAAK;GACL,oBAAkB,IAAc,GAAG,EAAG,gBAAgB,KAAA;EACvD,CAAA;EACD,kBAAC,SAAD;GAAO,WAAW,EAAO;GAAwB,SAAS;aACvD;EACI,CAAA;EACN,KACC,kBAAC,KAAD;GAAG,IAAI,GAAG,EAAG;GAAe,WAAW,EAAO;aAC3C;EACA,CAAA;CAEF"}

package/dist/{RadioGroup-DhnnBRJu.js → RadioGroup-DlQjMmpa.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./RadioButton-CKALsbBb.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
+import { t } from "./RadioButton-DmBpXwIS.js";
 import { useState as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import './assets/RadioGroup.css';//#region src/components/RadioGroup/RadioGroup.module.css
@@ -47,4 +47,4 @@ var a = {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=RadioGroup-DhnnBRJu.js.map
+//# sourceMappingURL=RadioGroup-DlQjMmpa.js.map

package/dist/{RadioGroup-DhnnBRJu.js.map → RadioGroup-DlQjMmpa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-DhnnBRJu.js","names":[],"sources":["../src/components/RadioGroup/RadioGroup.module.css","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".radio-group__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.radio-group__header {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--line-height-s);\n  margin: 0;\n}\n\n.radio-group {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-600);\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.radio-group__option {\n  cursor: pointer;\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.radio-group__option:not(:last-of-type) {\n  border-bottom: 1px solid var(--color-grey-400);\n}\n\n.radio-group__option:hover {\n  background-color: var(--color-grey-300);\n}\n\n.radio-group__option--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <div className={styles['radio-group__wrapper']}>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;GC0Ba,KAAc,EAAE,UAAO,YAAS,aAAU,kBAAgC;CACrF,IAAM,CAAC,GAAe,KAAoB,EAAwB,IAAI,GAEhE,KAAmB,MAAkB;EACzC,AAAK,MACH,EAAiB,CAAK,GACtB,EAAS,CAAK;CAElB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;aAAyB;EAAU,CAAA,GACzD,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAQ,KAAK,EAAE,OAAI,qBAAkB,eAAY,eAChD,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,wBAAwB,GAC5C,EAAO,mCAAmC,EAC7C,CAAC;IAED,eAAe,EAAgB,CAAK;IACpC,YAAY,MAAU;KACpB,CAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,QACzC,EAAgB,CAAK;IAEzB;IACA,MAAK;cAEL,kBAAC,GAAD;KACM;KACJ,OAAO;KACP,aAAa;KACb,MAAM;KACN,WAAW,MAAU;MACnB,EAAgB,EAAM,OAAO,KAAK;KACpC;KACO;KACP,SAAS,MAAkB;KACjB;KACV,KAAI;IACL,CAAA;GACE,GAtBE,CAsBF,CACN;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"RadioGroup-DlQjMmpa.js","names":[],"sources":["../src/components/RadioGroup/RadioGroup.module.css","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".radio-group__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.radio-group__header {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--line-height-s);\n  margin: 0;\n}\n\n.radio-group {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-600);\n  border-radius: 0.25rem;\n  overflow: hidden;\n}\n\n.radio-group__option {\n  cursor: pointer;\n  display: flex;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.radio-group__option:not(:last-of-type) {\n  border-bottom: 1px solid var(--color-grey-400);\n}\n\n.radio-group__option:hover {\n  background-color: var(--color-grey-300);\n}\n\n.radio-group__option--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n","import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <div className={styles['radio-group__wrapper']}>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;GC0Ba,KAAc,EAAE,UAAO,YAAS,aAAU,kBAAgC;CACrF,IAAM,CAAC,GAAe,KAAoB,EAAwB,IAAI,GAEhE,KAAmB,MAAkB;EACzC,AAAK,MACH,EAAiB,CAAK,GACtB,EAAS,CAAK;CAElB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,CACE,kBAAC,MAAD;GAAI,WAAW,EAAO;aAAyB;EAAU,CAAA,GACzD,kBAAC,OAAD;GAAK,WAAW,EAAO;aACpB,EAAQ,KAAK,EAAE,OAAI,qBAAkB,eAAY,eAChD,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,wBAAwB,GAC5C,EAAO,mCAAmC,EAC7C,CAAC;IAED,eAAe,EAAgB,CAAK;IACpC,YAAY,MAAU;KACpB,CAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,QACzC,EAAgB,CAAK;IAEzB;IACA,MAAK;cAEL,kBAAC,GAAD;KACM;KACJ,OAAO;KACP,aAAa;KACb,MAAM;KACN,WAAW,MAAU;MACnB,EAAgB,EAAM,OAAO,KAAK;KACpC;KACO;KACP,SAAS,MAAkB;KACjB;KACV,KAAI;IACL,CAAA;GACE,GAtBE,CAsBF,CACN;EACE,CAAA,CACF;;AAET"}

package/dist/{Repeater-Bnoqqz0X.js → Repeater-BAEfOMZI.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/Repeater.css';var n = {
 	repeater: "_repeater_12czp_1",
@@ -19,4 +19,4 @@ import './assets/Repeater.css';var n = {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=Repeater-Bnoqqz0X.js.map
+//# sourceMappingURL=Repeater-BAEfOMZI.js.map

package/dist/{Repeater-Bnoqqz0X.js.map → Repeater-BAEfOMZI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Repeater-Bnoqqz0X.js","names":[],"sources":["../src/components/Repeater/Repeater.module.css","../src/components/Repeater/Repeater.tsx"],"sourcesContent":[".repeater {\n  display: flex;\n}\n\n.repeater--row {\n  flex-direction: row;\n}\n\n.repeater--row-reverse {\n  flex-direction: row-reverse;\n}\n\n.repeater--column {\n  flex-direction: column;\n}\n\n.repeater--column-reverse {\n  flex-direction: column-reverse;\n}\n\n.repeater--gap-025 {\n  gap: 0.25rem;\n}\n\n.repeater--gap-050 {\n  gap: 0.5rem;\n}\n\n.repeater--gap-075 {\n  gap: 0.75rem;\n}\n\n.repeater--gap-100 {\n  gap: 1rem;\n}\n\n.repeater--gap-150 {\n  gap: 1.5rem;\n}\n\n.repeater--gap-200 {\n  gap: 2rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n  /** The direction of the items. */\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** The gap between the items. */\n  gap?: '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n  return (\n    <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;GCca,KAAY,EAAE,aAAU,mBAAgB,UAAU,SAAM,YAEjE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,UAAa,EAAO,aAAa,MAAkB,EAAO,iBAAiB,IAAM;CAC1G;AACE,CAAA"}
+{"version":3,"file":"Repeater-BAEfOMZI.js","names":[],"sources":["../src/components/Repeater/Repeater.module.css","../src/components/Repeater/Repeater.tsx"],"sourcesContent":[".repeater {\n  display: flex;\n}\n\n.repeater--row {\n  flex-direction: row;\n}\n\n.repeater--row-reverse {\n  flex-direction: row-reverse;\n}\n\n.repeater--column {\n  flex-direction: column;\n}\n\n.repeater--column-reverse {\n  flex-direction: column-reverse;\n}\n\n.repeater--gap-025 {\n  gap: 0.25rem;\n}\n\n.repeater--gap-050 {\n  gap: 0.5rem;\n}\n\n.repeater--gap-075 {\n  gap: 0.75rem;\n}\n\n.repeater--gap-100 {\n  gap: 1rem;\n}\n\n.repeater--gap-150 {\n  gap: 1.5rem;\n}\n\n.repeater--gap-200 {\n  gap: 2rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './Repeater.module.css';\n\nexport interface RepeaterProps {\n  /** The direction of the items. */\n  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** The gap between the items. */\n  gap?: '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** Represents a component to show a list of items. */\nexport const Repeater = ({ children, flexDirection = 'column', gap = '050' }: PropsWithChildren<RepeaterProps>) => {\n  return (\n    <div className={clsx(styles['repeater'], styles[`repeater--${flexDirection}`], styles[`repeater--gap-${gap}`])}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;GCca,KAAY,EAAE,aAAU,mBAAgB,UAAU,SAAM,YAEjE,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,UAAa,EAAO,aAAa,MAAkB,EAAO,iBAAiB,IAAM;CAC1G;AACE,CAAA"}

package/dist/{SectionNotification-BT0Z2edJ.js → SectionNotification-CN-NdGL8.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/SectionNotification.css';//#region src/components/SectionNotification/SectionNotification.module.css
 var n = {
@@ -11,4 +11,4 @@ var n = {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=SectionNotification-BT0Z2edJ.js.map
+//# sourceMappingURL=SectionNotification-CN-NdGL8.js.map

package/dist/{SectionNotification-BT0Z2edJ.js.map → SectionNotification-CN-NdGL8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SectionNotification-BT0Z2edJ.js","names":[],"sources":["../src/components/SectionNotification/SectionNotification.module.css","../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":[".section-notification {\n  align-items: center;\n  background-color: var(--color-orange-100);\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n  padding: 0.75rem 1rem;\n}\n\n.section-notification--fullwidth {\n  width: 100%;\n}\n","import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  /** `true` if the notification bar should be full width; otherwise, `false`. */\n  fullWidth?: boolean;\n}\n\n/** Represents a component to show notifications within a [Card](/story/atoms-card--card-example). */\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;GCYa,KAAuB,EAAE,eAAY,IAAO,kBACvD,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,yBAAyB,GACnD,EAAO,qCAAqC,EAC/C,CAAC;CAEA;AACE,CAAA"}
+{"version":3,"file":"SectionNotification-CN-NdGL8.js","names":[],"sources":["../src/components/SectionNotification/SectionNotification.module.css","../src/components/SectionNotification/SectionNotification.tsx"],"sourcesContent":[".section-notification {\n  align-items: center;\n  background-color: var(--color-orange-100);\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n  padding: 0.75rem 1rem;\n}\n\n.section-notification--fullwidth {\n  width: 100%;\n}\n","import classNames from 'clsx';\n\nimport type { PropsWithChildren } from 'react';\n\nimport styles from './SectionNotification.module.css';\n\nexport interface SectionNotificationProps {\n  /** `true` if the notification bar should be full width; otherwise, `false`. */\n  fullWidth?: boolean;\n}\n\n/** Represents a component to show notifications within a [Card](/story/atoms-card--card-example). */\nexport const SectionNotification = ({ fullWidth = false, children }: PropsWithChildren<SectionNotificationProps>) => (\n  <div\n    className={classNames(styles['section-notification'], {\n      [styles['section-notification--fullwidth']]: fullWidth,\n    })}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;GCYa,KAAuB,EAAE,eAAY,IAAO,kBACvD,kBAAC,OAAD;CACE,WAAW,EAAW,EAAO,yBAAyB,GACnD,EAAO,qCAAqC,EAC/C,CAAC;CAEA;AACE,CAAA"}

package/dist/{Slider-dCmT0VM2.js → Slider-Czd2xAGf.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { useEffect as n, useEffectEvent as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -99,4 +99,4 @@ import './assets/Slider.css';var c = {
 //#endregion
 export { p as t };
 
-//# sourceMappingURL=Slider-dCmT0VM2.js.map
+//# sourceMappingURL=Slider-Czd2xAGf.js.map

package/dist/{Slider-dCmT0VM2.js.map → Slider-Czd2xAGf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Slider-dCmT0VM2.js","names":[],"sources":["../src/components/Slider/Slider.module.css","../src/components/Slider/Slider.tsx"],"sourcesContent":[".slider_wrapper {\n  align-items: center;\n  display: flex;\n  gap: 1rem;\n  width: 100%;\n}\n\n.slider_button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1 / 1;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  width: 2rem;\n}\n\n.slider_button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_button:hover {\n  border-color: var(--color-grey-700);\n}\n\n.slider_button:disabled,\n.slider_button:disabled:hover {\n  border: none;\n  cursor: not-allowed;\n}\n\n.slider_trackwrapper {\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n\n.slider_balloon {\n  color: var(--color-uva-black);\n  font-weight: var(--semibold);\n  position: absolute;\n  text-align: center;\n  top: -1.8125rem;\n  white-space: nowrap;\n}\n\n.slider_input {\n  appearance: none;\n  background: var(--color-grey-400);\n  flex-grow: 1;\n  height: 0.25rem;\n}\n\n.slider_input:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_input:disabled {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-runnable-track {\n  appearance: none;\n  color: var(--color-navy-600);\n  cursor: pointer;\n  height: 2rem;\n  margin-top: -0.125rem;\n}\n\n.slider_input:disabled::-webkit-slider-runnable-track {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(0.5rem + 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-webkit-slider-thumb,\n.slider_input:disabled:hover::-webkit-slider-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-moz-range-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-moz-range-thumb,\n.slider_input:hover:disabled::-moz-range-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-ms-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-ms-thumb,\n.slider_input:hover:disabled::-ms-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-ms-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-progress {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-moz-range-track {\n  background-color: var(--color-grey-400);\n}\n\n.slider_input::-ms-fill-lower {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-ms-fill-upper {\n  background-color: var(--color-grey-400);\n}\n","import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-grey-700) 0%, \r\n         var(--color-grey-700) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-navy-600) 0%, \r\n         var(--color-navy-600) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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"}
+{"version":3,"file":"Slider-Czd2xAGf.js","names":[],"sources":["../src/components/Slider/Slider.module.css","../src/components/Slider/Slider.tsx"],"sourcesContent":[".slider_wrapper {\n  align-items: center;\n  display: flex;\n  gap: 1rem;\n  width: 100%;\n}\n\n.slider_button {\n  align-items: center;\n  appearance: none;\n  aspect-ratio: 1 / 1;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n  color: var(--color-uva-black);\n  cursor: pointer;\n  display: flex;\n  height: 2rem;\n  justify-content: center;\n  width: 2rem;\n}\n\n.slider_button:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_button:hover {\n  border-color: var(--color-grey-700);\n}\n\n.slider_button:disabled,\n.slider_button:disabled:hover {\n  border: none;\n  cursor: not-allowed;\n}\n\n.slider_trackwrapper {\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n\n.slider_balloon {\n  color: var(--color-uva-black);\n  font-weight: var(--semibold);\n  position: absolute;\n  text-align: center;\n  top: -1.8125rem;\n  white-space: nowrap;\n}\n\n.slider_input {\n  appearance: none;\n  background: var(--color-grey-400);\n  flex-grow: 1;\n  height: 0.25rem;\n}\n\n.slider_input:focus-visible {\n  outline: 0.125rem dotted var(--color-navy-600);\n  outline-offset: 0.125rem;\n}\n\n.slider_input:disabled {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-runnable-track {\n  appearance: none;\n  color: var(--color-navy-600);\n  cursor: pointer;\n  height: 2rem;\n  margin-top: -0.125rem;\n}\n\n.slider_input:disabled::-webkit-slider-runnable-track {\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(0.5rem + 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-webkit-slider-thumb,\n.slider_input:disabled:hover::-webkit-slider-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-moz-range-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-moz-range-thumb,\n.slider_input:hover:disabled::-moz-range-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-ms-thumb {\n  appearance: none;\n  background: var(--color-uva-white);\n  border: 2px solid var(--color-navy-600);\n  border-radius: 0.125rem;\n  cursor: pointer;\n  height: var(--thumb-size);\n  margin-top: calc(-0.25rem - 1px);\n  position: relative;\n  width: var(--thumb-size);\n}\n\n.slider_input:disabled::-ms-thumb,\n.slider_input:hover:disabled::-ms-thumb {\n  background: var(--color-grey-700);\n  border: 2px solid var(--color-grey-700);\n  cursor: not-allowed;\n}\n\n.slider_input::-webkit-slider-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-ms-thumb:hover {\n  background: var(--color-navy-200);\n  border: 2px solid var(--color-navy-800);\n}\n\n.slider_input::-moz-range-progress {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-moz-range-track {\n  background-color: var(--color-grey-400);\n}\n\n.slider_input::-ms-fill-lower {\n  background-color: var(--color-navy-600);\n}\n\n.slider_input::-ms-fill-upper {\n  background-color: var(--color-grey-400);\n}\n","import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n  /* The minimum value of the slider */\r\n  min: number;\r\n  /* The maximum value of the slider */\r\n  max: number;\r\n  /* The current value of the slider */\r\n  value?: number;\r\n  /* The step value of the slider */\r\n  step?: number;\r\n  /* The units to display next to the value */\r\n  units?: string;\r\n  /* aria-label labels for navigation buttons  */\r\n  navigationLabels?: { increase: string; decrease: string };\r\n  /* Whether the slider is disabled */\r\n  disabled?: boolean;\r\n  /* Callback function when the value changes */\r\n  onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n  min,\r\n  max,\r\n  value,\r\n  step = 1,\r\n  units,\r\n  navigationLabels,\r\n  disabled = false,\r\n  onChange,\r\n}: SliderProps) => {\r\n  const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n  const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n  const sliderRef = useRef<HTMLInputElement>(null);\r\n  const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n  const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleButtonClick = (direction: number) => {\r\n    const newValue = sliderValue + direction * step;\r\n    if (newValue >= min && newValue <= max) {\r\n      setSliderValue(newValue);\r\n      paintValueOnTrack(newValue);\r\n      setFloaterPosition(newValue);\r\n      if (onChange) {\r\n        onChange(newValue);\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number(event.target.value);\r\n    setSliderValue(newValue);\r\n    paintValueOnTrack(newValue);\r\n    setFloaterPosition(newValue);\r\n    if (onChange) {\r\n      onChange(newValue);\r\n    }\r\n  };\r\n\r\n  const paintValueOnTrack = (valueToPaint: number) => {\r\n    if (!sliderRef.current) return;\r\n    const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n    if (disabled) {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-grey-700) 0%, \r\n         var(--color-grey-700) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    } else {\r\n      sliderRef.current.style.background = `linear-gradient(\r\n         to right, \r\n         var(--color-navy-600) 0%, \r\n         var(--color-navy-600) ${percentage}%, \r\n         var(--color-grey-400) ${percentage}%, \r\n         var(--color-grey-400) 100%)`;\r\n    }\r\n  };\r\n\r\n  const setFloaterPosition = (value: number) => {\r\n    if (trackWrapperRef.current && balloonRef.current) {\r\n      const balloonWidth = balloonRef.current.clientWidth;\r\n      const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n      const position = ((value - min) / (max - min)) * trackWidth;\r\n      const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n      const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n      setBalloonLeftPosition(`${clampedLeft}px`);\r\n    }\r\n  };\r\n\r\n  const initializeSlider = useEffectEvent((value: number) => {\r\n    setSliderValue(value);\r\n    paintValueOnTrack(value);\r\n    setFloaterPosition(value);\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (value !== undefined) {\r\n      initializeSlider(value);\r\n    }\r\n  }, [value, disabled]);\r\n\r\n  return (\r\n    <div className={styles['slider_wrapper']}>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(-1)}\r\n        aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Minus\" size={20} />\r\n      </button>\r\n      <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n        <div\r\n          className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n          style={{ left: balloonLeftPosition }}\r\n          ref={balloonRef}\r\n        >\r\n          {sliderValue}\r\n          {units && <span className={styles['slider_units']}>{units}</span>}\r\n        </div>\r\n        <input\r\n          type=\"range\"\r\n          className={styles['slider_input']}\r\n          min={min}\r\n          max={max}\r\n          step={step}\r\n          value={sliderValue}\r\n          onChange={handleSliderChange}\r\n          ref={sliderRef}\r\n          style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={sliderValue}\r\n          aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n          aria-label=\"Slider\"\r\n          disabled={disabled}\r\n        />\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        className={styles['slider_button']}\r\n        onClick={() => handleButtonClick(1)}\r\n        aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n        disabled={disabled}\r\n      >\r\n        <Icon name=\"Plus\" size={20} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"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"}

package/dist/{SortableProvider-DV6gWmq_.js → SortableProvider-D-6Ttz0h.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { t } from "./Sortable.module-CgDMpWM8.js";
 import { initialState as n, sortableReducer as r } from "./components/Sortable/sortableReducer.js";
 import { clearDraggingSource as i, clearDraggingTarget as a, dragEnd as o, dragStart as s, drop as c, moveToPosition as l, reset as u, setClone as d, setDraggingSource as f, setDraggingTarget as p } from "./components/Sortable/actions.js";
@@ -144,4 +144,4 @@ function E() {
 //#endregion
 export { E as n, x as r, T as t };
 
-//# sourceMappingURL=SortableProvider-DV6gWmq_.js.map
+//# sourceMappingURL=SortableProvider-D-6Ttz0h.js.map

package/dist/{SortableProvider-DV6gWmq_.js.map → SortableProvider-D-6Ttz0h.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SortableProvider-DV6gWmq_.js","names":[],"sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps) {\n  const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n  const containerRef = useRef<HTMLUListElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const indicesRef = useRef<number[]>(indices);\n\n  function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n    const sortableContainer = containerRef.current;\n\n    if (!sortableContainer?.hasChildNodes()) return;\n\n    const listItemNode = event.currentTarget;\n    const childNodes = Array.from(sortableContainer.childNodes);\n    const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n    return targetIndex;\n  }\n\n  function handleDrop(event: DragEvent<HTMLLIElement>) {\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined) return;\n\n    if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n    drop(targetIndex);\n  }\n\n  function handleDragOver(event: DragEvent<HTMLLIElement>) {\n    // Prevent default to allow drop\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n\n    if (clone) {\n      const { clientX, clientY } = event;\n      const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const grabPosition = height / 2 - (clientY - y);\n\n      // lock drag image movement to x-axis and mouse pointer\n      clone.setAttribute(\n        'style',\n        `\n        left: ${clientX - (clientX - x)}px;\n        top: ${y - grabPosition}px;\n        height: ${height}px;\n        width: ${width}px;\n        visibility: visible;\n      `\n      );\n    }\n\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n    setDraggingTarget(targetIndex);\n  }\n\n  function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n    const { relatedTarget } = event;\n\n    const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n    if (!within) {\n      reset();\n\n      if (clone) {\n        clone.setAttribute('style', 'visibility: hidden;');\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (!clone || !wrapperRef.current) return;\n\n    wrapperRef.current.appendChild(clone);\n\n    return function () {\n      clone.remove();\n    };\n  }, [clone]);\n\n  useEffect(() => {\n    if (!onSort) return;\n\n    if (indices.valueOf() !== indicesRef.current.valueOf()) {\n      onSort(indices);\n\n      indicesRef.current = indices;\n    }\n  }, [indices, indicesRef, onSort]);\n\n  return (\n    <div\n      className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n      ref={wrapperRef}\n    >\n      <ul\n        className={clsx(styles['sortable__container'], {\n          [styles['sortable__container--drag-over']]: clone !== undefined,\n        })}\n        onDragLeave={handleContainerDragLeave}\n        ref={containerRef}\n        role=\"presentation\"\n      >\n        {sortableItems.map((child, index) => (\n          <li\n            className={clsx(styles['sortable__drop-target'], {\n              [styles['sortable__drop-target--no-number']]: hideNumbers,\n            })}\n            draggable={false}\n            key={index}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n            role=\"presentation\"\n          >\n            {cloneElement(child, { index })}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n","import { createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { SortableStateType } from './sortableReducer';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n  clearDraggingSource: () => void;\n  clearDraggingTarget: () => void;\n  dragEnd: () => void;\n  dragStart: (index: number) => void;\n  drop: (index: number) => void;\n  moveToPosition: (index: number) => void;\n  reset: () => void;\n  setClone: (node: Element) => void;\n  setDraggingSource: (index: number) => void;\n  setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\ninterface Props<T = unknown> {\n  renderItems: SortableItems;\n  dataItems: T[];\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: (items: T[]) => void;\n  children?: ReactNode;\n}\n\nfunction isReactElementWithIndex(value: string | ReactElement): value is ReactElement<{ index: number }> {\n  return typeof value !== 'string';\n}\n\nconst init = (renderItems: SortableItems): SortableStateType => {\n  const reactChildren = renderItems.filter(isReactElementWithIndex);\n\n  return {\n    ...initialState,\n    indices: reactChildren.map(({ props }) => props.index),\n    maxIndex: reactChildren.length - 1,\n    sortableItems: reactChildren,\n  };\n};\n\nexport function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>) {\n  const persistentItems = useRef(dataItems);\n\n  const [state, dispatch] = useReducer(sortableReducer, renderItems, init);\n\n  function setDraggingSource(index: number) {\n    dispatch(actions.setDraggingSource(index));\n  }\n\n  function setDraggingTarget(index: number) {\n    dispatch(actions.setDraggingTarget(index));\n  }\n\n  function moveToPosition(index: number) {\n    dispatch(actions.moveToPosition(index));\n  }\n\n  function clearDraggingTarget() {\n    dispatch(actions.clearDraggingTarget());\n  }\n\n  function clearDraggingSource() {\n    dispatch(actions.clearDraggingSource());\n  }\n\n  function drop(index: number) {\n    dispatch(actions.drop(index));\n  }\n\n  function dragStart(index: number) {\n    dispatch(actions.dragStart(index));\n  }\n\n  function dragEnd() {\n    dispatch(actions.dragEnd());\n  }\n\n  function reset() {\n    dispatch(actions.reset());\n  }\n\n  function setClone(node: Element) {\n    dispatch(actions.setClone(node));\n  }\n\n  function onHandleSort(sortedIndices: number[]) {\n    const sortedData = sortedIndices.map((index) => persistentItems.current[index]);\n    onSort && onSort(sortedData);\n  }\n\n  return (\n    <SortableContext.Provider\n      value={{\n        ...state,\n        clearDraggingSource,\n        clearDraggingTarget,\n        dragEnd,\n        dragStart,\n        drop,\n        moveToPosition,\n        reset,\n        setClone,\n        setDraggingSource,\n        setDraggingTarget,\n      }}\n    >\n      <SortableContainer scrollable={scrollable} hideNumbers={hideNumbers} onSort={onHandleSort} />\n    </SortableContext.Provider>\n  );\n}\n\nexport function useSortable() {\n  const context = useContext(SortableContext);\n\n  if (context === undefined) {\n    throw new Error('useSortable must be used within a SortableProvider');\n  }\n\n  return context;\n}\n"],"mappings":"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"}
+{"version":3,"file":"SortableProvider-D-6Ttz0h.js","names":[],"sources":["../src/components/Sortable/components/SortableContainer.tsx","../src/components/Sortable/SortableProvider.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent } from 'react';\n\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport type OnSort = (indices: number[]) => void;\n\ninterface SortableContainerProps {\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: OnSort;\n}\n\nexport function SortableContainer({ scrollable, hideNumbers, onSort }: SortableContainerProps) {\n  const { clone, draggingTarget, drop, sortableItems, setDraggingTarget, reset, indices } = useSortable();\n  const containerRef = useRef<HTMLUListElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const indicesRef = useRef<number[]>(indices);\n\n  function getTargetIndex(event: DragEvent<HTMLLIElement>) {\n    const sortableContainer = containerRef.current;\n\n    if (!sortableContainer?.hasChildNodes()) return;\n\n    const listItemNode = event.currentTarget;\n    const childNodes = Array.from(sortableContainer.childNodes);\n    const targetIndex = childNodes.findIndex((node) => node.isEqualNode(listItemNode));\n\n    return targetIndex;\n  }\n\n  function handleDrop(event: DragEvent<HTMLLIElement>) {\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined) return;\n\n    if (clone && wrapperRef.current) wrapperRef.current.removeChild(clone);\n\n    drop(targetIndex);\n  }\n\n  function handleDragOver(event: DragEvent<HTMLLIElement>) {\n    // Prevent default to allow drop\n    event.preventDefault();\n    event.dataTransfer.dropEffect = 'move';\n\n    if (clone) {\n      const { clientX, clientY } = event;\n      const { x, y, width, height } = event.currentTarget.getBoundingClientRect();\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const grabPosition = height / 2 - (clientY - y);\n\n      // lock drag image movement to x-axis and mouse pointer\n      clone.setAttribute(\n        'style',\n        `\n        left: ${clientX - (clientX - x)}px;\n        top: ${y - grabPosition}px;\n        height: ${height}px;\n        width: ${width}px;\n        visibility: visible;\n      `\n      );\n    }\n\n    const targetIndex = getTargetIndex(event);\n\n    if (targetIndex === undefined || targetIndex === draggingTarget) return;\n\n    setDraggingTarget(targetIndex);\n  }\n\n  function handleContainerDragLeave(event: DragEvent<HTMLUListElement>) {\n    const { relatedTarget } = event;\n\n    const within = relatedTarget !== null && containerRef.current?.contains(relatedTarget as Node);\n\n    if (!within) {\n      reset();\n\n      if (clone) {\n        clone.setAttribute('style', 'visibility: hidden;');\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (!clone || !wrapperRef.current) return;\n\n    wrapperRef.current.appendChild(clone);\n\n    return function () {\n      clone.remove();\n    };\n  }, [clone]);\n\n  useEffect(() => {\n    if (!onSort) return;\n\n    if (indices.valueOf() !== indicesRef.current.valueOf()) {\n      onSort(indices);\n\n      indicesRef.current = indices;\n    }\n  }, [indices, indicesRef, onSort]);\n\n  return (\n    <div\n      className={clsx(styles['sortable__wrapper'], { [styles['sortable__wrapper--scrollable']]: scrollable })}\n      ref={wrapperRef}\n    >\n      <ul\n        className={clsx(styles['sortable__container'], {\n          [styles['sortable__container--drag-over']]: clone !== undefined,\n        })}\n        onDragLeave={handleContainerDragLeave}\n        ref={containerRef}\n        role=\"presentation\"\n      >\n        {sortableItems.map((child, index) => (\n          <li\n            className={clsx(styles['sortable__drop-target'], {\n              [styles['sortable__drop-target--no-number']]: hideNumbers,\n            })}\n            draggable={false}\n            key={index}\n            onDragOver={handleDragOver}\n            onDrop={handleDrop}\n            role=\"presentation\"\n          >\n            {cloneElement(child, { index })}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n","import { createContext, useContext, useReducer, useRef } from 'react';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport type { SortableStateType } from './sortableReducer';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport { sortableReducer, initialState } from './sortableReducer';\nimport { SortableContainer } from './components/SortableContainer';\nimport * as actions from './actions';\n\ntype SortableContextType = {\n  clearDraggingSource: () => void;\n  clearDraggingTarget: () => void;\n  dragEnd: () => void;\n  dragStart: (index: number) => void;\n  drop: (index: number) => void;\n  moveToPosition: (index: number) => void;\n  reset: () => void;\n  setClone: (node: Element) => void;\n  setDraggingSource: (index: number) => void;\n  setDraggingTarget: (index: number) => void;\n};\n\nconst SortableContext = createContext<(SortableContextType & SortableStateType) | undefined>(undefined);\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\ninterface Props<T = unknown> {\n  renderItems: SortableItems;\n  dataItems: T[];\n  scrollable?: boolean;\n  hideNumbers?: boolean;\n  onSort?: (items: T[]) => void;\n  children?: ReactNode;\n}\n\nfunction isReactElementWithIndex(value: string | ReactElement): value is ReactElement<{ index: number }> {\n  return typeof value !== 'string';\n}\n\nconst init = (renderItems: SortableItems): SortableStateType => {\n  const reactChildren = renderItems.filter(isReactElementWithIndex);\n\n  return {\n    ...initialState,\n    indices: reactChildren.map(({ props }) => props.index),\n    maxIndex: reactChildren.length - 1,\n    sortableItems: reactChildren,\n  };\n};\n\nexport function SortableProvider<T>({ renderItems, dataItems, scrollable, hideNumbers, onSort }: Props<T>) {\n  const persistentItems = useRef(dataItems);\n\n  const [state, dispatch] = useReducer(sortableReducer, renderItems, init);\n\n  function setDraggingSource(index: number) {\n    dispatch(actions.setDraggingSource(index));\n  }\n\n  function setDraggingTarget(index: number) {\n    dispatch(actions.setDraggingTarget(index));\n  }\n\n  function moveToPosition(index: number) {\n    dispatch(actions.moveToPosition(index));\n  }\n\n  function clearDraggingTarget() {\n    dispatch(actions.clearDraggingTarget());\n  }\n\n  function clearDraggingSource() {\n    dispatch(actions.clearDraggingSource());\n  }\n\n  function drop(index: number) {\n    dispatch(actions.drop(index));\n  }\n\n  function dragStart(index: number) {\n    dispatch(actions.dragStart(index));\n  }\n\n  function dragEnd() {\n    dispatch(actions.dragEnd());\n  }\n\n  function reset() {\n    dispatch(actions.reset());\n  }\n\n  function setClone(node: Element) {\n    dispatch(actions.setClone(node));\n  }\n\n  function onHandleSort(sortedIndices: number[]) {\n    const sortedData = sortedIndices.map((index) => persistentItems.current[index]);\n    onSort && onSort(sortedData);\n  }\n\n  return (\n    <SortableContext.Provider\n      value={{\n        ...state,\n        clearDraggingSource,\n        clearDraggingTarget,\n        dragEnd,\n        dragStart,\n        drop,\n        moveToPosition,\n        reset,\n        setClone,\n        setDraggingSource,\n        setDraggingTarget,\n      }}\n    >\n      <SortableContainer scrollable={scrollable} hideNumbers={hideNumbers} onSort={onHandleSort} />\n    </SortableContext.Provider>\n  );\n}\n\nexport function useSortable() {\n  const context = useContext(SortableContext);\n\n  if (context === undefined) {\n    throw new Error('useSortable must be used within a SortableProvider');\n  }\n\n  return context;\n}\n"],"mappings":"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"}

package/dist/{StatusBage-CfEIuIPa.js → StatusBage-hJmNPqtk.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { jsx as t } from "react/jsx-runtime";
 import './assets/StatusBage.css';var n = {
 	statusbadge: "_statusbadge_1irx5_1",
@@ -10,4 +10,4 @@ import './assets/StatusBage.css';var n = {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=StatusBage-CfEIuIPa.js.map
+//# sourceMappingURL=StatusBage-hJmNPqtk.js.map

package/dist/{StatusBage-CfEIuIPa.js.map → StatusBage-hJmNPqtk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"StatusBage-CfEIuIPa.js","names":[],"sources":["../src/components/StatusBadge/StatusBadge.module.css","../src/components/StatusBadge/StatusBage.tsx"],"sourcesContent":[".statusbadge {\n  align-items: center;\n  background-color: var(--color-grey-200);\n  color: var(--color-grey-700);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-text-non-essential);\n  height: 1.5rem;\n  padding: 0 0.5rem;\n  white-space: nowrap;\n  width: fit-content;\n}\n\n.statusbadge--high-contrast {\n  background-color: var(--color-uva-white);\n}\n","import { clsx } from 'clsx';\n\nimport styles from './StatusBadge.module.css';\n\nexport interface StatusBadgeProps {\n  /** Text on the badge */\n  label: string;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n}\n\nexport const StatusBadge = ({ label, highContrast = false }: StatusBadgeProps) => {\n  return (\n    <div className={clsx(styles['statusbadge'], [highContrast && styles['statusbadge--high-contrast']])}>{label}</div>\n  );\n};\n"],"mappings":";;;;;GCWa,KAAe,EAAE,UAAO,kBAAe,SAEhD,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,aAAgB,CAAC,KAAgB,EAAO,6BAA6B,CAAC;WAAI;AAAW,CAAA"}
+{"version":3,"file":"StatusBage-hJmNPqtk.js","names":[],"sources":["../src/components/StatusBadge/StatusBadge.module.css","../src/components/StatusBadge/StatusBage.tsx"],"sourcesContent":[".statusbadge {\n  align-items: center;\n  background-color: var(--color-grey-200);\n  color: var(--color-grey-700);\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-text-non-essential);\n  height: 1.5rem;\n  padding: 0 0.5rem;\n  white-space: nowrap;\n  width: fit-content;\n}\n\n.statusbadge--high-contrast {\n  background-color: var(--color-uva-white);\n}\n","import { clsx } from 'clsx';\n\nimport styles from './StatusBadge.module.css';\n\nexport interface StatusBadgeProps {\n  /** Text on the badge */\n  label: string;\n  /** true to render the card with high contrast colors; otherwise, false. The default is false. */\n  highContrast?: boolean;\n}\n\nexport const StatusBadge = ({ label, highContrast = false }: StatusBadgeProps) => {\n  return (\n    <div className={clsx(styles['statusbadge'], [highContrast && styles['statusbadge--high-contrast']])}>{label}</div>\n  );\n};\n"],"mappings":";;;;;GCWa,KAAe,EAAE,UAAO,kBAAe,SAEhD,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,aAAgB,CAAC,KAAgB,EAAO,6BAA6B,CAAC;WAAI;AAAW,CAAA"}

package/dist/{StatusPill-CbJV4t-V.js → StatusPill-vdqU92pW.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import './assets/StatusPill.css';//#region src/components/StatusPill/StatusPill.module.css
@@ -27,4 +27,4 @@ function o({ status: o, variant: s = "default", label: c }) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=StatusPill-CbJV4t-V.js.map
+//# sourceMappingURL=StatusPill-vdqU92pW.js.map

package/dist/{StatusPill-CbJV4t-V.js.map → StatusPill-vdqU92pW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"StatusPill-CbJV4t-V.js","names":[],"sources":["../src/components/StatusPill/StatusPill.module.css","../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":[".status-pill {\n  align-items: center;\n  border-radius: 1.5rem;\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  width: fit-content;\n}\n\n.status-pill__possible {\n  background-color: var(--color-forest-100);\n  color: var(--color-forest-900);\n}\n\n.status-pill__impossible {\n  background-color: var(--color-red-100);\n  color: var(--color-red-800);\n}\n\n.status-pill__new {\n  background-color: var(--color-navy-100);\n  color: var(--color-navy-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.status-pill__dark {\n  background-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n  font-size: var(--font-size-text-non-essential);\n  font-weight: var(--semibold);\n}\n\n.status-pill--bar {\n  border-radius: 0;\n  justify-content: center;\n  padding: 0.5rem;\n  width: 100%;\n}\n\n.status-pill--compact {\n  height: 1.125rem;\n  padding: 0.125rem 0.5rem 0 0.5rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  /** The status to convey. */\n  status: 'possible' | 'impossible' | 'new' | 'dark';\n  /** The variant of the pill. */\n  variant?: 'default' | 'bar' | 'compact';\n  /** A description of the status. */\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      {(status === 'possible' || status === 'impossible') && (\n        <Icon name={iconNameMap[status]!} title={status} size={16} />\n      )}\n      {label}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;GCiBM,IAA6E;CACjF,UAAU;CACV,YAAY;AACd;AAGA,SAAgB,EAAW,EAAE,WAAQ,aAAU,WAAW,YAA0B;CAClF,OACE,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,gBACP,EAAO,gBAAgB,MACvB,MAAY,aAAa,EAAO,gBAAgB,IAClD;YALF,EAOI,MAAW,cAAc,MAAW,iBACpC,kBAAC,GAAD;GAAM,MAAM,EAAY;GAAU,OAAO;GAAQ,MAAM;EAAK,CAAA,GAE7D,CACG;;AAEV"}
+{"version":3,"file":"StatusPill-vdqU92pW.js","names":[],"sources":["../src/components/StatusPill/StatusPill.module.css","../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":[".status-pill {\n  align-items: center;\n  border-radius: 1.5rem;\n  display: flex;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  width: fit-content;\n}\n\n.status-pill__possible {\n  background-color: var(--color-forest-100);\n  color: var(--color-forest-900);\n}\n\n.status-pill__impossible {\n  background-color: var(--color-red-100);\n  color: var(--color-red-800);\n}\n\n.status-pill__new {\n  background-color: var(--color-navy-100);\n  color: var(--color-navy-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.status-pill__dark {\n  background-color: var(--color-uva-black);\n  color: var(--color-uva-white);\n  font-size: var(--font-size-text-non-essential);\n  font-weight: var(--semibold);\n}\n\n.status-pill--bar {\n  border-radius: 0;\n  justify-content: center;\n  padding: 0.5rem;\n  width: 100%;\n}\n\n.status-pill--compact {\n  height: 1.125rem;\n  padding: 0.125rem 0.5rem 0 0.5rem;\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n  /** The status to convey. */\n  status: 'possible' | 'impossible' | 'new' | 'dark';\n  /** The variant of the pill. */\n  variant?: 'default' | 'bar' | 'compact';\n  /** A description of the status. */\n  label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n  possible: 'CheckCircleFillMini',\n  impossible: 'CrossCircleFillMini',\n};\n\n/** Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n  return (\n    <span\n      className={clsx(\n        styles['status-pill'],\n        styles[`status-pill__${status}`],\n        variant !== 'default' && styles[`status-pill--${variant}`]\n      )}\n    >\n      {(status === 'possible' || status === 'impossible') && (\n        <Icon name={iconNameMap[status]!} title={status} size={16} />\n      )}\n      {label}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;GCiBM,IAA6E;CACjF,UAAU;CACV,YAAY;AACd;AAGA,SAAgB,EAAW,EAAE,WAAQ,aAAU,WAAW,YAA0B;CAClF,OACE,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,gBACP,EAAO,gBAAgB,MACvB,MAAY,aAAa,EAAO,gBAAgB,IAClD;YALF,EAOI,MAAW,cAAc,MAAW,iBACpC,kBAAC,GAAD;GAAM,MAAM,EAAY;GAAU,OAAO;GAAQ,MAAM;EAAK,CAAA,GAE7D,CACG;;AAEV"}

package/dist/{TableCellContextMenu-9V8mnPmU.js → TableCellContextMenu--4IdoKAU.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
-import { t as n } from "./LexicalComposerContext.prod-y_BRxu3Z.js";
+import { t as n } from "./LexicalComposerContext.prod-DumMmRBt.js";
 import { useTranslation as r } from "./components/RteEditor/hooks/useTranslation.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -116,4 +116,4 @@ var l = {
 //#endregion
 export { h as t };
 
-//# sourceMappingURL=TableCellContextMenu-9V8mnPmU.js.map
+//# sourceMappingURL=TableCellContextMenu--4IdoKAU.js.map

package/dist/{TableCellContextMenu-9V8mnPmU.js.map → TableCellContextMenu--4IdoKAU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TableCellContextMenu-9V8mnPmU.js","names":[],"sources":["../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css","../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":[".context-menu__wrapper {\n  left: 0;\n  min-width: 10rem;\n  position: fixed;\n  top: 0;\n  visibility: visible;\n  z-index: 1000;\n}\n\n.context-menu__button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: 0;\n  border-radius: 4px;\n  color: var(--color-grey-700);\n  display: flex;\n  height: 1.35rem;\n  justify-content: center;\n  position: absolute;\n  right: 0.25rem;\n  top: -1.6rem;\n  width: 1.35rem;\n}\n\n.context-menu {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-500);\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0 0 0 / 20%);\n  height: 0;\n  list-style-type: none;\n  margin: -2px 0 0;\n  overflow: hidden;\n  padding: 0;\n  visibility: hidden;\n}\n\n.context-menu--open {\n  height: auto;\n  visibility: visible;\n}\n\n.context-menu__item {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: none;\n  color: var(--color-uva-black);\n  display: flex;\n  padding: 0.65rem;\n  width: 100%;\n}\n\n.context-menu__item:hover {\n  background-color: var(--color-grey-300);\n}\n\n.context-menu__item-divider {\n  border-bottom: 1px solid var(--color-grey-500);\n}\n\n.context-menu__wrapper--hidden,\n.context-menu__wrapper--hidden .context-menu {\n  visibility: hidden;\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n  | 'insertRowAbove'\n  | 'insertRowBelow'\n  | 'deleteRow'\n  | 'deleteTable'\n  | 'insertColumnLeft'\n  | 'insertColumnRight'\n  | 'deleteColumn';\ninterface TableCellContextMenuProps {\n  position: Position;\n  parentScrollPosition: number;\n  onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n  const measureElement = srcElement.cloneNode(true) as HTMLElement;\n  measureElement.style.height = 'auto';\n  measureElement.style.left = '-3000px';\n  document.body.appendChild(measureElement);\n  const height = measureElement.getBoundingClientRect().height;\n  document.body.removeChild(measureElement);\n  return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n  const t = useTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isHidden, setIsHidden] = useState(false);\n  const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n  const [menuHeight, setMenuHeight] = useState(0);\n  const startScrollPosition = useRef(0);\n  const menuRef = useRef<HTMLUListElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [editor] = useLexicalComposerContext();\n\n  const handleAction = (action: Actions) => {\n    onAction(action);\n    setIsOpen(false);\n  };\n\n  const flipMenuIfNotInViewport = () => {\n    const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n    if (containerRef.current && menuRef.current && buttonRef.current) {\n      if (localPosition.xPos < menuWidth && containerRef.current) {\n        containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n        buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n      } else {\n        containerRef.current.style.left = '0px';\n        buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n      }\n\n      if (!menuHeight) {\n        setMenuHeight(measureElement(menuRef.current));\n      }\n\n      if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n        containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n        buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n        buttonRef.current.style.transform = 'rotate(180deg)';\n      } else {\n        containerRef.current.style.top = '0px';\n        buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n        buttonRef.current.style.transform = 'none';\n      }\n    }\n  };\n\n  const setMenuPosition = () => {\n    flipMenuIfNotInViewport();\n    return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n  };\n\n  useEffect(() => {\n    setLocalPosition(position);\n    if (position) {\n      startScrollPosition.current = parentScrollPosition;\n    }\n    setIsOpen(false);\n    setIsHidden(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [position]);\n\n  useEffect(() => {\n    if (buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const rootElement = editor.getRootElement();\n      if (!rootElement) return;\n      if (\n        rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n        rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n      ) {\n        setIsHidden(true);\n      } else {\n        setIsHidden(false);\n      }\n      flipMenuIfNotInViewport();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentScrollPosition]);\n\n  return (\n    <div\n      className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n      style={{\n        transform: `${setMenuPosition()}`,\n      }}\n      ref={containerRef}\n    >\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen((prev) => !prev)}\n        className={styles['context-menu__button']}\n        ref={buttonRef}\n      >\n        <Icon name=\"CheveronDown\" size={16} />\n      </button>\n      <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowAbove')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowAbove}\n          >\n            {t.table.insertRowAbove}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowBelow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowBelow}\n          >\n            {t.table.insertRowBelow}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteRow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteRow}\n          >\n            {t.table.deleteRow}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnLeft')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnLeft}\n          >\n            {t.table.insertColumnLeft}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnRight')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnRight}\n          >\n            {t.table.insertColumnRight}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteColumn')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteColumn}\n          >\n            {t.table.deleteColumn}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteTable')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteTable}\n          >\n            {t.table.deleteTable}\n          </button>\n        </li>\n      </ul>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TableCellContextMenu--4IdoKAU.js","names":[],"sources":["../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.module.css","../src/components/RteEditor/Plugins/TablePlugin/TableCellContextMenu/TableCellContextMenu.tsx"],"sourcesContent":[".context-menu__wrapper {\n  left: 0;\n  min-width: 10rem;\n  position: fixed;\n  top: 0;\n  visibility: visible;\n  z-index: 1000;\n}\n\n.context-menu__button {\n  align-items: center;\n  background-color: var(--color-grey-300);\n  border: 0;\n  border-radius: 4px;\n  color: var(--color-grey-700);\n  display: flex;\n  height: 1.35rem;\n  justify-content: center;\n  position: absolute;\n  right: 0.25rem;\n  top: -1.6rem;\n  width: 1.35rem;\n}\n\n.context-menu {\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-grey-500);\n  border-radius: 4px;\n  box-shadow: 0 2px 6px rgba(0 0 0 / 20%);\n  height: 0;\n  list-style-type: none;\n  margin: -2px 0 0;\n  overflow: hidden;\n  padding: 0;\n  visibility: hidden;\n}\n\n.context-menu--open {\n  height: auto;\n  visibility: visible;\n}\n\n.context-menu__item {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: none;\n  color: var(--color-uva-black);\n  display: flex;\n  padding: 0.65rem;\n  width: 100%;\n}\n\n.context-menu__item:hover {\n  background-color: var(--color-grey-300);\n}\n\n.context-menu__item-divider {\n  border-bottom: 1px solid var(--color-grey-500);\n}\n\n.context-menu__wrapper--hidden,\n.context-menu__wrapper--hidden .context-menu {\n  visibility: hidden;\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\n\nimport type { Position } from 'components/RteEditor/Plugins/ToolbarPlugin';\n\nimport styles from './TableCellContextMenu.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport type Actions =\n  | 'insertRowAbove'\n  | 'insertRowBelow'\n  | 'deleteRow'\n  | 'deleteTable'\n  | 'insertColumnLeft'\n  | 'insertColumnRight'\n  | 'deleteColumn';\ninterface TableCellContextMenuProps {\n  position: Position;\n  parentScrollPosition: number;\n  onAction: (action: Actions) => void;\n}\n\nconst CONTEXT_MENU_OFFSET = 25;\nconst WHITE_SPACE = 10;\nconst BUTTON_SHIFT = 4;\nconst BUTTON_RESET = 25;\n\nconst measureElement = (srcElement: HTMLElement) => {\n  const measureElement = srcElement.cloneNode(true) as HTMLElement;\n  measureElement.style.height = 'auto';\n  measureElement.style.left = '-3000px';\n  document.body.appendChild(measureElement);\n  const height = measureElement.getBoundingClientRect().height;\n  document.body.removeChild(measureElement);\n  return height;\n};\n\nexport const TableCellContextMenu = ({ position, parentScrollPosition, onAction }: TableCellContextMenuProps) => {\n  const t = useTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isHidden, setIsHidden] = useState(false);\n  const [localPosition, setLocalPosition] = useState<Position>({ xPos: 0, yPos: 0, height: 0 });\n  const [menuHeight, setMenuHeight] = useState(0);\n  const startScrollPosition = useRef(0);\n  const menuRef = useRef<HTMLUListElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [editor] = useLexicalComposerContext();\n\n  const handleAction = (action: Actions) => {\n    onAction(action);\n    setIsOpen(false);\n  };\n\n  const flipMenuIfNotInViewport = () => {\n    const menuWidth = menuRef.current ? menuRef.current.getBoundingClientRect().width : 0;\n\n    if (containerRef.current && menuRef.current && buttonRef.current) {\n      if (localPosition.xPos < menuWidth && containerRef.current) {\n        containerRef.current.style.left = `${menuWidth - localPosition.xPos + WHITE_SPACE}px`;\n        buttonRef.current.style.right = `${menuWidth - localPosition.xPos + BUTTON_SHIFT + WHITE_SPACE}px`;\n      } else {\n        containerRef.current.style.left = '0px';\n        buttonRef.current.style.right = `${BUTTON_SHIFT}px`;\n      }\n\n      if (!menuHeight) {\n        setMenuHeight(measureElement(menuRef.current));\n      }\n\n      if (menuHeight > document.documentElement.clientHeight - localPosition.yPos) {\n        containerRef.current.style.top = `-${menuHeight + localPosition.height}px`;\n        buttonRef.current.style.top = `${menuHeight + BUTTON_SHIFT}px`;\n        buttonRef.current.style.transform = 'rotate(180deg)';\n      } else {\n        containerRef.current.style.top = '0px';\n        buttonRef.current.style.top = `-${BUTTON_RESET}px`;\n        buttonRef.current.style.transform = 'none';\n      }\n    }\n  };\n\n  const setMenuPosition = () => {\n    flipMenuIfNotInViewport();\n    return `translate(${(localPosition?.xPos ?? 0) - (menuRef.current ? menuRef.current.getBoundingClientRect().width : 0)}px, ${localPosition.yPos - (parentScrollPosition - startScrollPosition.current)}px)`;\n  };\n\n  useEffect(() => {\n    setLocalPosition(position);\n    if (position) {\n      startScrollPosition.current = parentScrollPosition;\n    }\n    setIsOpen(false);\n    setIsHidden(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [position]);\n\n  useEffect(() => {\n    if (buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const rootElement = editor.getRootElement();\n      if (!rootElement) return;\n      if (\n        rect.top - rootElement.getBoundingClientRect().top <= 0 ||\n        rect.top - rootElement.getBoundingClientRect().bottom + CONTEXT_MENU_OFFSET >= 0\n      ) {\n        setIsHidden(true);\n      } else {\n        setIsHidden(false);\n      }\n      flipMenuIfNotInViewport();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parentScrollPosition]);\n\n  return (\n    <div\n      className={clsx(styles['context-menu__wrapper'], [isHidden && styles['context-menu__wrapper--hidden']])}\n      style={{\n        transform: `${setMenuPosition()}`,\n      }}\n      ref={containerRef}\n    >\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen((prev) => !prev)}\n        className={styles['context-menu__button']}\n        ref={buttonRef}\n      >\n        <Icon name=\"CheveronDown\" size={16} />\n      </button>\n      <ul ref={menuRef} className={clsx(styles['context-menu'], isOpen && styles['context-menu--open'])}>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowAbove')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowAbove}\n          >\n            {t.table.insertRowAbove}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertRowBelow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertRowBelow}\n          >\n            {t.table.insertRowBelow}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteRow')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteRow}\n          >\n            {t.table.deleteRow}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnLeft')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnLeft}\n          >\n            {t.table.insertColumnLeft}\n          </button>\n        </li>\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('insertColumnRight')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableInsertColumnRight}\n          >\n            {t.table.insertColumnRight}\n          </button>\n        </li>\n        <li className={styles['context-menu__item-divider']}>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteColumn')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteColumn}\n          >\n            {t.table.deleteColumn}\n          </button>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            onClick={() => handleAction('deleteTable')}\n            className={styles['context-menu__item']}\n            aria-label={t.aria.labels.tableDeleteTable}\n          >\n            {t.table.deleteTable}\n          </button>\n        </li>\n      </ul>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/TableCellResizerPlugin-Dn8Ks2Lm.js

@@ -0,0 +1,208 @@
+import { t as e } from "./LexicalComposerContext.prod-DumMmRBt.js";
+import { Cn as t, jn as n, ur as r } from "./Lexical.prod-nAj5fF96.js";
+import { l as i, r as a } from "./LexicalUtils.prod-7S6iuu9A.js";
+import { _ as o, l as s, m as c, n as l, o as u, p as d, s as f, v as p, x as m } from "./LexicalTable.prod-BpHQYpBM.js";
+import { $createTableWrapperNode as h, TableWrapperNode as g } from "./components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js";
+import { getEditorContentWidth as _, getEditorParrentCellWidth as v, tableHasContent as y } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
+import { useCallback as b, useEffect as x, useLayoutEffect as S, useMemo as C, useRef as w, useState as T } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { createPortal as k } from "react-dom";
+import './assets/TableCellResizerPlugin.css';//#region node_modules/.pnpm/@lexical+react@0.45.0_react-dom@19.2.7_react@19.2.7__react@19.2.7_yjs@13.6.31/node_modules/@lexical/react/dist/useLexicalEditable.prod.mjs
+var A = n ? S : x;
+function j(e) {
+	return {
+		initialValueFn: () => e.isEditable(),
+		subscribe: (t) => e.registerEditableListener(t)
+	};
+}
+function M() {
+	return function(t) {
+		let [n] = e(), r = C(() => t(n), [n, t]), [i, a] = T(() => r.initialValueFn()), o = w(i);
+		return A(() => {
+			let { initialValueFn: e, subscribe: t } = r, n = e();
+			return o.current !== n && (o.current = n, a(n)), t((e) => {
+				o.current = e, a(e);
+			});
+		}, [r, t]), i;
+	}(j);
+}
+//#endregion
+//#region src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.module.css
+var N = { "table-cell-resizer__resizer": "_table-cell-resizer__resizer_2hhfo_17" }, P = 33, F = 32, I = 2;
+function L({ editor: e }) {
+	let n = w(null), S = w(null), C = w(null), k = w(null), [A, j] = T(null), [M, L] = T(null), [R, z] = T(!1), [B, V] = T(null), H = b(() => {
+		L(null), n.current = null, V(null), k.current = null, C.current = null;
+	}, []), U = (e) => (e.buttons & 1) == 1;
+	x(() => e.registerNodeTransform(f, (t) => {
+		if (!t.getColWidths()) {
+			let n = t.getChildren(), r = t.getColumnCount(), a = Array(r).fill(void 0);
+			n[0].getChildren().forEach((n, o) => {
+				let c = e.getElementByKey(n.getKey());
+				if (c && c.style.width) a[o] = parseInt(c.style.width, 10), c.style.width = "";
+				else if (y(t)) {
+					let n = t ? i(t, s) : null, c = (n ? v(n, r, e) : _(e)) / r;
+					a[o] = Math.max(c, F);
+				} else a[o] = F;
+			}), t.setColWidths(a);
+		}
+		if (t && !(t.getParent() instanceof g)) {
+			let e = h();
+			t.replace(e), e.append(t);
+		}
+		return t;
+	}), [e]), x(() => {
+		let i = (i) => {
+			let a = i.target;
+			if (r(a)) {
+				if (B) {
+					j({
+						x: i.clientX,
+						y: i.clientY
+					});
+					return;
+				}
+				if (z(U(i)), !(S.current && S.current.contains(a)) && n.current !== a) {
+					n.current = a;
+					let r = d(a);
+					r && M !== r ? e.getEditorState().read(() => {
+						let i = t(r.elem);
+						if (!i) throw Error("TableCellResizer: Table cell node not found.");
+						let s = o(i), c = u(s, e.getElementByKey(s.getKey()));
+						if (!c) throw Error("TableCellResizer: Table element not found.");
+						n.current = a, C.current = c.getBoundingClientRect(), L(r);
+					}, { editor: e }) : r ?? H();
+				}
+			}
+		}, a = () => {
+			z(!0);
+		}, s = () => {
+			z(!1);
+		}, c = e.registerRootListener((e, t) => {
+			t?.removeEventListener("mousemove", i), t?.removeEventListener("mousedown", a), t?.removeEventListener("mouseup", s), e?.addEventListener("mousemove", i), e?.addEventListener("mousedown", a), e?.addEventListener("mouseup", s);
+		});
+		return () => {
+			c();
+		};
+	}, [
+		M,
+		B,
+		e,
+		H
+	]);
+	let W = (e) => e === "bottom", G = b((n) => {
+		if (!M) throw Error("TableCellResizer: Expected active cell.");
+		e.update(() => {
+			let r = t(M.elem);
+			if (!l(r)) throw Error("TableCellResizer: Table cell node not found.");
+			let i = o(r), a = c(r) + r.getRowSpan() - 1, s = i.getChildren();
+			if (a >= s.length || a < 0) throw Error("Expected table cell to be inside of table row.");
+			let u = s[a];
+			if (!m(u)) throw Error("Expected table row");
+			let d = u.getHeight();
+			if (d === void 0) {
+				let t = u.getChildren();
+				d = Math.min(...t.map((t) => K(t, e) ?? Infinity));
+			}
+			let f = Math.max(d + n, P);
+			u.setHeight(f);
+		}, { tag: "skip-scroll-into-view" });
+	}, [M, e]), K = (e, t) => t.getElementByKey(e.getKey())?.clientHeight, q = (e, t) => {
+		for (let n = 0; n < t.length; n++) for (let r = 0; r < t[n].length; r++) if (t[n][r].cell === e) return r;
+		return -1;
+	}, J = b((n) => {
+		if (!M) throw Error("TableCellResizer: Expected active cell.");
+		e.update(() => {
+			let e = t(M.elem);
+			if (!l(e)) throw Error("TableCellResizer: Table cell node not found.");
+			let r = o(e), [i] = p(r, null, null), a = q(e, i);
+			if (a === void 0) throw Error("TableCellResizer: Table column not found.");
+			let s = r.getColWidths();
+			if (!s) return;
+			let c = s[a];
+			if (c === void 0) return;
+			let u = [...s];
+			if (u[a] = Math.max(c + n, F), r.setColWidths(u), a < r.getColumnCount() - 1) {
+				let e = r.getColWidths();
+				if (!e) return;
+				let t = [...e], i = a + 1, o = e[i];
+				t[i] = Math.max(o - n, F), r.setColWidths(t);
+			}
+		}, { tag: "skip-scroll-into-view" });
+	}, [M, e]), Y = b((e) => {
+		let t = (n) => {
+			if (n.preventDefault(), n.stopPropagation(), !M) throw Error("TableCellResizer: Expected active cell.");
+			if (k.current) {
+				let { x: r, y: i } = k.current;
+				if (M === null) return;
+				let o = a(n.target);
+				W(e) ? G((n.clientY - i) / o) : J((n.clientX - r) / o), H(), document.removeEventListener("mouseup", t);
+			}
+		};
+		return t;
+	}, [
+		M,
+		H,
+		J,
+		G
+	]), X = b((e) => (t) => {
+		if (t.preventDefault(), t.stopPropagation(), !M) throw Error("TableCellResizer: Expected active cell.");
+		k.current = {
+			x: t.clientX,
+			y: t.clientY
+		}, j(k.current), V(e), document.addEventListener("mouseup", Y(e));
+	}, [M, Y]), Z = b(() => {
+		if (M) {
+			let { height: e, width: t, top: n, left: r } = M.elem.getBoundingClientRect(), i = a(M.elem), o = {
+				bottom: {
+					backgroundColor: "none",
+					cursor: "ns-resize",
+					height: "10px",
+					left: `${window.pageXOffset + r}px`,
+					top: `${window.pageYOffset + n + e - 10 / I}px`,
+					width: `${t}px`,
+					zIndex: 5e3
+				},
+				right: {
+					backgroundColor: "none",
+					cursor: "ew-resize",
+					height: `${e}px`,
+					left: `${window.pageXOffset + r + t - 10 / I}px`,
+					top: `${window.pageYOffset + n}px`,
+					width: "10px",
+					zIndex: 5e3
+				}
+			}, s = C.current;
+			return B && A && s && (W(B) ? (o[B].left = `${window.pageXOffset + s.left}px`, o[B].top = `${window.pageYOffset + A.y / i}px`, o[B].height = "3px", o[B].width = `${s.width}px`) : (o[B].top = `${window.pageYOffset + s.top}px`, o[B].left = `${window.pageXOffset + A.x / i}px`, o[B].width = "3px", o[B].height = `${s.height}px`), o[B].backgroundColor = "#adf"), o;
+		}
+		return {
+			bottom: null,
+			left: null,
+			right: null,
+			top: null
+		};
+	}, [
+		M,
+		B,
+		A
+	])();
+	return /* @__PURE__ */ D("div", {
+		ref: S,
+		children: M != null && !R && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("div", {
+			className: N["table-cell-resizer__resizer"],
+			style: Z.right || void 0,
+			onMouseDown: X("right")
+		}), /* @__PURE__ */ D("div", {
+			className: N["table-cell-resizer__resizer"],
+			style: Z.bottom || void 0,
+			onMouseDown: X("bottom")
+		})] })
+	});
+}
+var R = () => {
+	let [t] = e(), n = M();
+	return C(() => n ? k(/* @__PURE__ */ D(L, { editor: t }), document.body) : null, [t, n]);
+};
+//#endregion
+export { M as n, R as t };
+
+//# sourceMappingURL=TableCellResizerPlugin-Dn8Ks2Lm.js.map