@danske/sapphire-react-lab 0.85.0 → 0.86.2

package/build/esm/Calendar/src/Calendar.js

@@ -55,7 +55,6 @@ const Calendar = (_a) => {
   useThemeCheck();
   const { locale } = useLocale();
   const formatMessage = useMessageFormatter(intlMessages);
-  useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
   const state = useCalendarAnimationState(useSapphireCalendarState(__spreadProps(__spreadValues({
     selectionAlignment: "start"

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n  useDateFormatter,\n  useLocale,\n  useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n  SapphireCalendarStateOptions,\n  useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps<T extends DateValue = DateValue>\n  extends SapphireStyleProps,\n    Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>,\n    Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * Displays a calendar and allows users to select a single date. It displays a grid of days in one\n * month, by default, and the user can navigate to previous and next months. It's also possible\n * to navigate to months and years view, to quickly jump to a date far away from the focused date.\n */\nexport const Calendar = <T extends DateValue = DateValue>({\n  showWeekNumbers,\n  ...props\n}: Omit<SapphireCalendarProps<T>, 'locale'>): JSX.Element => {\n  useThemeCheck();\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const state = useCalendarAnimationState(\n    useSapphireCalendarState({\n      selectionAlignment: 'start',\n      ...props,\n      locale,\n      createCalendar,\n    })\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(\n    props,\n    state\n  );\n\n  const renderGrid = () => {\n    switch (state.view) {\n      case 'years':\n        return <CalendarYearsGrid state={state} />;\n      case 'months':\n        return <CalendarMonthsGrid state={state} />;\n      case 'days':\n      default:\n        return (\n          <CalendarDaysGrid state={state} showWeekNumbers={showWeekNumbers} />\n        );\n    }\n  };\n\n  const renderTitle = () => {\n    switch (state.view) {\n      case 'days':\n        return sentenceCase(\n          monthDateFormatter.format(\n            state.visibleRange.start.toDate(state.timeZone)\n          )\n        );\n      case 'months':\n        return state.focusedDate.year;\n      case 'years':\n        return sentenceCase(formatMessage('year'));\n    }\n  };\n  return (\n    <div\n      className={styles['sapphire-calendar']}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div\n        className={clsx(\n          styles['sapphire-calendar__table-container'],\n          styleProps.className\n        )}\n        style={styleProps.style}\n      >\n        <CalendarHeader\n          prevButtonProps={prevButtonProps}\n          nextButtonProps={nextButtonProps}\n        >\n          {state.canBroadenView ? (\n            <Button\n              onPress={state.broadenView}\n              isDisabled={state.isDisabled}\n              variant=\"tertiary\"\n              appearance=\"ghost\"\n              size=\"large\"\n            >\n              {renderTitle()}\n            </Button>\n          ) : (\n            renderTitle()\n          )}\n        </CalendarHeader>\n        {state.view === 'days' ? (\n          <CalendarPageAnimation state={state.animationState}>\n            {renderGrid()}\n          </CalendarPageAnimation>\n        ) : (\n          renderGrid()\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n  useDateFormatter,\n  useLocale,\n  useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n  SapphireCalendarStateOptions,\n  useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n  CalendarPageAnimation,\n  useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps<T extends DateValue = DateValue>\n  extends SapphireStyleProps,\n    Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>,\n    Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {\n  /**\n   * Whether week numbers are visible as a first column\n   */\n  showWeekNumbers?: boolean;\n}\n\n/**\n * Displays a calendar and allows users to select a single date. It displays a grid of days in one\n * month, by default, and the user can navigate to previous and next months. It's also possible\n * to navigate to months and years view, to quickly jump to a date far away from the focused date.\n */\nexport const Calendar = <T extends DateValue = DateValue>({\n  showWeekNumbers,\n  ...props\n}: Omit<SapphireCalendarProps<T>, 'locale'>): JSX.Element => {\n  useThemeCheck();\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const { styleProps } = useSapphireStyleProps(props);\n  const state = useCalendarAnimationState(\n    useSapphireCalendarState({\n      selectionAlignment: 'start',\n      ...props,\n      locale,\n      createCalendar,\n    })\n  );\n\n  const monthDateFormatter = useDateFormatter({\n    month: 'long',\n    year: 'numeric',\n    era:\n      state.visibleRange.start.calendar.identifier === 'gregory' &&\n      state.visibleRange.start.era === 'BC'\n        ? 'short'\n        : undefined,\n    calendar: state.visibleRange.start.calendar.identifier,\n    timeZone: state.timeZone,\n  });\n\n  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(\n    props,\n    state\n  );\n\n  const renderGrid = () => {\n    switch (state.view) {\n      case 'years':\n        return <CalendarYearsGrid state={state} />;\n      case 'months':\n        return <CalendarMonthsGrid state={state} />;\n      case 'days':\n      default:\n        return (\n          <CalendarDaysGrid state={state} showWeekNumbers={showWeekNumbers} />\n        );\n    }\n  };\n\n  const renderTitle = () => {\n    switch (state.view) {\n      case 'days':\n        return sentenceCase(\n          monthDateFormatter.format(\n            state.visibleRange.start.toDate(state.timeZone)\n          )\n        );\n      case 'months':\n        return state.focusedDate.year;\n      case 'years':\n        return sentenceCase(formatMessage('year'));\n    }\n  };\n\n  return (\n    <div\n      className={styles['sapphire-calendar']}\n      {...mergeProps(calendarProps, filterDOMProps(props))}\n    >\n      <div\n        className={clsx(\n          styles['sapphire-calendar__table-container'],\n          styleProps.className\n        )}\n        style={styleProps.style}\n      >\n        <CalendarHeader\n          prevButtonProps={prevButtonProps}\n          nextButtonProps={nextButtonProps}\n        >\n          {state.canBroadenView ? (\n            <Button\n              onPress={state.broadenView}\n              isDisabled={state.isDisabled}\n              variant=\"tertiary\"\n              appearance=\"ghost\"\n              size=\"large\"\n            >\n              {renderTitle()}\n            </Button>\n          ) : (\n            renderTitle()\n          )}\n        </CalendarHeader>\n        {state.view === 'days' ? (\n          <CalendarPageAnimation state={state.animationState}>\n            {renderGrid()}\n          </CalendarPageAnimation>\n        ) : (\n          renderGrid()\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDa,MAAA,QAAA,GAAW,CAAkC,EAGG,KAAA;AAHH,EACxD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,eAAA;AAAA,GADwD,GAAA,EAAA,EAErD,kBAFqD,EAErD,EAAA;AAAA,IADH,iBAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAA,MAAM,gBAAgB,mBAAoB,CAAA,YAAA,CAAA,CAAA;AAE1C,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,KAAA,GAAQ,0BACZ,wBAAyB,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACvB,kBAAoB,EAAA,OAAA;AAAA,GAAA,EACjB,KAFoB,CAAA,EAAA;AAAA,IAGvB,MAAA;AAAA,IACA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAIJ,EAAA,MAAM,qBAAqB,gBAAiB,CAAA;AAAA,IAC1C,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA,SAAA;AAAA,IACN,GACE,EAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,QAAS,CAAA,UAAA,KAAe,SACjD,IAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,GAAQ,KAAA,IAAA,GAC7B,OACA,GAAA,KAAA,CAAA;AAAA,IACN,QAAU,EAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAM,QAAS,CAAA,UAAA;AAAA,IAC5C,UAAU,KAAM,CAAA,QAAA;AAAA,GAAA,CAAA,CAAA;AAGlB,EAAA,MAAM,EAAE,aAAA,EAAe,eAAiB,EAAA,eAAA,EAAA,GAAoB,YAC1D,KACA,EAAA,KAAA,CAAA,CAAA;AAGF,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,MACP,KAAA,OAAA;AACH,QAAA,2CAAQ,iBAAD,EAAA;AAAA,UAAmB,KAAA;AAAA,SAAA,CAAA,CAAA;AAAA,MACvB,KAAA,QAAA;AACH,QAAA,2CAAQ,kBAAD,EAAA;AAAA,UAAoB,KAAA;AAAA,SAAA,CAAA,CAAA;AAAA,MACxB,KAAA,MAAA,CAAA;AAAA,MAAA;AAEH,QAAA,2CACG,gBAAD,EAAA;AAAA,UAAkB,KAAA;AAAA,UAAc,eAAA;AAAA,SAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAKxC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,MACP,KAAA,MAAA;AACH,QAAA,OAAO,aACL,kBAAmB,CAAA,MAAA,CACjB,MAAM,YAAa,CAAA,KAAA,CAAM,OAAO,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,MAGvC,KAAA,QAAA;AACH,QAAA,OAAO,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,MACtB,KAAA,OAAA;AACH,QAAA,OAAO,aAAa,aAAc,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAIxC,EAAA,2CACG,KAAD,EAAA,cAAA,CAAA;AAAA,IACE,WAAW,MAAO,CAAA,mBAAA,CAAA;AAAA,GAAA,EACd,UAAW,CAAA,aAAA,EAAe,cAAe,CAAA,KAAA,CAAA,CAAA,CAAA,sCAE5C,KAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,oCAAA,CAAA,EACP,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,sCAEjB,cAAD,EAAA;AAAA,IACE,eAAA;AAAA,IACA,eAAA;AAAA,GAEC,EAAA,KAAA,CAAM,cACL,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,SAAS,KAAM,CAAA,WAAA;AAAA,IACf,YAAY,KAAM,CAAA,UAAA;AAAA,IAClB,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,GAAA,EAEJ,iBAGH,WAGH,EAAA,CAAA,EAAA,KAAA,CAAM,IAAS,KAAA,MAAA,uCACb,qBAAD,EAAA;AAAA,IAAuB,OAAO,KAAM,CAAA,cAAA;AAAA,GAAA,EACjC,UAGH,EAAA,CAAA,GAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/LabeledValue/src/LabeledValue.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useField } from '@react-aria/label';
+import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';
+
+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));
+function LabeledValue(props) {
+  useThemeCheck();
+  const {
+    children,
+    contextualHelp,
+    label,
+    labelPlacement = "above",
+    size = "large"
+  } = props;
+  const { fieldProps } = useField({ label });
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, fieldProps), {
+    labelPlacement,
+    size
+  }), /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, {
+    contextualHelp,
+    size
+  }, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-labeled-value"], {
+      [styles["sapphire-labeled-value--medium"]]: size === "medium"
+    })
+  }, children)));
+}
+
+export { LabeledValue };
+//# sourceMappingURL=LabeledValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n  children?: React.ReactNode;\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n}\n\nexport function LabeledValue(props: LabeledValueProps) {\n  useThemeCheck();\n  const {\n    children,\n    contextualHelp,\n    label,\n    labelPlacement = 'above',\n    size = 'large',\n  } = props;\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field {...fieldProps} labelPlacement={labelPlacement} size={size}>\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-labeled-value'], {\n            [styles['sapphire-labeled-value--medium']]: size === 'medium',\n          })}\n        >\n          {children}\n        </div>\n      </Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,YAAA,CAAsB,KAA0B,EAAA;AACrD,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,OAAA;AAAA,GACL,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,CAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,yBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAC/C,CAAA,MAAA,CAAO,oCAAoC,IAAS,KAAA,QAAA;AAAA,KAAA,CAAA;AAAA,GAGtD,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/{Tag → TagGroup}/src/Tag.js

