@dnb/eufemia 9.26.0 → 9.28.0

package/es/components/table/Table.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { ISpacingProps } from '../../shared/interfaces';
+import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+export declare type TableSizes = 'medium' | 'large';
+export declare type TableVariants = 'basis' | 'not-defined-yet';
+export { StickyHelper };
+export interface TableProps extends StickyTableHeaderProps {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     */
+    className?: string;
+    /**
+     * Skeleton should be applied when loading content
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * The size of the component.
+     * Default: large.
+     */
+    size?: TableSizes;
+    /**
+     * The variant of the component.
+     * Default: basis.
+     */
+    variant?: TableVariants;
+}
+export declare const defaultProps: {
+    size: string;
+    variant: string;
+};
+declare const Table: {
+    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & ISpacingProps): JSX.Element;
+    StickyHelper: () => JSX.Element;
+};
+export default Table;

package/es/components/table/Table.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset"];
+import React from 'react';
+import classnames from 'classnames';
+import Context from '../../shared/Context';
+import Provider from '../../shared/Provider';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import { usePropsWithContext } from '../../shared/hooks';
+import { validateDOMAttributes } from '../../shared/component-helper';
+import { useStickyHeader, StickyHelper } from './TableStickyHeader';
+export { StickyHelper };
+export const defaultProps = {
+  size: 'large',
+  variant: 'basis'
+};
+
+const Table = componentProps => {
+  const context = React.useContext(Context);
+  const allProps = usePropsWithContext(componentProps, defaultProps, context === null || context === void 0 ? void 0 : context.Table, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  });
+
+  const {
+    className,
+    children,
+    size,
+    skeleton,
+    variant,
+    sticky,
+    stickyOffset
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
+
+  const skeletonClasses = createSkeletonClass('font', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const {
+    elementRef
+  } = useStickyHeader(allProps);
+  validateDOMAttributes(allProps, props);
+  return React.createElement(Provider, {
+    skeleton: Boolean(skeleton)
+  }, React.createElement("table", _extends({
+    className: classnames(`dnb-table dnb-table__variant--${variant || 'basis'} dnb-table__size--${size || 'large'}`, spacingClasses, skeletonClasses, className, sticky && `dnb-table--sticky`),
+    ref: elementRef
+  }, props), children));
+};
+
+export default Table;
+Table.StickyHelper = StickyHelper;

package/es/components/table/TableStickyHeader.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface StickyTableHeaderProps {
+    /**
+     * Makes the Table header sticky
+     * Default: false
+     */
+    sticky?: boolean;
+    /**
+     * The offset from top in rem or em unit
+     * Default: false
+     */
+    stickyOffset?: string | number;
+    /**
+     * @deprecated Please use `stickyOffset`
+     */
+    sticky_offset?: string | number;
+}
+export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
+    elementRef: React.MutableRefObject<HTMLTableElement>;
+};
+export declare const StickyHelper: () => JSX.Element;

package/es/components/table/TableStickyHeader.js

