@danske/sapphire-react-lab 0.96.3 → 0.98.0

package/build/esm/Alert/src/Alert.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useThemeCheck, useSapphireStyleProps, Icon, Typography } from '@danske/sapphire-react';
+import { Information, Error, CheckmarkOutline, Warning } from '@danske/sapphire-icons/react';
+import alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';
+import { clsx } from 'clsx';
+
+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;
+};
+function Alert(_a) {
+  var _b = _a, {
+    children,
+    title,
+    variant = "info"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "title",
+    "variant"
+  ]);
+  useThemeCheck();
+  const {
+    styleProps: { style, className }
+  } = useSapphireStyleProps(props);
+  const getIcon = (variant2) => {
+    switch (variant2) {
+      case "warning":
+        return /* @__PURE__ */ React.createElement(Warning, null);
+      case "positive":
+        return /* @__PURE__ */ React.createElement(CheckmarkOutline, null);
+      case "negative":
+        return /* @__PURE__ */ React.createElement(Error, null);
+      default:
+        return /* @__PURE__ */ React.createElement(Information, null);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(alertStyles["sapphire-alert"], {
+      [alertStyles["sapphire-alert--positive"]]: variant === "positive",
+      [alertStyles["sapphire-alert--negative"]]: variant === "negative",
+      [alertStyles["sapphire-alert--warning"]]: variant === "warning"
+    }, className),
+    style,
+    role: "alert"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: alertStyles["sapphire-alert__icon"]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: "sm"
+  }, getIcon(variant))), /* @__PURE__ */ React.createElement("div", {
+    className: alertStyles["sapphire-alert__title"]
+  }, /* @__PURE__ */ React.createElement(Typography.Body, {
+    size: "sm",
+    isSemibold: true
+  }, title)), /* @__PURE__ */ React.createElement("div", {
+    className: alertStyles["sapphire-alert__content"]
+  }, /* @__PURE__ */ React.createElement(Typography.Body, {
+    elementType: "section",
+    size: "md"
+  }, children)));
+}
+
+export { Alert };
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  Typography,\n  Icon,\n} from '@danske/sapphire-react';\nimport {\n  CheckmarkOutline,\n  Information,\n  Warning,\n  Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\n\nexport interface SapphireAlertProps extends SapphireStyleProps {\n  /**\n   * The content of the alert.\n   */\n  children?: ReactNode;\n\n  /**\n   * The title of the alert.\n   */\n  title?: ReactNode;\n\n  /**\n   * @default 'info'\n   */\n  variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n  children,\n  title,\n  variant = 'info',\n  ...props\n}: SapphireAlertProps) {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const getIcon = (variant: string) => {\n    switch (variant) {\n      case 'warning':\n        return <Warning />;\n      case 'positive':\n        return <CheckmarkOutline />;\n      case 'negative':\n        return <Error />;\n      default:\n        return <Information />;\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        alertStyles['sapphire-alert'],\n        {\n          [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n          [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n          [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n        },\n        className\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      <span className={alertStyles['sapphire-alert__icon']}>\n        <Icon size=\"sm\">{getIcon(variant)}</Icon>\n      </span>\n      <div className={alertStyles['sapphire-alert__title']}>\n        <Typography.Body size=\"sm\" isSemibold>\n          {title}\n        </Typography.Body>\n      </div>\n      <div className={alertStyles['sapphire-alert__content']}>\n        <Typography.Body elementType=\"section\" size=\"md\">\n          {children}\n        </Typography.Body>\n      </div>\n    </div>\n  );\n}\n"],"names":["Error2"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCO,SAAA,KAAA,CAAe,EAKC,EAAA;AALD,EACpB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,GAHU,GAAA,EAAA,EAIjB,kBAJiB,EAIjB,EAAA;AAAA,IAHH,UAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAM,MAAA,OAAA,GAAU,CAAC,QAAoB,KAAA;AACnC,IAAQ,QAAA,QAAA;AAAA,MACD,KAAA,SAAA;AACH,QAAA,2CAAQ,OAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQ,gBAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQA,KAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MAAA;AAEP,QAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAIb,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IACT,CAAA,WAAA,CAAY,gBACZ,CAAA,EAAA;AAAA,MACG,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,6BAA6B,OAAY,KAAA,SAAA;AAAA,KAExD,EAAA,SAAA,CAAA;AAAA,IAEF,KAAA;AAAA,IACA,IAAK,EAAA,OAAA;AAAA,GAAA,sCAEJ,MAAD,EAAA;AAAA,IAAM,WAAW,WAAY,CAAA,sBAAA,CAAA;AAAA,GAAA,sCAC1B,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GAAM,EAAA,OAAA,CAAQ,OAE3B,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,uBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,IAAK,EAAA,IAAA;AAAA,IAAK,UAAU,EAAA,IAAA;AAAA,GAClC,EAAA,KAAA,CAAA,CAAA,sCAGJ,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,yBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,WAAY,EAAA,SAAA;AAAA,IAAU,IAAK,EAAA,IAAA;AAAA,GACzC,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -8,16 +8,20 @@ import '../../FileDropzone/src/FileDropzone.js';
 import '../../FileDropzone/src/FileTrigger.js';
 import '../../Flag/src/Flag.js';
 import '../../NumberField/src/NumberField.js';
+import 'clsx';
+import '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';
+import '@react-aria/progress';
+import '../../Slider/index.js';
 import '@react-aria/tag';
 import '@react-stately/list';
 import '@danske/sapphire-css/components/tag/tag.module.css';
-import 'clsx';
 import '@react-aria/button';
 import '@react-aria/interactions';
 import '@danske/sapphire-icons/react';
 import '@react-aria/focus';
 import '@react-stately/collections';
 import '@react-aria/label';
+import '@danske/sapphire-css/components/alert/alert.module.css';
 import '@react-aria/i18n';
 
 var __defProp = Object.defineProperty;

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} 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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,sBAAA,CACL,KACa,EAAA;AAnCf,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAoCE,EAA6D,MAAA,EAAA,GAAA,KAAA,EAArD,EAAa,WAAA,EAAA,OAAA,EAAS,IAAO,GAAA,IAAA,EAAA,GAAwB,IAAf,UAAe,GAAA,SAAA,CAAA,EAAA,EAAf,CAAtC,aAAA,EAAa,SAAS,EAAA,MAAA,CAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,iBAAiB,MAAyB,CAAA,IAAA,CAAA,CAAA;AAEhD,EAAA,MAAM,mBAAmB,WAAY,CAAA,KAAA,CAAA;AACrC,EAAA,MAAM,eAAe,OAAQ,CAAA,KAAA,CAAA;AAE7B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAA,CAAA,GAAkB,mBACpC,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,KAAA,EAClB,IACA,gBAAiB,CAAA,QAAA,CAAA,CAAA;AAGnB,EACE,IAAA,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,CAAQ,CAAA,EAAA,GAAA,OAAA,CAAA,GAAA,KAAR,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,MAAa,aAC1B,EAAA;AAEA,IAAA,OAAA,CAAQ,IACN,CAAA,6NAAA,CAAA,CAAA;AAAA,GAAA;AAIJ,EAAM,MAAA,YAAA,GACJ,aAAa,YAAiB,KAAA,KAAA,IAC9B,MAAM,IAAK,CAAA,YAAA,CAAa,YAAgB,IAAA,EAAA,CAAA,CAAI,MAAS,GAAA,CAAA,CAAA;AAEvD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,UAAA,EAAY,CAAW,EAAA,GAAA,UAAA,CAAA,UAAA,KAAX,IAAyB,GAAA,EAAA,GAAA,IAAA;AAAA,IACrC,UAAY,EAAA,IAAA;AAAA,IAGZ,cAAA,EAAgB,QAAQ,UAAW,CAAA,OAAA,CAAA;AAAA,IAGnC,iBACE,UAAW,CAAA,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,sCAG7D,IAAD,EAAA;AAAA,IAAM,aAAc,EAAA,QAAA;AAAA,IAAS,MAAO,EAAA,MAAA;AAAA,GAAA,EACjC,aAAa,WAAa,EAAA;AAAA,IACzB,IAAM,EAAA,IAAA;AAAA,IACN,KAAA,EAAO,iBAAiB,KAAS,IAAA,WAAA;AAAA,IACjC,QAAA,EAAU,SAAU,CAAA,cAAA,EAAgB,gBAAiB,CAAA,QAAA,CAAA;AAAA,IACrD,KAAA,EAAO,iBAAiB,KAAS,IAAA,MAAA;AAAA,IACjC,YAAc,EAAA,gBAAA,CAAiB,YAAgB,IAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,OAAS,EAAA;AAAA,IACrB,iBAAmB,EAAA,cAAA;AAAA,IACnB,aAAA,EAAe,aAAa,aAAiB,IAAA,UAAA;AAAA,IAC7C,OAAS,EAAA,CAAA,KAAA,EAAQ,MAAO,CAAA,IAAA,CAAK,4BAA6B,CAAA,KAAA,CAAA,MAAA,CAAA;AAAA,IAC1D,iBAAmB,EAAA,IAAA;AAAA,IACnB,MAAA,EAGE,QAAY,IAAA,YAAA,GACR,YAAa,CAAA,MAAA,GACb,CAAC,SACC,KAAA,SAAA,CAAU,WAAc,EAAA,CAAA,QAAA,CAAS,WAAY,CAAA,WAAA,EAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"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} 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 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,sBAAA,CACL,KACa,EAAA;AAnCf,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAoCE,EAA6D,MAAA,EAAA,GAAA,KAAA,EAArD,EAAa,WAAA,EAAA,OAAA,EAAS,IAAO,GAAA,IAAA,EAAA,GAAwB,IAAf,UAAe,GAAA,SAAA,CAAA,EAAA,EAAf,CAAtC,aAAA,EAAa,SAAS,EAAA,MAAA,CAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,iBAAiB,MAAyB,CAAA,IAAA,CAAA,CAAA;AAEhD,EAAA,MAAM,mBAAmB,WAAY,CAAA,KAAA,CAAA;AACrC,EAAA,MAAM,eAAe,OAAQ,CAAA,KAAA,CAAA;AAE7B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAA,CAAA,GAAkB,mBACpC,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,KAAA,EAClB,IACA,gBAAiB,CAAA,QAAA,CAAA,CAAA;AAGnB,EACE,IAAA,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,CAAQ,CAAA,EAAA,GAAA,OAAA,CAAA,GAAA,KAAR,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,MAAa,aAC1B,EAAA;AAEA,IAAA,OAAA,CAAQ,IACN,CAAA,6NAAA,CAAA,CAAA;AAAA,GAAA;AAIJ,EAAM,MAAA,YAAA,GACJ,aAAa,YAAiB,KAAA,KAAA,IAC9B,MAAM,IAAK,CAAA,YAAA,CAAa,YAAgB,IAAA,EAAA,CAAA,CAAI,MAAS,GAAA,CAAA,CAAA;AAEvD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,UAAA,EAAY,CAAW,EAAA,GAAA,UAAA,CAAA,UAAA,KAAX,IAAyB,GAAA,EAAA,GAAA,IAAA;AAAA,IACrC,UAAY,EAAA,IAAA;AAAA,IAGZ,cAAA,EAAgB,QAAQ,UAAW,CAAA,OAAA,CAAA;AAAA,IAGnC,iBACE,UAAW,CAAA,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,sCAG7D,IAAD,EAAA;AAAA,IAAM,aAAc,EAAA,QAAA;AAAA,IAAS,MAAO,EAAA,MAAA;AAAA,GAAA,EACjC,aAAa,WAAa,EAAA;AAAA,IACzB,IAAM,EAAA,IAAA;AAAA,IACN,KAAA,EAAO,iBAAiB,KAAS,IAAA,WAAA;AAAA,IACjC,QAAA,EAAU,SAAU,CAAA,cAAA,EAAgB,gBAAiB,CAAA,QAAA,CAAA;AAAA,IACrD,KAAA,EAAO,iBAAiB,KAAS,IAAA,MAAA;AAAA,IACjC,YAAc,EAAA,gBAAA,CAAiB,YAAgB,IAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,OAAS,EAAA;AAAA,IACrB,iBAAmB,EAAA,cAAA;AAAA,IACnB,aAAA,EAAe,aAAa,aAAiB,IAAA,UAAA;AAAA,IAC7C,OAAS,EAAA,CAAA,KAAA,EAAQ,MAAO,CAAA,IAAA,CAAK,4BAA6B,CAAA,KAAA,CAAA,MAAA,CAAA;AAAA,IAC1D,iBAAmB,EAAA,IAAA;AAAA,IACnB,MAAA,EAGE,QAAY,IAAA,YAAA,GACR,YAAa,CAAA,MAAA,GACb,CAAC,SACC,KAAA,SAAA,CAAU,WAAc,EAAA,CAAA,QAAA,CAAS,WAAY,CAAA,WAAA,EAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/ProgressIndicator/src/ProgressIndicator.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';
+import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
+import { useProgressBar } from '@react-aria/progress';
+
+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 ProgressIndicator = (props) => {
+  const {
+    maxValue = 100,
+    value: realValue,
+    segments = 1,
+    "aria-valuetext": ariaValueText
+  } = props;
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  const { progressBarProps } = useProgressBar(__spreadProps(__spreadValues({}, props), {
+    minValue: 0,
+    valueLabel: ariaValueText
+  }));
+  const minValue = 0;
+  const value = Math.min(Math.max(realValue, minValue), maxValue);
+  const widthPercentage = value / maxValue * 100;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-progress"])
+  }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, progressBarProps), {
+    className: styles["sapphire-progress--indicator"],
+    style: __spreadProps(__spreadValues({}, styleProps), { width: `${widthPercentage}%` }),
+    "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
+    "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
+  })), segments > 1 && /* @__PURE__ */ React.createElement("div", {
+    className: styles["sapphire-progress--segments"]
+  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", {
+    key: index
+  }))));
+};
+
+export { ProgressIndicator };
+//# sourceMappingURL=ProgressIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.js","sources":["../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from '@react-aria/progress';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div className={clsx(styles['sapphire-progress'])}>\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\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      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwCa,MAAA,iBAAA,GAAoB,CAC/B,KACgB,KAAA;AAChB,EAAM,MAAA;AAAA,IACJ,QAAW,GAAA,GAAA;AAAA,IACX,KAAO,EAAA,SAAA;AAAA,IACP,QAAW,GAAA,CAAA;AAAA,IACX,gBAAkB,EAAA,aAAA;AAAA,GAChB,GAAA,KAAA,CAAA;AAEJ,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,gBAAA,EAAA,GAAqB,cAAe,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACvC,KADuC,CAAA,EAAA;AAAA,IAE1C,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,aAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAGd,EAAA,MAAM,QAAW,GAAA,CAAA,CAAA;AAEjB,EAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAI,WAAW,QAAW,CAAA,EAAA,QAAA,CAAA,CAAA;AACtD,EAAM,MAAA,eAAA,GAAmB,QAAQ,QAAY,GAAA,GAAA,CAAA;AAE7C,EAAA,2CACG,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,mBAAA,CAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,gBADN,CAAA,EAAA;AAAA,IAEE,WAAW,MAAO,CAAA,8BAAA,CAAA;AAAA,IAClB,KAAO,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,UAAL,CAAA,EAAA,EAAiB,OAAO,CAAG,EAAA,eAAA,CAAA,CAAA,CAAA,EAAA,CAAA;AAAA,IAClC,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,GAG3D,CAAA,CAAA,EAAA,QAAA,GAAW,CACV,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,6BAAA,CAAA;AAAA,GACpB,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,YAAY,CAAC,CAAA,EAAG,KACpC,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IAAM,GAAK,EAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/Slider/index.js

