@danske/sapphire-react-lab 0.99.3 → 0.101.0

package/build/esm/TimeField/i18n/en-US.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/TimeField/i18n/fi-FI.js

@@ -0,0 +1,7 @@
+var clear = "Nollaa";
+var fi = {
+	clear: clear
+};
+
+export { clear, fi as default };
+//# sourceMappingURL=fi-FI.js.map

package/build/esm/TimeField/i18n/fi-FI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/TimeField/i18n/index.js

@@ -0,0 +1,20 @@
+import da from './da-DK.js';
+import en from './en-US.js';
+import de from './de-DE.js';
+import fi from './fi-FI.js';
+import no from './nb-NO.js';
+import pl from './pl-PL.js';
+import se from './sv-SE.js';
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/build/esm/TimeField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/TimeField/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}

package/build/esm/TimeField/i18n/nb-NO.js

@@ -0,0 +1,7 @@
+var clear = "Nullstill";
+var no = {
+	clear: clear
+};
+
+export { clear, no as default };
+//# sourceMappingURL=nb-NO.js.map

package/build/esm/TimeField/i18n/nb-NO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/TimeField/i18n/pl-PL.js

@@ -0,0 +1,7 @@
+var clear = "Zresetuj";
+var pl = {
+	clear: clear
+};
+
+export { clear, pl as default };
+//# sourceMappingURL=pl-PL.js.map

package/build/esm/TimeField/i18n/pl-PL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl-PL.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/TimeField/i18n/sv-SE.js

@@ -0,0 +1,7 @@
+var clear = "Återställ";
+var se = {
+	clear: clear
+};
+
+export { clear, se as default };
+//# sourceMappingURL=sv-SE.js.map

package/build/esm/TimeField/i18n/sv-SE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/build/esm/TimeField/src/TimeField.js

@@ -0,0 +1,106 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/dateField/dateField.module.css';
+import { useThemeCheck, Field, Label, IconButton, Icon } from '@danske/sapphire-react';
+import { useTimeField } from '@react-aria/datepicker';
+import { useTimeFieldState } from '@react-stately/datepicker';
+import { useLocale, useMessageFormatter } from '@react-aria/i18n';
+import { TimeSegment } from './TimeFieldSegment.js';
+import { CloseOutline } from '@danske/sapphire-icons/react';
+import { useObjectRef } from '@react-aria/utils';
+import intlMessages from '../i18n/index.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {
+  return type !== "literal" && !isPlaceholder;
+}).some((isModified) => isModified);
+function _TimeField(_a, ref) {
+  var _b = _a, {
+    size = "lg",
+    noClearButton = false,
+    error,
+    note,
+    contextualHelp,
+    necessityIndicator = false
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "noClearButton",
+    "error",
+    "note",
+    "contextualHelp",
+    "necessityIndicator"
+  ]);
+  useThemeCheck();
+  const timeFieldRef = useObjectRef(ref);
+  const { locale } = useLocale();
+  const formatMessage = useMessageFormatter(intlMessages);
+  const state = useTimeFieldState(__spreadProps(__spreadValues({}, otherProps), {
+    locale,
+    isInvalid: error ? true : void 0
+  }));
+  const { fieldProps, labelProps } = useTimeField(__spreadValues({}, otherProps), state, timeFieldRef);
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, otherProps), {
+    ref,
+    size,
+    noShrink: true
+  }), /* @__PURE__ */ React.createElement(Field.Context, null, otherProps.label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    size,
+    necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), otherProps.label))), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-date-field"], {
+      [styles["sapphire-date-field--error"]]: state.isInvalid,
+      [styles["sapphire-date-field--no-clear-button"]]: noClearButton,
+      [styles["sapphire-date-field--no-calendar"]]: true,
+      [styles["sapphire-date-field--md"]]: size === "md"
+    })
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, fieldProps), {
+    className: styles["sapphire-date-field__input"],
+    ref: timeFieldRef
+  }), state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(TimeSegment, {
+    key: i,
+    segment,
+    state
+  }))), !noClearButton && !otherProps.isReadOnly && !otherProps.isDisabled && isAnySegmentModified(state.segments) && /* @__PURE__ */ React.createElement(IconButton, {
+    "aria-label": formatMessage("clear"),
+    onPress: () => state.segments.forEach((segment) => state.clearSegment(segment.type)),
+    size: size === "md" ? "sm" : "md",
+    UNSAFE_className: clsx(styles["sapphire-date-field__button"], styles["sapphire-date-field__button--clear"])
+  }, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(CloseOutline, null))))), !!error && typeof error !== "boolean" || note ? /* @__PURE__ */ React.createElement(Field.Footer, null, !!error && typeof error !== "boolean" ? /* @__PURE__ */ React.createElement(Field.Note, {
+    variant: "error"
+  }, error) : note ? note : null) : null);
+}
+const TimeField = forwardRef(_TimeField);
+
+export { TimeField };
+//# sourceMappingURL=TimeField.js.map

