@danske/sapphire-react-lab 0.76.0

package/build/esm/SearchField/src/SearchField.js

@@ -0,0 +1,115 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useSearchField } from '@react-aria/searchfield';
+import { useThemeCheck, useSapphireStyleProps, useButton, Icon, ListBoxPopover } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/searchField/searchField.module.css';
+import { useSearchFieldState } from '@react-stately/searchfield';
+import { useObjectRef, mergeProps } from '@react-aria/utils';
+import { Search, CloseCircle } from '@danske/sapphire-icons/react';
+import { useFocusableRef } from '@react-spectrum/utils';
+import { useComboBoxState } from './useComboBoxState.js';
+import { useComboBox } from '@react-aria/combobox';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const SearchField = React.forwardRef(function SearchField2(props, forwardedRef) {
+  var _a;
+  useThemeCheck();
+  const inputRef = useObjectRef(forwardedRef);
+  const buttonRef = useRef(null);
+  const listBoxRef = useFocusableRef(null);
+  const popoverRef = useRef(null);
+  const triggerRef = useFocusableRef(null);
+  const {
+    styleProps: { style, className }
+  } = useSapphireStyleProps(props);
+  const state = useComboBoxState(__spreadProps(__spreadValues({}, props), {
+    inputValue: props.value,
+    defaultInputValue: props.defaultValue,
+    onInputChange: props.onChange,
+    allowsEmptyCollection: false,
+    allowsCustomValue: true,
+    shouldCloseOnBlur: true
+  }));
+  const { inputProps: comboBoxInputProps, listBoxProps } = useComboBox(__spreadProps(__spreadValues({}, props), {
+    inputRef,
+    listBoxRef,
+    popoverRef
+  }), state);
+  const searchProps = {
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    value: state.inputValue,
+    onSubmit: (value) => {
+      var _a2;
+      if (!state.selectionManager.isFocused) {
+        (_a2 = props == null ? void 0 : props.onSubmit) == null ? void 0 : _a2.call(props, value);
+      }
+    },
+    onClear: () => {
+      var _a2;
+      state.setInputValue("");
+      (_a2 = props.onClear) == null ? void 0 : _a2.call(props);
+    }
+  };
+  const searchFieldState = useSearchFieldState(searchProps);
+  const { clearButtonProps, inputProps: searchFieldInputProps } = useSearchField(searchProps, searchFieldState, inputRef);
+  const { buttonProps } = useButton(__spreadProps(__spreadValues({}, clearButtonProps), {
+    elementType: "div"
+  }), buttonRef);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-search-field"], className, {
+      [styles["sapphire-search-field--medium"]]: props.size === "medium",
+      [styles["sapphire-search-field--surface-secondary"]]: props.surface === "secondary",
+      [styles["is-disabled"]]: props.isDisabled
+    }),
+    style,
+    ref: triggerRef
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: styles["sapphire-search-field__icon"]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: props.size === "medium" ? "m" : "l"
+  }, /* @__PURE__ */ React.createElement(Search, null))), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, mergeProps(comboBoxInputProps, searchFieldInputProps)), {
+    ref: inputRef,
+    className: clsx(styles["sapphire-search-field__input"], {
+      [styles["sapphire-search-field__input--empty"]]: state.inputValue.length === 0
+    })
+  })), /* @__PURE__ */ React.createElement("div", __spreadValues({
+    ref: buttonRef,
+    className: styles["sapphire-search-field__button"]
+  }, buttonProps), /* @__PURE__ */ React.createElement(Icon, {
+    size: props.size === "medium" ? "m" : "l"
+  }, /* @__PURE__ */ React.createElement(CloseCircle, null))), state.isOpen && /* @__PURE__ */ React.createElement(ListBoxPopover, {
+    state,
+    triggerRef,
+    popoverRef,
+    listBoxRef,
+    listBoxProps,
+    selectWidth: ((_a = triggerRef.current) == null ? void 0 : _a.offsetWidth) || 0,
+    size: props.size,
+    disableSelectedStyles: true,
+    isNonModal: true
+  }, props.children || []));
+});
+
+export { SearchField };
+//# sourceMappingURL=SearchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","sources":["../../../../src/SearchField/src/SearchField.tsx"],"sourcesContent":["import React, { ForwardedRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport { HelpTextProps, LabelableProps, Validation } from '@react-types/shared';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { AriaSearchFieldProps, useSearchField } from '@react-aria/searchfield';\n\nimport {\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  useThemeCheck,\n  ListBoxPopover,\n  Icon,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/searchField/searchField.module.css';\nimport { useSearchFieldState } from '@react-stately/searchfield';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CloseCircle, Search } from '@danske/sapphire-icons/react';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport { useComboBoxState } from './useComboBoxState';\nimport { useComboBox } from '@react-aria/combobox';\n\nexport type SapphireSearchFieldProps<T extends object> = SapphireStyleProps &\n  Omit<\n    AriaSearchFieldProps,\n    keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps\n  > &\n  AutocompleteProps<T> & {\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * Adjusts the style for the type of surface it is rendered on.\n     * @default 'primary'\n     */\n    surface?: 'primary' | 'secondary';\n  } & (\n    | { 'aria-labelledby': string }\n    | {\n        'aria-label': string;\n      }\n  );\n\n// we don't want props related to \"selection\" because from the POV of the\n// autocomplete feature, there is no concept of \"selection\"\ntype AutocompleteProps<T extends object> = {\n  items?: ComboBoxProps<T>['items'];\n  defaultItems?: ComboBoxProps<T>['defaultItems'];\n  children?: ComboBoxProps<T>['children'];\n  onOpenChange?: ComboBoxProps<T>['onOpenChange'];\n  defaultFilter?: (textValue: string, inputValue: string) => boolean;\n};\n\n/**\n * Sapphire search input field.\n */\nexport const SearchField = React.forwardRef(function SearchField<\n  T extends object\n>(\n  props: SapphireSearchFieldProps<T>,\n  forwardedRef: ForwardedRef<HTMLInputElement>\n): JSX.Element {\n  useThemeCheck();\n\n  const inputRef = useObjectRef(forwardedRef);\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue: props.value,\n    defaultInputValue: props.defaultValue,\n    onInputChange: props.onChange,\n    allowsEmptyCollection: false,\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n  });\n\n  const { inputProps: comboBoxInputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  /**\n   * In order to compose the `useSearchField` and `useComboBox` we want to:\n   *  - let the combobox control the input but\n   *  - allow the search field's \"clear\" and \"submit\" behavior\n   *\n   *  For this, we take control of `useSearchField` and not pass the props\n   *  indiscriminately.\n   *\n   *  For example think about using `onBlur` on `SearchField`. The combobox\n   *  hook gets that prop and the input props we get back will add that\n   *  listener to the input. We don't want the input props from\n   *  `useSearchField` to add the same listener.\n   */\n  const searchProps: AriaSearchFieldProps = {\n    'aria-label': props['aria-label'],\n    'aria-labelledby': props['aria-labelledby'],\n    isDisabled: props.isDisabled,\n    isReadOnly: props.isReadOnly,\n    // needed for the submit functionality\n    value: state.inputValue,\n    onSubmit: (value) => {\n      if (!state.selectionManager.isFocused) {\n        props?.onSubmit?.(value);\n      }\n    },\n    onClear: () => {\n      state.setInputValue('');\n      props.onClear?.();\n    },\n  };\n\n  const searchFieldState = useSearchFieldState(searchProps);\n\n  const { clearButtonProps, inputProps: searchFieldInputProps } =\n    useSearchField(searchProps, searchFieldState, inputRef);\n\n  const { buttonProps } = useButton(\n    {\n      ...clearButtonProps,\n      elementType: 'div',\n    },\n    buttonRef\n  );\n\n  return (\n    <div\n      className={clsx(styles['sapphire-search-field'], className, {\n        [styles['sapphire-search-field--medium']]: props.size === 'medium',\n        [styles['sapphire-search-field--surface-secondary']]:\n          props.surface === 'secondary',\n        [styles['is-disabled']]: props.isDisabled,\n      })}\n      style={style}\n      ref={triggerRef}\n    >\n      <span className={styles['sapphire-search-field__icon']}>\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <Search />\n        </Icon>\n      </span>\n      <input\n        {...mergeProps(comboBoxInputProps, searchFieldInputProps)}\n        ref={inputRef}\n        className={clsx(styles['sapphire-search-field__input'], {\n          [styles['sapphire-search-field__input--empty']]:\n            state.inputValue.length === 0,\n        })}\n      />\n      <div\n        ref={buttonRef}\n        className={styles['sapphire-search-field__button']}\n        {...buttonProps}\n      >\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <CloseCircle />\n        </Icon>\n      </div>\n      {state.isOpen && (\n        <ListBoxPopover<T>\n          state={state}\n          triggerRef={triggerRef}\n          popoverRef={popoverRef}\n          listBoxRef={listBoxRef}\n          listBoxProps={listBoxProps}\n          selectWidth={triggerRef.current?.offsetWidth || 0}\n          size={props.size}\n          disableSelectedStyles\n          isNonModal\n        >\n          {props.children || []}\n        </ListBoxPopover>\n      )}\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}

