@danske/sapphire-react-lab 0.105.1 → 0.106.1

package/build/esm/Filtering/src/FilterDropdown.js

@@ -7,126 +7,104 @@ import { useSapphireStyleProps, PopoverTrigger, ButtonGroup, Button, ToggleButto
 import { ChevronUp, ChevronDown } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.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));
-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;
-};
-function FilterDropdown(_a) {
-  var _b = _a, {
-    children,
-    label,
-    value,
-    isDisabled = false,
-    isApplyDisabled = false,
-    isClearDisabled,
-    isOpen: isOpenProp,
-    applyButtonLabel = "Apply",
-    clearButtonLabel = "Clear",
-    hideClearButton = false,
-    defaultOpen = false,
-    hasApplyButton = false,
-    noMaxWidth,
-    onApply,
-    onClear,
-    onOpenChange,
-    buttonSize = "md"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "label",
-    "value",
-    "isDisabled",
-    "isApplyDisabled",
-    "isClearDisabled",
-    "isOpen",
-    "applyButtonLabel",
-    "clearButtonLabel",
-    "hideClearButton",
-    "defaultOpen",
-    "hasApplyButton",
-    "noMaxWidth",
-    "onApply",
-    "onClear",
-    "onOpenChange",
-    "buttonSize"
-  ]);
+function FilterDropdown({
+  children,
+  label,
+  value,
+  isDisabled = false,
+  isApplyDisabled = false,
+  isClearDisabled,
+  isOpen: isOpenProp,
+  applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
+  hideClearButton = false,
+  defaultOpen = false,
+  hasApplyButton = false,
+  noMaxWidth,
+  onApply,
+  onClear,
+  onOpenChange,
+  buttonSize = "md",
+  ...props
+}) {
   const triggerRef = useRef(null);
   const { styleProps } = useSapphireStyleProps(props);
-  const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultOpen, useEffectEvent(onOpenChange));
+  const [isOpen, setIsOpen] = useControlledState(
+    isOpenProp,
+    defaultOpen,
+    useEffectEvent(onOpenChange)
+  );
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
   const onSubmit = (e) => {
-    var _a2;
     e.preventDefault();
-    onApply == null ? void 0 : onApply();
+    onApply?.();
     close();
-    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+    triggerRef.current?.focus();
   };
-  const applyButton = /* @__PURE__ */ React.createElement(Button, {
-    type: "submit",
-    size: buttonSize,
-    excludeFromTabOrder: !hasApplyButton,
-    isDisabled: isApplyDisabled
-  }, applyButtonLabel);
-  return /* @__PURE__ */ React.createElement(PopoverTrigger, {
-    ref: triggerRef,
-    placement: "bottom left",
-    isOpen,
-    onOpenChange: setIsOpen,
-    noMaxWidth,
-    noPadding: true,
-    popoverContent: /* @__PURE__ */ React.createElement("form", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
-      onSubmit,
-      className: clsx(styles["sapphire-filter-dropdown"], styleProps.className),
-      style: __spreadValues({}, styleProps.style)
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: styles["sapphire-filter-dropdown__body"]
-    }, children), /* @__PURE__ */ React.createElement("div", {
-      className: styles["sapphire-filter-dropdown__footer"]
-    }, /* @__PURE__ */ React.createElement(ButtonGroup, {
-      align: "right"
-    }, !hideClearButton && /* @__PURE__ */ React.createElement(Button, {
+  const applyButton = /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type: "submit",
       size: buttonSize,
-      variant: "text",
-      onPress: () => {
-        close();
-        onClear == null ? void 0 : onClear();
+      excludeFromTabOrder: !hasApplyButton,
+      isDisabled: isApplyDisabled
+    },
+    applyButtonLabel
+  );
+  return /* @__PURE__ */ React.createElement(
+    PopoverTrigger,
+    {
+      ref: triggerRef,
+      placement: "bottom left",
+      isOpen,
+      onOpenChange: setIsOpen,
+      noMaxWidth,
+      noPadding: true,
+      popoverContent: /* @__PURE__ */ React.createElement(
+        "form",
+        {
+          ...filterDOMProps(props, { global: true }),
+          onSubmit,
+          className: clsx(
+            styles["sapphire-filter-dropdown"],
+            styleProps.className
+          ),
+          style: { ...styleProps.style }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-filter-dropdown__body"] }, children),
+        /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-filter-dropdown__footer"] }, /* @__PURE__ */ React.createElement(ButtonGroup, { align: "right" }, !hideClearButton && /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            size: buttonSize,
+            variant: "text",
+            onPress: () => {
+              close();
+              onClear?.();
+            },
+            isDisabled: isClearDisabled ?? !hasValue
+          },
+          clearButtonLabel
+        ), hasApplyButton ? applyButton : (
+          // The following is necessary to have the form submitted on "Enter", if there is more than one field
+          /* @__PURE__ */ React.createElement(VisuallyHidden, null, applyButton)
+        )))
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      ToggleButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null),
+        iconAlign: "right",
+        isSelected: hasValue,
+        isDisabled,
+        size: buttonSize
       },
-      isDisabled: isClearDisabled != null ? isClearDisabled : !hasValue
-    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React.createElement(VisuallyHidden, null, applyButton))))
-  }, /* @__PURE__ */ React.createElement(ToggleButton, {
-    icon: isOpen ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null),
-    iconAlign: "right",
-    isSelected: hasValue,
-    isDisabled,
-    size: buttonSize
-  }, label, value ? ": " : "", value));
+      label,
+      value ? ": " : "",
+      value
+    )
+  );
 }
 
 export { FilterDropdown };

