silver-ui 0.1.0

package/dist/chunk-OZNNBPMP.cjs

@@ -0,0 +1,288 @@
+'use strict';
+
+var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
+var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
+var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunk2QM5XBX4_cjs = require('./chunk-2QM5XBX4.cjs');
+var chunkMKAOIB2O_cjs = require('./chunk-MKAOIB2O.cjs');
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  field: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    w: "fit-content"
+  }),
+  spreadField: chunkAZDWQGAX_cjs.css({
+    w: "full"
+  }),
+  row: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2"
+  }),
+  spread: chunkAZDWQGAX_cjs.css({
+    justifyContent: "space-between",
+    w: "full"
+  }),
+  labelWrapper: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    minW: 0
+  }),
+  label: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1",
+    w: "fit-content",
+    color: "fg.muted",
+    cursor: "pointer"
+  }),
+  labelDisabled: chunkAZDWQGAX_cjs.css({
+    color: "fg.disabled",
+    cursor: "not-allowed"
+  }),
+  labelIcon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center"
+  }),
+  requiredness: chunkAZDWQGAX_cjs.css({
+    fontWeight: "normal",
+    color: "fg.muted"
+  }),
+  tooltipIcon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    color: "fg.muted"
+  }),
+  status: chunkAZDWQGAX_cjs.css({
+    fontFamily: "body",
+    fontSize: "sm",
+    lineHeight: "normal",
+    px: "2",
+    py: "1.5",
+    mt: "1",
+    borderRadius: "md"
+  }),
+  statusColor: {
+    warning: chunkAZDWQGAX_cjs.css({ bg: "surface.yellow", color: "surface.yellow.fg" }),
+    error: chunkAZDWQGAX_cjs.css({ bg: "surface.red", color: "surface.red.fg" }),
+    success: chunkAZDWQGAX_cjs.css({ bg: "surface.green", color: "surface.green.fg" })
+  },
+  control: chunkAZDWQGAX_cjs.css({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    w: "10",
+    h: "6",
+    borderRadius: "full",
+    isolation: "isolate",
+    "&:has(input:focus-visible)": {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    },
+    '& [data-switch-track][data-selected="true"]': {
+      bg: "primary"
+    },
+    "&:has(input:active:not(:disabled)) [data-switch-track]": {
+      bg: "primary.active"
+    }
+  }),
+  input: chunkAZDWQGAX_cjs.css({
+    position: "absolute",
+    inset: 0,
+    m: 0,
+    p: 0,
+    opacity: 0,
+    cursor: "pointer",
+    zIndex: 1,
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  }),
+  track: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    w: "10",
+    h: "6",
+    p: "1",
+    borderRadius: "full",
+    bg: "track.emphasized",
+    transitionProperty: "background-color",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    pointerEvents: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    }
+  }),
+  trackOn: chunkAZDWQGAX_cjs.css({
+    bg: "primary"
+  }),
+  trackDisabled: chunkAZDWQGAX_cjs.css({
+    opacity: 0.5
+  }),
+  thumb: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "4",
+    h: "4",
+    borderRadius: "full",
+    bg: "bg",
+    color: "primary",
+    transform: "translateX(0)",
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    }
+  }),
+  thumbOn: chunkAZDWQGAX_cjs.css({
+    transform: "translateX(16px)"
+  })
+};
+function Switch({
+  className,
+  "data-testid": dataTestId,
+  description,
+  isDisabled = false,
+  isLabelHidden = false,
+  isLoading = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  labelPosition = "end",
+  labelSpacing = "default",
+  onBlur,
+  onChange,
+  onFocus,
+  ref,
+  status,
+  style,
+  isSelected
+}) {
+  const inputId = react.useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const requirednessText = isOptional ? "Optional" : isRequired ? "Required" : null;
+  const control = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.control, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "aria-busy": isLoading || void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": status?.type === "error" || void 0,
+        checked: isSelected,
+        className: styles.input,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        id: inputId,
+        onBlur,
+        onChange: (event) => onChange(event.target.checked, event),
+        onFocus,
+        ref,
+        required: isRequired,
+        role: "switch",
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: chunkSPDVNY2Z_cjs.cx(
+          styles.track,
+          isSelected ? styles.trackOn : void 0,
+          isDisabled ? styles.trackDisabled : void 0
+        ),
+        "data-selected": isSelected ? "true" : void 0,
+        "data-switch-track": "",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: chunkSPDVNY2Z_cjs.cx(styles.thumb, isSelected ? styles.thumbOn : void 0),
+            children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null
+          }
+        )
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", children: "Loading" }) }) : null
+  ] });
+  const labelNode = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.labelWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: chunkSPDVNY2Z_cjs.cx(
+          styles.label,
+          isDisabled ? styles.labelDisabled : void 0
+        ),
+        htmlFor: inputId,
+        children: [
+          labelIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: labelIcon, size: "sm" }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "inherit", type: "label", children: label }),
+          requirednessText != null ? /* @__PURE__ */ jsxRuntime.jsxs(chunk47BELFYO_cjs.Text, { as: "span", className: styles.requiredness, type: "supporting", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            requirednessText
+          ] }) : null,
+          labelTooltip != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMKAOIB2O_cjs.Tooltip, { content: labelTooltip, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.tooltipIcon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.Info, size: "sm" }) }) }) : null
+        ]
+      }
+    ),
+    description != null ? /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: "secondary", id: descriptionID, type: "supporting", children: description }) : null
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.field,
+        labelSpacing === "spread" ? styles.spreadField : void 0,
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkSPDVNY2Z_cjs.cx(
+              styles.row,
+              labelSpacing === "spread" ? styles.spread : void 0
+            ),
+            children: [
+              labelPosition === "start" ? isLabelHidden ? /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { children: labelNode }) : labelNode : control,
+              labelPosition === "start" ? control : isLabelHidden ? /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { children: labelNode }) : labelNode
+            ]
+          }
+        ),
+        status?.message != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-live": status.type === "error" ? "assertive" : "polite",
+            className: chunkSPDVNY2Z_cjs.cx(styles.status, styles.statusColor[status.type]),
+            id: statusMessageID,
+            role: status.type === "error" ? "alert" : "status",
+            children: status.message
+          }
+        ) : null
+      ]
+    }
+  );
+}
+Switch.displayName = "Switch";
+
+exports.Switch = Switch;
+//# sourceMappingURL=chunk-OZNNBPMP.cjs.map
+//# sourceMappingURL=chunk-OZNNBPMP.cjs.map

