@uva-glass/component-library 3.55.4 → 3.55.6

package/dist/{Drawer-Ggofac6y.js.map → Drawer-e7UFHVg9.js.map}

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

package/dist/{FieldHint-D0HtbTnt.js → FieldHint-fxnEOsVZ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Spinner-D8tWqg9j.js";
+import { t as e } from "./Spinner-BpElTDIu.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 import './assets/FieldHint.css';//#region src/components/FieldHint/FieldHint.module.css
 var i = { "field-hint": "_field-hint_f5ej1_1" };
@@ -13,4 +13,4 @@ function a({ value: a, spinnerAriaValueText: o, loading: s }) {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=FieldHint-D0HtbTnt.js.map
+//# sourceMappingURL=FieldHint-fxnEOsVZ.js.map

package/dist/{FieldHint-D0HtbTnt.js.map → FieldHint-fxnEOsVZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FieldHint-D0HtbTnt.js","names":[],"sources":["../src/components/FieldHint/FieldHint.module.css","../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":[".field-hint {\n  font-size: 0.875rem;\n}\n","import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"mappings":";;;;;;ACcA,SAAgB,EAAU,EAAE,UAAO,yBAAsB,cAA2B;AAClF,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,KAAS,kBAAA,GAAA,EAAA,UAAG,GAAS,CAAA,EACrB,CAAC,KAAS,KAAW,kBAAC,GAAD,EAAS,eAAe,GAAwB,CAAA,CACjE"}
+{"version":3,"file":"FieldHint-fxnEOsVZ.js","names":[],"sources":["../src/components/FieldHint/FieldHint.module.css","../src/components/FieldHint/FieldHint.tsx"],"sourcesContent":[".field-hint {\n  font-size: 0.875rem;\n}\n","import styles from './FieldHint.module.css';\n\nimport { Spinner } from 'components/Spinner/Spinner';\n\nexport interface FieldHintProps {\n  /** The value to display. */\n  value?: string;\n  /** The aria-valuetext value of the spinner component. */\n  spinnerAriaValueText: string;\n  /** true if the field hint is loading; otherwise, false. The default is false. */\n  loading?: boolean;\n}\n\n/** Represents a component to show a hint for an input element. */\nexport function FieldHint({ value, spinnerAriaValueText, loading }: FieldHintProps) {\n  return (\n    <span className={styles['field-hint']}>\n      {value && <>{value}</>}\n      {!value && loading && <Spinner ariaValueText={spinnerAriaValueText} />}\n    </span>\n  );\n}\n"],"mappings":";;;;;;ACcA,SAAgB,EAAU,EAAE,UAAO,yBAAsB,cAA2B;AAClF,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACG,KAAS,kBAAA,GAAA,EAAA,UAAG,GAAS,CAAA,EACrB,CAAC,KAAS,KAAW,kBAAC,GAAD,EAAS,eAAe,GAAwB,CAAA,CACjE"}

package/dist/Fieldset-0LFsZ3Mz.js

@@ -0,0 +1,22 @@
+import { t as e } from "./clsx-BD2qMUU1.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import './assets/Fieldset.css';var r = {
+	fieldset: "_fieldset_1pmtm_1",
+	"fieldset--inline": "_fieldset--inline_1pmtm_10",
+	fieldset__legend: "_fieldset__legend_1pmtm_15",
+	fieldset__description: "_fieldset__description_1pmtm_20"
+}, i = ({ inline: i, legend: a, description: o, descriptionId: s, children: c }) => /* @__PURE__ */ n("fieldset", {
+	className: e(r.fieldset, { [r["fieldset--inline"]]: i }),
+	children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("legend", {
+		className: r.fieldset__legend,
+		children: a
+	}), o && /* @__PURE__ */ t("p", {
+		className: r.fieldset__description,
+		id: s,
+		children: o
+	})] }), c]
+});
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=Fieldset-0LFsZ3Mz.js.map

package/dist/{Fieldset-CoNu_Owa.js.map → Fieldset-0LFsZ3Mz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Fieldset-CoNu_Owa.js","names":[],"sources":["../src/components/Fieldset/Fieldset.module.css","../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":[".fieldset {\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 0;\n  padding: 0;\n}\n\n.fieldset--inline {\n  column-gap: 1.5rem;\n  flex-direction: row;\n}\n\n.fieldset__legend {\n  font-weight: var(--semibold);\n  padding: 0;\n}\n\n.fieldset__description {\n  margin: 0;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"mappings":";;;;;;;;GCkBa,KAAY,EACvB,WACA,WACA,gBACA,kBACA,kBAEA,kBAAC,YAAD;CACE,WAAW,EAAK,EAAO,UAAa,GACjC,EAAO,sBAAsB,GAC/B,CAAC;WAHJ,CAKE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;EAAQ,WAAW,EAAO;YAAsB;EAAgB,CAAA,EAC/D,KACC,kBAAC,KAAD;EAAG,WAAW,EAAO;EAA0B,IAAI;YAChD;EACC,CAAA,CAEF,EAAA,CAAA,EACL,EACQ"}
+{"version":3,"file":"Fieldset-0LFsZ3Mz.js","names":[],"sources":["../src/components/Fieldset/Fieldset.module.css","../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":[".fieldset {\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: 0;\n  padding: 0;\n}\n\n.fieldset--inline {\n  column-gap: 1.5rem;\n  flex-direction: row;\n}\n\n.fieldset__legend {\n  font-weight: var(--semibold);\n  padding: 0;\n}\n\n.fieldset__description {\n  margin: 0;\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './Fieldset.module.css';\n\nexport interface FieldsetProps {\n  /** The description to render. */\n  description?: ReactNode;\n  /** The id of the description element. Used together with the description property. */\n  descriptionId?: string;\n  /** true if the form fields should render inline; otherwise, false. The default is false. */\n  inline?: boolean;\n  /** The legend to render. */\n  legend: string;\n}\n\n/** Represents a component to show a collection of form field elements. */\nexport const Fieldset = ({\n  inline,\n  legend,\n  description,\n  descriptionId,\n  children,\n}: PropsWithChildren<FieldsetProps>) => (\n  <fieldset\n    className={clsx(styles['fieldset'], {\n      [styles['fieldset--inline']]: inline,\n    })}\n  >\n    <div>\n      <legend className={styles['fieldset__legend']}>{legend}</legend>\n      {description && (\n        <p className={styles['fieldset__description']} id={descriptionId}>\n          {description}\n        </p>\n      )}\n    </div>\n    {children}\n  </fieldset>\n);\n"],"mappings":";;;;;;;GCkBa,KAAY,EACvB,WACA,WACA,gBACA,kBACA,kBAEA,kBAAC,YAAD;CACE,WAAW,EAAK,EAAO,UAAa,GACjC,EAAO,sBAAsB,GAC/B,CAAC;WAHJ,CAKE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;EAAQ,WAAW,EAAO;YAAsB;EAAgB,CAAA,EAC/D,KACC,kBAAC,KAAD;EAAG,WAAW,EAAO;EAA0B,IAAI;YAChD;EACC,CAAA,CAEF,EAAA,CAAA,EACL,EACQ"}