@@ -4,9 +4,10 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useTag } from '@react-aria/tag';
 import { mergeProps } from '@react-aria/utils';
-import { useThemeCheck } from '@danske/sapphire-react';
+import { useThemeCheck, Icon } from '@danske/sapphire-react';
 import { Close, AlertCircle } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/tag/tag.module.css';
+import { FocusRing } from '@react-aria/focus';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -45,28 +46,26 @@ function Tag(props) {
   const ref = useRef(null);
   const _a = useTag(props, state, ref), {
     allowsRemoving,
-    allowsSelection,
     gridCellProps,
     isDisabled,
     isFocused,
     isPressed,
-    isSelected,
     removeButtonProps,
     rowProps: _b
   } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest(_c, ["onKeyDown"]), otherProps = __objRest(_a, [
     "allowsRemoving",
-    "allowsSelection",
     "gridCellProps",
     "isDisabled",
     "isFocused",
     "isPressed",
-    "isSelected",
     "removeButtonProps",
     "rowProps"
   ]);
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React.createElement(FocusRing, {
+    focusRingClass: styles["is-focus"]
+  }, /* @__PURE__ */ React.createElement("div", __spreadValues(__spreadProps(__spreadValues({
     ref
   }, mergeProps({
     onKeyDown: (e) => {
@@ -78,31 +77,30 @@ function Tag(props) {
     }
   }, rowProps, hoverProps)), {
     className: clsx(styles["sapphire-tag"], styles["js-focus"], styles["js-hover"], {
-      [styles["sapphire-tag--error"]]: hasError,
-      [styles["is-active"]]: allowsSelection && isSelected,
+      [styles["sapphire-tag--actionable"]]: hasAction,
       [styles["is-active"]]: hasAction && isPressed,
-      [styles["is-focus"]]: isFocused,
       [styles["is-hover"]]: hasAction && isHovered,
       [styles["is-disabled"]]: isDisabled
-    }),
-    "aria-invalid": hasError
-  }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridCellProps), {
-    className: styles["sapphire-tag__gridcell"]
-  }), hasError && /* @__PURE__ */ React.createElement(IconError, null), item.rendered, allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, __spreadValues({}, removeButtonProps))));
+    })
+  }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridCellProps), {
+    className: styles["sapphire-tag__content"]
+  }), hasError && /* @__PURE__ */ React.createElement(IconError, null), item.rendered, allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, __spreadValues({}, removeButtonProps)))));
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = useRef(null);
   const { buttonProps } = useButton(removeButtonProps, buttonRef);
   return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, buttonProps), {
     className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: styles["sapphire-tag__icon"]
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    size: "s"
   }, /* @__PURE__ */ React.createElement(Close, null)));
 }
 const IconError = () => {
   return /* @__PURE__ */ React.createElement("span", {
-    className: clsx(styles["sapphire-tag__icon"], styles["sapphire-tag__icon--error"])
-  }, /* @__PURE__ */ React.createElement(AlertCircle, null));
+    className: clsx(styles["sapphire-tag__error-icon"])
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: "s"
+  }, /* @__PURE__ */ React.createElement(AlertCircle, null)));
 };
 
 export { Tag };