package/build/esm/SearchField/src/useComboBoxState.js

@@ -0,0 +1,42 @@
+import { useComboBoxState as useComboBoxState$1 } from '@react-stately/combobox';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useComboBoxState = (options) => {
+  const state = useComboBoxState$1(__spreadProps(__spreadValues({}, options), {
+    defaultFilter: (textValue, query) => {
+      if (query.length > 0) {
+        return options.defaultFilter ? options.defaultFilter(textValue, query) : textValue.toLowerCase().includes(query.toLowerCase());
+      } else {
+        return false;
+      }
+    }
+  }));
+  return __spreadProps(__spreadValues({}, state), {
+    open: (focusStrategy, triggerMode) => {
+      if (triggerMode !== "manual") {
+        state.open(focusStrategy, triggerMode);
+      }
+    }
+  });
+};
+
+export { useComboBoxState };
+//# sourceMappingURL=useComboBoxState.js.map

package/build/esm/SearchField/src/useComboBoxState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboBoxState.js","sources":["../../../../src/SearchField/src/useComboBoxState.ts"],"sourcesContent":["import { useComboBoxState as originalUseComboBoxState } from '@react-stately/combobox';\n\n/**\n * A wrapper for `useComboBoxState` to make the combobox more like \"autocomplete\":\n *\n * 1) We don't want to allow opening the combobox \"manually\".\n * In react-aria terms \"manual\" opening means where the user explicitly\n * wants to open the popover.\n * In the autocomplete feature we don't want such behaviour because the\n * popover has the role of assisting typing, not \"selecting\" a value.\n *\n * 2) We don't want to show any options if the query is empty.\n *\n * More details here\n * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/combobox/src/useComboBox.ts\n */\nexport const useComboBoxState: typeof originalUseComboBoxState = (options) => {\n  const state = originalUseComboBoxState({\n    ...options,\n    defaultFilter: (textValue, query) => {\n      if (query.length > 0) {\n        return options.defaultFilter\n          ? options.defaultFilter(textValue, query)\n          : textValue.toLowerCase().includes(query.toLowerCase());\n      } else {\n        return false;\n      }\n    },\n  });\n  return {\n    ...state,\n    open: (focusStrategy, triggerMode) => {\n      if (triggerMode !== 'manual') {\n        state.open(focusStrategy, triggerMode);\n      }\n    },\n  };\n};\n"],"names":["originalUseComboBoxState"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgBa,MAAA,gBAAA,GAAoD,CAAC,OAAY,KAAA;AAC5E,EAAM,MAAA,KAAA,GAAQA,kBAAyB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAClC,OADkC,CAAA,EAAA;AAAA,IAErC,aAAA,EAAe,CAAC,SAAA,EAAW,KAAU,KAAA;AACnC,MAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,QAAO,OAAA,OAAA,CAAQ,gBACX,OAAQ,CAAA,aAAA,CAAc,WAAW,KACjC,CAAA,GAAA,SAAA,CAAU,WAAc,EAAA,CAAA,QAAA,CAAS,KAAM,CAAA,WAAA,EAAA,CAAA,CAAA;AAAA,OACtC,MAAA;AACL,QAAO,OAAA,KAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAIb,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,IAAA,EAAM,CAAC,aAAA,EAAe,WAAgB,KAAA;AACpC,MAAA,IAAI,gBAAgB,QAAU,EAAA;AAC5B,QAAA,KAAA,CAAM,KAAK,aAAe,EAAA,WAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Spinner/src/Spinner.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/spinner/spinner.module.css';
+import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
+
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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 Spinner = (_a) => {
+  var _b = _a, {
+    size = "m"
+  } = _b, props = __objRest(_b, [
+    "size"
+  ]);
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  return /* @__PURE__ */ React.createElement("svg", {
+    role: "progressbar",
+    "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
+    "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0,
+    className: clsx(styleProps.className, styles["sapphire-spinner"], size !== "m" ? styles[`sapphire-spinner--${size}`] : ""),
+    style: styleProps.style,
+    viewBox: "0 0 16 16"
+  }, /* @__PURE__ */ React.createElement("path", {
+    className: styles["sapphire-spinner__track"],
+    d: "M10.3993 2.13882C10.3295 2.39914 10.4641 2.66858 10.7034 2.79263C11.2238 3.06246 11.7123 3.41501 12.1489 3.85159C14.4401 6.14281 14.4399 9.85728 12.1489 12.1483C9.85783 14.4393 6.14335 14.4395 3.85214 12.1483C3.41556 11.7117 3.06301 11.2232 2.79317 10.7028C2.66913 10.4635 2.39969 10.329 2.13937 10.3987C1.82795 10.4821 1.65738 10.8194 1.80178 11.1077C2.1261 11.7551 2.55778 12.3624 3.09789 12.9026C5.80564 15.6103 10.1955 15.6101 12.9031 12.9026C15.6107 10.195 15.6109 5.80509 12.9031 3.09734C12.363 2.55723 11.7556 2.12555 11.1082 1.80123C10.82 1.65683 10.4827 1.8274 10.3993 2.13882Z"
+  }), /* @__PURE__ */ React.createElement("path", {
+    className: styles["sapphire-spinner__accent"],
+    d: "M1.72661 8.85304C1.98694 8.78329 2.15316 8.53215 2.14111 8.26291C2.07002 6.67514 2.63971 5.06425 3.85203 3.85193C5.06452 2.63944 6.67527 2.06989 8.26302 2.14101C8.53225 2.15306 8.78337 1.98683 8.85309 1.7265C8.93661 1.41464 8.72921 1.09798 8.4069 1.07913C6.49959 0.96764 4.55516 1.6403 3.09778 3.09768C1.64062 4.55485 0.967813 6.49934 1.07909 8.40676C1.0979 8.72916 1.41467 8.93663 1.72661 8.85304Z"
+  }));
+};
+
+export { Spinner };
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../src/Spinner/src/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/spinner/spinner.module.css';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\n\nexport type SpinnerProps = {\n  /**\n   * @default 'm'\n   */\n  size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n} & SapphireStyleProps &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\n/**\n * Animated element that show that some data is still loading or some process\n * is in progress. The hidden label is required for accessibility reasons.\n */\nexport const Spinner = ({\n  size = 'm',\n  ...props\n}: SpinnerProps): JSX.Element => {\n  useThemeCheck();\n\n  const { styleProps } = useSapphireStyleProps(props);\n\n  /**\n   * There is @react-aria/progress but because we only have a \"indeterminate\"\n   * spinner, we only need one prop, the 'role' attr.\n   * Therefore, it seemed like an overkill to use react-aria here.\n   */\n\n  return (\n    <svg\n      role=\"progressbar\"\n      aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n      aria-labelledby={\n        'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n      }\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-spinner'],\n        size !== 'm' ? styles[`sapphire-spinner--${size}` as const] : ''\n      )}\n      style={styleProps.style}\n      viewBox=\"0 0 16 16\"\n    >\n      <path\n        className={styles['sapphire-spinner__track']}\n        d=\"M10.3993 2.13882C10.3295 2.39914 10.4641 2.66858 10.7034 2.79263C11.2238 3.06246 11.7123 3.41501 12.1489 3.85159C14.4401 6.14281 14.4399 9.85728 12.1489 12.1483C9.85783 14.4393 6.14335 14.4395 3.85214 12.1483C3.41556 11.7117 3.06301 11.2232 2.79317 10.7028C2.66913 10.4635 2.39969 10.329 2.13937 10.3987C1.82795 10.4821 1.65738 10.8194 1.80178 11.1077C2.1261 11.7551 2.55778 12.3624 3.09789 12.9026C5.80564 15.6103 10.1955 15.6101 12.9031 12.9026C15.6107 10.195 15.6109 5.80509 12.9031 3.09734C12.363 2.55723 11.7556 2.12555 11.1082 1.80123C10.82 1.65683 10.4827 1.8274 10.3993 2.13882Z\"\n      />\n      <path\n        className={styles['sapphire-spinner__accent']}\n        d=\"M1.72661 8.85304C1.98694 8.78329 2.15316 8.53215 2.14111 8.26291C2.07002 6.67514 2.63971 5.06425 3.85203 3.85193C5.06452 2.63944 6.67527 2.06989 8.26302 2.14101C8.53225 2.15306 8.78337 1.98683 8.85309 1.7265C8.93661 1.41464 8.72921 1.09798 8.4069 1.07913C6.49959 0.96764 4.55516 1.6403 3.09778 3.09768C1.64062 4.55485 0.967813 6.49934 1.07909 8.40676C1.0979 8.72916 1.41467 8.93663 1.72661 8.85304Z\"\n      />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBa,MAAA,OAAA,GAAU,CAAC,EAGS,KAAA;AAHT,EACtB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAO,IAAA,GAAA,GAAA;AAAA,GADe,GAAA,EAAA,EAEnB,kBAFmB,EAEnB,EAAA;AAAA,IADH,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAQ7C,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,IAAK,EAAA,aAAA;AAAA,IACL,YAAY,EAAA,YAAA,IAAgB,KAAQ,GAAA,KAAA,CAAM,YAAgB,CAAA,GAAA,KAAA,CAAA;AAAA,IAC1D,iBACE,EAAA,iBAAA,IAAqB,KAAQ,GAAA,KAAA,CAAM,iBAAqB,CAAA,GAAA,KAAA,CAAA;AAAA,IAE1D,SAAA,EAAW,IACT,CAAA,UAAA,CAAW,SACX,EAAA,MAAA,CAAO,qBACP,IAAS,KAAA,GAAA,GAAM,MAAO,CAAA,CAAA,kBAAA,EAAqB,IAAmB,CAAA,CAAA,CAAA,GAAA,EAAA,CAAA;AAAA,IAEhE,OAAO,UAAW,CAAA,KAAA;AAAA,IAClB,OAAQ,EAAA,WAAA;AAAA,GAAA,sCAEP,MAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,yBAAA,CAAA;AAAA,IAClB,CAAE,EAAA,4kBAAA;AAAA,GAAA,CAAA,sCAEH,MAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,CAAE,EAAA,gZAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Toast/src/Toast.js

