@dnb/eufemia 10.22.0 → 10.23.0

package/components/table/TableScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB"}
+{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive","_supportsSpacingProps"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n\nTableScrollView._supportsSpacingProps = true\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB;AAEAH,eAAe,CAACU,qBAAqB,GAAG,IAAI"}

package/components/table/TableTr.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TableTdProps } from './TableTd';
 import TableAccordionTr from './TableAccordionTr';
 export type TableTrProps = {
     /**
@@ -47,7 +46,7 @@ export type TableTrProps = {
     /**
      * The content of the component.
      */
-    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
+    children: React.ReactNode;
 };
 declare function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Tr {

package/components/table/TableTr.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","TableAccordionTr","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","isLast","useHandleTrVariant","accordionTr","createElement","_extends","role","_ref","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableTdProps } from './TableTd'\nimport { TableContext } from './TableContext'\nimport TableAccordionTr from './TableAccordionTr'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableTdProps>\n    | Array<React.ReactElement<TableTdProps>>\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant, isLast } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionTr\n"],"mappings":"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"}
+{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","TableAccordionTr","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","isLast","useHandleTrVariant","accordionTr","createElement","_extends","role","_ref","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableContext } from './TableContext'\nimport TableAccordionTr from './TableAccordionTr'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant, isLast } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionTr\n"],"mappings":"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"}

package/components/table/style/dnb-table.css

@@ -103,6 +103,10 @@
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
 }
+.dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
   color: var(--color-sea-green);
 }
@@ -133,7 +137,7 @@ html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-tab
   line-height: inherit;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
-  right: 1rem;
+  right: 0;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
   align-self: flex-end;
@@ -245,6 +249,9 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
   padding-right: 0.5rem;
 }
+.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
   padding-right: 0;
 }

package/components/table/style/dnb-table.min.css

