@danske/sapphire-react-lab 0.79.1 → 0.81.0

package/build/esm/AlertDialog/src/AlertDialog.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useThemeCheck, Dialog } from '@danske/sapphire-react';
+import { FeedbackMessage } from '../../FeedbackMessage/src/FeedbackMessage.js';
+
+var __defProp = Object.defineProperty;
+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 __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 AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
+  useThemeCheck();
+  const _a = props, {
+    variant = "neutral",
+    icon,
+    body,
+    actionsOrientation = "horizontal",
+    actions,
+    heading
+  } = _a, rest = __objRest(_a, [
+    "variant",
+    "icon",
+    "body",
+    "actionsOrientation",
+    "actions",
+    "heading"
+  ]);
+  return /* @__PURE__ */ React.createElement(Dialog, __spreadValues({
+    ref,
+    role: "alertdialog",
+    type: "active",
+    size: "extra-small",
+    header: /* @__PURE__ */ React.createElement(React.Fragment, null),
+    content: /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(FeedbackMessage, {
+      heading: /* @__PURE__ */ React.createElement(Dialog.Header, {
+        level: 6,
+        heading
+      }),
+      variant,
+      icon,
+      body
+    })),
+    footer: /* @__PURE__ */ React.createElement(Dialog.Footer, {
+      stretch: "autoVertical",
+      orientation: actionsOrientation
+    }, actions)
+  }, rest));
+});
+
+export { AlertDialog };
+//# sourceMappingURL=AlertDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogProps,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n  FeedbackMessage,\n  SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n  SapphireStyleProps &\n  Pick<DialogProps, 'isOpen' | 'onClose'> &\n  Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n    /**\n     *\n     * @default \"horizontal\"\n     */\n    actionsOrientation?: 'vertical' | 'horizontal';\n    /**\n     * The elements that will be rendered in the footer of the dialog.\n     */\n    actions: ReactNode;\n    /**\n     * The title of the dialog.\n     */\n    heading: string;\n  };\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n  props: SapphireAlertDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const {\n    variant = 'neutral',\n    icon,\n    body,\n    actionsOrientation = 'horizontal',\n    actions,\n    heading,\n    ...rest\n  } = props;\n\n  return (\n    <Dialog\n      ref={ref}\n      role=\"alertdialog\"\n      type=\"active\"\n      size=\"extra-small\"\n      header={<></>}\n      content={\n        <Dialog.Content>\n          <FeedbackMessage\n            heading={<Dialog.Header level={6} heading={heading} />}\n            variant={variant}\n            icon={icon}\n            body={body}\n          />\n        </Dialog.Content>\n      }\n      footer={\n        <Dialog.Footer stretch=\"autoVertical\" orientation={actionsOrientation}>\n          {actions}\n        </Dialog.Footer>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MACE,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,QAAe,KAAO,EAAA,CAAA;AAAA,QAAG,OAAA;AAAA,OAAA,CAAA;AAAA,MAClC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAIN,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,MAAe,OAAQ,EAAA,cAAA;AAAA,MAAe,WAAa,EAAA,kBAAA;AAAA,KAChD,EAAA,OAAA,CAAA;AAAA,GAGD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/Avatar/src/Avatar.js