package/dist/chunk-OZNNBPMP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"names":["css","useId","getStatusMessageID","getDescribedBy","jsxs","jsx","cx","Spinner","VisuallyHidden","Icon","Text","Tooltip","Info"],"mappings":"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","file":"chunk-OZNNBPMP.cjs","sourcesContent":["import {Info} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport type {FieldNecessity, InputStatus, InputStatusType} from '../Field';\nimport {getDescribedBy, getStatusMessageID} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\nimport {Tooltip} from '../Tooltip';\n\nexport type SwitchLabelPosition = 'end' | 'start';\nexport type SwitchLabelSpacing = 'default' | 'spread';\n\nexport type SwitchProps = {\n  /**\n   * Additional CSS class names applied to the field root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the checkbox input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the switch is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the switch is on.\n   */\n  isSelected: boolean;\n  /**\n   * Switch label.\n   */\n  label: string;\n  /**\n   * Content rendered before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Which side of the switch the label appears on.\n   * @default 'end'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Spacing behavior between label and switch.\n   * @default 'default'\n   */\n  labelSpacing?: SwitchLabelSpacing;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the switch loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the checked state changes.\n   */\n  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the switch receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the checkbox input.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Validation status displayed below the switch.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the field root.\n   */\n  style?: CSSProperties;\n} & FieldNecessity;\n\nconst styles = {\n  field: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '1',\n    w: 'fit-content',\n  }),\n  spreadField: css({\n    w: 'full',\n  }),\n  row: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n  }),\n  spread: css({\n    justifyContent: 'space-between',\n    w: 'full',\n  }),\n  labelWrapper: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n    minW: 0,\n  }),\n  label: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '1',\n    w: 'fit-content',\n    color: 'fg.muted',\n    cursor: 'pointer',\n  }),\n  labelDisabled: css({\n    color: 'fg.disabled',\n    cursor: 'not-allowed',\n  }),\n  labelIcon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n  }),\n  requiredness: css({\n    fontWeight: 'normal',\n    color: 'fg.muted',\n  }),\n  tooltipIcon: css({\n    display: 'inline-flex',\n    color: 'fg.muted',\n  }),\n  status: css({\n    fontFamily: 'body',\n    fontSize: 'sm',\n    lineHeight: 'normal',\n    px: '2',\n    py: '1.5',\n    mt: '1',\n    borderRadius: 'md',\n  }),\n  statusColor: {\n    warning: css({bg: 'surface.yellow', color: 'surface.yellow.fg'}),\n    error: css({bg: 'surface.red', color: 'surface.red.fg'}),\n    success: css({bg: 'surface.green', color: 'surface.green.fg'}),\n  } satisfies Record<InputStatusType, string>,\n  control: css({\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    w: '10',\n    h: '6',\n    borderRadius: 'full',\n    isolation: 'isolate',\n    '&:has(input:focus-visible)': {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n    '& [data-switch-track][data-selected=\"true\"]': {\n      bg: 'primary',\n    },\n    '&:has(input:active:not(:disabled)) [data-switch-track]': {\n      bg: 'primary.active',\n    },\n  }),\n  input: css({\n    position: 'absolute',\n    inset: 0,\n    m: 0,\n    p: 0,\n    opacity: 0,\n    cursor: 'pointer',\n    zIndex: 1,\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  }),\n  track: css({\n    display: 'flex',\n    alignItems: 'center',\n    w: '10',\n    h: '6',\n    p: '1',\n    borderRadius: 'full',\n    bg: 'track.emphasized',\n    transitionProperty: 'background-color',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    pointerEvents: 'none',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0s',\n    },\n  }),\n  trackOn: css({\n    bg: 'primary',\n  }),\n  trackDisabled: css({\n    opacity: 0.5,\n  }),\n  thumb: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    w: '4',\n    h: '4',\n    borderRadius: 'full',\n    bg: 'bg',\n    color: 'primary',\n    transform: 'translateX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0s',\n    },\n  }),\n  thumbOn: css({\n    transform: 'translateX(16px)',\n  }),\n} as const;\n\n/**\n * A controlled switch for boolean settings.\n */\nexport function Switch({\n  className,\n  'data-testid': dataTestId,\n  description,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  labelPosition = 'end',\n  labelSpacing = 'default',\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  status,\n  style,\n  isSelected,\n}: SwitchProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const requirednessText = isOptional\n    ? 'Optional'\n    : isRequired\n      ? 'Required'\n      : null;\n  const control = (\n    <span className={styles.control}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        checked={isSelected}\n        className={styles.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.checked, event)}\n        onFocus={onFocus}\n        ref={ref}\n        required={isRequired}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cx(\n          styles.track,\n          isSelected ? styles.trackOn : undefined,\n          isDisabled ? styles.trackDisabled : undefined,\n        )}\n        data-selected={isSelected ? 'true' : undefined}\n        data-switch-track=\"\">\n        <span\n          className={cx(styles.thumb, isSelected ? styles.thumbOn : undefined)}>\n          {isLoading ? <Spinner size=\"sm\" /> : null}\n        </span>\n      </span>\n      {isLoading ? (\n        <VisuallyHidden>\n          <span role=\"status\">Loading</span>\n        </VisuallyHidden>\n      ) : null}\n    </span>\n  );\n  const labelNode = (\n    <div className={styles.labelWrapper}>\n      <label\n        className={cx(\n          styles.label,\n          isDisabled ? styles.labelDisabled : undefined,\n        )}\n        htmlFor={inputId}>\n        {labelIcon != null ? (\n          <span className={styles.labelIcon}>\n            <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <Text as=\"span\" color=\"inherit\" type=\"label\">\n          {label}\n        </Text>\n        {requirednessText != null ? (\n          <Text as=\"span\" className={styles.requiredness} type=\"supporting\">\n            <span aria-hidden=\"true\"> · </span>\n            {requirednessText}\n          </Text>\n        ) : null}\n        {labelTooltip != null ? (\n          <Tooltip content={labelTooltip}>\n            <span className={styles.tooltipIcon}>\n              <Icon icon={Info} size=\"sm\" />\n            </span>\n          </Tooltip>\n        ) : null}\n      </label>\n      {description != null ? (\n        <Text as=\"span\" color=\"secondary\" id={descriptionID} type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div\n      className={cx(\n        styles.field,\n        labelSpacing === 'spread' ? styles.spreadField : undefined,\n        className,\n      )}\n      style={style}>\n      <div\n        className={cx(\n          styles.row,\n          labelSpacing === 'spread' ? styles.spread : undefined,\n        )}>\n        {labelPosition === 'start' ? (\n          isLabelHidden ? (\n            <VisuallyHidden>{labelNode}</VisuallyHidden>\n          ) : (\n            labelNode\n          )\n        ) : (\n          control\n        )}\n        {labelPosition === 'start' ? (\n          control\n        ) : isLabelHidden ? (\n          <VisuallyHidden>{labelNode}</VisuallyHidden>\n        ) : (\n          labelNode\n        )}\n      </div>\n      {status?.message != null ? (\n        <div\n          aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n          className={cx(styles.status, styles.statusColor[status.type])}\n          id={statusMessageID}\n          role={status.type === 'error' ? 'alert' : 'status'}>\n          {status.message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}

package/dist/chunk-P5AZUUM2.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+var chunkEETTQWW5_cjs = require('./chunk-EETTQWW5.cjs');
+var chunkTPSOUQG7_cjs = require('./chunk-TPSOUQG7.cjs');
+var chunkCK3UJQRI_cjs = require('./chunk-CK3UJQRI.cjs');
+var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var polyfill = require('@js-temporal/polyfill');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  row: chunkAZDWQGAX_cjs.css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 0.75fr)",
+    gap: "2"
+  })
+};
+function splitDateTime(value) {
+  if (value == null) {
+    return { date: void 0, time: void 0 };
+  }
+  return {
+    date: value.toPlainDate(),
+    time: value.toPlainTime()
+  };
+}
+function combineDateTime(date, time) {
+  if (date == null && time == null) {
+    return void 0;
+  }
+  const resolvedDate = date ?? polyfill.Temporal.Now.plainDateISO();
+  const resolvedTime = time ?? polyfill.Temporal.Now.plainTimeISO();
+  return resolvedDate.toPlainDateTime(resolvedTime);
+}
+function clampTime(time, min, max) {
+  if (min != null && polyfill.Temporal.PlainTime.compare(time, min) < 0) {
+    return min;
+  }
+  if (max != null && polyfill.Temporal.PlainTime.compare(time, max) > 0) {
+    return max;
+  }
+  return time;
+}
+function DateTimeInput({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  getIsDateDisabled,
+  hasSeconds = false,
+  size = "md",
+  description,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isLoading = false,
+  status,
+  labelIcon,
+  labelTooltip,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const fieldId = react.useId();
+  const { date, time } = react.useMemo(() => splitDateTime(value), [value]);
+  const minParts = react.useMemo(() => splitDateTime(min), [min]);
+  const maxParts = react.useMemo(() => splitDateTime(max), [max]);
+  const handleDateChange = react.useCallback(
+    (nextDate) => {
+      if (nextDate == null || time == null) {
+        onChange(combineDateTime(nextDate, time));
+        return;
+      }
+      const effectiveTimeMin = min != null && nextDate.equals(min.toPlainDate()) ? min.toPlainTime() : void 0;
+      const effectiveTimeMax = max != null && nextDate.equals(max.toPlainDate()) ? max.toPlainTime() : void 0;
+      onChange(
+        combineDateTime(
+          nextDate,
+          clampTime(time, effectiveTimeMin, effectiveTimeMax)
+        )
+      );
+    },
+    [onChange, time, min, max]
+  );
+  const handleTimeChange = react.useCallback(
+    (nextTime) => onChange(combineDateTime(date, nextTime)),
+    [onChange, date]
+  );
+  const necessity = { isOptional, isRequired };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkI6IGTQLG_cjs.Field,
+    {
+      description,
+      inputId: fieldId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: chunkSPDVNY2Z_cjs.cx(styles.row, className),
+          "data-testid": dataTestId,
+          style,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkTPSOUQG7_cjs.DateInput,
+              {
+                getIsDateDisabled,
+                isDisabled,
+                isLabelHidden: true,
+                isLoading,
+                label: `${label} date`,
+                max: maxParts.date,
+                min: minParts.date,
+                onChange: handleDateChange,
+                ref,
+                size,
+                value: date
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkEETTQWW5_cjs.TimeInput,
+              {
+                hasSeconds,
+                isDisabled,
+                isLabelHidden: true,
+                isLoading,
+                label: `${label} time`,
+                max: date != null && maxParts.date != null && chunkCK3UJQRI_cjs.plainDateIsEqual(date, maxParts.date) ? maxParts.time : void 0,
+                min: date != null && minParts.date != null && chunkCK3UJQRI_cjs.plainDateIsEqual(date, minParts.date) ? minParts.time : void 0,
+                onChange: handleTimeChange,
+                size,
+                value: time
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+DateTimeInput.displayName = "DateTimeInput";
+
+exports.DateTimeInput = DateTimeInput;
+//# sourceMappingURL=chunk-P5AZUUM2.cjs.map
+//# sourceMappingURL=chunk-P5AZUUM2.cjs.map

package/dist/chunk-P5AZUUM2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DateTimeInput/DateTimeInput.tsx"],"names":["css","Temporal","useId","useMemo","useCallback","jsx","Field","jsxs","cx","DateInput","TimeInput","plainDateIsEqual"],"mappings":";;;;;;;;;;;;AA4GA,IAAM,MAAA,GAAS;AAAA,EACb,KAAKA,qBAAA,CAAI;AAAA,IACP,OAAA,EAAS,MAAA;AAAA,IACT,mBAAA,EAAqB,kCAAA;AAAA,IACrB,GAAA,EAAK;AAAA,GACN;AACH,CAAA;AAEA,SAAS,cAAc,KAAA,EAGrB;AACA,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,OAAO,EAAC,IAAA,EAAM,MAAA,EAAW,IAAA,EAAM,MAAA,EAAS;AAAA,EAC1C;AACA,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,MAAM,WAAA,EAAY;AAAA,IACxB,IAAA,EAAM,MAAM,WAAA;AAAY,GAC1B;AACF;AAEA,SAAS,eAAA,CACP,MACA,IAAA,EAC2B;AAC3B,EAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,IAAA,OAAO,MAAA;AAAA,EACT;AACA,EAAA,MAAM,YAAA,GAAe,IAAA,IAAQC,iBAAA,CAAS,GAAA,CAAI,YAAA,EAAa;AACvD,EAAA,MAAM,YAAA,GAAe,IAAA,IAAQA,iBAAA,CAAS,GAAA,CAAI,YAAA,EAAa;AACvD,EAAA,OAAO,YAAA,CAAa,gBAAgB,YAAY,CAAA;AAClD;AAEA,SAAS,SAAA,CACP,IAAA,EACA,GAAA,EACA,GAAA,EACW;AACX,EAAA,IAAI,GAAA,IAAO,QAAQA,iBAAA,CAAS,SAAA,CAAU,QAAQ,IAAA,EAAM,GAAG,IAAI,CAAA,EAAG;AAC5D,IAAA,OAAO,GAAA;AAAA,EACT;AACA,EAAA,IAAI,GAAA,IAAO,QAAQA,iBAAA,CAAS,SAAA,CAAU,QAAQ,IAAA,EAAM,GAAG,IAAI,CAAA,EAAG;AAC5D,IAAA,OAAO,GAAA;AAAA,EACT;AACA,EAAA,OAAO,IAAA;AACT;AAKO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,iBAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,MAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA;AAAA,EACA;AACF,CAAA,EAA0C;AACxC,EAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,EAAA,MAAM,EAAC,IAAA,EAAM,IAAA,EAAI,GAAIC,aAAA,CAAQ,MAAM,aAAA,CAAc,KAAK,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAChE,EAAA,MAAM,QAAA,GAAWA,cAAQ,MAAM,aAAA,CAAc,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AACxD,EAAA,MAAM,QAAA,GAAWA,cAAQ,MAAM,aAAA,CAAc,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAExD,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,QAAA,KAAoC;AACnC,MAAA,IAAI,QAAA,IAAY,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AACpC,QAAA,QAAA,CAAS,eAAA,CAAgB,QAAA,EAAU,IAAI,CAAC,CAAA;AACxC,QAAA;AAAA,MACF;AACA,MAAA,MAAM,gBAAA,GACJ,GAAA,IAAO,IAAA,IAAQ,QAAA,CAAS,MAAA,CAAO,GAAA,CAAI,WAAA,EAAa,CAAA,GAC5C,GAAA,CAAI,WAAA,EAAY,GAChB,MAAA;AACN,MAAA,MAAM,gBAAA,GACJ,GAAA,IAAO,IAAA,IAAQ,QAAA,CAAS,MAAA,CAAO,GAAA,CAAI,WAAA,EAAa,CAAA,GAC5C,GAAA,CAAI,WAAA,EAAY,GAChB,MAAA;AACN,MAAA,QAAA;AAAA,QACE,eAAA;AAAA,UACE,QAAA;AAAA,UACA,SAAA,CAAU,IAAA,EAAM,gBAAA,EAAkB,gBAAgB;AAAA;AACpD,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,QAAA,EAAU,IAAA,EAAM,GAAA,EAAK,GAAG;AAAA,GAC3B;AACA,EAAA,MAAM,gBAAA,GAAmBA,iBAAA;AAAA,IACvB,CAAC,QAAA,KACC,QAAA,CAAS,eAAA,CAAgB,IAAA,EAAM,QAAQ,CAAC,CAAA;AAAA,IAC1C,CAAC,UAAU,IAAI;AAAA,GACjB;AAEA,EAAA,MAAM,SAAA,GAA4B,EAAC,UAAA,EAAY,UAAA,EAAU;AAEzD,EAAA,uBACEC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,OAAA,EAAS,OAAA;AAAA,MACT,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA,kBAAAC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAWC,oBAAA,CAAG,MAAA,CAAO,GAAA,EAAK,SAAS,CAAA;AAAA,UACnC,aAAA,EAAa,UAAA;AAAA,UACb,KAAA;AAAA,UACA,QAAA,EAAA;AAAA,4BAAAH,cAAA;AAAA,cAACI,2BAAA;AAAA,cAAA;AAAA,gBACC,iBAAA;AAAA,gBACA,UAAA;AAAA,gBACA,aAAA,EAAa,IAAA;AAAA,gBACb,SAAA;AAAA,gBACA,KAAA,EAAO,GAAG,KAAK,CAAA,KAAA,CAAA;AAAA,gBACf,KAAK,QAAA,CAAS,IAAA;AAAA,gBACd,KAAK,QAAA,CAAS,IAAA;AAAA,gBACd,QAAA,EAAU,gBAAA;AAAA,gBACV,GAAA;AAAA,gBACA,IAAA;AAAA,gBACA,KAAA,EAAO;AAAA;AAAA,aACT;AAAA,4BACAJ,cAAA;AAAA,cAACK,2BAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,UAAA;AAAA,gBACA,aAAA,EAAa,IAAA;AAAA,gBACb,SAAA;AAAA,gBACA,KAAA,EAAO,GAAG,KAAK,CAAA,KAAA,CAAA;AAAA,gBACf,GAAA,EACE,IAAA,IAAQ,IAAA,IACR,QAAA,CAAS,IAAA,IAAQ,IAAA,IACjBC,kCAAA,CAAiB,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA,GAChC,QAAA,CAAS,IAAA,GACT,MAAA;AAAA,gBAEN,GAAA,EACE,IAAA,IAAQ,IAAA,IACR,QAAA,CAAS,IAAA,IAAQ,IAAA,IACjBA,kCAAA,CAAiB,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA,GAChC,QAAA,CAAS,IAAA,GACT,MAAA;AAAA,gBAEN,QAAA,EAAU,gBAAA;AAAA,gBACV,IAAA;AAAA,gBACA,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-P5AZUUM2.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {\n  useCallback,\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {plainDateIsEqual, type PlainDate} from '../../internal/plainDate';\nimport {DateInput} from '../DateInput';\nimport {\n  Field,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport type {IconComponent} from '../Icon';\nimport {TimeInput, type PlainTime} from '../TimeInput';\n\nexport type PlainDateTime = Temporal.PlainDateTime;\n\nexport type DateTimeInputProps = {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Returns true for dates that should be disabled.\n   */\n  getIsDateDisabled?: (date: PlainDate) => boolean;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to show the seconds field in the time input.\n   * @default false\n   */\n  hasSeconds?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum selectable date-time.\n   */\n  max?: PlainDateTime;\n  /**\n   * Minimum selectable date-time.\n   */\n  min?: PlainDateTime;\n  /**\n   * Called when the selected date-time changes.\n   */\n  onChange: (value: PlainDateTime | undefined) => void;\n  /**\n   * Ref forwarded to the date input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the inputs.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Currently selected date-time.\n   */\n  value: PlainDateTime | undefined;\n} & FieldNecessity;\n\nconst styles = {\n  row: css({\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.75fr)',\n    gap: '2',\n  }),\n} as const;\n\nfunction splitDateTime(value: PlainDateTime | undefined): {\n  date: PlainDate | undefined;\n  time: PlainTime | undefined;\n} {\n  if (value == null) {\n    return {date: undefined, time: undefined};\n  }\n  return {\n    date: value.toPlainDate(),\n    time: value.toPlainTime(),\n  };\n}\n\nfunction combineDateTime(\n  date: PlainDate | undefined,\n  time: PlainTime | undefined,\n): PlainDateTime | undefined {\n  if (date == null && time == null) {\n    return undefined;\n  }\n  const resolvedDate = date ?? Temporal.Now.plainDateISO();\n  const resolvedTime = time ?? Temporal.Now.plainTimeISO();\n  return resolvedDate.toPlainDateTime(resolvedTime);\n}\n\nfunction clampTime(\n  time: PlainTime,\n  min: PlainTime | undefined,\n  max: PlainTime | undefined,\n): PlainTime {\n  if (min != null && Temporal.PlainTime.compare(time, min) < 0) {\n    return min;\n  }\n  if (max != null && Temporal.PlainTime.compare(time, max) > 0) {\n    return max;\n  }\n  return time;\n}\n\n/**\n * A combined date and time input with calendar popover and time fields.\n */\nexport function DateTimeInput({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  getIsDateDisabled,\n  hasSeconds = false,\n  size = 'md',\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  status,\n  labelIcon,\n  labelTooltip,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: DateTimeInputProps): React.JSX.Element {\n  const fieldId = useId();\n  const {date, time} = useMemo(() => splitDateTime(value), [value]);\n  const minParts = useMemo(() => splitDateTime(min), [min]);\n  const maxParts = useMemo(() => splitDateTime(max), [max]);\n\n  const handleDateChange = useCallback(\n    (nextDate: PlainDate | undefined) => {\n      if (nextDate == null || time == null) {\n        onChange(combineDateTime(nextDate, time));\n        return;\n      }\n      const effectiveTimeMin =\n        min != null && nextDate.equals(min.toPlainDate())\n          ? min.toPlainTime()\n          : undefined;\n      const effectiveTimeMax =\n        max != null && nextDate.equals(max.toPlainDate())\n          ? max.toPlainTime()\n          : undefined;\n      onChange(\n        combineDateTime(\n          nextDate,\n          clampTime(time, effectiveTimeMin, effectiveTimeMax),\n        ),\n      );\n    },\n    [onChange, time, min, max],\n  );\n  const handleTimeChange = useCallback(\n    (nextTime: PlainTime | undefined) =>\n      onChange(combineDateTime(date, nextTime)),\n    [onChange, date],\n  );\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  return (\n    <Field\n      description={description}\n      inputId={fieldId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={status}>\n      <div\n        className={cx(styles.row, className)}\n        data-testid={dataTestId}\n        style={style}>\n        <DateInput\n          getIsDateDisabled={getIsDateDisabled}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} date`}\n          max={maxParts.date}\n          min={minParts.date}\n          onChange={handleDateChange}\n          ref={ref}\n          size={size}\n          value={date}\n        />\n        <TimeInput\n          hasSeconds={hasSeconds}\n          isDisabled={isDisabled}\n          isLabelHidden\n          isLoading={isLoading}\n          label={`${label} time`}\n          max={\n            date != null &&\n            maxParts.date != null &&\n            plainDateIsEqual(date, maxParts.date)\n              ? maxParts.time\n              : undefined\n          }\n          min={\n            date != null &&\n            minParts.date != null &&\n            plainDateIsEqual(date, minParts.date)\n              ? minParts.time\n              : undefined\n          }\n          onChange={handleTimeChange}\n          size={size}\n          value={time}\n        />\n      </div>\n    </Field>\n  );\n}\n\nDateTimeInput.displayName = 'DateTimeInput';\n"]}

package/dist/chunk-PBZWX2RJ.js

@@ -0,0 +1,142 @@
+import { Heading } from './chunk-PZO5MZ46.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { createContext, useId, useMemo, use } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var MetadataListContext = createContext(null);
+MetadataListContext.displayName = "MetadataListContext";
+function useMetadataList() {
+  return use(MetadataListContext);
+}
+var styles = {
+  root: css({ display: "flex", flexDirection: "column" }),
+  title: css({ mb: "3" }),
+  dl: css({ m: 0, p: 0 }),
+  grid: css({
+    display: "grid",
+    gridTemplateColumns: "auto 1fr",
+    rowGap: "3",
+    columnGap: "6",
+    alignItems: "start"
+  }),
+  gridStacked: css({
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gap: "3"
+  })
+};
+function MetadataList({
+  children,
+  labelPosition = "start",
+  title,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const titleId = useId();
+  const contextValue = useMemo(() => ({ labelPosition }), [labelPosition]);
+  const dlClassName = labelPosition === "top" ? styles.gridStacked : styles.grid;
+  return /* @__PURE__ */ jsx(MetadataListContext, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        title != null ? /* @__PURE__ */ jsx(Heading, { className: styles.title, id: titleId, level: 5, children: title }) : null,
+        /* @__PURE__ */ jsx(
+          "dl",
+          {
+            "aria-labelledby": title != null ? titleId : void 0,
+            className: cx(styles.dl, dlClassName),
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+MetadataList.displayName = "MetadataList";
+var styles2 = {
+  label: css({
+    color: "fg.muted",
+    fontSize: "md",
+    fontWeight: "bold",
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    m: 0,
+    minH: "6"
+  }),
+  value: css({
+    color: "fg",
+    fontSize: "md",
+    m: 0,
+    minH: "6",
+    overflowWrap: "break-word"
+  }),
+  stacked: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5"
+  }),
+  inline: css({
+    display: "contents"
+  })
+};
+function MetadataListItem({
+  children,
+  icon,
+  label,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const context = useMetadataList();
+  if (context == null && process.env.NODE_ENV !== "production") {
+    throw new Error("MetadataListItem must be rendered inside a MetadataList.");
+  }
+  const isStacked = context?.labelPosition === "top";
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null ? /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) : null,
+    label
+  ] });
+  if (isStacked) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(styles2.stacked, className),
+        "data-testid": dataTestId,
+        ref,
+        style,
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: styles2.label, children: labelContent }),
+          /* @__PURE__ */ jsx("dd", { className: styles2.value, children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles2.inline, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: styles2.label, children: labelContent }),
+        /* @__PURE__ */ jsx("dd", { className: styles2.value, children })
+      ]
+    }
+  );
+}
+MetadataListItem.displayName = "MetadataListItem";
+
+export { MetadataList, MetadataListItem };
+//# sourceMappingURL=chunk-PBZWX2RJ.js.map
+//# sourceMappingURL=chunk-PBZWX2RJ.js.map