@@ -1 +1 @@
-.dnb-table,.dnb-table__container{--table-border-width:0.0625rem;--table-border:var(--table-border-width) solid var(--table-border-color);--table-outline-width:0.0625rem;--table-outline:var(--table-outline-width) solid var(--table-outline-color);--table-outline-radius:0.5rem}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:.5rem;margin-top:0;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed;width:auto}.dnb-table--no-wrap{white-space:nowrap}.dnb-table>caption{background-color:var(--color-white);caption-side:bottom;font-size:var(--font-size-basis);padding:.5rem 0 .5rem 1rem;position:relative;text-align:left}.dnb-table>caption:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;right:0;top:0;top:calc(var(--table-border-width)*-1);z-index:1}.dnb-table>caption:last-child:after{right:0}.dnb-table--outline{-webkit-clip-path:inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);clip-path:inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);position:relative;z-index:1}.dnb-table--outline,.dnb-table--outline:after{border-radius:var(--table-outline-radius)}.dnb-table--outline:after{border:var(--table-outline);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1;z-index:3}.dnb-table--outline>caption,.dnb-table--outline>caption:after{border-radius:0 0 var(--table-outline-radius) var(--table-outline-radius)}.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child{-webkit-clip-path:none;clip-path:none}.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th:before{border-radius:0}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:var(--skeleton-color)}.dnb-table .dnb-table__th.dnb-table--sortable,.dnb-table>thead>tr>th.dnb-table--sortable{color:var(--color-sea-green)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{align-items:flex-end;box-shadow:none;color:inherit;font-size:inherit;font-weight:var(--font-weight-medium);line-height:inherit;margin:0;padding:0 .5rem 0 0;position:relative;text-align:inherit;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon{opacity:0;transition:opacity .2s ease-out,transform .5s ease-out}html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon,html[data-visual-test] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon{transition:none}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text{font-size:inherit;line-height:inherit;margin:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{right:1rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon{align-self:flex-end;margin-bottom:.25rem;margin-top:auto}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--color-sea-green);opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}:not(.dnb-table--active) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon{opacity:1}html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after{color:inherit;opacity:1}html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:visible}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--color-sea-green)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;height:inherit;left:-.5rem;outline:none;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--sortable[align=right],.dnb-table>thead>tr>th.dnb-table--sortable[align=right]{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button{flex-direction:row-reverse}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text{padding-right:0}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after{right:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--color-sea-green);opacity:1}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:visible}html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon{transform:rotate(180deg);transform-origin:50% 50%}.dnb-table .dnb-table__th .dnb-table__help-button,.dnb-table>thead>tr>th .dnb-table__help-button{margin-left:.5rem}.dnb-table>thead>.dnb-table--no-wrap .dnb-table__sort-button{white-space:nowrap}.dnb-table__th__horizontal{align-items:flex-end;display:flex}.dnb-table--border tbody .dnb-table__td:after,.dnb-table--border tbody .dnb-table__th:after{border:var(--table-border);border-bottom:none;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table--border tbody .dnb-table__td:last-child:after,.dnb-table--border tbody .dnb-table__th:last-child:after{right:0}.dnb-table--border tbody .dnb-table__td:first-child:after,.dnb-table--border tbody .dnb-table__th:first-child:after{border-left:none}.dnb-table--border tbody .dnb-table__td:last-child:after,.dnb-table--border tbody .dnb-table__th:last-child:after{border-right:none}.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:none}.dnb-table--border thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table--border thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border)}.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child:before{border-top-left-radius:var(--table-outline-radius)}.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child:before{border-top-right-radius:var(--table-outline-radius)}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child{-webkit-clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius))}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child:before{border-bottom-left-radius:var(--table-outline-radius)}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child:before{border-bottom-right-radius:var(--table-outline-radius)}.dnb-table td.dnb-table__td--no-spacing,.dnb-table__td--no-spacing{padding:0}.dnb-table td.dnb-table__td--spacing-horizontal,.dnb-table__td--spacing-horizontal{padding-bottom:0;padding-top:0}.dnb-table .dnb-table__tr,.dnb-table .dnb-table__tr--even,.dnb-table>tbody>tr{background-color:var(--color-black-3)}.dnb-table .dnb-table__tr--odd,.dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n),.dnb-table>tbody>tr:not(.dnb-table__tr--even):nth-of-type(2n){background-color:var(--color-white)}.dnb-table tbody td,.dnb-table thead th,.dnb-table__td,.dnb-table__th{border-spacing:0;position:relative;word-break:keep-all}.dnb-table tr.sticky{position:sticky;transform:translate3d(0,var(--table-offset,0),0);z-index:4}.dnb-table tr.sticky.css-position{top:var(--table-top,0)}.dnb-table tr.sticky.is-sticky th:before{bottom:0;box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);-webkit-clip-path:inset(6px 0 -48px 0);clip-path:inset(6px 0 -48px 0);content:"";height:6px;left:0;position:absolute;right:0}.dnb-table__container{position:relative}.dnb-table__container:after{border:var(--table-outline);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1;z-index:3}.dnb-table__container,.dnb-table__container:after{border-radius:var(--table-outline-radius)}.dnb-table__container,.dnb-table__container__body,.dnb-table__container__foot,.dnb-table__container__head{display:flex;flex-direction:column}.dnb-table__container__body .dnb-table{position:relative}.dnb-table__container__body .dnb-table:not([class*=space__bottom]){margin-bottom:0}.dnb-table__container__body .dnb-table__size--large .dnb-table__th{padding-top:1.5rem}.dnb-table__container__body .dnb-table:after{border-bottom:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:after,.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:after,.dnb-table__container__body .dnb-table>:not(thead)+tbody .dnb-table__tr:first-of-type .dnb-table__td:after,.dnb-table__container__body .dnb-table>:not(thead)+tbody .dnb-table__tr:first-of-type .dnb-table__th:after{border-top:none}.dnb-table__container__head{padding:2rem 1rem 0}.dnb-table__container__head--empty{min-height:1.5rem;padding:0}.dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]){margin:0}.dnb-table__container__foot{padding:1rem 1rem 1.25rem}.dnb-table__container__foot--empty{min-height:1rem;padding:0}.dnb-table__container .dnb-table__scroll-view{-webkit-clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius))}@supports (-webkit-appearance:none) and (not (-moz-appearance:meterbar)){.dnb-table__container:after{bottom:calc(var(--table-outline-width)*-1)}}.dnb-modal__content .dnb-table__container .dnb-table__scroll-view{overflow:visible}.dnb-table{--table-accordion-background:var(--color-white);--table-accordion-header-background:var(--color-white);--table-accordion-border-width:0.0625rem;--table-accordion-border-color:var(--color-black-20);--table-accordion-border:var(--table-accordion-border-width) solid var(--table-accordion-border-color);--table-accordion-icon-color:var(--color-sea-green);--table-accordion-icon-color--active:var(--color-emerald-green);--table-accordion-icon-color--disabled:var(--color-sea-green-30);--table-accordion-outline-color:var(--color-emerald-green);--table-accordion-outline-width:var(--focus-ring-width);--table-accordion-outline-background--active:var(--color-pistachio)}.dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th{padding:0}.dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__th.dnb-table__th__accordion-icon div{text-indent:-300vw;width:3.5rem}.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div{width:3rem}.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div{width:2.5rem}.dnb-table__td.dnb-table__td__accordion-icon{-webkit-user-select:none;user-select:none}.dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td{padding:0}.dnb-table__tr--has-accordion-content .dnb-table__toggle-button{display:flex;justify-content:center}.dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon{color:var(--table-accordion-icon-color);transition:transform .5s var(--easing-default)}.dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon,html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon{transition:none!important}.dnb-table__tr--has-accordion-content,.dnb-table__tr__accordion-content{position:relative}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded,.dnb-table__tr__accordion-content{z-index:3}.dnb-table__tr--has-accordion-content:active,.dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded),html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus{z-index:5}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon{transform:rotate(180deg)}.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:after{border-bottom:none;border-left:none;border-right:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled){outline:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:before{border:var(--table-accordion-outline-width) solid transparent;content:"";inset:0;pointer-events:none;position:absolute;z-index:3}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type):before{border-left:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type):before{border-right:none}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td:before{border-color:var(--table-accordion-outline-color)}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--active)}.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td:before{bottom:calc(var(--table-border-width)*-1)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td{background-color:var(--color-white)}html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:before{border-color:var(--focus-ring-color);border-width:var(--focus-ring-width)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type:before{left:0}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type:before{right:0}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td:before,html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td:before{border-color:var(--table-accordion-outline-color);border-width:var(--table-accordion-border-width)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td{background-color:var(--table-accordion-outline-background--active)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--active)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td{background-color:var(--table-accordion-header-background)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td:before{border:none;border-top:var(--table-accordion-border)}html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover){background-color:var(--table-accordion-header-background)}html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td:before{border:none;border-top:var(--table-accordion-border)}.dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--disabled)}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-table__tr__accordion-content[hidden]{display:block}}.dnb-table__tr__accordion-content__inner{overflow:hidden;position:relative;transition:height .4s var(--easing-default);will-change:height}.dnb-table__tr__accordion-content__inner__spacing{padding:1rem;transform:translateY(-10px);transition:transform .5s var(--easing-default)}.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing{transform:translateY(0)}html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing{transition:none}.dnb-table__tr__accordion-content--expanded>td.dnb-table__td{background-color:var(--color-white)}.dnb-table__tr__accordion-content--expanded+.dnb-table__tr--has-accordion-content .dnb-table__td:after{border-top:var(--table-accordion-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table__tr__accordion-content--expanded+.dnb-table__tr--has-accordion-content .dnb-table__td:last-child:after{right:0}.dnb-table__tr__accordion-content--single td{padding:0!important;width:calc(100% - 3.5rem)}.dnb-table__size--medium .dnb-table__tr__accordion-content--single td{width:calc(100% - 3rem)}.dnb-table__size--small .dnb-table__tr__accordion-content--single td{width:calc(100% - 2.5rem)}.dnb-table__tr__accordion-content--single td:before{border-bottom:var(--table-accordion-border);bottom:calc(var(--table-accordion-border-width)*-1);content:"";left:0;pointer-events:none;position:absolute;right:0;top:auto}.dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td:before{border-bottom:none}.dnb-table--border .dnb-table__tr__accordion-content--single td:after{border-top:none}.dnb-table__tr__accordion-content--single>td.dnb-table__td{padding:0}.dnb-table__tr__accordion-content--single>td.dnb-table__td .dnb-dl,.dnb-table__tr__accordion-content--single>td.dnb-table__td .dnb-dl dt{margin:0}.dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td{background-color:var(--table-accordion-background);vertical-align:top}.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled){cursor:pointer}.dnb-table__td-wrapper{display:flex}.dnb-spacing .dnb-table dl,.dnb-spacing .dnb-table ol,.dnb-spacing .dnb-table p,.dnb-spacing .dnb-table pre,.dnb-spacing .dnb-table ul{margin-bottom:0;margin-top:0}
+.dnb-table,.dnb-table__container{--table-border-width:0.0625rem;--table-border:var(--table-border-width) solid var(--table-border-color);--table-outline-width:0.0625rem;--table-outline:var(--table-outline-width) solid var(--table-outline-color);--table-outline-radius:0.5rem}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:.5rem;margin-top:0;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed;width:auto}.dnb-table--no-wrap{white-space:nowrap}.dnb-table>caption{background-color:var(--color-white);caption-side:bottom;font-size:var(--font-size-basis);padding:.5rem 0 .5rem 1rem;position:relative;text-align:left}.dnb-table>caption:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;right:0;top:0;top:calc(var(--table-border-width)*-1);z-index:1}.dnb-table>caption:last-child:after{right:0}.dnb-table--outline{-webkit-clip-path:inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);clip-path:inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);position:relative;z-index:1}.dnb-table--outline,.dnb-table--outline:after{border-radius:var(--table-outline-radius)}.dnb-table--outline:after{border:var(--table-outline);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1;z-index:3}.dnb-table--outline>caption,.dnb-table--outline>caption:after{border-radius:0 0 var(--table-outline-radius) var(--table-outline-radius)}.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child{-webkit-clip-path:none;clip-path:none}.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__td:before,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th:after,.dnb-table--outline>caption:not(.dnb-sr-only)~tbody:last-child .dnb-table__tr:last-child .dnb-table__th:before{border-radius:0}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:var(--skeleton-color)}.dnb-card .dnb-table{--table-outline-color:transparent;margin-bottom:0}.dnb-table .dnb-table__th.dnb-table--sortable,.dnb-table>thead>tr>th.dnb-table--sortable{color:var(--color-sea-green)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{align-items:flex-end;box-shadow:none;color:inherit;font-size:inherit;font-weight:var(--font-weight-medium);line-height:inherit;margin:0;padding:0 .5rem 0 0;position:relative;text-align:inherit;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon{opacity:0;transition:opacity .2s ease-out,transform .5s ease-out}html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon,html[data-visual-test] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button>.dnb-icon{transition:none}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text{font-size:inherit;line-height:inherit;margin:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{right:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon{align-self:flex-end;margin-bottom:.25rem;margin-top:auto}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--color-sea-green);opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}:not(.dnb-table--active) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,:not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon,html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon{opacity:1}html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after{color:inherit;opacity:1}html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:visible}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--color-sea-green)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;height:inherit;left:-.5rem;outline:none;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--sortable[align=right],.dnb-table>thead>tr>th.dnb-table--sortable[align=right]{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button{flex-direction:row-reverse}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right{padding-right:.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text{padding-right:0}.dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text:after{right:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--color-sea-green);opacity:1}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:visible}html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon{transform:rotate(180deg);transform-origin:50% 50%}.dnb-table .dnb-table__th .dnb-table__help-button,.dnb-table>thead>tr>th .dnb-table__help-button{margin-left:.5rem}.dnb-table>thead>.dnb-table--no-wrap .dnb-table__sort-button{white-space:nowrap}.dnb-table__th__horizontal{align-items:flex-end;display:flex}.dnb-table--border tbody .dnb-table__td:after,.dnb-table--border tbody .dnb-table__th:after{border:var(--table-border);border-bottom:none;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table--border tbody .dnb-table__td:last-child:after,.dnb-table--border tbody .dnb-table__th:last-child:after{right:0}.dnb-table--border tbody .dnb-table__td:first-child:after,.dnb-table--border tbody .dnb-table__th:first-child:after{border-left:none}.dnb-table--border tbody .dnb-table__td:last-child:after,.dnb-table--border tbody .dnb-table__th:last-child:after{border-right:none}.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:none}.dnb-table--border thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table--border thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border)}.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child:before{border-top-left-radius:var(--table-outline-radius)}.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline caption:first-child+tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child:before,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child:after,.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child:before{border-top-right-radius:var(--table-outline-radius)}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child{-webkit-clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius))}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child:before{border-bottom-left-radius:var(--table-outline-radius)}.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child:before,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child:after,.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child:before{border-bottom-right-radius:var(--table-outline-radius)}.dnb-table td.dnb-table__td--no-spacing,.dnb-table__td--no-spacing{padding:0}.dnb-table td.dnb-table__td--spacing-horizontal,.dnb-table__td--spacing-horizontal{padding-bottom:0;padding-top:0}.dnb-table .dnb-table__tr,.dnb-table .dnb-table__tr--even,.dnb-table>tbody>tr{background-color:var(--color-black-3)}.dnb-table .dnb-table__tr--odd,.dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n),.dnb-table>tbody>tr:not(.dnb-table__tr--even):nth-of-type(2n){background-color:var(--color-white)}.dnb-table tbody td,.dnb-table thead th,.dnb-table__td,.dnb-table__th{border-spacing:0;position:relative;word-break:keep-all}.dnb-table tr.sticky{position:sticky;transform:translate3d(0,var(--table-offset,0),0);z-index:4}.dnb-table tr.sticky.css-position{top:var(--table-top,0)}.dnb-table tr.sticky.is-sticky th:before{bottom:0;box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);-webkit-clip-path:inset(6px 0 -48px 0);clip-path:inset(6px 0 -48px 0);content:"";height:6px;left:0;position:absolute;right:0}.dnb-table__container{position:relative}.dnb-table__container:after{border:var(--table-outline);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1;z-index:3}.dnb-table__container,.dnb-table__container:after{border-radius:var(--table-outline-radius)}.dnb-table__container,.dnb-table__container__body,.dnb-table__container__foot,.dnb-table__container__head{display:flex;flex-direction:column}.dnb-table__container__body .dnb-table{position:relative}.dnb-table__container__body .dnb-table:not([class*=space__bottom]){margin-bottom:0}.dnb-table__container__body .dnb-table__size--large .dnb-table__th{padding-top:1.5rem}.dnb-table__container__body .dnb-table:after{border-bottom:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:after,.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:after,.dnb-table__container__body .dnb-table>:not(thead)+tbody .dnb-table__tr:first-of-type .dnb-table__td:after,.dnb-table__container__body .dnb-table>:not(thead)+tbody .dnb-table__tr:first-of-type .dnb-table__th:after{border-top:none}.dnb-table__container__head{padding:2rem 1rem 0}.dnb-table__container__head--empty{min-height:1.5rem;padding:0}.dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]){margin:0}.dnb-table__container__foot{padding:1rem 1rem 1.25rem}.dnb-table__container__foot--empty{min-height:1rem;padding:0}.dnb-table__container .dnb-table__scroll-view{-webkit-clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));clip-path:inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius))}@supports (-webkit-appearance:none) and (not (-moz-appearance:meterbar)){.dnb-table__container:after{bottom:calc(var(--table-outline-width)*-1)}}.dnb-modal__content .dnb-table__container .dnb-table__scroll-view{overflow:visible}.dnb-table{--table-accordion-background:var(--color-white);--table-accordion-header-background:var(--color-white);--table-accordion-border-width:0.0625rem;--table-accordion-border-color:var(--color-black-20);--table-accordion-border:var(--table-accordion-border-width) solid var(--table-accordion-border-color);--table-accordion-icon-color:var(--color-sea-green);--table-accordion-icon-color--active:var(--color-emerald-green);--table-accordion-icon-color--disabled:var(--color-sea-green-30);--table-accordion-outline-color:var(--color-emerald-green);--table-accordion-outline-width:var(--focus-ring-width);--table-accordion-outline-background--active:var(--color-pistachio)}.dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th{padding:0}.dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__th.dnb-table__th__accordion-icon div{text-indent:-300vw;width:3.5rem}.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div{width:3rem}.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon,.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div{width:2.5rem}.dnb-table__td.dnb-table__td__accordion-icon{-webkit-user-select:none;user-select:none}.dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td{padding:0}.dnb-table__tr--has-accordion-content .dnb-table__toggle-button{display:flex;justify-content:center}.dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon{color:var(--table-accordion-icon-color);transition:transform .5s var(--easing-default)}.dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon,html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon{transition:none!important}.dnb-table__tr--has-accordion-content,.dnb-table__tr__accordion-content{position:relative}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded,.dnb-table__tr__accordion-content{z-index:3}.dnb-table__tr--has-accordion-content:active,.dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded),html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus{z-index:5}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon{transform:rotate(180deg)}.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:after{border-bottom:none;border-left:none;border-right:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled){outline:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:before{border:var(--table-accordion-outline-width) solid transparent;content:"";inset:0;pointer-events:none;position:absolute;z-index:3}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type):before{border-left:none}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type):before{border-right:none}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td:before{border-color:var(--table-accordion-outline-color)}html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--active)}.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td:before{bottom:calc(var(--table-border-width)*-1)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td{background-color:var(--color-white)}html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:before{border-color:var(--focus-ring-color);border-width:var(--focus-ring-width)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type:before{left:0}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type:before{right:0}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td:before,html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td:before{border-color:var(--table-accordion-outline-color);border-width:var(--table-accordion-border-width)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td{background-color:var(--table-accordion-outline-background--active)}.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--active)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td{background-color:var(--table-accordion-header-background)}.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td:before{border:none;border-top:var(--table-accordion-border)}html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover){background-color:var(--table-accordion-header-background)}html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td:before{border:none;border-top:var(--table-accordion-border)}.dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon{color:var(--table-accordion-icon-color--disabled)}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-table__tr__accordion-content[hidden]{display:block}}.dnb-table__tr__accordion-content__inner{overflow:hidden;position:relative;transition:height .4s var(--easing-default);will-change:height}.dnb-table__tr__accordion-content__inner__spacing{padding:1rem;transform:translateY(-10px);transition:transform .5s var(--easing-default)}.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing{transform:translateY(0)}html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing{transition:none}.dnb-table__tr__accordion-content--expanded>td.dnb-table__td{background-color:var(--color-white)}.dnb-table__tr__accordion-content--expanded+.dnb-table__tr--has-accordion-content .dnb-table__td:after{border-top:var(--table-accordion-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table__tr__accordion-content--expanded+.dnb-table__tr--has-accordion-content .dnb-table__td:last-child:after{right:0}.dnb-table__tr__accordion-content--single td{padding:0!important;width:calc(100% - 3.5rem)}.dnb-table__size--medium .dnb-table__tr__accordion-content--single td{width:calc(100% - 3rem)}.dnb-table__size--small .dnb-table__tr__accordion-content--single td{width:calc(100% - 2.5rem)}.dnb-table__tr__accordion-content--single td:before{border-bottom:var(--table-accordion-border);bottom:calc(var(--table-accordion-border-width)*-1);content:"";left:0;pointer-events:none;position:absolute;right:0;top:auto}.dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td:before{border-bottom:none}.dnb-table--border .dnb-table__tr__accordion-content--single td:after{border-top:none}.dnb-table__tr__accordion-content--single>td.dnb-table__td{padding:0}.dnb-table__tr__accordion-content--single>td.dnb-table__td .dnb-dl,.dnb-table__tr__accordion-content--single>td.dnb-table__td .dnb-dl dt{margin:0}.dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td{background-color:var(--table-accordion-background);vertical-align:top}.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled){cursor:pointer}.dnb-table__td-wrapper{display:flex}.dnb-spacing .dnb-table dl,.dnb-spacing .dnb-table ol,.dnb-spacing .dnb-table p,.dnb-spacing .dnb-table pre,.dnb-spacing .dnb-table ul{margin-bottom:0;margin-top:0}

package/components/table/style/dnb-table.scss

@@ -66,7 +66,7 @@
           --table-outline-radius
         ) 0 0
     );