@@ -0,0 +1,66 @@
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useToast } from '@react-aria/toast';
+import { useSapphireStyleProps, IconButton } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/toast/toast.module.css';
+import { Close } 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 Toast = (_a) => {
+  var _b = _a, { state } = _b, props = __objRest(_b, ["state"]);
+  const {
+    styleProps: { style, className }
+  } = useSapphireStyleProps(props);
+  const ref = useRef(null);
+  const { toastProps, titleProps, closeButtonProps } = useToast(props, state, ref);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, toastProps), {
+    className: clsx(styles["sapphire-toast"], props.toast.animation ? styles[`sapphire-toast--${props.toast.animation}`] : {}, className),
+    style,
+    ref,
+    onAnimationEnd: () => {
+      if (props.toast.animation === "exiting") {
+        state.remove(props.toast.key);
+      }
+    }
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-toast__content"])
+  }, /* @__PURE__ */ React.createElement("div", __spreadValues({}, titleProps), props.toast.content), /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, closeButtonProps), {
+    "aria-label": "Close",
+    size: "small",
+    variant: "tertiary",
+    appearance: "ghost"
+  }), /* @__PURE__ */ React.createElement(Close, null))));
+};
+
+export { Toast };
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../src/Toast/src/Toast.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaToastProps, useToast } from '@react-aria/toast';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  IconButton,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Close } from '@danske/sapphire-icons/react';\n\nexport type ToastProps<T> = AriaToastProps<T> &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const Toast = <T,>({ state, ...props }: ToastProps<T>) => {\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const ref = useRef(null);\n  const { toastProps, titleProps, closeButtonProps } = useToast(\n    props,\n    state,\n    ref\n  );\n\n  return (\n    <div\n      {...toastProps}\n      className={clsx(\n        styles['sapphire-toast'],\n        props.toast.animation\n          ? styles[`sapphire-toast--${props.toast.animation}`]\n          : {},\n        className\n      )}\n      style={style}\n      ref={ref}\n      onAnimationEnd={() => {\n        // Remove the toast when the exiting animation completes.\n        if (props.toast.animation === 'exiting') {\n          state.remove(props.toast.key);\n        }\n      }}\n    >\n      <div className={clsx(styles['sapphire-toast__content'])}>\n        <div {...titleProps}>{props.toast.content}</div>\n        <IconButton\n          {...closeButtonProps}\n          aria-label=\"Close\"\n          size=\"small\"\n          variant=\"tertiary\"\n          appearance=\"ghost\"\n        >\n          <Close />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBa,MAAA,KAAA,GAAQ,CAAK,EAAuC,KAAA;AAAvC,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAC1B,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,UAAY,EAAA,UAAA,EAAY,gBAAqB,EAAA,GAAA,QAAA,CACnD,OACA,KACA,EAAA,GAAA,CAAA,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,gBAAA,CAAA,EACP,KAAM,CAAA,KAAA,CAAM,SACR,GAAA,MAAA,CAAO,CAAmB,gBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAA,CAAA,CAAA,GACtC,EACJ,EAAA,SAAA,CAAA;AAAA,IAEF,KAAA;AAAA,IACA,GAAA;AAAA,IACA,gBAAgB,MAAM;AAEpB,MAAI,IAAA,KAAA,CAAM,KAAM,CAAA,SAAA,KAAc,SAAW,EAAA;AACvC,QAAM,KAAA,CAAA,MAAA,CAAO,MAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,sCAI5B,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,yBAAA,CAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,cAAA,CAAA,EAAA,EAAS,UAAa,CAAA,EAAA,KAAA,CAAM,MAAM,OAClC,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,gBADN,CAAA,EAAA;AAAA,IAEE,YAAW,EAAA,OAAA;AAAA,IACX,IAAK,EAAA,OAAA;AAAA,IACL,OAAQ,EAAA,UAAA;AAAA,IACR,UAAW,EAAA,OAAA;AAAA,GAAA,CAAA,sCAEV,KAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Toast/src/ToastProvider.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useThemeCheck } from '@danske/sapphire-react';
+import { useToastState } from '@react-stately/toast';
+import { ToastRegion } from './ToastRegion.js';
+import { ToastContext } from './context.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 ToastProvider = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  useThemeCheck();
+  const state = useToastState({
+    maxVisibleToasts: 1,
+    hasExitAnimation: true
+  });
+  return /* @__PURE__ */ React.createElement(ToastContext.Provider, {
+    value: state
+  }, children, state.visibleToasts.length > 0 && /* @__PURE__ */ React.createElement(ToastRegion, __spreadProps(__spreadValues({}, props), {
+    state
+  })));
+};
+
+export { ToastProvider };
+//# sourceMappingURL=ToastProvider.js.map

package/build/esm/Toast/src/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../../src/Toast/src/ToastProvider.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useThemeCheck } from '@danske/sapphire-react';\n\nimport { useToastState } from '@react-stately/toast';\nimport { ToastRegionProps, ToastRegion } from './ToastRegion';\nimport { ToastContext } from './context';\n\nexport type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {\n  children: React.ReactNode;\n};\n\n/**\n * Sapphire toast provider.\n * Render this at the root of your app.\n */\nexport const ToastProvider = ({ children, ...props }: ToastProviderProps) => {\n  useThemeCheck();\n\n  const state = useToastState<ReactNode>({\n    maxVisibleToasts: 1,\n    hasExitAnimation: true,\n  });\n\n  return (\n    <ToastContext.Provider value={state}>\n      {children}\n      {state.visibleToasts.length > 0 && (\n        <ToastRegion {...props} state={state} />\n      )}\n    </ToastContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAea,MAAA,aAAA,GAAgB,CAAC,EAA+C,KAAA;AAA/C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,QAAA,EAAA,GAAA,EAAA,EAAe,KAAf,GAAA,SAAA,CAAA,EAAA,EAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AAC9B,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAAM,QAAQ,aAAyB,CAAA;AAAA,IACrC,gBAAkB,EAAA,CAAA;AAAA,IAClB,gBAAkB,EAAA,IAAA;AAAA,GAAA,CAAA,CAAA;AAGpB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAa,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,KAAA;AAAA,GAC3B,EAAA,QAAA,EACA,MAAM,aAAc,CAAA,MAAA,GAAS,qBAC3B,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,iCAAiB,KAAjB,CAAA,EAAA;AAAA,IAAwB,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Toast/src/ToastRegion.js

@@ -0,0 +1,56 @@
+import React, { useRef } from 'react';
+import { useToastRegion } from '@react-aria/toast';
+import { SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/toast/toast.module.css';
+import { Toast } from './Toast.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 ToastRegion = (_a) => {
+  var _b = _a, { state } = _b, props = __objRest(_b, ["state"]);
+  const ref = useRef(null);
+  const { regionProps } = useToastRegion(props, state, ref);
+  return /* @__PURE__ */ React.createElement(SapphireOverlayContainer, null, /* @__PURE__ */ React.createElement(ThemeRoot, {
+    contrast: true
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
+    ref,
+    className: styles["sapphire-toast-container"],
+    style: { zIndex: 200 }
+  }), state.visibleToasts.map((toast) => /* @__PURE__ */ React.createElement(Toast, __spreadProps(__spreadValues({}, props), {
+    key: toast.key,
+    toast,
+    state
+  }))))));
+};
+
+export { ToastRegion };
+//# sourceMappingURL=ToastRegion.js.map

package/build/esm/Toast/src/ToastRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport {\n  SapphireOverlayContainer,\n  SapphireStyleProps,\n  ThemeRoot,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const ToastRegion = <T,>({ state, ...props }: ToastRegionProps<T>) => {\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(props, state, ref);\n\n  return (\n    <SapphireOverlayContainer>\n      <ThemeRoot contrast>\n        <div\n          {...regionProps}\n          ref={ref}\n          className={styles['sapphire-toast-container']}\n          style={{ zIndex: 200 } /* above overlays from @danske/sapphire-react */}\n        >\n          {state.visibleToasts.map((toast) => (\n            <Toast {...props} key={toast.key} toast={toast} state={state} />\n          ))}\n        </div>\n      </ThemeRoot>\n    </SapphireOverlayContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,WAAA,GAAc,CAAK,EAA6C,KAAA;AAA7C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAErD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,KAAA,EAAO,EAAE,MAAQ,EAAA,GAAA,EAAA;AAAA,GAEhB,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Toast/src/context.js

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+
+const ToastContext = React.createContext(null);
+const useToastContext = () => {
+  const context = useContext(ToastContext);
+  return context;
+};
+
+export { ToastContext, useToastContext };
+//# sourceMappingURL=context.js.map

package/build/esm/Toast/src/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/Toast/src/context.ts"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport { ToastState } from '@react-stately/toast';\n\nexport const ToastContext = React.createContext<ToastState<ReactNode> | null>(\n  null\n);\n\nexport const useToastContext = () => {\n  const context = useContext(ToastContext);\n\n  return context;\n};\n"],"names":[],"mappings":";;AAGa,MAAA,YAAA,GAAe,MAAM,aAChC,CAAA,IAAA,EAAA;AAGK,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,UAAU,UAAW,CAAA,YAAA,CAAA,CAAA;AAE3B,EAAO,OAAA,OAAA,CAAA;AAAA;;;;"}

package/build/esm/Toast/src/useShowToast.js

@@ -0,0 +1,15 @@
+import { useToastContext } from './context.js';
+
+const useShowToast = () => {
+  const toastState = useToastContext();
+  if (!toastState) {
+    throw new Error('"useShowToast" should be used inside a <ToastProvider>.');
+  }
+  return (content, options) => {
+    const { onClose, timeout = 3e3 } = options || {};
+    toastState.add(content, { onClose, timeout });
+  };
+};
+
+export { useShowToast };
+//# sourceMappingURL=useShowToast.js.map

package/build/esm/Toast/src/useShowToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowToast.js","sources":["../../../../src/Toast/src/useShowToast.ts"],"sourcesContent":["import { ReactNode } from 'react';\nimport { useToastContext } from './context';\n\nexport type ShowToastFn = (\n  content: ReactNode,\n  options?: ShowToastOptions\n) => void;\n\nexport type ShowToastOptions = {\n  /**\n   * Handler that is called when the toast is closed, either by the user\n   * or after a timeout.\n   */\n  onClose?: () => void;\n  /**\n   * A timeout to automatically close the toast after, in milliseconds.\n   * Note that if the toast is hovered or interacted with, the timeout is\n   * paused.\n   *\n   * @default 3000\n   */\n  timeout?: number;\n};\n\nexport const useShowToast = (): ShowToastFn => {\n  const toastState = useToastContext();\n\n  if (!toastState) {\n    throw new Error('\"useShowToast\" should be used inside a <ToastProvider>.');\n  }\n\n  return (content, options) => {\n    const { onClose, timeout = 3000 } = options || {};\n    /*\n     * NOTE:\n     * There is an addition \"priority\" parameter to \".add\".\n     * We don't use it now, but we should if we will have different types of\n     * toast notifications with different priorities.\n     */\n    toastState.add(content, { onClose, timeout });\n  };\n};\n"],"names":[],"mappings":";;AAwBO,MAAM,eAAe,MAAmB;AAC7C,EAAA,MAAM,UAAa,GAAA,eAAA,EAAA,CAAA;AAEnB,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,MAAM,IAAI,KAAM,CAAA,yDAAA,CAAA,CAAA;AAAA,GAAA;AAGlB,EAAO,OAAA,CAAC,SAAS,OAAY,KAAA;AAC3B,IAAA,MAAM,EAAE,OAAA,EAAS,OAAU,GAAA,GAAA,EAAA,GAAS,OAAW,IAAA,EAAA,CAAA;AAO/C,IAAW,UAAA,CAAA,GAAA,CAAI,OAAS,EAAA,EAAE,OAAS,EAAA,OAAA,EAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA;;;;"}

package/build/esm/ToggleButton/src/ToggleButton.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useFocusableRef } from '@react-spectrum/utils';
+import { FocusRing } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
+import { useToggleButton } from '@react-aria/button';
+import { useHover } from '@react-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/button/button.module.css';
+import { useThemeCheck, useSapphireStyleProps, Icon, usePreventTouchEnd } 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 ToggleButton = React.forwardRef(function Button(_a, ref) {
+  var _b = _a, {
+    iconAlign = "left",
+    icon,
+    size = "medium"
+  } = _b, otherProps = __objRest(_b, [
+    "iconAlign",
+    "icon",
+    "size"
+  ]);
+  useThemeCheck();
+  const { autoFocus, isDisabled } = otherProps;
+  const domRef = useFocusableRef(ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { styleProps } = useSapphireStyleProps(otherProps);
+  const iconWrapper = icon && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(styles["sapphire-button__icon"])
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: size === "small" ? "s" : size === "medium" ? "m" : "l"
+  }, icon));
+  const state = useToggleState(otherProps);
+  const { buttonProps, isPressed } = useToggleButton(otherProps, state, domRef);
+  usePreventTouchEnd(domRef);
+  return /* @__PURE__ */ React.createElement(FocusRing, {
+    focusRingClass: clsx(styles["is-focus"]),
+    autoFocus
+  }, /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps)), {
+    ref: domRef,
+    style: __spreadValues({}, styleProps.style),
+    className: clsx(styles["sapphire-button"], styles["js-focus"], styles["js-hover"], {
+      [styles["is-active"]]: isPressed,
+      [styles["is-hover"]]: isHovered,
+      [styles["is-disabled"]]: isDisabled,
+      [styles["sapphire-button--small"]]: size === "small",
+      [styles["sapphire-button--large"]]: size === "large",
+      [styles["sapphire-button--with-left-icon"]]: icon && iconAlign === "left",
+      [styles["sapphire-button--with-right-icon"]]: icon && iconAlign === "right"
+    }, state.isSelected ? styles["sapphire-button--selected"] : styles["sapphire-button--unselected"], styleProps.className)
+  }), iconAlign === "left" && iconWrapper, otherProps.children, iconAlign === "right" && iconWrapper));
+});
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../../src/ToggleButton/src/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRef, PressEvents } from '@react-types/shared';\nimport { FocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { AriaToggleButtonProps, useToggleButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useToggleState } from '@react-stately/toggle';\nimport clsx from 'clsx';\n\nimport styles from '@danske/sapphire-css/components/button/button.module.css';\n\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  usePreventTouchEnd,\n  Icon,\n} from '@danske/sapphire-react';\n\nexport type SapphireToggleButtonProps = Omit<\n  AriaToggleButtonProps<'button'>,\n  'elementType' | 'type'\n> &\n  SapphireStyleProps &\n  PressEvents & {\n    /**\n     * @default 'medium'\n     */\n    size?: 'large' | 'medium' | 'small';\n    onChange?: (selected: boolean) => void;\n    isSelected?: boolean;\n    defaultSelected?: boolean;\n  } & (ButtonWithIconProps | ButtonWithoutIconProps);\n\n// TODO: use ButtonWithIconProps and ButtonWithoutIconProps in core, when moved there\nexport type ButtonWithIconProps = {\n  /**\n   * The icon placed either before or after the `label`, based on `iconAlign` prop.\n   * */\n  icon: React.ReactNode;\n  /**\n   * The icon placement relative to the `label`.\n   * */\n  iconAlign?: 'left' | 'right';\n};\n\nexport type ButtonWithoutIconProps = {\n  icon?: never;\n  iconAlign?: never;\n};\n\n/**\n * A button with a toggleable `isSelected` state. By default, the selection is toggled when the\n * button is pressed, allowing user to switch between two states or modes.\n */\nexport const ToggleButton = React.forwardRef(function Button(\n  {\n    iconAlign = 'left',\n    icon,\n    size = 'medium',\n    ...otherProps\n  }: SapphireToggleButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  useThemeCheck();\n\n  const { autoFocus, isDisabled } = otherProps;\n  const domRef = useFocusableRef<HTMLButtonElement>(ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const iconWrapper = icon && (\n    <span className={clsx(styles['sapphire-button__icon'])}>\n      <Icon size={size === 'small' ? 's' : size === 'medium' ? 'm' : 'l'}>\n        {icon}\n      </Icon>\n    </span>\n  );\n\n  const state = useToggleState(otherProps);\n  const { buttonProps, isPressed } = useToggleButton(otherProps, state, domRef);\n  usePreventTouchEnd(domRef);\n\n  return (\n    <FocusRing focusRingClass={clsx(styles['is-focus'])} autoFocus={autoFocus}>\n      <button\n        {...mergeProps(buttonProps, hoverProps)}\n        ref={domRef}\n        style={{ ...styleProps.style }}\n        className={clsx(\n          styles['sapphire-button'],\n          styles['js-focus'],\n          styles['js-hover'],\n          {\n            [styles['is-active']]: isPressed,\n            [styles['is-hover']]: isHovered,\n            [styles['is-disabled']]: isDisabled,\n            [styles['sapphire-button--small']]: size === 'small',\n            [styles['sapphire-button--large']]: size === 'large',\n            [styles['sapphire-button--with-left-icon']]:\n              icon && iconAlign === 'left',\n            [styles['sapphire-button--with-right-icon']]:\n              icon && iconAlign === 'right',\n          },\n          state.isSelected\n            ? styles['sapphire-button--selected']\n            : styles['sapphire-button--unselected'],\n          styleProps.className\n        )}\n      >\n        {iconAlign === 'left' && iconWrapper}\n        {otherProps.children}\n        {iconAlign === 'right' && iconWrapper}\n      </button>\n    </FocusRing>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDO,MAAM,YAAe,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,MAAA,CAC3C,IAMA,GACA,EAAA;AAPA,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAY,SAAA,GAAA,MAAA;AAAA,IACZ,IAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,GAHT,GAAA,EAAA,EAIK,uBAJL,EAIK,EAAA;AAAA,IAHH,WAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,WAAW,UAAe,EAAA,GAAA,UAAA,CAAA;AAClC,EAAA,MAAM,SAAS,eAAmC,CAAA,GAAA,CAAA,CAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE7C,EAAM,MAAA,WAAA,GAAc,IAClB,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IAAM,SAAA,EAAW,KAAK,MAAO,CAAA,uBAAA,CAAA,CAAA;AAAA,GAAA,sCAC1B,IAAD,EAAA;AAAA,IAAM,MAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,IAAA,KAAS,WAAW,GAAM,GAAA,GAAA;AAAA,GAC5D,EAAA,IAAA,CAAA,CAAA,CAAA;AAKP,EAAA,MAAM,QAAQ,cAAe,CAAA,UAAA,CAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,eAAA,CAAgB,YAAY,KAAO,EAAA,MAAA,CAAA,CAAA;AACtE,EAAmB,kBAAA,CAAA,MAAA,CAAA,CAAA;AAEnB,EAAA,2CACG,SAAD,EAAA;AAAA,IAAW,cAAA,EAAgB,KAAK,MAAO,CAAA,UAAA,CAAA,CAAA;AAAA,IAAc,SAAA;AAAA,GAAA,kBAClD,KAAA,CAAA,aAAA,CAAA,QAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,aAAa,UAD9B,CAAA,CAAA,EAAA;AAAA,IAEE,GAAK,EAAA,MAAA;AAAA,IACL,KAAA,EAAO,mBAAK,UAAW,CAAA,KAAA,CAAA;AAAA,IACvB,WAAW,IACT,CAAA,MAAA,CAAO,oBACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtB,OAAO,UAAc,CAAA,GAAA,SAAA;AAAA,MAAA,CACrB,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,MACxB,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,iCACN,CAAA,GAAA,IAAA,IAAQ,SAAc,KAAA,MAAA;AAAA,MACvB,CAAA,MAAA,CAAO,kCACN,CAAA,GAAA,IAAA,IAAQ,SAAc,KAAA,OAAA;AAAA,KAAA,EAE1B,MAAM,UACF,GAAA,MAAA,CAAO,2BACP,CAAA,GAAA,MAAA,CAAO,gCACX,UAAW,CAAA,SAAA,CAAA;AAAA,GAAA,CAAA,EAGZ,cAAc,MAAU,IAAA,WAAA,EACxB,UAAW,CAAA,QAAA,EACX,cAAc,OAAW,IAAA,WAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/Typography/index.js