@@ -34,6 +34,18 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const getIconSize = (size) => {
+  switch (size) {
+    case "medium":
+      return "m";
+    case "large":
+      return "l";
+    case "extraLarge":
+      return "xl";
+    default:
+      return "s";
+  }
+};
 const Avatar = (_a) => {
   var _b = _a, {
     monogram,
@@ -50,12 +62,13 @@ const Avatar = (_a) => {
   const { styleProps } = useSapphireStyleProps(props);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, styleProps), {
     className: clsx(styleProps.className, styles["sapphire-avatar"], {
+      [styles["sapphire-avatar--extra-large"]]: size === "extraLarge",
       [styles["sapphire-avatar--large"]]: size === "large",
       [styles["sapphire-avatar--small"]]: size === "small",
       [styles["sapphire-avatar--extra-small"]]: size === "extraSmall"
     }, color !== "passive" && styles[`sapphire-avatar--${color}`])
   }), icon ? /* @__PURE__ */ React.createElement(Icon, {
-    size: size === "large" ? "l" : size === "medium" ? "m" : "s"
+    size: getIconSize(size)
   }, icon) : monogram);
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/Avatar/src/Avatar.tsx"],"sourcesContent":["import {\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport React, { ReactNode } from 'react';\nimport styles from '@danske/sapphire-css/components/avatar/avatar.module.css';\nimport clsx from 'clsx';\n\nexport type SapphireAvatarProps = SapphireStyleProps & {\n  /**\n   * @default 'medium'\n   */\n  size?: 'large' | 'medium' | 'small' | 'extraSmall';\n\n  /**\n   * The background color of the avatar.\n   * Can either be semantic or one of the named decorative colors.\n   *\n   * @default 'informative'\n   */\n\n  color?:\n    | 'positive'\n    | 'negative'\n    | 'warning'\n    | 'informative'\n    | 'passive'\n    | 'aqua'\n    | 'copper'\n    | 'electro'\n    | 'indigo'\n    | 'lime'\n    | 'pink'\n    | 'violet'\n    | 'gold'\n    | 'beige'\n    | 'orchid'\n    | 'gray'\n    | 'cobalt'\n    | 'forestGreen'\n    | 'teal'\n    | 'orange';\n} & (\n    | {\n        monogram: ReactNode;\n        icon?: never;\n      }\n    | {\n        monogram?: never;\n        icon: ReactNode;\n      }\n  );\n\nexport const Avatar = ({\n  monogram,\n  icon,\n  color = 'informative',\n  size = 'medium',\n  ...props\n}: SapphireAvatarProps): React.ReactElement => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-avatar'],\n        {\n          [styles['sapphire-avatar--large']]: size === 'large',\n          [styles['sapphire-avatar--small']]: size === 'small',\n          [styles['sapphire-avatar--extra-small']]: size === 'extraSmall',\n        },\n        color !== 'passive' && styles[`sapphire-avatar--${color}`]\n      )}\n    >\n      {icon ? (\n        <Icon size={size === 'large' ? 'l' : size === 'medium' ? 'm' : 's'}>\n          {icon}\n        </Icon>\n      ) : (\n        monogram\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDa,MAAA,MAAA,GAAS,CAAC,EAMwB,KAAA;AANxB,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAQ,GAAA,aAAA;AAAA,IACR,IAAO,GAAA,QAAA;AAAA,GAJc,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,UAAW,CAAA,SAAA,EACX,OAAO,iBACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,KAErD,EAAA,KAAA,KAAU,SAAa,IAAA,MAAA,CAAO,CAAoB,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAGnD,CAAA,EAAA,IAAA,uCACE,IAAD,EAAA;AAAA,IAAM,MAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,IAAA,KAAS,WAAW,GAAM,GAAA,GAAA;AAAA,GAAA,EAC5D,IAGH,CAAA,GAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/Avatar/src/Avatar.tsx"],"sourcesContent":["import {\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport React, { ReactNode } from 'react';\nimport styles from '@danske/sapphire-css/components/avatar/avatar.module.css';\nimport clsx from 'clsx';\n\nconst getIconSize = (\n  size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall'\n) => {\n  switch (size) {\n    case 'medium':\n      return 'm';\n    case 'large':\n      return 'l';\n    case 'extraLarge':\n      return 'xl';\n    default:\n      return 's';\n  }\n};\n\nexport type SapphireAvatarProps = SapphireStyleProps & {\n  /**\n   * @default 'medium'\n   */\n  size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';\n\n  /**\n   * The background color of the avatar.\n   * Can either be semantic or one of the named decorative colors.\n   *\n   * @default 'informative'\n   */\n\n  color?:\n    | 'positive'\n    | 'negative'\n    | 'warning'\n    | 'informative'\n    | 'passive'\n    | 'aqua'\n    | 'copper'\n    | 'electro'\n    | 'indigo'\n    | 'lime'\n    | 'pink'\n    | 'violet'\n    | 'gold'\n    | 'beige'\n    | 'orchid'\n    | 'gray'\n    | 'cobalt'\n    | 'forestGreen'\n    | 'teal'\n    | 'orange';\n} & (\n    | {\n        monogram: ReactNode;\n        icon?: never;\n      }\n    | {\n        monogram?: never;\n        icon: ReactNode;\n      }\n  );\n\nexport const Avatar = ({\n  monogram,\n  icon,\n  color = 'informative',\n  size = 'medium',\n  ...props\n}: SapphireAvatarProps): React.ReactElement => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-avatar'],\n        {\n          [styles['sapphire-avatar--extra-large']]: size === 'extraLarge',\n          [styles['sapphire-avatar--large']]: size === 'large',\n          [styles['sapphire-avatar--small']]: size === 'small',\n          [styles['sapphire-avatar--extra-small']]: size === 'extraSmall',\n        },\n        color !== 'passive' && styles[`sapphire-avatar--${color}`]\n      )}\n    >\n      {icon ? <Icon size={getIconSize(size)}>{icon}</Icon> : monogram}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,WAAA,GAAc,CAClB,IACG,KAAA;AACH,EAAQ,QAAA,IAAA;AAAA,IACD,KAAA,QAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,YAAA;AACH,MAAO,OAAA,IAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,GAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAiDA,MAAA,MAAA,GAAS,CAAC,EAMwB,KAAA;AANxB,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAQ,GAAA,aAAA;AAAA,IACR,IAAO,GAAA,QAAA;AAAA,GAJc,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,UAAW,CAAA,SAAA,EACX,OAAO,iBACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,MAClD,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,KAErD,EAAA,KAAA,KAAU,SAAa,IAAA,MAAA,CAAO,CAAoB,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAGnD,CAAA,EAAA,IAAA,uCAAQ,IAAD,EAAA;AAAA,IAAM,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,GAAA,EAAQ,IAAe,CAAA,GAAA,QAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/FeedbackMessage/src/FeedbackMessage.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
-import { CheckMarkCircle, AlertCircle } from '@danske/sapphire-icons/react';
-import { useThemeCheck, useSapphireStyleProps, Icon, Heading } from '@danske/sapphire-react';
+import { Bell, AlertTriangle, AlertCircle, CheckMarkCircle } from '@danske/sapphire-icons/react';
+import { useThemeCheck, useSapphireStyleProps, Heading } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';
+import { Avatar } from '../../Avatar/src/Avatar.js';
 
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -19,17 +20,48 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const getColor = (variant) => {
+  switch (variant) {
+    case "success":
+      return "positive";
+    case "error":
+      return "negative";
+    case "neutral":
+      return "passive";
+    default:
+      return variant;
+  }
+};
+const getIcon = (variant, icon) => {
+  if (icon) {
+    return icon;
+  }
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ React.createElement(CheckMarkCircle, null);
+    case "error":
+      return /* @__PURE__ */ React.createElement(AlertCircle, null);
+    case "warning":
+      return /* @__PURE__ */ React.createElement(AlertTriangle, null);
+    case "informative":
+      return /* @__PURE__ */ React.createElement(Bell, null);
+    default:
+      return null;
+  }
+};
 const FeedbackMessage = (_a) => {
   var _b = _a, {
     heading,
     body,
     actions,
-    type = "neutral"
+    variant = "neutral",
+    icon
   } = _b, otherProps = __objRest(_b, [
     "heading",
     "body",
     "actions",
-    "type"
+    "variant",
+    "icon"
   ]);
   useThemeCheck();
   const {
@@ -38,15 +70,15 @@ const FeedbackMessage = (_a) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-feedback-message"], className),
     style
-  }, type !== "neutral" && /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-feedback-message__icon"], styles[`sapphire-feedback-message__icon--${type}`])
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "xl"
-  }, type === "success" ? /* @__PURE__ */ React.createElement(CheckMarkCircle, null) : /* @__PURE__ */ React.createElement(AlertCircle, null))), /* @__PURE__ */ React.createElement("div", {
+  }, variant !== "neutral" && /* @__PURE__ */ React.createElement(Avatar, {
+    color: getColor(variant),
+    size: "extraLarge",
+    icon: getIcon(variant, icon)
+  }), /* @__PURE__ */ React.createElement("div", {
     className: styles["sapphire-feedback-message__content"]
-  }, /* @__PURE__ */ React.createElement(Heading, {
+  }, typeof heading === "string" ? /* @__PURE__ */ React.createElement(Heading, {
     level: 3
-  }, heading), /* @__PURE__ */ React.createElement("section", {
+  }, heading) : heading, /* @__PURE__ */ React.createElement("section", {
     className: styles["sapphire-feedback-message__body"]
   }, body)), actions);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { AlertCircle, CheckMarkCircle } from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  type?: 'error' | 'success' | 'neutral';\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  type = 'neutral',\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {type !== 'neutral' && (\n        <div\n          className={clsx(\n            styles['sapphire-feedback-message__icon'],\n            styles[`sapphire-feedback-message__icon--${type}`]\n          )}\n        >\n          <Icon size=\"xl\">\n            {type === 'success' ? <CheckMarkCircle /> : <AlertCircle />}\n          </Icon>\n        </div>\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        <Heading level={3}>{heading}</Heading>\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCa,MAAA,eAAA,GAAkB,CAAC,EAMiB,KAAA;AANjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,GAJuB,GAAA,EAAA,EAK3B,uBAL2B,EAK3B,EAAA;AAAA,IAJH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,IAAA,KAAS,SACR,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,iCAAA,CAAA,EACP,OAAO,CAAoC,iCAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAG5C,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GACR,EAAA,IAAA,KAAS,4BAAa,KAAA,CAAA,aAAA,CAAA,eAAA,EAAD,wBAAuB,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAIlD,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,sCACpB,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,sCACnB,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Bell,\n  CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'informative'\n  | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode | string;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  variant?: FeedbackMessageVariant;\n  /**\n   * Optional icon to override the default icon for the message type.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n  switch (variant) {\n    case 'success':\n      return 'positive';\n    case 'error':\n      return 'negative';\n    case 'neutral':\n      return 'passive';\n    default:\n      return variant;\n  }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n  if (icon) {\n    return icon;\n  }\n\n  switch (variant) {\n    case 'success':\n      return <CheckMarkCircle />;\n    case 'error':\n      return <AlertCircle />;\n    case 'warning':\n      return <AlertTriangle />;\n    case 'informative':\n      return <Bell />;\n    default:\n      return null;\n  }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  variant = 'neutral',\n  icon,\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {variant !== 'neutral' && (\n        <Avatar\n          color={getColor(variant)}\n          size=\"extraLarge\"\n          icon={getIcon(variant, icon)}\n        />\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        {typeof heading === 'string' ? (\n          <Heading level={3}>{heading}</Heading>\n        ) : (\n          heading\n        )}\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,QAAA,GAAW,CAAC,OAAoC,KAAA;AACpD,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAIb,MAAM,OAAA,GAAU,CAAC,OAAA,EAAiC,IAA2B,KAAA;AAC3E,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAA,2CAAQ,eAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAA,2CAAQ,aAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,aAAA;AACH,MAAA,2CAAQ,IAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAOA,MAAA,eAAA,GAAkB,CAAC,EAOiB,KAAA;AAPjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,GAL8B,GAAA,EAAA,EAM3B,uBAN2B,EAM3B,EAAA;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,OAAA,KAAY,SACX,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,OAAO,QAAS,CAAA,OAAA,CAAA;AAAA,IAChB,IAAK,EAAA,YAAA;AAAA,IACL,IAAA,EAAM,QAAQ,OAAS,EAAA,IAAA,CAAA;AAAA,GAAA,CAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,EACpB,OAAO,OAAA,KAAY,QAClB,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,GAEpB,OAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/NumberField/i18n/da-DK.js

@@ -0,0 +1,9 @@
+var increment = "øge";
+var decrement = "formindske";
+var da = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, da as default, increment };
+//# sourceMappingURL=da-DK.js.map

package/build/esm/NumberField/i18n/da-DK.js.map

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

package/build/esm/NumberField/i18n/de-DE.js

@@ -0,0 +1,9 @@
+var increment = "erhöhen";
+var decrement = "verringern";
+var de = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, de as default, increment };
+//# sourceMappingURL=de-DE.js.map

package/build/esm/NumberField/i18n/de-DE.js.map

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

package/build/esm/NumberField/i18n/en-US.js

@@ -0,0 +1,9 @@
+var increment = "Increase";
+var decrement = "Decrease";
+var en = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, en as default, increment };
+//# sourceMappingURL=en-US.js.map

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

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

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