package/build/esm/Filtering/src/FilterDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport clsx from 'clsx';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent, filterDOMProps } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n   * Whether the 'Clear' button is hidden.\n   */\n  hideClearButton?: boolean;\n  /**\n   * Whether the 'Clear' button is disabled.\n   */\n  isClearDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n  /**\n   * The size of the buttons incl. the trigger itself.\n   * @default 'md'\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isClearDisabled,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  hideClearButton = false,\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n  ...props\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\n  const { styleProps } = useSapphireStyleProps(props);\n\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    useEffectEvent(onOpenChange)\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    onApply?.();\n    close();\n    // We need to manually restore focus to trigger as apply button is a form submit button\n    triggerRef.current?.focus();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      size={buttonSize}\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n\n  return (\n    <PopoverTrigger\n      ref={triggerRef}\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n      noPadding\n      popoverContent={\n        <form\n          {...filterDOMProps(props, { global: true })}\n          onSubmit={onSubmit}\n          className={clsx(\n            styles['sapphire-filter-dropdown'],\n            styleProps.className\n          )}\n          style={{ ...styleProps.style }}\n        >\n          <div className={styles['sapphire-filter-dropdown__body']}>\n            {children}\n          </div>\n          <div className={styles['sapphire-filter-dropdown__footer']}>\n            <ButtonGroup align=\"right\">\n              {!hideClearButton && (\n                <Button\n                  size={buttonSize}\n                  variant=\"text\"\n                  onPress={() => {\n                    close();\n                    onClear?.();\n                  }}\n                  isDisabled={isClearDisabled ?? !hasValue}\n                >\n                  {clearButtonLabel}\n                </Button>\n              )}\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </ButtonGroup>\n          </div>\n        </form>\n      }\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n        size={buttonSize}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode, FormEvent } from 'react';\nimport clsx from 'clsx';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent, filterDOMProps } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Button,\n  ButtonGroup,\n  PopoverTrigger,\n  PopoverTriggerProps,\n  SapphireStyleProps,\n  ToggleButton,\n  GlobalDomAttributes,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Whether the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the 'Apply' button is disabled.\n   */\n  isApplyDisabled?: boolean;\n  /**\n   * Whether the 'Clear' button is hidden.\n   */\n  hideClearButton?: boolean;\n  /**\n   * Whether the 'Clear' button is disabled.\n   */\n  isClearDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n  /**\n   * The size of the buttons incl. the trigger itself.\n   * @default 'md'\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isDisabled = false,\n  isApplyDisabled = false,\n  isClearDisabled,\n  isOpen: isOpenProp,\n  applyButtonLabel = 'Apply',\n  clearButtonLabel = 'Clear',\n  hideClearButton = false,\n  defaultOpen = false,\n  hasApplyButton = false,\n  noMaxWidth,\n  onApply,\n  onClear,\n  onOpenChange,\n  buttonSize = 'md',\n  ...props\n}: FilterDropdownProps): JSX.Element {\n  const triggerRef = useRef<FocusableRefValue>(null);\n  const { styleProps } = useSapphireStyleProps(props);\n\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    useEffectEvent(onOpenChange)\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const onSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    onApply?.();\n    close();\n    // We need to manually restore focus to trigger as apply button is a form submit button\n    triggerRef.current?.focus();\n  };\n\n  const applyButton = (\n    <Button\n      type=\"submit\"\n      size={buttonSize}\n      excludeFromTabOrder={!hasApplyButton}\n      isDisabled={isApplyDisabled}\n    >\n      {applyButtonLabel}\n    </Button>\n  );\n\n  return (\n    <PopoverTrigger\n      ref={triggerRef}\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n      noPadding\n      popoverContent={\n        <form\n          {...filterDOMProps(props, { global: true })}\n          onSubmit={onSubmit}\n          className={clsx(\n            styles['sapphire-filter-dropdown'],\n            styleProps.className\n          )}\n          style={{ ...styleProps.style }}\n        >\n          <div className={styles['sapphire-filter-dropdown__body']}>\n            {children}\n          </div>\n          <div className={styles['sapphire-filter-dropdown__footer']}>\n            <ButtonGroup align=\"right\">\n              {!hideClearButton && (\n                <Button\n                  size={buttonSize}\n                  variant=\"text\"\n                  onPress={() => {\n                    close();\n                    onClear?.();\n                  }}\n                  isDisabled={isClearDisabled ?? !hasValue}\n                >\n                  {clearButtonLabel}\n                </Button>\n              )}\n              {hasApplyButton ? (\n                applyButton\n              ) : (\n                // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n                <VisuallyHidden>{applyButton}</VisuallyHidden>\n              )}\n            </ButtonGroup>\n          </div>\n        </form>\n      }\n    >\n      <ToggleButton\n        icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n        size={buttonSize}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/esm/Filtering/src/SearchableSelectFilter.js

@@ -31,70 +31,50 @@ import '@react-aria/focus';
 import '@react-stately/collections';
 import '../../TimeField/src/TimeField.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;
-};
 function SearchableSelectFilter(props) {
-  var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest(_a, ["searchField", "listBox", "size"]);
+  const { searchField, listBox, size = "md", ...otherProps } = props;
   const searchFieldRef = useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
-  const [searchQuery, setSearchQuery] = useControlledState(searchFieldProps == null ? void 0 : searchFieldProps.value, "", searchFieldProps.onChange);
-  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && ((_b = process.env) == null ? void 0 : _b.NODE_ENV) === "development") {
-    console.warn("The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.");
+  const [searchQuery, setSearchQuery] = useControlledState(
+    searchFieldProps?.value,
+    "",
+    searchFieldProps.onChange
+  );
+  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+    console.warn(
+      "The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually."
+    );
   }
   const hasSelection = listBoxProps.selectedKeys === "all" || Array.from(listBoxProps.selectedKeys || []).length > 0;
-  return /* @__PURE__ */ React.createElement(FilterDropdown, __spreadProps(__spreadValues({}, otherProps), {
-    noMaxWidth: (_c = otherProps.noMaxWidth) != null ? _c : true,
-    buttonSize: size,
-    hasApplyButton: Boolean(otherProps.onApply),
-    isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
-  }), /* @__PURE__ */ React.createElement(Flex, {
-    flexDirection: "column",
-    height: "100%"
-  }, cloneElement(searchField, {
-    size: "md",
-    value: searchFieldProps.value || searchQuery,
-    inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),
-    width: searchFieldProps.width || "100%",
-    marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,
-    onChange: setSearchQuery
-  }), cloneElement(listBox, {
-    connectedInputRef: searchFieldRef,
-    selectionMode: listBoxProps.selectionMode || "multiple",
-    marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,
-    hasScrollDividers: true,
-    filter: "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
-  })));
+  return /* @__PURE__ */ React.createElement(
+    FilterDropdown,
+    {
+      ...otherProps,
+      noMaxWidth: otherProps.noMaxWidth ?? true,
+      buttonSize: size,
+      hasApplyButton: Boolean(otherProps.onApply),
+      isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
+    },
+    /* @__PURE__ */ React.createElement(Flex, { flexDirection: "column", height: "100%" }, cloneElement(searchField, {
+      size: "md",
+      value: searchFieldProps.value || searchQuery,
+      inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),
+      width: searchFieldProps.width || "100%",
+      marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,
+      onChange: setSearchQuery
+    }), cloneElement(listBox, {
+      connectedInputRef: searchFieldRef,
+      selectionMode: listBoxProps.selectionMode || "multiple",
+      marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,
+      hasScrollDividers: true,
+      filter: (
+        // This is a way to also allow opting out of the internal filter with filter={undefined}
+        // without us having to allow for more values on the ListBox filter prop
+        "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    }))
+  );
 }
 
 export { SearchableSelectFilter };

package/build/esm/Filtering/src/SearchableSelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n  Flex,\n  ListBoxProps,\n  SapphireStyleProps,\n  SearchFieldPropsWithRef,\n  tokens,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Omit<FilterDropdownProps, 'children'> {\n  /**\n   * The SearchField to search items with.\n   */\n  searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n  /**\n   * The ListBox to select items from.\n   */\n  listBox: ReactElement<ListBoxProps<object>>;\n  /**\n   * The Button size of the trigger\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n  props: SearchableSelectFilterProps\n): JSX.Element {\n  const { searchField, listBox, size = 'md', ...otherProps } = props;\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n\n  const searchFieldProps = searchField.props;\n  const listBoxProps = listBox.props;\n\n  const [searchQuery, setSearchQuery] = useControlledState(\n    searchFieldProps?.value,\n    '',\n    searchFieldProps.onChange\n  );\n\n  if (\n    listBoxProps.connectedInputRef &&\n    typeof process !== 'undefined' &&\n    process.env?.NODE_ENV === 'development'\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n    );\n  }\n\n  const hasSelection =\n    listBoxProps.selectedKeys === 'all' ||\n    Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n  return (\n    <FilterDropdown\n      {...otherProps}\n      noMaxWidth={otherProps.noMaxWidth ?? true}\n      buttonSize={size}\n      // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n      // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n      hasApplyButton={Boolean(otherProps.onApply)}\n      // In scenarios where selections are not applied immediately we want to allow cancelling\n      // the filter selection via 'Clear' button as soon as at least 1 item is selected\n      isClearDisabled={\n        otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n      }\n    >\n      <Flex flexDirection=\"column\" height=\"100%\">\n        {cloneElement(searchField, {\n          size: 'md',\n          value: searchFieldProps.value || searchQuery,\n          inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n          width: searchFieldProps.width || '100%',\n          marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n          onChange: setSearchQuery,\n        })}\n        {cloneElement(listBox, {\n          connectedInputRef: searchFieldRef,\n          selectionMode: listBoxProps.selectionMode || 'multiple',\n          marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n          hasScrollDividers: true,\n          filter:\n            // This is a way to also allow opting out of the internal filter with filter={undefined}\n            // without us having to allow for more values on the ListBox filter prop\n            'filter' in listBoxProps\n              ? listBoxProps.filter\n              : (textValue: string) =>\n                  textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n        })}\n      </Flex>\n    </FilterDropdown>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n  Flex,\n  ListBoxProps,\n  SapphireStyleProps,\n  SearchFieldPropsWithRef,\n  tokens,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    Omit<FilterDropdownProps, 'children'> {\n  /**\n   * The SearchField to search items with.\n   */\n  searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n  /**\n   * The ListBox to select items from.\n   */\n  listBox: ReactElement<ListBoxProps<object>>;\n  /**\n   * The Button size of the trigger\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n  props: SearchableSelectFilterProps\n): JSX.Element {\n  const { searchField, listBox, size = 'md', ...otherProps } = props;\n  const searchFieldRef = useRef<HTMLInputElement>(null);\n\n  const searchFieldProps = searchField.props;\n  const listBoxProps = listBox.props;\n\n  const [searchQuery, setSearchQuery] = useControlledState(\n    searchFieldProps?.value,\n    '',\n    searchFieldProps.onChange\n  );\n\n  if (\n    listBoxProps.connectedInputRef &&\n    typeof process !== 'undefined' &&\n    process.env?.NODE_ENV === 'development'\n  ) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n    );\n  }\n\n  const hasSelection =\n    listBoxProps.selectedKeys === 'all' ||\n    Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n  return (\n    <FilterDropdown\n      {...otherProps}\n      noMaxWidth={otherProps.noMaxWidth ?? true}\n      buttonSize={size}\n      // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n      // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n      hasApplyButton={Boolean(otherProps.onApply)}\n      // In scenarios where selections are not applied immediately we want to allow cancelling\n      // the filter selection via 'Clear' button as soon as at least 1 item is selected\n      isClearDisabled={\n        otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n      }\n    >\n      <Flex flexDirection=\"column\" height=\"100%\">\n        {cloneElement(searchField, {\n          size: 'md',\n          value: searchFieldProps.value || searchQuery,\n          inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n          width: searchFieldProps.width || '100%',\n          marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n          onChange: setSearchQuery,\n        })}\n        {cloneElement(listBox, {\n          connectedInputRef: searchFieldRef,\n          selectionMode: listBoxProps.selectionMode || 'multiple',\n          marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n          hasScrollDividers: true,\n          filter:\n            // This is a way to also allow opting out of the internal filter with filter={undefined}\n            // without us having to allow for more values on the ListBox filter prop\n            'filter' in listBoxProps\n              ? listBoxProps.filter\n              : (textValue: string) =>\n                  textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n        })}\n      </Flex>\n    </FilterDropdown>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,SAAS,uBACd,KAAA,EACa;AACb,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAS,OAAO,IAAA,EAAM,GAAG,YAAW,GAAI,KAAA;AAC7D,EAAA,MAAM,cAAA,GAAiB,OAAyB,IAAI,CAAA;AAEpD,EAAA,MAAM,mBAAmB,WAAA,CAAY,KAAA;AACrC,EAAA,MAAM,eAAe,OAAA,CAAQ,KAAA;AAE7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,kBAAA;AAAA,IACpC,gBAAA,EAAkB,KAAA;AAAA,IAClB,EAAA;AAAA,IACA,gBAAA,CAAiB;AAAA,GACnB;AAEA,EAAA,IACE,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,OAAA,CAAQ,GAAA,EAAK,aAAa,aAAA,EAC1B;AAEA,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,YAAA,GACJ,YAAA,CAAa,YAAA,KAAiB,KAAA,IAC9B,KAAA,CAAM,IAAA,CAAK,YAAA,CAAa,YAAA,IAAgB,EAAE,CAAA,CAAE,MAAA,GAAS,CAAA;AAEvD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,UAAA,EAAY,WAAW,UAAA,IAAc,IAAA;AAAA,MACrC,UAAA,EAAY,IAAA;AAAA,MAGZ,cAAA,EAAgB,OAAA,CAAQ,UAAA,CAAW,OAAO,CAAA;AAAA,MAG1C,iBACE,UAAA,CAAW,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAA,CAAW;AAAA,KAAA;AAAA,wCAG7D,IAAA,EAAA,EAAK,aAAA,EAAc,UAAS,MAAA,EAAO,MAAA,EAAA,EACjC,aAAa,WAAA,EAAa;AAAA,MACzB,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO,iBAAiB,KAAA,IAAS,WAAA;AAAA,MACjC,QAAA,EAAU,SAAA,CAAU,cAAA,EAAgB,gBAAA,CAAiB,QAAQ,CAAA;AAAA,MAC7D,KAAA,EAAO,iBAAiB,KAAA,IAAS,MAAA;AAAA,MACjC,YAAA,EAAc,gBAAA,CAAiB,YAAA,IAAgB,MAAA,CAAO,IAAA,CAAK,SAAA;AAAA,MAC3D,QAAA,EAAU;AAAA,KACX,CAAA,EACA,YAAA,CAAa,OAAA,EAAS;AAAA,MACrB,iBAAA,EAAmB,cAAA;AAAA,MACnB,aAAA,EAAe,aAAa,aAAA,IAAiB,UAAA;AAAA,MAC7C,OAAA,EAAS,CAAA,KAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,6BAA6B,KAAK,CAAA,MAAA,CAAA;AAAA,MAC/D,iBAAA,EAAmB,IAAA;AAAA,MACnB,MAAA;AAAA;AAAA;AAAA,QAGE,QAAA,IAAY,YAAA,GACR,YAAA,CAAa,MAAA,GACb,CAAC,SAAA,KACC,SAAA,CAAU,WAAA,EAAY,CAAE,QAAA,CAAS,WAAA,CAAY,WAAA,EAAa;AAAA;AAAA,KACnE,CACH;AAAA,GACF;AAEJ;;;;"}

package/build/esm/Flag/src/Flag.js

@@ -4,45 +4,13 @@ import { getWrappedElement } from '@react-spectrum/utils';
 import styles from '@danske/sapphire-css/components/flag/flag.module.css';
 import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-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 Flag = React.forwardRef(function Flag2(_a, ref) {
-  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest(_b, ["size", "rounded", "aria-label"]);
+const Flag = React.forwardRef(function Flag2({ size = "lg", rounded, "aria-label": ariaLabel, ...props }, ref) {
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  return React.cloneElement(getWrappedElement(props.children), __spreadProps(__spreadValues({
+  return React.cloneElement(getWrappedElement(props.children), {
     ref,
-    role: "img"
-  }, ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true }), {
+    role: "img",
+    ...ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true },
     className: clsx(styles["sapphire-flag"], styleProps.className, {
       [styles["sapphire-flag--xs"]]: size === "xs",
       [styles["sapphire-flag--sm"]]: size === "sm",
@@ -52,7 +20,7 @@ const Flag = React.forwardRef(function Flag2(_a, ref) {
       [styles["sapphire-flag--rounded"]]: rounded
     }),
     style: styleProps.style
-  }));
+  });
 });
 
 export { Flag };

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

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../../src/Flag/src/Flag.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { getWrappedElement } from '@react-spectrum/utils';\nimport styles from '@danske/sapphire-css/components/flag/flag.module.css';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\n\nexport type FlagProps = GlobalDomAttributes &\n  SapphireStyleProps & {\n    'aria-label'?: string;\n    /**\n     * The size of the flag.\n     * @default 'lg'\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    /**\n     * Flags come in square or rounded shapes. Square flags are used for display purposes, ensuring a clean and consistent look.\n     * Rounded flags are reserved for actionable elements like buttons or selectors, providing a more interactive and approachable feel.\n     * @default false\n     */\n    rounded?: boolean;\n    children: React.ReactNode;\n  };\n\nexport const Flag = React.forwardRef(function Flag(\n  { size = 'lg', rounded, 'aria-label': ariaLabel, ...props }: FlagProps,\n  ref: React.Ref<HTMLSpanElement>\n) {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return React.cloneElement(getWrappedElement(props.children), {\n    ref,\n    role: 'img',\n    ...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true }),\n    className: clsx(styles['sapphire-flag'], styleProps.className, {\n      [styles['sapphire-flag--xs']]: size === 'xs',\n      [styles['sapphire-flag--sm']]: size === 'sm',\n      [styles['sapphire-flag--md']]: size === 'md',\n      [styles['sapphire-flag--lg']]: size === 'lg',\n      [styles['sapphire-flag--xl']]: size === 'xl',\n      [styles['sapphire-flag--rounded']]: rounded,\n    }),\n    style: styleProps.style,\n  });\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,IAAO,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,KAAA,CACnC,IACA,GACA,EAAA;AAFA,EAAE,IAAA,EAAA,GAAA,EAAA,EAAA,EAAA,IAAA,GAAO,IAAM,EAAA,OAAA,EAAS,YAAc,EAAA,SAAA,EAAA,GAAtC,IAAoD,KAApD,GAAA,SAAA,CAAA,EAAA,EAAoD,CAAlD,MAAA,EAAa,SAAS,EAAA,YAAA,CAAA,CAAA,CAAA;AAGxB,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EAAA,OAAO,KAAM,CAAA,YAAA,CAAa,iBAAkB,CAAA,KAAA,CAAM,QAAW,CAAA,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IAC3D,GAAA;AAAA,IACA,IAAM,EAAA,KAAA;AAAA,GAAA,EACF,YAAY,EAAE,YAAA,EAAc,SAAc,EAAA,GAAA,EAAE,eAAe,IAHJ,EAAA,CAAA,EAAA;AAAA,IAI3D,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,eAAA,CAAA,EAAkB,WAAW,SAAW,EAAA;AAAA,MAC5D,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,uBAAuB,IAAS,KAAA,IAAA;AAAA,MAAA,CACvC,OAAO,wBAA4B,CAAA,GAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAEtC,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"Flag.js","sources":["../../../../src/Flag/src/Flag.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\nimport { getWrappedElement } from '@react-spectrum/utils';\nimport styles from '@danske/sapphire-css/components/flag/flag.module.css';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\n\nexport type FlagProps = GlobalDomAttributes &\n  SapphireStyleProps & {\n    'aria-label'?: string;\n    /**\n     * The size of the flag.\n     * @default 'lg'\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    /**\n     * Flags come in square or rounded shapes. Square flags are used for display purposes, ensuring a clean and consistent look.\n     * Rounded flags are reserved for actionable elements like buttons or selectors, providing a more interactive and approachable feel.\n     * @default false\n     */\n    rounded?: boolean;\n    children: React.ReactNode;\n  };\n\nexport const Flag = React.forwardRef(function Flag(\n  { size = 'lg', rounded, 'aria-label': ariaLabel, ...props }: FlagProps,\n  ref: React.Ref<HTMLSpanElement>\n) {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return React.cloneElement(getWrappedElement(props.children), {\n    ref,\n    role: 'img',\n    ...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': true }),\n    className: clsx(styles['sapphire-flag'], styleProps.className, {\n      [styles['sapphire-flag--xs']]: size === 'xs',\n      [styles['sapphire-flag--sm']]: size === 'sm',\n      [styles['sapphire-flag--md']]: size === 'md',\n      [styles['sapphire-flag--lg']]: size === 'lg',\n      [styles['sapphire-flag--xl']]: size === 'xl',\n      [styles['sapphire-flag--rounded']]: rounded,\n    }),\n    style: styleProps.style,\n  });\n});\n"],"names":["Flag"],"mappings":";;;;;;AA6BO,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,SAASA,MAC5C,EAAE,IAAA,GAAO,IAAA,EAAM,OAAA,EAAS,YAAA,EAAc,SAAA,EAAW,GAAG,KAAA,IACpD,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAElD,EAAA,OAAO,KAAA,CAAM,YAAA,CAAa,iBAAA,CAAkB,KAAA,CAAM,QAAQ,CAAA,EAAG;AAAA,IAC3D,GAAA;AAAA,IACA,IAAA,EAAM,KAAA;AAAA,IACN,GAAI,YAAY,EAAE,YAAA,EAAc,WAAU,GAAI,EAAE,eAAe,IAAA,EAAK;AAAA,IACpE,WAAW,IAAA,CAAK,MAAA,CAAO,eAAe,CAAA,EAAG,WAAW,SAAA,EAAW;AAAA,MAC7D,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,mBAAmB,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,MACxC,CAAC,MAAA,CAAO,wBAAwB,CAAC,GAAG;AAAA,KACrC,CAAA;AAAA,IACD,OAAO,UAAA,CAAW;AAAA,GACnB,CAAA;AACH,CAAC;;;;"}

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

@@ -3,61 +3,27 @@ import { useField } from '@react-aria/label';
 import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
 import { mergeProps } from '@react-aria/utils';
 
-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;
-};
-function LabeledValue(_a) {
-  var _b = _a, {
-    children,
-    contextualHelp,
-    label,
-    labelPlacement = "above",
-    size = "lg"
-  } = _b, otherProps = __objRest(_b, [
-    "children",
-    "contextualHelp",
-    "label",
-    "labelPlacement",
-    "size"
-  ]);
+function LabeledValue({
+  children,
+  contextualHelp,
+  label,
+  labelPlacement = "above",
+  size = "lg",
+  ...otherProps
+}) {
   useThemeCheck();
   const { fieldProps } = useField({ label });
-  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, mergeProps(fieldProps, otherProps)), {
-    labelPlacement,
-    size,
-    noDefaultWidth: true
-  }), /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, {
-    contextualHelp,
-    size
-  }, label)), /* @__PURE__ */ React.createElement(Field.Control, null, children));
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      ...mergeProps(fieldProps, otherProps),
+      labelPlacement,
+      size,
+      noDefaultWidth: true
+    },
+    /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, { contextualHelp, size }, label)),
+    /* @__PURE__ */ React.createElement(Field.Control, null, children)
+  );
 }
 
 export { LabeledValue };

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