package/build/esm/TimeField/src/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","sources":["../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from '@react-aria/datepicker';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport {\n  useTimeFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport { useLocale, useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from '@react-aria/utils';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n    /**\n     * Places the label either above (default) or on the side of the control.\n     * @default 'above'\n     */\n    labelPlacement?: 'side' | 'above';\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` sets the error state with an additional error message.\n     *\n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | ReactNode;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n      </Field.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\n            )}\n        </div>\n      </Field.Control>\n      {(!!error && typeof error !== 'boolean') || note ? (\n        <Field.Footer>\n          {!!error && typeof error !== 'boolean' ? (\n            <Field.Note variant=\"error\">{error}</Field.Note>\n          ) : note ? (\n            note\n          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}

package/build/esm/TimeField/src/TimeFieldSegment.js

@@ -0,0 +1,48 @@
+import React, { useRef } from 'react';
+import { useDateSegment } from '@react-aria/datepicker';
+import styles from '@danske/sapphire-css/components/dateField/dateField.module.css';
+import clsx from 'clsx';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React.createElement(EditableSegment, {
+  segment,
+  state
+}) : /* @__PURE__ */ React.createElement(SeparatorSegment, {
+  segment
+});
+const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React.createElement("span", {
+  "aria-hidden": "true",
+  className: clsx(styles["sapphire-date-field__segment"], styles["sapphire-date-field__segment--separator"])
+}, segment.text);
+const EditableSegment = ({ segment, state }) => {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, segmentProps), {
+    style: segmentProps.style,
+    ref,
+    className: clsx(styles["sapphire-date-field__segment"], {
+      [styles["sapphire-date-field__segment--filled"]]: !segment.isPlaceholder
+    })
+  }), segment.text);
+};
+
+export { TimeSegment };
+//# sourceMappingURL=TimeFieldSegment.js.map

package/build/esm/TimeField/src/TimeFieldSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldSegment.js","sources":["../../../../src/TimeField/src/TimeFieldSegment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDateSegment } from '@react-aria/datepicker';\nimport { DateSegment as DateSegmentType } from '@react-stately/datepicker';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport clsx from 'clsx';\nimport { DateSegmentProps } from '@danske/sapphire-react';\n\nexport const TimeSegment = ({ segment, state }: DateSegmentProps) =>\n  segment.type === 'hour' ||\n  segment.type === 'minute' ||\n  segment.type === 'dayPeriod' ? (\n    <EditableSegment segment={segment} state={state}></EditableSegment>\n  ) : (\n    <SeparatorSegment segment={segment} />\n  );\nconst SeparatorSegment = ({ segment }: { segment: DateSegmentType }) => (\n  <span\n    aria-hidden=\"true\"\n    className={clsx(\n      styles['sapphire-date-field__segment'],\n      styles['sapphire-date-field__segment--separator']\n    )}\n  >\n    {segment.text}\n  </span>\n);\n\nconst EditableSegment = ({ segment, state }: DateSegmentProps) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      style={segmentProps.style}\n      ref={ref}\n      className={clsx(styles['sapphire-date-field__segment'], {\n        [styles['sapphire-date-field__segment--filled']]:\n          !segment.isPlaceholder,\n      })}\n    >\n      {segment.text}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,WAAc,GAAA,CAAC,EAAE,OAAA,EAAS,YACrC,OAAQ,CAAA,IAAA,KAAS,MACjB,IAAA,OAAA,CAAQ,SAAS,QACjB,IAAA,OAAA,CAAQ,IAAS,KAAA,WAAA,uCACd,eAAD,EAAA;AAAA,EAAiB,OAAA;AAAA,EAAkB,KAAA;AAAA,CAAA,CAAA,uCAElC,gBAAD,EAAA;AAAA,EAAkB,OAAA;AAAA,CAAA,EAAA;AAEtB,MAAM,gBAAmB,GAAA,CAAC,EAAE,OAAA,EAAA,yCACzB,MAAD,EAAA;AAAA,EACE,aAAY,EAAA,MAAA;AAAA,EACZ,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,8BAAA,CAAA,EACP,MAAO,CAAA,yCAAA,CAAA,CAAA;AAAA,CAAA,EAGR,OAAQ,CAAA,IAAA,CAAA,CAAA;AAIb,MAAM,eAAkB,GAAA,CAAC,EAAE,OAAA,EAAS,KAA8B,EAAA,KAAA;AAChE,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,YAAA,EAAA,GAAiB,cAAe,CAAA,OAAA,EAAS,KAAO,EAAA,GAAA,CAAA,CAAA;AAExD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,YADN,CAAA,EAAA;AAAA,IAEE,OAAO,YAAa,CAAA,KAAA;AAAA,IACpB,GAAA;AAAA,IACA,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,8BAAiC,CAAA,EAAA;AAAA,MACrD,CAAA,MAAA,CAAO,sCACN,CAAA,GAAA,CAAC,OAAQ,CAAA,aAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,EAGZ,OAAQ,CAAA,IAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/index.js

@@ -1,19 +1,21 @@
-export { FilterDropdown } from './Filtering/src/FilterDropdown.js';
-export { SearchableSelectFilter } from './Filtering/src/SearchableSelectFilter.js';
 export { Accordion } from './Accordion/index.js';
+export { Alert } from './Alert/src/Alert.js';
+export { Autocomplete } from './Autocomplete/src/Autocomplete.js';
+export { Breadcrumbs } from './Breadcrumbs/src/Breadcrumbs.js';
+export { BreadcrumbItem } from './Breadcrumbs/src/BreadcrumbItem.js';
+export { BreadcrumbItemLink } from './Breadcrumbs/src/BreadcrumbItemLink.js';
 export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
 export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
+export { FilterDropdown } from './Filtering/src/FilterDropdown.js';
+export { SearchableSelectFilter } from './Filtering/src/SearchableSelectFilter.js';
 export { Flag } from './Flag/src/Flag.js';
+export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { ProgressIndicator } from './ProgressIndicator/src/ProgressIndicator.js';
 export { Slider } from './Slider/index.js';
-export { Breadcrumbs } from './Breadcrumbs/src/Breadcrumbs.js';
-export { BreadcrumbItem } from './Breadcrumbs/src/BreadcrumbItem.js';
-export { BreadcrumbItemLink } from './Breadcrumbs/src/BreadcrumbItemLink.js';
 export { TagGroup } from './TagGroup/src/TagGroup.js';
 export { TagItem } from './TagGroup/src/TagItem.js';
-export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
-export { Alert } from './Alert/src/Alert.js';
+export { TimeField } from './TimeField/src/TimeField.js';
 export { useLocale } from '@react-aria/i18n';
 export { AccordionContext } from './Accordion/src/AccordionContext.js';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}