@@ -0,0 +1,98 @@
+var _tr;
+
+import React from 'react';
+import { warn } from '../../shared/component-helper';
+export const useStickyHeader = ({
+  sticky,
+  stickyOffset,
+  sticky_offset
+}) => {
+  if (sticky_offset) {
+    stickyOffset = sticky_offset;
+  }
+
+  const elementRef = React.useRef();
+  const intersectionObserver = React.useRef(null);
+  React.useEffect(() => {
+    if (sticky) {
+      if (typeof IntersectionObserver === 'undefined') {
+        stickyWarning('IntersectionObserver not supported');
+        return;
+      }
+
+      if (!elementRef.current) {
+        stickyWarning('No ref element given');
+      }
+
+      const tableElem = elementRef.current;
+      let thHeight = 80;
+      let offsetTopPx = 0;
+
+      try {
+        const trElem = tableElem.querySelector('thead > tr:first-of-type, thead > .dnb-table__tr:first-of-type');
+        offsetTopPx = parseFloat(String(stickyOffset || '0'));
+
+        if (offsetTopPx > 0) {
+          if (String(stickyOffset).includes('em')) {
+            offsetTopPx = Math.round(offsetTopPx * 16);
+            trElem.style.setProperty('--table-top', String(stickyOffset));
+          } else {
+            trElem.style.setProperty('--table-top', `${offsetTopPx / 16}rem`);
+          }
+        }
+
+        const thElem = getThElement(tableElem);
+        thHeight = thElem && parseFloat(window.getComputedStyle(thElem).height) || thHeight;
+        intersectionObserver.current = new IntersectionObserver(entries => {
+          const [entry] = entries;
+
+          try {
+            if (entry.isIntersecting) {
+              trElem.classList.remove('show-shadow');
+            } else {
+              trElem.classList.add('show-shadow');
+            }
+          } catch (e) {
+            stickyWarning(e);
+          }
+        }, {
+          rootMargin: `-${thHeight + offsetTopPx}px 0px 0px 0px`
+        });
+        trElem.classList.add('sticky');
+        const tdElem = tableElem.querySelector('tbody > tr.dnb-table__sticky-helper > td:first-of-type') || getTdElement(tableElem);
+
+        if (tdElem) {
+          intersectionObserver.current.observe(tdElem);
+        }
+      } catch (e) {
+        stickyWarning(e);
+      }
+    }
+
+    return () => {
+      var _intersectionObserver;
+
+      (_intersectionObserver = intersectionObserver.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.disconnect();
+    };
+  }, [elementRef, sticky, stickyOffset]);
+  return {
+    elementRef
+  };
+};
+export const StickyHelper = () => {
+  return _tr || (_tr = React.createElement("tr", {
+    className: "dnb-table__sticky-helper"
+  }, React.createElement("td", null)));
+};
+
+const stickyWarning = (message = '') => {
+  warn('Could not enable Sticky mode in table:', message);
+};
+
+const getTdElement = element => {
+  return element.querySelector('tbody > tr:not(.dnb-table__sticky-helper):first-of-type > td:first-of-type, tbody > .dnb-table__tr:first-of-type > .dnb-table__td:first-of-type');
+};
+
+const getThElement = element => {
+  return element.querySelector('thead > tr:first-of-type > th:first-of-type, thead > .dnb-table__tr:first-of-type > .dnb-table__th:first-of-type');
+};

package/es/components/table/TableTd.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type TableTdProps = {
+    /**
+     * The content of the component.
+     * Default: null
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Td: (componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Td;

package/es/components/table/TableTd.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Td = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("td", _extends({
+    role: "cell",
+    className: classnames('dnb-table__td', className)
+  }, props));
+};
+
+export default Td;

package/es/components/table/TableTh.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TableThProps = {
+    /**
+     * The content of the table header given as Tr.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Th;

package/es/components/table/TableTh.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Th = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("th", _extends({
+    role: "columnheader",
+    className: classnames('dnb-table__th', className)
+  }, props), children);
+};
+
+export default Th;

package/es/components/table/TableTr.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableTdProps } from './TableTd';
+export declare type TableTrProps = {
+    /**
+     * The content of the component.
+     */
+    children: Array<React.ReactElement<TableTdProps>>;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
+export default Tr;

package/es/components/table/TableTr.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Tr = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("tr", _extends({
+    className: classnames('dnb-table__tr', className)
+  }, props), children);
+};
+
+export default Tr;

package/es/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export default Table;
+export * from "./Table";
+import Table from "./Table";

package/es/components/table/index.js

@@ -0,0 +1,3 @@
+import Table from './Table';
+export default Table;
+export * from './Table';

package/es/components/table/style/_table.scss

@@ -0,0 +1,147 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: var(--spacing-small);
+
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  &--fixed {
+    table-layout: fixed;
+  }
+
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  &,
+  &--left {
+    text-align: left;
+  }
+  &--right {
+    text-align: right;
+  }
+  &--center {
+    text-align: center;
+  }
+
+  & > caption {
+    font-size: var(--font-size-small);
+
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom;
+  }
+
+  /* stylelint-disable-next-line */
+
+  tr.sticky th {
+    position: sticky;
+    top: var(--table-top, 0); // is set by "stickyOffset" prop
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+
+      // The @mixin defaultDropShadow() does not work in this case
+      // because we need only a bottom shadow (with clip-path)
+      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      clip-path: inset(6px 0 -48px 0);
+
+      transition: opacity 300ms ease-out;
+      [data-visual-test-wrapper] & {
+        transition: none;
+      }
+    }
+  }
+  tr.sticky.show-shadow th::before {
+    opacity: 1;
+  }
+
+  /* stylelint-disable */
+
+  &--small,
+  &--small > tr > th,
+  &--small > tr > td,
+  &--small > thead > tr > th,
+  &--small > tbody > tr > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr#{&}--small > th,
+  & > tr#{&}--small > td,
+  & > thead > tr#{&}--small > th,
+  & > tbody > tr#{&}--small > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr > th#{&}--small,
+  & > tr > td#{&}--small,
+  & > thead > tr > th#{&}--small,
+  & > tbody > tr > td#{&}--small,
+  &__th#{&}--small,
+  &__td#{&}--small {
+    font-size: var(--font-size-small);
+  }
+
+  &--x-small,
+  &--x-small > tr > th,
+  &--x-small > tr > td,
+  &--x-small > thead > tr > th,
+  &--x-small > tbody > tr > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr#{&}--x-small > th,
+  & > tr#{&}--x-small > td,
+  & > thead > tr#{&}--x-small > th,
+  & > tbody > tr#{&}--x-small > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr > th#{&}--x-small,
+  & > tr > td#{&}--x-small,
+  & > thead > tr > th#{&}--x-small,
+  & > tbody > tr > td#{&}--x-small,
+  &__th#{&}--x-small,
+  &__td#{&}--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  /* stylelint-enable */
+
+  &.dnb-skeleton {
+    > * {
+      -webkit-text-fill-color: var(--skeleton-color);
+    }
+  }
+}
+
+// Reset Table spacing
+.dnb-spacing .dnb-table {
+  p,
+  ul,
+  ol,
+  dl,
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,181 @@
+/*
+* DNB Table
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-table {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-table *,
+  .dnb-table ::before,
+  .dnb-table ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-table ::before,
+  .dnb-table ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Table component
+*
+*/
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-small);
+  border-spacing: 0;
+  border-collapse: collapse;
+  /* stylelint-disable-next-line */
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-table--fixed {
+    table-layout: fixed; }
+  .dnb-table__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0; }
+  .dnb-table, .dnb-table--left {
+    text-align: left; }
+  .dnb-table--right {
+    text-align: right; }
+  .dnb-table--center {
+    text-align: center; }
+  .dnb-table > caption {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    margin-top: 0.5rem;
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom; }
+  .dnb-table tr.sticky th {
+    position: sticky;
+    top: 0;
+    top: var(--table-top, 0);
+    z-index: 2; }
+    .dnb-table tr.sticky th::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+      -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+              box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+      -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+              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);
+      -webkit-transition: opacity 300ms ease-out;
+      transition: opacity 300ms ease-out; }
+      [data-visual-test-wrapper] .dnb-table tr.sticky th::before {
+        -webkit-transition: none;
+        transition: none; }
+  .dnb-table tr.sticky.show-shadow th::before {
+    opacity: 1; }
+  .dnb-table--small,
+  .dnb-table--small > tr > th,
+  .dnb-table--small > tr > td,
+  .dnb-table--small > thead > tr > th,
+  .dnb-table--small > tbody > tr > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr.dnb-table--small > th,
+  .dnb-table > tr.dnb-table--small > td,
+  .dnb-table > thead > tr.dnb-table--small > th,
+  .dnb-table > tbody > tr.dnb-table--small > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr > th.dnb-table--small,
+  .dnb-table > tr > td.dnb-table--small,
+  .dnb-table > thead > tr > th.dnb-table--small,
+  .dnb-table > tbody > tr > td.dnb-table--small, .dnb-table__th.dnb-table--small, .dnb-table__td.dnb-table--small {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table--x-small,
+  .dnb-table--x-small > tr > th,
+  .dnb-table--x-small > tr > td,
+  .dnb-table--x-small > thead > tr > th,
+  .dnb-table--x-small > tbody > tr > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr.dnb-table--x-small > th,
+  .dnb-table > tr.dnb-table--x-small > td,
+  .dnb-table > thead > tr.dnb-table--x-small > th,
+  .dnb-table > tbody > tr.dnb-table--x-small > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr > th.dnb-table--x-small,
+  .dnb-table > tr > td.dnb-table--x-small,
+  .dnb-table > thead > tr > th.dnb-table--x-small,
+  .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table.dnb-skeleton > * {
+    -webkit-text-fill-color: #ebebeb;
+    -webkit-text-fill-color: var(--skeleton-color); }
+
+.dnb-spacing .dnb-table p,
+.dnb-spacing .dnb-table ul,
+.dnb-spacing .dnb-table ol,
+.dnb-spacing .dnb-table dl,
+.dnb-spacing .dnb-table pre {
+  margin-top: 0;
+  margin-bottom: 0; }

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

@@ -0,0 +1 @@
+.dnb-table{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-table *,.dnb-table :after,.dnb-table :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-table :after,.dnb-table :before{text-decoration:inherit;vertical-align:inherit}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:1rem;margin-bottom:var(--spacing-small);margin-top:0;overflow:auto;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed}.dnb-table__sticky-helper>td{display:block;height:0;overflow:hidden;padding:0!important}.dnb-table,.dnb-table--left{text-align:left}.dnb-table--right{text-align:right}.dnb-table--center{text-align:center}.dnb-table>caption{caption-side:bottom;font-size:1rem;font-size:var(--font-size-small);margin-top:.5rem;margin-top:var(--spacing-x-small)}.dnb-table tr.sticky th{position:sticky;top:0;top:var(--table-top,0);z-index:2}.dnb-table tr.sticky th:before{bottom:0;-webkit-box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);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;opacity:0;position:absolute;right:0;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}[data-visual-test-wrapper] .dnb-table tr.sticky th:before{-webkit-transition:none;transition:none}.dnb-table tr.sticky.show-shadow th:before{opacity:1}.dnb-table--small,.dnb-table--small>tbody>tr>td,.dnb-table--small>thead>tr>th,.dnb-table--small>tr>td,.dnb-table--small>tr>th,.dnb-table>tbody>tr.dnb-table--small>td,.dnb-table>tbody>tr>td.dnb-table--small,.dnb-table>thead>tr.dnb-table--small>th,.dnb-table>thead>tr>th.dnb-table--small,.dnb-table>tr.dnb-table--small>td,.dnb-table>tr.dnb-table--small>th,.dnb-table>tr>td.dnb-table--small,.dnb-table>tr>th.dnb-table--small,.dnb-table__td.dnb-table--small,.dnb-table__th.dnb-table--small{font-size:1rem;font-size:var(--font-size-small)}.dnb-table--x-small,.dnb-table--x-small>tbody>tr>td,.dnb-table--x-small>thead>tr>th,.dnb-table--x-small>tr>td,.dnb-table--x-small>tr>th,.dnb-table>tbody>tr.dnb-table--x-small>td,.dnb-table>tbody>tr>td.dnb-table--x-small,.dnb-table>thead>tr.dnb-table--x-small>th,.dnb-table>thead>tr>th.dnb-table--x-small,.dnb-table>tr.dnb-table--x-small>td,.dnb-table>tr.dnb-table--x-small>th,.dnb-table>tr>td.dnb-table--x-small,.dnb-table>tr>th.dnb-table--x-small,.dnb-table__td.dnb-table--x-small,.dnb-table__th.dnb-table--x-small{font-size:.875rem;font-size:var(--font-size-x-small)}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}.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/es/components/table/style/dnb-table.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Table
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-table {
+  @include componentReset();
+}
+
+@import './_table.scss';

package/es/components/table/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-table.scss';