@@ -0,0 +1,9 @@
+var increment = "lisääntyä";
+var decrement = "vähentää";
+var fi = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, fi as default, increment };
+//# sourceMappingURL=fi-FI.js.map

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

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

package/build/esm/NumberField/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/NumberField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/NumberField/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/NumberField/i18n/nb-NO.js

@@ -0,0 +1,9 @@
+var increment = "øke";
+var decrement = "avta";
+var no = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, no as default, increment };
+//# sourceMappingURL=nb-NO.js.map

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

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

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

@@ -0,0 +1,9 @@
+var increment = "zwiększyć";
+var decrement = "zmniejszenie";
+var pl = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, pl as default, increment };
+//# sourceMappingURL=pl-PL.js.map

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

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

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

@@ -0,0 +1,9 @@
+var increment = "öka";
+var decrement = "minska";
+var se = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, se as default, increment };
+//# sourceMappingURL=sv-SE.js.map

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

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

package/build/esm/NumberField/src/NumberField.js

@@ -0,0 +1,149 @@
+import { useObjectRef, mergeProps } from '@react-aria/utils';
+import { createFocusableRef } from '@react-spectrum/utils';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useSapphireNumberField } from './useSapphireNumberField.js';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useFocusRing } from '@react-aria/focus';
+import clsx from 'clsx';
+import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
+import { useAutofillStyle } from './useAutofillStyle.js';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+import { StepperButton } from './StepperButton.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 NumberField = forwardRef(function NumberField2(props, ref) {
+  const _a = props, {
+    label,
+    isDisabled,
+    error,
+    note,
+    isRequired,
+    contextualHelp,
+    prefix,
+    postfix,
+    size = "large",
+    labelPlacement = "above",
+    necessityIndicator = false,
+    alignInputRight,
+    showButtons = false,
+    incrementAriaLabel,
+    decrementAriaLabel
+  } = _a, otherProps = __objRest(_a, [
+    "label",
+    "isDisabled",
+    "error",
+    "note",
+    "isRequired",
+    "contextualHelp",
+    "prefix",
+    "postfix",
+    "size",
+    "labelPlacement",
+    "necessityIndicator",
+    "alignInputRight",
+    "showButtons",
+    "incrementAriaLabel",
+    "decrementAriaLabel"
+  ]);
+  useThemeCheck();
+  const inputRef = useObjectRef(props.inputRef);
+  const formatMessage = useMessageFormatter(intlMessages);
+  const {
+    inputProps,
+    labelProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSapphireNumberField(__spreadProps(__spreadValues({}, props), {
+    incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
+    decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
+  }), inputRef);
+  const { focusProps, isFocusVisible } = useFocusRing(props);
+  const { styleProps } = useSapphireStyleProps(props);
+  const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
+  const domRef = useRef(null);
+  useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(domRef, inputRef)), {
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, removeUniqueDOMProps(otherProps)), {
+    ref: domRef,
+    isDisabled,
+    error: !!error,
+    size,
+    labelPlacement
+  }), label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    size,
+    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field"], {
+      [textFieldStyles["is-focus"]]: isFocusVisible,
+      [textFieldStyles["sapphire-text-field--error"]]: error === true || typeof error === "string",
+      [textFieldStyles["sapphire-text-field--medium"]]: size === "medium"
+    }),
+    style: __spreadValues({}, styleProps.style.width ? { width: styleProps.style.width } : {})
+  }, prefix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__prefix"], {
+      [textFieldStyles["sapphire-text-field__prefix--icon"]]: typeof prefix !== "string"
+    })
+  }, prefix), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, mergeProps(inputProps, focusProps, {
+    onChange: updateStyle,
+    onBlur: updateStyle
+  })), {
+    ref: inputRef,
+    className: clsx(textFieldStyles["sapphire-text-field__input"], {
+      [textFieldStyles["sapphire-text-field__input--align-right"]]: !!alignInputRight
+    }),
+    style: autofillStyles
+  })), postfix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__postfix"], {
+      [textFieldStyles["sapphire-text-field__postfix--icon"]]: typeof postfix !== "string"
+    })
+  }, postfix), showButtons && /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field__stepper"])
+  }, /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "increment",
+    size
+  }, incrementButtonProps)), /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "decrement",
+    size
+  }, decrementButtonProps))))), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, errorMessageProps), error) : note ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, descriptionProps), note) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+});
+const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
+
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport React from 'react';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { useFocusRing } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\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   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: 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   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing(props);\n  const { styleProps } = useSapphireStyleProps(props);\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const domRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={domRef}\n      isDisabled={isDisabled}\n      error={!!error}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      {label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              isRequired && necessityIndicator\n                ? 'required'\n                : !isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          className={clsx(textFieldStyles['sapphire-text-field'], {\n            [textFieldStyles['is-focus']]: isFocusVisible,\n            [textFieldStyles['sapphire-text-field--error']]:\n              error === true || typeof error === 'string',\n            [textFieldStyles['sapphire-text-field--medium']]: size === 'medium',\n          })}\n          style={{\n            ...(styleProps.style.width\n              ? { width: styleProps.style.width }\n              : {}),\n          }}\n        >\n          {prefix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n                [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                  typeof prefix !== 'string',\n              })}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            {...mergeProps(inputProps, focusProps, {\n              onChange: updateStyle,\n              onBlur: updateStyle,\n            })}\n            ref={inputRef}\n            className={clsx(textFieldStyles['sapphire-text-field__input'], {\n              [textFieldStyles['sapphire-text-field__input--align-right']]:\n                !!alignInputRight,\n            })}\n            style={autofillStyles}\n          />\n          {postfix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n                [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                  typeof postfix !== 'string',\n              })}\n            >\n              {postfix}\n            </span>\n          )}\n          {showButtons && (\n            <div\n              className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n            >\n              <StepperButton\n                variant=\"increment\"\n                size={size}\n                {...incrementButtonProps}\n              />\n              <StepperButton\n                variant=\"decrement\"\n                size={size}\n                {...decrementButtonProps}\n              />\n            </div>\n          )}\n        </div>\n      </Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":[],"mappings":"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"}

package/build/esm/NumberField/src/StepperButton.js

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useButton, Icon } from '@danske/sapphire-react';
+import { CaretUp, CaretDown } from '@danske/sapphire-icons/react';
+
+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 StepperButton = (_a) => {
+  var _b = _a, {
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size"
+  ]);
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(props, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, filterDOMProps(props))), {
+    ref,
+    className: clsx(textFieldStyles["sapphire-text-field__stepper-button"], textFieldStyles["js-hover"], {
+      [textFieldStyles["is-active"]]: isPressed,
+      [textFieldStyles["is-hover"]]: isHovered
+    })
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    size: size === "large" ? "m" : "s"
+  }, variant === "increment" ? /* @__PURE__ */ React.createElement(CaretUp, null) : /* @__PURE__ */ React.createElement(CaretDown, null)));
+};
+
+export { StepperButton };
+//# sourceMappingURL=StepperButton.js.map

package/build/esm/NumberField/src/StepperButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretUp, CaretDown } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'large' | 'medium';\n}) => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'large' ? 'm' : 's'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,GAAA;AAAA,GAAA,EAClC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}