package/build/esm/TagGroup/src/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck } from '@danske/sapphire-react';\nimport { AlertCircle, Close } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from '@react-aria/focus';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef(null);\n  const {\n    allowsRemoving,\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <FocusRing focusRingClass={styles['is-focus']}>\n      <div\n        ref={ref}\n        {...mergeProps(\n          {\n            onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n              /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n            as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n              if (e.key !== ' ') {\n                onKeyDown?.(e);\n              } else {\n                e.preventDefault();\n              }\n            },\n          },\n          rowProps,\n          hoverProps\n        )}\n        className={clsx(\n          styles['sapphire-tag'],\n          styles['js-focus'],\n          styles['js-hover'],\n          {\n            [styles['sapphire-tag--actionable']]: hasAction,\n            [styles['is-active']]: hasAction && isPressed,\n            [styles['is-hover']]: hasAction && isHovered,\n            [styles['is-disabled']]: isDisabled,\n          }\n        )}\n        {...(hasError ? { 'aria-invalid': true } : {})}\n      >\n        <div {...gridCellProps} className={styles['sapphire-tag__content']}>\n          {hasError && <IconError />}\n          {item.rendered}\n          {allowsRemoving && (\n            <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n          )}\n        </div>\n      </div>\n    </FocusRing>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"s\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"s\">\n        <AlertCircle />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    AriaLabelingProps,\n    SapphireStyleProps {\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup(props, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      error={!!errorMessage}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n    >\n      {(labelText || contextualHelp) && (\n        <Field.Label>\n          <Label {...labelProps} contextualHelp={contextualHelp}>\n            {labelText}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div {...gridProps} ref={ref} className={styles['sapphire-tag-group']}>\n          {[...state.collection].map((item) => (\n            <Tag\n              key={item.key}\n              item={item}\n              state={state}\n              hasError={item.props.hasError}\n            />\n          ))}\n        </div>\n      </Field.Control>\n      {(note || errorMessage) &&\n        (errorMessage ? (\n          <Field.Footer>\n            <Field.Note {...errorMessageProps}>{errorMessage}</Field.Note>\n          </Field.Footer>\n        ) : (\n          <Field.Footer>\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          </Field.Footer>\n        ))}\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAA,QAAA,CAAoC,KAAyB,EAAA;AAClE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IALH,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,QAAQ,YAAa,CAAA,KAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,gBAAkB,EAAA,SAAA,EAAW,YAAY,iBAC/C,EAAA,GAAA,WAAA,CAAY,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,KAAA,EAAO,CAAC,CAAC,YAAA;AAAA,IACT,cAAA;AAAA,IACA,sBAAuB,EAAA,KAAA;AAAA,GAErB,CAAA,EAAA,CAAA,SAAA,IAAa,mCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACpB,CAAA,EAAA,SAAA,CAAA,CAAA,sCAIN,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,GAAA;AAAA,IAAU,WAAW,MAAO,CAAA,oBAAA,CAAA;AAAA,GAC7C,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,GAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,EAAU,KAAK,KAAM,CAAA,QAAA;AAAA,GAK3B,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAQ,kBAEN,YAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,sCACG,KAAM,CAAA,IAAA,EAAP,mBAAgB,iBAAoB,CAAA,EAAA,YAAA,CAAA,CAAA,uCAGrC,KAAM,CAAA,MAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,gBAAmB,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/TagGroup/src/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagItem.js","sources":["../../../../src/TagGroup/src/TagItem.tsx"],"sourcesContent":["import { Item } from '@react-stately/collections';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAWA,MAAM,OAAU,GAAA;;;;"}