@@ -1 +1 @@
-{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from '@react-aria/label';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { mergeProps } from '@react-aria/utils';\n\nexport interface LabeledValueProps\n  extends SapphireStyleProps,\n    GlobalDomAttributes {\n  children?: React.ReactNode;\n  /**\n   * A HelpButton 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 'lg'\n   */\n  size?: 'lg' | 'md';\n}\n\nexport function LabeledValue({\n  children,\n  contextualHelp,\n  label,\n  labelPlacement = 'above',\n  size = 'lg',\n  ...otherProps\n}: LabeledValueProps): React.JSX.Element {\n  useThemeCheck();\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field\n      {...mergeProps(fieldProps, otherProps)}\n      labelPlacement={labelPlacement}\n      size={size}\n      noDefaultWidth\n    >\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>{children}</Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,SAAA,YAAA,CAAsB,EAOY,EAAA;AAPZ,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,IAAA;AAAA,GALoB,GAAA,EAAA,EAMxB,uBANwB,EAMxB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,YAAY,UAD7B,CAAA,CAAA,EAAA;AAAA,IAEE,cAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,GAAA,CAAA,kBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,KAGL,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,OAAA,EAAP,IAAgB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from '@react-aria/label';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { mergeProps } from '@react-aria/utils';\n\nexport interface LabeledValueProps\n  extends SapphireStyleProps,\n    GlobalDomAttributes {\n  children?: React.ReactNode;\n  /**\n   * A HelpButton 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 'lg'\n   */\n  size?: 'lg' | 'md';\n}\n\nexport function LabeledValue({\n  children,\n  contextualHelp,\n  label,\n  labelPlacement = 'above',\n  size = 'lg',\n  ...otherProps\n}: LabeledValueProps): React.JSX.Element {\n  useThemeCheck();\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field\n      {...mergeProps(fieldProps, otherProps)}\n      labelPlacement={labelPlacement}\n      size={size}\n      noDefaultWidth\n    >\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>{children}</Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;AAkCO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA,GAAiB,OAAA;AAAA,EACjB,IAAA,GAAO,IAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAyC;AACvC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,QAAA,CAAS,EAAE,OAAO,CAAA;AAEzC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA,CAAW,UAAA,EAAY,UAAU,CAAA;AAAA,MACrC,cAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA,CAAC,MAAM,KAAA,EAAN,IAAA,sCACE,KAAA,EAAA,EAAM,cAAA,EAAgC,IAAA,EAAA,EACpC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,IAAA,EAAe,QAAS;AAAA,GAC3B;AAEJ;;;;"}

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

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

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

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

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

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

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

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