@@ -0,0 +1,14 @@
+import { Heading } from './src/Heading.js';
+import { Subheading } from './src/Subheading.js';
+import { Body } from './src/Body.js';
+import { Caption } from './src/Caption.js';
+
+const Typography = {
+  Heading,
+  Subheading,
+  Body,
+  Caption
+};
+
+export { Typography };
+//# sourceMappingURL=index.js.map

package/build/esm/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/Typography/index.ts"],"sourcesContent":["import { Heading, type TypographyHeadingProps } from './src/Heading';\nimport { Subheading, type TypographySubheadingProps } from './src/Subheading';\nimport { Body, type TypographyBodyProps } from './src/Body';\nimport { Caption, TypographyCaptionProps } from './src/Caption';\nimport { ComponentType } from 'react';\n\nexport const Typography: {\n  Heading: ComponentType<TypographyHeadingProps>;\n  Subheading: ComponentType<TypographySubheadingProps>;\n  Body: ComponentType<TypographyBodyProps>;\n  Caption: ComponentType<TypographyCaptionProps>;\n} = {\n  Heading,\n  Subheading,\n  Body,\n  Caption,\n};\n\nexport type {\n  TypographyHeadingProps,\n  TypographySubheadingProps,\n  TypographyBodyProps,\n  TypographyCaptionProps,\n};\n"],"names":[],"mappings":";;;;;AAMO,MAAM,UAKT,GAAA;AAAA,EACF,OAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA;;;;"}