-    z-index: 1; // firefox places caption in from of table witout z-index
+    z-index: 1; // firefox places caption in from of table without z-index
 
     &,
     &::after {
@@ -107,6 +107,12 @@
     }
   }
 
+  // When used in a Card
+  .dnb-card & {
+    --table-outline-color: transparent;
+    margin-bottom: 0;
+  }
+
   @include buttonsInTable();
 }
 

package/components/table/style/table-header-buttons.scss

@@ -54,7 +54,7 @@
 
         // underline
         &::after {
-          right: 1rem;
+          right: 0;
         }
       }
 
@@ -137,6 +137,9 @@
         &--tertiary.dnb-button--icon-position-right {
           padding-right: 0.5rem;
 
+          .dnb-button__icon {
+            margin-left: -0.5rem;
+          }
           .dnb-button__text {
             padding-right: 0;
 

package/components/table/useTableAnimationHandler.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TableAccordionTrProps } from './TableAccordionTr';
 export type useTableAnimationHandlerProps = {
     /**
-     * Ref to <div> inside the <tr> element being exapanded/collapsed
+     * Ref to <div> inside the <tr> element being expanded/collapsed
      */
     innerRef: React.MutableRefObject<HTMLDivElement>;
     /**

package/components/table/useTableAnimationHandler.js

@@ -13,9 +13,9 @@ export function useTableAnimationHandler(_ref) {
   const [ariaLive, setAriaLive] = React.useState(null);
   const open = Boolean(expanded || (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen));
   const scrollViewHandler = useCallback(clip => {
-    const scollView = getClosestScrollViewElement(trRef.current);
-    if (scollView instanceof HTMLElement) {
-      scollView.style.overflow = clip ? 'clip' : '';
+    const scrollView = getClosestScrollViewElement(trRef.current);
+    if (scrollView instanceof HTMLElement) {
+      scrollView.style.overflow = clip ? 'clip' : '';
     }
   }, [trRef]);
   const onOpen = useCallback(state => {

package/components/table/useTableAnimationHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","_ref","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","scollView","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n  /**\n   * Ref to <div> inside the <tr> element being exapanded/collapsed\n   */\n  innerRef: React.MutableRefObject<HTMLDivElement>\n  /**\n   * Ref to the <tr> element being clicked\n   */\n  trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n  innerRef,\n  trRef,\n  expanded,\n  noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const [ariaLive, setAriaLive] = React.useState(null)\n  const open = Boolean(expanded || tableAccordionContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip: boolean) => {\n      const scollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scollView instanceof HTMLElement) {\n        scollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [trRef]\n  )\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationStart = useCallback(() => {\n    scrollViewHandler(true)\n  }, [scrollViewHandler])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          tableAccordionContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          tableAccordionContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, tableAccordionContext, trRef]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(\n        !noAnimation && !tableAccordionContext?.noAnimation\n      ),\n      onOpen,\n      onAnimationStart,\n      onAnimationEnd,\n    })\n\n  return {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,SAASC,qBAAqB,QAAQ,gBAAgB;AAatD,OAAO,SAASC,wBAAwBA,CAAAC,IAAA,EAKkB;EAAA,IALjB;IACvCC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC;EACqD,CAAC,GAAAJ,IAAA;EACtD,MAAMK,qBAAqB,GAAGX,KAAK,CAACY,UAAU,CAACR,qBAAqB,CAAC;EACrE,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGlB,WAAW,CAClCmB,IAAa,IAAK;IACjB,MAAMC,SAAS,GAAGnB,2BAA2B,CAC3CM,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,SAAS,YAAYE,WAAW,EAAE;MACpCF,SAAS,CAACG,KAAK,CAACC,QAAQ,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;IAC/C;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGzB,WAAW,CAAE0B,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG3B,WAAW,CAAC,MAAM;IACzCkB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG5B,WAAW,CAC/B0B,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChErC,kBAAkB,CAACI,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAenC,wBAAwB"}
+{"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","_ref","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","scrollView","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n  /**\n   * Ref to <div> inside the <tr> element being expanded/collapsed\n   */\n  innerRef: React.MutableRefObject<HTMLDivElement>\n  /**\n   * Ref to the <tr> element being clicked\n   */\n  trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n  innerRef,\n  trRef,\n  expanded,\n  noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const [ariaLive, setAriaLive] = React.useState(null)\n  const open = Boolean(expanded || tableAccordionContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip: boolean) => {\n      const scrollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scrollView instanceof HTMLElement) {\n        scrollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [trRef]\n  )\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationStart = useCallback(() => {\n    scrollViewHandler(true)\n  }, [scrollViewHandler])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          tableAccordionContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          tableAccordionContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, tableAccordionContext, trRef]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(\n        !noAnimation && !tableAccordionContext?.noAnimation\n      ),\n      onOpen,\n      onAnimationStart,\n      onAnimationEnd,\n    })\n\n  return {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,SAASC,kBAAkB,QAAQ,wCAAwC;AAE3E,SAASC,qBAAqB,QAAQ,gBAAgB;AAatD,OAAO,SAASC,wBAAwBA,CAAAC,IAAA,EAKkB;EAAA,IALjB;IACvCC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC;EACqD,CAAC,GAAAJ,IAAA;EACtD,MAAMK,qBAAqB,GAAGX,KAAK,CAACY,UAAU,CAACR,qBAAqB,CAAC;EACrE,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGlB,WAAW,CAClCmB,IAAa,IAAK;IACjB,MAAMC,UAAU,GAAGnB,2BAA2B,CAC5CM,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,UAAU,YAAYE,WAAW,EAAE;MACrCF,UAAU,CAACG,KAAK,CAACC,QAAQ,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;IAChD;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGzB,WAAW,CAAE0B,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG3B,WAAW,CAAC,MAAM;IACzCkB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG5B,WAAW,CAC/B0B,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChErC,kBAAkB,CAACI,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAenC,wBAAwB"}

package/components/tag/Tag.d.ts

@@ -18,6 +18,11 @@ export interface TagProps {
      * Default: null
      */
     hasLabel?: boolean;
+    /**
+     * Defines the variant
+     * Default: 'default'
+     */
+    variant?: 'default' | 'clickable' | 'addable' | 'removable';
     /**
      * Custom className on the component root
      * Default: null
@@ -41,6 +46,7 @@ export interface TagProps {
     /**
      * Handle the delete event on 'tag' element
      * Default: null
+     * @deprecated Use `onClick` instead. With `variant='removable'`
      */
     onDelete?: React.MouseEventHandler<HTMLButtonElement>;
     /**
@@ -53,6 +59,11 @@ export interface TagProps {
      * Has translation in context
      */
     removeIconTitle?: string;
+    /**
+     * Internal property
+     * Has translation in context
+     */
+    addIconTitle?: string;
 }
 export declare const defaultProps: {
     skeleton: any;

package/components/tag/Tag.js

@@ -3,7 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _svg;
-const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent", "removeIconTitle"];
+const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "variant", "onClick", "omitOnKeyUpDeleteEvent", "removeIconTitle", "addIconTitle"],
+  _excluded2 = ["onDelete"];
 import React from 'react';
 import classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -18,43 +19,44 @@ export const defaultProps = {
   omitOnKeyUpDeleteEvent: false
 };
 const Tag = localProps => {
-  var _context$translation, _IconPrimary;
+  var _context$translation;
   const context = React.useContext(Context);
   const tagGroupContext = React.useContext(TagGroupContext);
   const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext);
-  const {
+  const _handleDeprecatedBeha = handleDeprecatedBehaviour(allProps),
+    {
       className,
       skeleton,
       children,
       text,
       hasLabel,
+      variant = 'default',
       onClick,
-      onDelete,
       omitOnKeyUpDeleteEvent,
-      removeIconTitle
-    } = allProps,
-    props = _objectWithoutProperties(allProps, _excluded);
+      removeIconTitle,
+      addIconTitle
+    } = _handleDeprecatedBeha,
+    props = _objectWithoutProperties(_handleDeprecatedBeha, _excluded);
   const content = text || children;
-  const isClickable = !!onClick;
-  const isRemovable = !!onDelete && !isClickable;
-  const isInteractive = isClickable || isRemovable;
+  const addIcon = variant === 'removable' || variant === 'addable';
+  const isInteractive = variant !== 'default';
   const spacingClasses = createSpacingClasses(props);
-  const tagClassNames = classnames('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  const tagClassNames = classnames(`dnb-tag dnb-tag--${variant}`, className, spacingClasses, isInteractive && 'dnb-tag--interactive');
   const buttonAttr = props;
   const isDeleteKeyboardEvent = keyboardEvent => {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
   };
-  const handleKeyUp = event => {
-    if (onDelete && isDeleteKeyboardEvent(event)) {
-      onDelete(event);
+  const handleDeleteKeyUp = event => {
+    if (isDeleteKeyboardEvent(event) && onClick) {
+      onClick(event);
     }
   };
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';
   }
-  if (isRemovable) {
-    buttonAttr.icon = getDeleteIcon();
+  if (addIcon) {
+    buttonAttr.icon = getIcon(variant === 'addable' ? addIconTitle : removeIconTitle);
   }
   if (!tagGroupContext && !hasLabel) {
     warn(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
@@ -62,35 +64,48 @@ const Tag = localProps => {
   return React.createElement(Button, _extends({
     variant: "unstyled",
     size: "small",
-    icon_position: isRemovable ? 'right' : 'left',
+    icon_position: addIcon ? 'right' : 'left',
     className: tagClassNames,
-    on_click: onClick || onDelete,
+    on_click: onClick,
     text: content,
     skeleton: skeleton,
-    onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? e => handleKeyUp(e) : undefined
+    onKeyUp: variant === 'removable' && !omitOnKeyUpDeleteEvent ? e => handleDeleteKeyUp(e) : undefined
   }, buttonAttr));
-  function getDeleteIcon() {
-    return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
-      title: removeIconTitle,
-      inherit_color: false,
-      icon: _svg || (_svg = React.createElement("svg", {
-        width: "16",
-        height: "16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React.createElement("path", {
-        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
-        className: "dnb-icon-close-circle-path"
-      }), React.createElement("path", {
-        d: "m5.5 10.5 5-5m0 5-5-5",
-        className: "dnb-icon-close-cross-path",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      })))
-    }));
+};
+const handleDeprecatedBehaviour = _ref => {
+  let {
+      onDelete
+    } = _ref,
+    allProps = _objectWithoutProperties(_ref, _excluded2);
+  if (!allProps.variant) {
+    if (allProps.onClick) {
+      allProps.variant = 'clickable';
+    } else if (onDelete) {
+      allProps.onClick = onDelete;
+      allProps.variant = 'removable';
+    }
   }
+  return allProps;
 };
+const getIcon = title => React.createElement(IconPrimary, {
+  title: title,
+  inherit_color: false,
+  icon: _svg || (_svg = React.createElement("svg", {
+    width: "16",
+    height: "16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+    className: "dnb-icon-close-circle-path"
+  }), React.createElement("path", {
+    d: "m5.5 10.5 5-5m0 5-5-5",
+    className: "dnb-icon-close-cross-path",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))
+});
 Tag.Group = TagGroup;
 Tag._formElement = true;
 Tag._supportsSpacingProps = true;

package/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","classnames","IconPrimary","Button","Context","warn","extendPropsWithContext","TagGroup","TagGroupContext","createSpacingClasses","defaultProps","skeleton","omitOnKeyUpDeleteEvent","Tag","localProps","_context$translation","_IconPrimary","context","useContext","tagGroupContext","allProps","translation","className","children","text","hasLabel","onClick","onDelete","removeIconTitle","props","_objectWithoutProperties","_excluded","content","isClickable","isRemovable","isInteractive","spacingClasses","tagClassNames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","key","handleKeyUp","event","element","type","icon","getDeleteIcon","createElement","_extends","variant","size","icon_position","on_click","onKeyUp","e","undefined","title","inherit_color","_svg","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    onClick,\n    onDelete,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    ...props\n  } = allProps\n\n  const content = text || children\n  const isClickable = !!onClick\n  const isRemovable = !!onDelete && !isClickable\n  const isInteractive = isClickable || isRemovable\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    isRemovable && 'dnb-tag--removable'\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleKeyUp = (event) => {\n    if (onDelete && isDeleteKeyboardEvent(event)) {\n      onDelete(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (isRemovable) {\n    buttonAttr.icon = getDeleteIcon()\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={isRemovable ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick || onDelete}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        isRemovable && !omitOnKeyUpDeleteEvent\n          ? (e) => handleKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n\n  function getDeleteIcon() {\n    return (\n      <IconPrimary\n        title={removeIconTitle}\n        inherit_color={false}\n        icon={\n          <svg\n            width=\"16\"\n            height=\"16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n              className=\"dnb-icon-close-circle-path\"\n            />\n            <path\n              d=\"m5.5 10.5 5-5m0 5-5-5\"\n              className=\"dnb-icon-close-cross-path\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        }\n      />\n    )\n  }\n}\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["React","classnames","IconPrimary","Button","Context","warn","extendPropsWithContext","TagGroup","TagGroupContext","createSpacingClasses","defaultProps","skeleton","omitOnKeyUpDeleteEvent","Tag","localProps","_context$translation","context","useContext","tagGroupContext","allProps","translation","_handleDeprecatedBeha","handleDeprecatedBehaviour","className","children","text","hasLabel","variant","onClick","removeIconTitle","addIconTitle","props","_objectWithoutProperties","_excluded","content","addIcon","isInteractive","spacingClasses","tagClassNames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","key","handleDeleteKeyUp","event","element","type","icon","getIcon","createElement","_extends","size","icon_position","on_click","onKeyUp","e","undefined","_ref","onDelete","_excluded2","title","inherit_color","_svg","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Defines the variant\n   * Default: 'default'\n   */\n  variant?: 'default' | 'clickable' | 'addable' | 'removable'\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   * @deprecated Use `onClick` instead. With `variant='removable'`\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  addIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    variant = 'default',\n    onClick,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    addIconTitle, // has a translation in context\n    ...props\n  } = handleDeprecatedBehaviour(allProps)\n\n  const content = text || children\n\n  const addIcon = variant === 'removable' || variant === 'addable'\n  const isInteractive = variant !== 'default'\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    `dnb-tag--${variant}`\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleDeleteKeyUp = (event) => {\n    if (isDeleteKeyboardEvent(event) && onClick) {\n      onClick(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (addIcon) {\n    buttonAttr.icon = getIcon(\n      variant === 'addable' ? addIconTitle : removeIconTitle\n    )\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={addIcon ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        variant === 'removable' && !omitOnKeyUpDeleteEvent\n          ? (e) => handleDeleteKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n}\n\n/**\n * Support deprecated behaviour by mutating the props.\n * Deprecated behaviour: variant 'clickable' and 'removable' is defined by the 'onClick' and 'onDelete' props\n */\nconst handleDeprecatedBehaviour: (allProps: TagProps) => TagProps = ({\n  onDelete,\n  ...allProps\n}) => {\n  if (!allProps.variant) {\n    if (allProps.onClick) {\n      allProps.variant = 'clickable'\n    } else if (onDelete) {\n      allProps.onClick = onDelete\n      allProps.variant = 'removable'\n    }\n  }\n  return allProps\n}\nconst getIcon = (title: string) => (\n  <IconPrimary\n    title={title}\n    inherit_color={false}\n    icon={\n      <svg\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n          className=\"dnb-icon-close-circle-path\"\n        />\n        <path\n          d=\"m5.5 10.5 5-5m0 5-5-5\"\n          className=\"dnb-icon-close-cross-path\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    }\n  />\n)\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}