@dnb/eufemia 10.69.0 → 10.70.0

package/cjs/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss

@@ -8,20 +8,19 @@
 .dnb-avatar {
   --avatar-font-size--large: var(--font-size-x-large);
   --avatar-font-size--x-large: var(--font-size-x-large);
-
-  color: var(--sb-color-white);
+  --color: var(--sb-color-white);
 
   &--primary {
-    background-color: var(--sb-color-purple-alternative);
+    --background-color: var(--sb-color-purple-alternative);
   }
 
   &--secondary {
-    background-color: var(--sb-color-violet-light);
+    --background-color: var(--sb-color-violet-light);
   }
 
   &--tertiary {
-    background-color: var(--sb-color-violet-light-2);
-    color: var(--sb-color-purple-alternative);
+    --background-color: var(--sb-color-violet-light-2);
+    --color: var(--sb-color-purple-alternative);
   }
 
   &--size-large {

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.css

@@ -6,15 +6,15 @@
  * Utilities
  */
 .dnb-avatar {
-  color: var(--color-pistachio);
+  --color: var(--color-pistachio);
 }
 .dnb-avatar--primary {
-  background-color: var(--color-emerald-green);
+  --background-color: var(--color-emerald-green);
 }
 .dnb-avatar--secondary {
-  background-color: var(--color-sea-green);
+  --background-color: var(--color-sea-green);
 }
 .dnb-avatar--tertiary {
-  background-color: var(--color-mint-green);
-  color: var(--color-emerald-green);
+  --background-color: var(--color-mint-green);
+  --color: var(--color-emerald-green);
 }

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.min.css

@@ -1 +1 @@
-.dnb-avatar{color:var(--color-pistachio)}.dnb-avatar--primary{background-color:var(--color-emerald-green)}.dnb-avatar--secondary{background-color:var(--color-sea-green)}.dnb-avatar--tertiary{background-color:var(--color-mint-green);color:var(--color-emerald-green)}
+.dnb-avatar{--color:var(--color-pistachio)}.dnb-avatar--primary{--background-color:var(--color-emerald-green)}.dnb-avatar--secondary{--background-color:var(--color-sea-green)}.dnb-avatar--tertiary{--background-color:var(--color-mint-green);--color:var(--color-emerald-green)}

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.scss

@@ -6,18 +6,18 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-avatar {
-  color: var(--color-pistachio);
+  --color: var(--color-pistachio);
 
   &--primary {
-    background-color: var(--color-emerald-green);
+    --background-color: var(--color-emerald-green);
   }
 
   &--secondary {
-    background-color: var(--color-sea-green);
+    --background-color: var(--color-sea-green);
   }
 
   &--tertiary {
-    background-color: var(--color-mint-green);
-    color: var(--color-emerald-green);
+    --background-color: var(--color-mint-green);
+    --color: var(--color-emerald-green);
   }
 }

package/cjs/components/badge/BadgeDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const BadgeProperties: PropertiesTableProps;

package/cjs/components/badge/BadgeDocs.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeProperties = void 0;
+const BadgeProperties = exports.BadgeProperties = {
+  content: {
+    doc: 'Content of the component.',
+    type: ['string', 'number', 'React.ReactNode'],
+    status: 'optional'
+  },
+  children: {
+    doc: 'Content to display the badge on top of.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'Vertical positioning of the component. Options: `bottom` | `top`.',
+    type: ['top', 'bottom'],
+    status: 'optional'
+  },
+  horizontal: {
+    doc: 'Horizontal positioning of the component. Options: `left` | `right`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  className: {
+    doc: 'Custom className for the component.',
+    type: ['string'],
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'Applies loading skeleton.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'defines the visual appearance of the badge. There are two main variants `notification` and `information`. The default variant is `information`.',
+    type: ['information', 'notification'],
+    status: 'optional'
+  },
+  label: {
+    doc: 'The label description of the badge. Only required when passing a number as the badge content.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=BadgeDocs.js.map

package/cjs/components/badge/BadgeDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeDocs.js","names":["BadgeProperties","exports","content","doc","type","status","children","vertical","horizontal","className","skeleton","variant","label"],"sources":["../../../../src/components/badge/BadgeDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BadgeProperties: PropertiesTableProps = {\n  content: {\n    doc: 'Content of the component.',\n    type: ['string', 'number', 'React.ReactNode'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content to display the badge on top of.',\n    type: ['React.ReactNode'],\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Vertical positioning of the component. Options: `bottom` | `top`.',\n    type: ['top', 'bottom'],\n    status: 'optional',\n  },\n  horizontal: {\n    doc: 'Horizontal positioning of the component. Options: `left` | `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component.',\n    type: ['string'],\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Applies loading skeleton.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'defines the visual appearance of the badge. There are two main variants `notification` and `information`. The default variant is `information`.',\n    type: ['information', 'notification'],\n    status: 'optional',\n  },\n  label: {\n    doc: 'The label description of the badge. Only required when passing a number as the badge content.',\n    type: ['React.ReactNode'],\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,eAAqC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACnDE,OAAO,EAAE;IACPC,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,yCAAyC;IAC9CC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDI,SAAS,EAAE;IACTN,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,OAAO,EAAE;IACPR,GAAG,EAAE,iJAAiJ;IACtJC,IAAI,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDO,KAAK,EAAE;IACLT,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/breadcrumb/BreadcrumbDocs.d.ts

@@ -0,0 +1,5 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const BreadcrumbProperties: PropertiesTableProps;
+export declare const BreadcrumbEvents: PropertiesTableProps;
+export declare const BreadcrumbItemProperties: PropertiesTableProps;
+export declare const BreadcrumbItemEvents: PropertiesTableProps;

package/cjs/components/breadcrumb/BreadcrumbDocs.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbProperties = exports.BreadcrumbItemProperties = exports.BreadcrumbItemEvents = exports.BreadcrumbEvents = void 0;
+const BreadcrumbProperties = exports.BreadcrumbProperties = {
+  data: {
+    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',
+    type: 'Array<BreadcrumbItemProps>',
+    status: 'optional'
+  },
+  children: {
+    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  variant: {
+    doc: "Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .",
+    type: ['responsive', 'single', 'multiple', 'collapse'],
+    status: 'optional'
+  },
+  href: {
+    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',
+    type: 'string',
+    status: 'optional'
+  },
+  navText: {
+    doc: 'Every `<nav>` on a page needs an unique aria-label text.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  goBackText: {
+    doc: "Override with a custom 'Back' text for variant `single` (Not recommended).",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  homeText: {
+    doc: "Override with a custom 'Home' text (Not recommended)",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  backToText: {
+    doc: "Override with a custom 'Back to...' text (Not recommended).",
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  styleType: {
+    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',
+    type: 'Various',
+    status: 'optional'
+  },
+  collapsedStyleType: {
+    doc: 'Use one of the Section component variants. Defaults to `info`.',
+    type: ['error', 'info', 'warning', 'success'],
+    status: 'optional'
+  },
+  className: {
+    doc: 'Custom className for the component root.',
+    type: 'string',
+    status: 'optional'
+  },
+  isCollapsed: {
+    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  spacing: {
+    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',
+    type: 'Various',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+const BreadcrumbEvents = exports.BreadcrumbEvents = {
+  onClick: {
+    doc: 'will be called by user click interaction, to handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+const BreadcrumbItemProperties = exports.BreadcrumbItemProperties = {
+  text: {
+    doc: 'Text displaying inside Breadcrumb item.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'The component variant. Options: `home` | `previous` | `current`.',
+    type: ['home', 'previous', 'current'],
+    status: 'optional'
+  },
+  icon: {
+    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  href: {
+    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+const BreadcrumbItemEvents = exports.BreadcrumbItemEvents = {
+  onClick: {
+    doc: 'will be called by user click interaction.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=BreadcrumbDocs.js.map

package/cjs/components/breadcrumb/BreadcrumbDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbDocs.js","names":["BreadcrumbProperties","exports","data","doc","type","status","children","variant","href","navText","goBackText","homeText","backToText","styleType","collapsedStyleType","className","isCollapsed","spacing","skeleton","BreadcrumbEvents","onClick","BreadcrumbItemProperties","text","icon","BreadcrumbItemEvents"],"sources":["../../../../src/components/breadcrumb/BreadcrumbDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BreadcrumbProperties: PropertiesTableProps = {\n  data: {\n    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',\n    type: 'Array<BreadcrumbItemProps>',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: \"Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .\",\n    type: ['responsive', 'single', 'multiple', 'collapse'],\n    status: 'optional',\n  },\n  href: {\n    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',\n    type: 'string',\n    status: 'optional',\n  },\n  navText: {\n    doc: 'Every `<nav>` on a page needs an unique aria-label text.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  goBackText: {\n    doc: \"Override with a custom 'Back' text for variant `single` (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  homeText: {\n    doc: \"Override with a custom 'Home' text (Not recommended)\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  backToText: {\n    doc: \"Override with a custom 'Back to...' text (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  styleType: {\n    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  collapsedStyleType: {\n    doc: 'Use one of the Section component variants. Defaults to `info`.',\n    type: ['error', 'info', 'warning', 'success'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component root.',\n    type: 'string',\n    status: 'optional',\n  },\n  isCollapsed: {\n    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction, to handle click event on \"Back\" for variant `single` and \"Back to...\" for variant `collapse`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemProperties: PropertiesTableProps = {\n  text: {\n    doc: 'Text displaying inside Breadcrumb item.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'The component variant. Options: `home` | `previous` | `current`.',\n    type: ['home', 'previous', 'current'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  href: {\n    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,oBAA0C,GAAAC,OAAA,CAAAD,oBAAA,GAAG;EACxDE,IAAI,EAAE;IACJC,GAAG,EAAE,iMAAiM;IACtMC,IAAI,EAAE,4BAA4B;IAClCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,yHAAyH;IAC9HC,IAAI,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,CAAC;IACtDC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,qGAAqG;IAC1GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,UAAU,EAAE;IACVT,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,kBAAkB,EAAE;IAClBX,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDU,SAAS,EAAE;IACTZ,GAAG,EAAE,0CAA0C;IAC/CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,WAAW,EAAE;IACXb,GAAG,EAAE,sIAAsI;IAC3IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,OAAO,EAAE;IACPd,GAAG,EAAE,2KAA2K;IAChLC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAEM,MAAMc,gBAAsC,GAAAlB,OAAA,CAAAkB,gBAAA,GAAG;EACpDC,OAAO,EAAE;IACPjB,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC;AAEM,MAAMgB,wBAA8C,GAAApB,OAAA,CAAAoB,wBAAA,GAAG;EAC5DC,IAAI,EAAE;IACJnB,GAAG,EAAE,yCAAyC;IAC9CC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDkB,IAAI,EAAE;IACJpB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAEM,MAAMmB,oBAA0C,GAAAvB,OAAA,CAAAuB,oBAAA,GAAG;EACxDJ,OAAO,EAAE;IACPjB,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/button/Button.d.ts

@@ -160,9 +160,6 @@ export type ButtonProps = {
    * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.
    */
   element?: ButtonElement;
-  /**
-   * Will be called on a click event. Returns an object with the native event: `{ event }`.
-   */
   on_click?: ButtonOnClick;
 } & Partial<
   DataAttributeTypes &

package/cjs/components/button/ButtonDocs.d.ts

@@ -1,2 +1,3 @@
 import { PropertiesTableProps } from '../../shared/types';
 export declare const ButtonProperties: PropertiesTableProps;
+export declare const ButtonEvents: PropertiesTableProps;

package/cjs/components/button/ButtonDocs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonProperties = void 0;
+exports.ButtonProperties = exports.ButtonEvents = void 0;
 const ButtonProperties = exports.ButtonProperties = {
   type: {
     doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',
@@ -131,4 +131,11 @@ const ButtonProperties = exports.ButtonProperties = {
     status: 'optional'
   }
 };
+const ButtonEvents = exports.ButtonEvents = {
+  on_click: {
+    doc: 'will be called on a click event. Returns an object with the native event: `{ event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
 //# sourceMappingURL=ButtonDocs.js.map

package/cjs/components/button/ButtonDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDocs.js","names":["ButtonProperties","exports","type","doc","status","text","title","variant","size","icon","icon_position","icon_size","href","target","rel","to","wrap","stretch","bounding","element","custom_content","skeleton","tooltip","status_state","status_props","globalStatus"],"sources":["../../../../src/components/button/ButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ButtonProperties: PropertiesTableProps = {\n  type: {\n    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',\n    type: ['button', 'reset', 'submit'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'The content of the button can be a string or a React Element.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  'aria-label': {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',\n    type: ['small', 'medium', 'default', 'large'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',\n    type: ['left', 'right', 'top'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  href: {\n    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',\n    type: 'string',\n    status: 'optional',\n  },\n  target: {\n    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',\n    type: ['_self', '_blank', '_parent', '_top'],\n    status: 'optional',\n  },\n  rel: {\n    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',\n    type: 'string',\n    status: 'optional',\n  },\n  to: {\n    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',\n    type: 'string',\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bounding: {\n    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',\n    type: 'string',\n    status: 'optional',\n  },\n  custom_content: {\n    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Provide a string or a React Element to be shown as the tooltip content.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Set it to either `status=\"error\"` or a text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ButtonDocs.js","names":["ButtonProperties","exports","type","doc","status","text","title","variant","size","icon","icon_position","icon_size","href","target","rel","to","wrap","stretch","bounding","element","custom_content","skeleton","tooltip","status_state","status_props","globalStatus","ButtonEvents","on_click"],"sources":["../../../../src/components/button/ButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ButtonProperties: PropertiesTableProps = {\n  type: {\n    doc: 'The type HTML attribute. Defaults to `button` for legacy reasons.',\n    type: ['button', 'reset', 'submit'],\n    status: 'optional',\n  },\n  text: {\n    doc: 'The content of the button can be a string or a React Element.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  'aria-label': {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Required if there is no text in the button. If `text` and `children` are undefined, setting the `title` property will automatically set `aria-label` with the same value.',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the button. For now there is `small`, `medium`, `default` and `large`.',\n    type: ['small', 'medium', 'default', 'large'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the button. [Primary Icons](/icons/primary) can be set as a string (e.g. `icon=\"chevron_right\"`), other icons should be set as React elements.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.',\n    type: ['left', 'right', 'top'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  href: {\n    doc: 'If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.',\n    type: 'string',\n    status: 'optional',\n  },\n  target: {\n    doc: 'When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.',\n    type: ['_self', '_blank', '_parent', '_top'],\n    status: 'optional',\n  },\n  rel: {\n    doc: 'When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.',\n    type: 'string',\n    status: 'optional',\n  },\n  to: {\n    doc: 'Use this property only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',\n    type: 'string',\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'Set it to `true` in order to stretch the button to the available space. Defaults to false.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bounding: {\n    doc: 'Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.',\n    type: 'string',\n    status: 'optional',\n  },\n  custom_content: {\n    doc: 'If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Provide a string or a React Element to be shown as the tooltip content.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Set it to either `status=\"error\"` or a text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const ButtonEvents: PropertiesTableProps = {\n  on_click: {\n    doc: 'will be called on a click event. Returns an object with the native event: `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/date-picker/DatePickerAddon.js

@@ -25,7 +25,6 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function DatePickerAddon(props) {
   const {
     updateDates,
-    forceViewMonthChange,
     callOnChangeHandler,
     hidePicker,
     startDate,
@@ -50,13 +49,12 @@ function DatePickerAddon(props) {
       startDate,
       endDate
     });
-    forceViewMonthChange();
     callOnChangeHandler({
       startDate,
       endDate: endDate || startDate,
       event
     });
-  }, [updateDates, callOnChangeHandler, forceViewMonthChange]);
+  }, [updateDates, callOnChangeHandler]);
   const setDate = (0, _react.useCallback)(_ref => {
     let {
       shortcut,

package/cjs/components/date-picker/DatePickerAddon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerAddon.js","names":["_react","_interopRequireWildcard","require","_DatePickerCalc","_Button","_interopRequireDefault","_DatePickerContext","_Fragment","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_objectWithoutProperties","o","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","ownKeys","keys","filter","enumerable","push","apply","_objectSpread","arguments","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","DatePickerAddon","props","updateDates","forceViewMonthChange","callOnChangeHandler","hidePicker","startDate","endDate","useContext","DatePickerContext","shortcuts","renderElement","currentDates","useMemo","date","start_date","end_date","callOnChange","useCallback","event","undefined","setDate","_ref","shortcut","convertStringToDate","close_on_select","focusOnHide","shortcutsArray","JSON","parse","hasShortcuts","shortcutElements","createElement","Fragment","map","_ref2","title","key","text","variant","onClick","className","_default","exports"],"sources":["../../../../src/components/date-picker/DatePickerAddon.tsx"],"sourcesContent":["/**\n * Web DatePicker Component\n *\n */\n\nimport React, { useCallback, useContext, useMemo } from 'react'\nimport { convertStringToDate } from './DatePickerCalc'\nimport Button from '../button/Button'\nimport DatePickerContext from './DatePickerContext'\n\n// TODO: convert shortcut properties to camelCase, constitutes a breaking change - could be included in v11\nexport type DatePickerShortcut = {\n  title?: string\n  date?: string | Date | ((...args: unknown[]) => Date)\n  start_date?: string | Date | ((...args: unknown[]) => Date)\n  end_date?: string | Date | ((...args: unknown[]) => Date)\n  close_on_select?: boolean\n}\n\nexport type DatePickerAddonProps = React.HTMLProps<HTMLElement> & {\n  /**\n   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.\n   */\n  shortcuts?: Array<DatePickerShortcut> | string\n  renderElement?: React.ReactNode\n}\n\nfunction DatePickerAddon(props: DatePickerAddonProps) {\n  const {\n    updateDates,\n    forceViewMonthChange,\n    callOnChangeHandler,\n    hidePicker,\n    startDate,\n    endDate,\n  } = useContext(DatePickerContext)\n\n  const { shortcuts, renderElement } = props\n\n  const currentDates = useMemo(\n    () => ({\n      date: startDate,\n      start_date: startDate,\n      end_date: endDate,\n    }),\n    [startDate, endDate]\n  )\n\n  const callOnChange = useCallback(\n    ({\n      startDate,\n      endDate,\n      event = null,\n    }: {\n      startDate?: Date\n      endDate?: Date\n      event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    } = {}) => {\n      updateDates({ startDate, endDate })\n      forceViewMonthChange()\n      callOnChangeHandler({\n        startDate,\n        endDate: endDate || startDate,\n        event,\n      })\n    },\n    [updateDates, callOnChangeHandler, forceViewMonthChange]\n  )\n\n  const setDate = useCallback(\n    ({\n      shortcut,\n      event,\n    }: {\n      shortcut: DatePickerShortcut\n      event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    }) => {\n      const start_date = shortcut.date || shortcut.start_date\n      const end_date = shortcut.end_date\n\n      const startDate =\n        typeof start_date === 'function'\n          ? start_date(currentDates)\n          : start_date\n          ? convertStringToDate(start_date)\n          : null\n\n      const endDate =\n        typeof end_date === 'function'\n          ? end_date(currentDates)\n          : end_date\n          ? convertStringToDate(end_date)\n          : null\n\n      callOnChange({\n        startDate,\n        endDate: endDate || startDate,\n        event,\n      })\n\n      if (shortcut.close_on_select) {\n        hidePicker({ ...event, focusOnHide: true })\n      }\n    },\n    [callOnChange, currentDates, hidePicker]\n  )\n\n  const shortcutsArray: Array<DatePickerShortcut> = useMemo(\n    () =>\n      shortcuts\n        ? typeof shortcuts === 'string'\n          ? JSON.parse(shortcuts)\n          : shortcuts\n        : [],\n    [shortcuts]\n  )\n\n  const hasShortcuts = shortcutsArray && shortcutsArray.length > 0\n\n  const shortcutElements = useMemo(\n    () =>\n      hasShortcuts && (\n        <>\n          {shortcutsArray.map(({ title, ...shortcut }, i: number) => {\n            return (\n              <Button\n                key={i}\n                text={title}\n                variant=\"secondary\"\n                onClick={(event) => setDate({ shortcut, event })}\n              />\n            )\n          })}\n        </>\n      ),\n    [hasShortcuts, shortcutsArray, setDate]\n  )\n\n  if (!hasShortcuts && !renderElement) {\n    return <></>\n  }\n\n  return (\n    <div className=\"dnb-date-picker__addon\">\n      {renderElement}\n      {shortcutElements}\n    </div>\n  )\n}\n\nexport default DatePickerAddon\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatePickerAddon.js","names":["_react","_interopRequireWildcard","require","_DatePickerCalc","_Button","_interopRequireDefault","_DatePickerContext","_Fragment","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_objectWithoutProperties","o","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","ownKeys","keys","filter","enumerable","push","apply","_objectSpread","arguments","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","DatePickerAddon","props","updateDates","callOnChangeHandler","hidePicker","startDate","endDate","useContext","DatePickerContext","shortcuts","renderElement","currentDates","useMemo","date","start_date","end_date","callOnChange","useCallback","event","undefined","setDate","_ref","shortcut","convertStringToDate","close_on_select","focusOnHide","shortcutsArray","JSON","parse","hasShortcuts","shortcutElements","createElement","Fragment","map","_ref2","title","key","text","variant","onClick","className","_default","exports"],"sources":["../../../../src/components/date-picker/DatePickerAddon.tsx"],"sourcesContent":["/**\n * Web DatePicker Component\n *\n */\n\nimport React, { useCallback, useContext, useMemo } from 'react'\nimport { convertStringToDate } from './DatePickerCalc'\nimport Button from '../button/Button'\nimport DatePickerContext from './DatePickerContext'\n\n// TODO: convert shortcut properties to camelCase, constitutes a breaking change - could be included in v11\nexport type DatePickerShortcut = {\n  title?: string\n  date?: string | Date | ((...args: unknown[]) => Date)\n  start_date?: string | Date | ((...args: unknown[]) => Date)\n  end_date?: string | Date | ((...args: unknown[]) => Date)\n  close_on_select?: boolean\n}\n\nexport type DatePickerAddonProps = React.HTMLProps<HTMLElement> & {\n  /**\n   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.\n   */\n  shortcuts?: Array<DatePickerShortcut> | string\n  renderElement?: React.ReactNode\n}\n\nfunction DatePickerAddon(props: DatePickerAddonProps) {\n  const {\n    updateDates,\n    callOnChangeHandler,\n    hidePicker,\n    startDate,\n    endDate,\n  } = useContext(DatePickerContext)\n\n  const { shortcuts, renderElement } = props\n\n  const currentDates = useMemo(\n    () => ({\n      date: startDate,\n      start_date: startDate,\n      end_date: endDate,\n    }),\n    [startDate, endDate]\n  )\n\n  const callOnChange = useCallback(\n    ({\n      startDate,\n      endDate,\n      event = null,\n    }: {\n      startDate?: Date\n      endDate?: Date\n      event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    } = {}) => {\n      updateDates({ startDate, endDate })\n\n      callOnChangeHandler({\n        startDate,\n        endDate: endDate || startDate,\n        event,\n      })\n    },\n    [updateDates, callOnChangeHandler]\n  )\n\n  const setDate = useCallback(\n    ({\n      shortcut,\n      event,\n    }: {\n      shortcut: DatePickerShortcut\n      event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    }) => {\n      const start_date = shortcut.date || shortcut.start_date\n      const end_date = shortcut.end_date\n\n      const startDate =\n        typeof start_date === 'function'\n          ? start_date(currentDates)\n          : start_date\n          ? convertStringToDate(start_date)\n          : null\n\n      const endDate =\n        typeof end_date === 'function'\n          ? end_date(currentDates)\n          : end_date\n          ? convertStringToDate(end_date)\n          : null\n\n      callOnChange({\n        startDate,\n        endDate: endDate || startDate,\n        event,\n      })\n\n      if (shortcut.close_on_select) {\n        hidePicker({ ...event, focusOnHide: true })\n      }\n    },\n    [callOnChange, currentDates, hidePicker]\n  )\n\n  const shortcutsArray: Array<DatePickerShortcut> = useMemo(\n    () =>\n      shortcuts\n        ? typeof shortcuts === 'string'\n          ? JSON.parse(shortcuts)\n          : shortcuts\n        : [],\n    [shortcuts]\n  )\n\n  const hasShortcuts = shortcutsArray && shortcutsArray.length > 0\n\n  const shortcutElements = useMemo(\n    () =>\n      hasShortcuts && (\n        <>\n          {shortcutsArray.map(({ title, ...shortcut }, i: number) => {\n            return (\n              <Button\n                key={i}\n                text={title}\n                variant=\"secondary\"\n                onClick={(event) => setDate({ shortcut, event })}\n              />\n            )\n          })}\n        </>\n      ),\n    [hasShortcuts, shortcutsArray, setDate]\n  )\n\n  if (!hasShortcuts && !renderElement) {\n    return <></>\n  }\n\n  return (\n    <div className=\"dnb-date-picker__addon\">\n      {renderElement}\n      {shortcutElements}\n    </div>\n  )\n}\n\nexport default DatePickerAddon\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/date-picker/DatePickerCalc.d.ts

@@ -2,6 +2,8 @@
  * Web DatePicker Component
  *
  */
+import { AnyLocale } from '../../shared/Context';
+import { DateType } from './DatePickerContext';
 type ZeroDayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export declare function makeDayObject(date: Date, { startDate, endDate, hoverDate, minDate, maxDate, month, }: Record<string, Date>): {
     date: Date;
@@ -33,3 +35,14 @@ export declare function correctV1Format(date: string): string;
 export declare function convertStringToDate(date: string | Date, { dateFormat }?: {
     dateFormat?: string | null;
 }): Date;
+export type FormatDateOptions = {
+    locale?: AnyLocale;
+    variant?: 'long' | 'short' | 'numeric';
+    formatOptions?: Intl.DateTimeFormatOptions;
+};
+export declare function formatDate(dateValue: DateType, { locale, variant, formatOptions, }?: FormatDateOptions): string;
+export declare function formatDateRange(dates: {
+    startDate: DateType;
+    endDate: DateType;
+}, { locale, variant, formatOptions, }?: FormatDateOptions): string;
+export declare function getFormatOptions(variant: FormatDateOptions['variant']): Intl.DateTimeFormatOptions;

package/cjs/components/date-picker/DatePickerCalc.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.convertStringToDate = convertStringToDate;
 exports.correctV1Format = correctV1Format;
 exports.dayOffset = dayOffset;
+exports.formatDate = formatDate;
+exports.formatDateRange = formatDateRange;
 exports.getCalendar = getCalendar;
+exports.getFormatOptions = getFormatOptions;
 exports.getMonth = getMonth;
 exports.getWeek = getWeek;
 exports.isDisabled = isDisabledCalc;
@@ -33,6 +36,7 @@ var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _parse = _interopRequireDefault(require("date-fns/parse"));
 var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
 var _componentHelper = require("../../shared/component-helper");
+var _defaults = require("../../shared/defaults");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const calendarCache = {};
 function makeDayObject(date, _ref) {
@@ -186,4 +190,44 @@ function convertStringToDate(date) {
   }
   return dateObject;
 }
+function formatDate(dateValue) {
+  let {
+    locale = _defaults.LOCALE,
+    variant = 'numeric',
+    formatOptions = undefined
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const options = formatOptions !== null && formatOptions !== void 0 ? formatOptions : getFormatOptions(variant);
+  const date = convertStringToDate(dateValue);
+  return typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, options).format(date) : date.toLocaleString(locale, options);
+}
+function formatDateRange(dates) {
+  let {
+    locale = _defaults.LOCALE,
+    variant = 'numeric',
+    formatOptions = undefined
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const options = formatOptions !== null && formatOptions !== void 0 ? formatOptions : getFormatOptions(variant);
+  const startDate = convertStringToDate(dates.startDate);
+  const endDate = convertStringToDate(dates.endDate);
+  if (typeof Intl !== 'undefined') {
+    return new Intl.DateTimeFormat(locale, options).formatRange(startDate, endDate);
+  }
+  const startDateString = startDate.toLocaleString(locale, options);
+  const endDateString = endDate.toLocaleString(locale, options);
+  return `${startDateString}-${endDateString}`;
+}
+function getFormatOptions(variant) {
+  if (variant === 'numeric') {
+    return {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    };
+  }
+  return {
+    day: 'numeric',
+    month: variant,
+    year: 'numeric'
+  };
+}
 //# sourceMappingURL=DatePickerCalc.js.map