@@ -0,0 +1,9 @@
+import { Field } from '@danske/sapphire-react';
+import { Slider } from './src/Slider.js';
+
+const _Slider = Object.assign(Slider, {
+  Note: Field.Note
+});
+
+export { _Slider as Slider };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/Slider/index.ts"],"sourcesContent":["import { Field } from '@danske/sapphire-react';\nimport { Slider } from './src/Slider';\n\nconst _Slider = Object.assign(Slider, {\n  Note: Field.Note,\n});\n\nexport { _Slider as Slider };\nexport { type SliderProps } from './src/Slider';\n"],"names":[],"mappings":";;;AAGM,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,MAAQ,EAAA;AAAA,EACpC,MAAM,KAAM,CAAA,IAAA;AAAA,CAAA;;;;"}

package/build/esm/Slider/src/Slider.js

@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/slider/slider.module.css';
+import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
+import { Slider as Slider$1, SliderTrack, SliderThumb } from 'react-aria-components';
+import React from '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 Slider = (_a) => {
+  var _b = _a, {
+    label,
+    labelPlacement = "above",
+    note,
+    name,
+    isDisabled
+  } = _b, props = __objRest(_b, [
+    "label",
+    "labelPlacement",
+    "note",
+    "name",
+    "isDisabled"
+  ]);
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, styleProps), {
+    labelPlacement
+  }), /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, __spreadProps(__spreadValues({}, props), {
+    style: { height: "100%" }
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider"]),
+    role: "slider"
+  }, /* @__PURE__ */ React.createElement(SliderTrack, {
+    className: clsx(styles["sapphire-slider__track"])
+  }, ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider__track-remaining"])
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-slider__track-fill"]),
+    style: { width: state.getThumbPercent(0) * 100 + "%" }
+  }), /* @__PURE__ */ React.createElement(SliderThumb, {
+    name,
+    className: (state2) => clsx(styles["sapphire-slider__thumb"], {
+      [styles["is-focus"]]: state2.isFocusVisible
+    }),
+    style: ({ state: state2 }) => {
+      const percent = Math.min(3 + state2.getThumbPercent(0) * 94, 100);
+      return {
+        left: `${percent}%`
+      };
+    }
+  })))))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
+};
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  Pick<FieldProps, 'isDisabled' | 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  isDisabled,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={clsx(styles['sapphire-slider__track'])}\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ca,MAAA,MAAA,GAAS,CAAC,EAOS,KAAA;AAPT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,GALqB,GAAA,EAAA,EAMlB,kBANkB,EAMlB,EAAA;AAAA,IALH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,wBAAA,CAAA,CAAA;AAAA,GAAA,EAEtB,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -5,9 +5,12 @@ export { FileDropzone } from './FileDropzone/src/FileDropzone.js';
 export { FileTrigger } from './FileDropzone/src/FileTrigger.js';
 export { Flag } from './Flag/src/Flag.js';
 export { NumberField } from './NumberField/src/NumberField.js';