package/build/esm/index.js

@@ -21,7 +21,8 @@ export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
 export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
-export { TagGroup } from './Tag/src/TagGroup.js';
-export { TagItem } from './Tag/src/TagItem.js';
+export { TagGroup } from './TagGroup/src/TagGroup.js';
+export { TagItem } from './TagGroup/src/TagItem.js';
+export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
 export { useLocale } from '@react-aria/i18n';
 //# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.d.ts

@@ -968,4 +968,26 @@ interface TagItemProps<T> extends ItemProps<T> {
 }
 declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+interface LabeledValueProps extends DOMProps, SapphireStyleProps {
+    children?: React__default.ReactNode;
+    /**
+     * A ContextualHelp element to place next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * The content to display as a label.
+     */
+    label: ReactNode;
+    /**
+     * Places the label either above (default) or on the left side of tags.
+     * @default 'above'
+     */
+    labelPlacement?: 'above' | 'side';
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+}
+declare function LabeledValue(props: LabeledValueProps): React__default.JSX.Element;
+
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.85.0",
+  "version": "0.86.2",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,18 +25,18 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.27.0",
+    "@danske/sapphire-react": "^3.35.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.27.0",
+    "@danske/sapphire-react": "^3.35.1",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^28.3.0",
+    "@danske/sapphire-css": "^30.0.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.29",
@@ -74,5 +74,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "898067929452d335a664e4d5fb5287775d1dbbd0"
+  "gitHead": "2ff8412b24532d59317fba3af90c5e305bc6ee6b"
 }

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

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/Tag/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { useThemeCheck } from '@danske/sapphire-react';\nimport { AlertCircle, Close } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef(null);\n  const {\n    allowsRemoving,\n    allowsSelection,\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    isSelected,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <div\n      ref={ref}\n      {...mergeProps(\n        {\n          onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n            /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n            as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n            if (e.key !== ' ') {\n              onKeyDown?.(e);\n            } else {\n              e.preventDefault();\n            }\n          },\n        },\n        rowProps,\n        hoverProps\n      )}\n      className={clsx(\n        styles['sapphire-tag'],\n        styles['js-focus'],\n        styles['js-hover'],\n        {\n          [styles['sapphire-tag--error']]: hasError,\n          [styles['is-active']]: allowsSelection && isSelected,\n          [styles['is-active']]: hasAction && isPressed,\n          [styles['is-focus']]: isFocused,\n          [styles['is-hover']]: hasAction && isHovered,\n          [styles['is-disabled']]: isDisabled,\n        }\n      )}\n      aria-invalid={hasError}\n    >\n      <div {...gridCellProps} className={styles['sapphire-tag__gridcell']}>\n        {hasError && <IconError />}\n        {item.rendered}\n        {allowsRemoving && (\n          <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <span className={styles['sapphire-tag__icon']}>\n        <Close />\n      </span>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span\n      className={clsx(\n        styles['sapphire-tag__icon'],\n        styles['sapphire-tag__icon--error']\n      )}\n    >\n      <AlertCircle />\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/Tag/src/TagGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../../src/Tag/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    AriaLabelingProps,\n    SapphireStyleProps {\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup(props, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      error={!!errorMessage}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n    >\n      {(labelText || contextualHelp) && (\n        <Field.Label>\n          <Label {...labelProps} contextualHelp={contextualHelp}>\n            {labelText}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div {...gridProps} ref={ref} className={styles['sapphire-tag-group']}>\n          {[...state.collection].map((item) => (\n            <Tag\n              key={item.key}\n              item={item}\n              state={state}\n              hasError={item.props.hasError}\n            />\n          ))}\n        </div>\n      </Field.Control>\n      {(note || errorMessage) &&\n        (errorMessage ? (\n          <Field.Footer>\n            <Field.Note {...errorMessageProps}>{errorMessage}</Field.Note>\n          </Field.Footer>\n        ) : (\n          <Field.Footer>\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          </Field.Footer>\n        ))}\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDO,SAAA,QAAA,CAAoC,KAAyB,EAAA;AAClE,EAAA,aAAA,EAAA,CAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,GAEE,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IALH,gBAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,QAAQ,YAAa,CAAA,KAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,gBAAkB,EAAA,SAAA,EAAW,YAAY,iBAC/C,EAAA,GAAA,WAAA,CAAY,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,KAAA,EAAO,CAAC,CAAC,YAAA;AAAA,IACT,cAAA;AAAA,IACA,sBAAuB,EAAA,KAAA;AAAA,GAErB,CAAA,EAAA,CAAA,SAAA,IAAa,mCACZ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACpB,CAAA,EAAA,SAAA,CAAA,CAAA,sCAIN,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAS,SAAT,CAAA,EAAA;AAAA,IAAoB,GAAA;AAAA,IAAU,WAAW,MAAO,CAAA,oBAAA,CAAA;AAAA,GAC7C,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,GAAD,EAAA;AAAA,IACE,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,EAAU,KAAK,KAAM,CAAA,QAAA;AAAA,GAK3B,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAQ,kBAEN,YAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,sCACG,KAAM,CAAA,IAAA,EAAP,mBAAgB,iBAAoB,CAAA,EAAA,YAAA,CAAA,CAAA,uCAGrC,KAAM,CAAA,MAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,gBAAmB,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Tag/src/TagItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagItem.js","sources":["../../../../src/Tag/src/TagItem.tsx"],"sourcesContent":["import { Item } from '@react-stately/collections';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAWA,MAAM,OAAU,GAAA;;;;"}