+export { ProgressIndicator } from './ProgressIndicator/src/ProgressIndicator.js';
+export { Slider } from './Slider/index.js';
 export { TagGroup } from './TagGroup/src/TagGroup.js';
 export { TagItem } from './TagGroup/src/TagItem.js';
 export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
+export { Alert } from './Alert/src/Alert.js';
 export { useLocale } from '@react-aria/i18n';
 export { AccordionContext } from './Accordion/src/AccordionContext.js';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

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

package/build/index.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
-import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps } from '@danske/sapphire-react';
+import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps, FieldProps } from '@danske/sapphire-react';
 import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue, PressEvents } from '@react-types/shared';
 import { HoverProps } from '@react-aria/interactions';
 import { DropOptions } from '@react-aria/dnd';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
+import { SliderProps as SliderProps$1, SliderThumbProps } from 'react-aria-components';
 export { useLocale } from '@react-aria/i18n';
 
 interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'> {
@@ -276,6 +277,54 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
+declare type ProgressIndicatorProps = {
+    /**
+     * The maximum value for the progress bar. Will be used as:
+     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax
+     *
+     * @default 100
+     */
+    maxValue?: number;
+    /**
+     * The current value of the progress bar. Will be used as:
+     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow
+     */
+    value: number;
+    /**
+     * Defines how many segments the progress bar will have.
+     *
+     * @default 1
+     */
+    segments?: number;
+    /**
+     * Human-readable text alternative for the current value of the progress bar. Will be used as:
+     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext
+     */
+    'aria-valuetext'?: string;
+} & SapphireStyleProps & ({
+    'aria-labelledby': string;
+} | {
+    'aria-label': string;
+});
+declare const ProgressIndicator: (props: ProgressIndicatorProps) => JSX.Element;
+
+declare type SliderProps = {
+    label?: ReactNode;
+    /**
+     * A note to show below the slider.
+     * Use {@Link Slider.Note} to render the note.
+     */
+    note?: ReactNode;
+} & SapphireStyleProps & Pick<FieldProps, 'isDisabled' | 'labelPlacement'> & Pick<SliderProps$1<number>, // We're only supporting sliders with one end
+'minValue' | 'maxValue' | 'step' | 'value' | 'defaultValue' | 'aria-label' | 'onChange' | 'onChangeEnd'> & Pick<SliderThumbProps, 'name'>;
+
+declare const _Slider: (({ label, labelPlacement, note, name, isDisabled, ...props }: SliderProps) => JSX.Element) & {
+    Note: ({ children, variant, ...props }: {
+        children?: React.ReactNode;
+        variant?: "warning" | "error" | "success" | "neutral" | undefined;
+    } & React.HTMLAttributes<HTMLElement>) => React.JSX.Element;
+};
+
 interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps {
     /**
      * A HelpButton element to place next to the label.
@@ -355,4 +404,20 @@ interface LabeledValueProps extends DOMProps, SapphireStyleProps {
 }
 declare function LabeledValue({ children, contextualHelp, label, labelPlacement, size, ...otherProps }: LabeledValueProps): React__default.JSX.Element;
 
-export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, SearchableSelectFilter, SearchableSelectFilterProps, TagGroup, TagGroupProps, TagItem };
+interface SapphireAlertProps extends SapphireStyleProps {
+    /**
+     * The content of the alert.
+     */
+    children?: ReactNode;
+    /**
+     * The title of the alert.
+     */
+    title?: ReactNode;
+    /**
+     * @default 'info'
+     */
+    variant?: 'info' | 'positive' | 'negative' | 'warning';
+}
+declare function Alert({ children, title, variant, ...props }: SapphireAlertProps): React__default.JSX.Element;
+
+export { _Accordion as Accordion, AccordionContext, AccordionHeadingProps, AccordionItemProps, AccordionProps, Alert, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, FilterDropdownProps, Flag, FlagProps, LabeledValue, NumberField, NumberFieldProps, NumberFieldRef, ProgressIndicator, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilter, SearchableSelectFilterProps, _Slider as Slider, SliderProps, TagGroup, TagGroupProps, TagItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.96.3",
+  "version": "0.98.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,46 +25,48 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.0.0",
+    "@danske/sapphire-react": "^5.4.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.2.2",
+    "@danske/sapphire-react": "^5.4.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^41.0.0",
-    "@internationalized/date": "^3.6.0",
-    "@internationalized/string": "^3.2.5",
-    "@react-aria/accordion": "^3.0.0-alpha.37",
-    "@react-aria/button": "^3.14.0",
-    "@react-aria/combobox": "^3.13.0",
-    "@react-aria/dialog": "^3.5.28",
-    "@react-aria/dnd": "^3.11.0",
-    "@react-aria/focus": "^3.21.0",
-    "@react-aria/i18n": "^3.12.11",
-    "@react-aria/interactions": "^3.25.4",
-    "@react-aria/label": "^3.7.20",
-    "@react-aria/numberfield": "^3.12.0",
-    "@react-aria/overlays": "^3.28.0",
-    "@react-aria/tag": "^3.7.0",
-    "@react-aria/utils": "^3.30.0",
-    "@react-aria/visually-hidden": "^3.8.26",
+    "@danske/sapphire-css": "^42.1.0",
+    "@internationalized/date": "^3.9.0",
+    "@internationalized/string": "^3.2.7",
+    "@react-aria/accordion": "3.0.0-alpha.37",
+    "@react-aria/button": "^3.14.1",
+    "@react-aria/combobox": "^3.13.1",
+    "@react-aria/dialog": "^3.5.29",
+    "@react-aria/dnd": "^3.11.1",
+    "@react-aria/focus": "^3.21.1",
+    "@react-aria/i18n": "^3.12.12",
+    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/label": "^3.7.21",
+    "@react-aria/numberfield": "^3.12.1",
+    "@react-aria/overlays": "^3.29.0",
+    "@react-aria/progress": "^3.4.26",
+    "@react-aria/tag": "^3.7.1",
+    "@react-aria/utils": "^3.30.1",
+    "@react-aria/visually-hidden": "^3.8.27",
     "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/collections": "^3.12.6",
-    "@react-stately/combobox": "^3.11.0",
-    "@react-stately/list": "^3.12.4",
-    "@react-stately/numberfield": "^3.10.0",
-    "@react-stately/toggle": "^3.9.0",
-    "@react-stately/tree": "^3.9.1",
+    "@react-stately/collections": "^3.12.7",
+    "@react-stately/combobox": "^3.11.1",
+    "@react-stately/list": "^3.13.0",
+    "@react-stately/numberfield": "^3.10.1",
+    "@react-stately/toggle": "^3.9.1",
+    "@react-stately/tree": "^3.9.2",
     "@react-stately/utils": "^3.10.8",
-    "@react-types/dialog": "^3.5.20",
-    "@react-types/shared": "^3.31.0",
+    "@react-types/dialog": "^3.5.21",
+    "@react-types/shared": "^3.32.0",
     "clsx": "^1.1.1",
+    "react-aria-components": "^1.12.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "4cb9fa793fcb43b74fe8b925c7810d9cd76ba1f9"
+  "gitHead": "1eefb683b16687ab3fc99c15fffb03a3eca522c5"
 }