@dnb/eufemia 9.48.0-beta.1 → 10.0.0-beta.2

package/es/fragments/drawer-list/DrawerListProvider.d.ts

@@ -1,17 +1,11 @@
 import * as React from 'react';
-export type DrawerListProviderScrollable = string | boolean;
-export type DrawerListProviderFocusable = string | boolean;
+import type { SpacingProps } from '../../shared/types';
 export type DrawerListProviderDirection = 'auto' | 'top' | 'bottom';
 export type DrawerListProviderSize =
   | 'default'
   | 'small'
   | 'medium'
   | 'large';
-export type DrawerListProviderNoAnimation = string | boolean;
-export type DrawerListProviderNoScrollAnimation = string | boolean;
-export type DrawerListProviderPreventSelection = string | boolean;
-export type DrawerListProviderActionMenu = string | boolean;
-export type DrawerListProviderIsPopup = string | boolean;
 export type DrawerListProviderAlignDrawer = 'left' | 'right';
 export type DrawerListProviderOptionsRender =
   | Record<string, unknown>
@@ -23,14 +17,6 @@ export type DrawerListProviderWrapperElement =
   | React.ReactNode;
 export type DrawerListProviderDefaultValue = string | number;
 export type DrawerListProviderValue = string | number;
-export type DrawerListProviderSkipPortal = string | boolean;
-export type DrawerListProviderPreventClose = string | boolean;
-export type DrawerListProviderIndependentWidth = string | boolean;
-export type DrawerListProviderFixedPosition = string | boolean;
-export type DrawerListProviderKeepOpen = string | boolean;
-export type DrawerListProviderPreventFocus = string | boolean;
-export type DrawerListProviderSkipKeysearch = string | boolean;
-export type DrawerListProviderOpened = string | boolean;
 export type DrawerListProviderData =
   | string
   | ((...args: any[]) => any)
@@ -55,59 +41,41 @@ export type DrawerListProviderRawData =
   | any[]
   | Record<string, unknown>
   | ((...args: any[]) => any);
-export type DrawerListProviderIgnoreEvents = string | boolean;
-export type DrawerListProviderSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type DrawerListProviderTop = string | number | boolean;
-export type DrawerListProviderRight = string | number | boolean;
-export type DrawerListProviderBottom = string | number | boolean;
-export type DrawerListProviderLeft = string | number | boolean;
 export type DrawerListProviderPageOffset = string | number;
 export type DrawerListProviderObserverElement = string | React.ReactNode;
 export type DrawerListProviderMinHeight = string | number;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DrawerListProviderProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
   role?: string;
   cache_hash?: string;
   triangle_position?: string;
-  scrollable?: DrawerListProviderScrollable;
-  focusable?: DrawerListProviderFocusable;
+  scrollable?: boolean;
+  focusable?: boolean;
   direction?: DrawerListProviderDirection;
   size?: DrawerListProviderSize;
   max_height?: number;
-  no_animation?: DrawerListProviderNoAnimation;
-  no_scroll_animation?: DrawerListProviderNoScrollAnimation;
-  prevent_selection?: DrawerListProviderPreventSelection;
-  action_menu?: DrawerListProviderActionMenu;
-  is_popup?: DrawerListProviderIsPopup;
+  no_animation?: boolean;
+  no_scroll_animation?: boolean;
+  prevent_selection?: boolean;
+  action_menu?: boolean;
+  is_popup?: boolean;
   align_drawer?: DrawerListProviderAlignDrawer;
   options_render?: DrawerListProviderOptionsRender;
   wrapper_element?: DrawerListProviderWrapperElement;
   default_value?: DrawerListProviderDefaultValue;
   value?: DrawerListProviderValue;
-  skip_portal?: DrawerListProviderSkipPortal;
+  skip_portal?: boolean;
   portal_class?: string;
   list_class?: string;
-  prevent_close?: DrawerListProviderPreventClose;
-  independent_width?: DrawerListProviderIndependentWidth;
-  fixed_position?: DrawerListProviderFixedPosition;
-  keep_open?: DrawerListProviderKeepOpen;
-  prevent_focus?: DrawerListProviderPreventFocus;
-  skip_keysearch?: DrawerListProviderSkipKeysearch;
-  opened?: DrawerListProviderOpened;
+  prevent_close?: boolean;
+  independent_width?: boolean;
+  fixed_position?: boolean;
+  keep_open?: boolean;
+  prevent_focus?: boolean;
+  skip_keysearch?: boolean;
+  opened?: boolean;
   class?: string;
   data?: DrawerListProviderData;
   selected_value?: DrawerListProviderSelectedValue;
@@ -115,12 +83,7 @@ export interface DrawerListProviderProps
   content?: DrawerListProviderContent;
   prepared_data?: any[];
   raw_data?: DrawerListProviderRawData;
-  ignore_events?: DrawerListProviderIgnoreEvents;
-  space?: DrawerListProviderSpace;
-  top?: DrawerListProviderTop;
-  right?: DrawerListProviderRight;
-  bottom?: DrawerListProviderBottom;
-  left?: DrawerListProviderLeft;
+  ignore_events?: boolean;
   className?: string;
   on_show?: (...args: any[]) => any;
   on_hide?: (...args: any[]) => any;

package/es/fragments/scroll-view/ScrollView.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
 export declare type ScrollViewProps = {
     /**
      * To make the content accessible to keyboard navigation. Use `true` or `auto`. Auto will detect if a scrollbar is visible and make the ScrollView accessible for keyboard navigation.

package/es/fragments/scroll-view/ScrollView.js

@@ -12,6 +12,7 @@ import classnames from 'classnames';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import { createSpacingClasses } from '../../components/space/SpacingHelper';
+const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 const defaultProps = {
   children: null
 };
@@ -49,12 +50,12 @@ function useInteractive({
   ref
 }) {
   const [isInteractive, setAsInteractive] = React.useState(Boolean(interactive));
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto') {
       setAsInteractive(hasScrollbar());
     }
   }, [interactive, children]);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto' && typeof ResizeObserver !== 'undefined') {
       const observer = new ResizeObserver(() => {
         setAsInteractive(hasScrollbar());

package/es/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss

@@ -5,8 +5,10 @@
 
 @import '../../../../style/core/utilities.scss';
 
-// :root {
-// }
-
-// .dnb-scroll-view {
-// }
+:root {
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+}

package/es/shared/AlignmentHelper.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface AlignmentHelperProps
   extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;

package/es/shared/Context.d.ts

@@ -24,7 +24,7 @@ import type { TooltipProps } from '../components/tooltip/types';
 import type { SectionProps } from '../components/section/Section';
 import type { FormRowProps } from '../components/form-row/FormRowHelpers';
 import type { UploadProps } from '../components/upload/types';
-import type { SkeletonProps } from '../components/Skeleton';
+import type { SkeletonProps, SkeletonShow } from '../components/Skeleton';
 import type { HelpButtonProps } from '../components/HelpButton';
 import type { TableProps } from '../components/Table';
 export declare type ContextComponents = {
@@ -59,7 +59,7 @@ export declare type ContextProps = ContextComponents & {
     /**
      * Will enable all skeletons inside this provider/context scope
      */
-    skeleton?: boolean | string;
+    skeleton?: SkeletonShow;
     /**
      * Define what breakpoints should be used by the MediaQuery component and hook
      */

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.48.0-beta.1';
+        return '10.0.0-beta.2';
       }
 
     }

package/es/shared/MediaQuery.d.ts

@@ -17,5 +17,5 @@ export default class MediaQuery extends React.PureComponent<MediaQueryProps, Med
     componentWillUnmount(): void;
     componentDidUpdate(props: any): void;
     bindListener: () => void;
-    render(): React.ReactNode;
+    render(): JSX.Element;
 }

package/es/shared/MediaQuery.js

@@ -71,7 +71,7 @@ export default class MediaQuery extends React.PureComponent {
     const {
       children
     } = this.props;
-    return this.state.match ? children : null;
+    return React.createElement(React.Fragment, null, this.state.match ? children : null);
   }
 
 }

package/es/shared/helpers/Suffix.d.ts

@@ -3,13 +3,14 @@
  *
  */
 import React from 'react';
+import type { SkeletonShow } from '../../components/skeleton/Skeleton';
 declare const SuffixContext: React.Context<any>;
 export declare type SuffixChildren = React.ReactNode;
 export declare type SuffixProps = {
     className: string;
     children: SuffixChildren;
     context: Record<string, unknown>;
-    skeleton?: boolean;
+    skeleton?: SkeletonShow;
 };
 declare const Suffix: ({ className, children, context, skeleton, ...props }: SuffixProps & React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
 export { SuffixContext };

package/es/style/core/scopes.scss

@@ -58,7 +58,7 @@
 
 @mixin htmlDefault() {
   html {
-    html:not([data-visual-test]) & {
+    &:not([data-visual-test]) {
       scroll-behavior: smooth;
     }
     font-size: 100%;

package/es/style/core/utilities.scss

@@ -147,36 +147,42 @@ $focusRingColor: var(--color-emerald-green);
 }
 
 @mixin scrollbarAppearance() {
-  scrollbar-width: thin;
-
   // older iOS safari
   -webkit-overflow-scrolling: touch;
 
   // show scrollbar in IE & Edge
   -ms-overflow-style: auto;
 
-  scrollbar-color: var(--color-sea-green) transparent;
+  // NB: We have used "scrollbar-track-width: auto;" before,
+  // first, it only effects Firefox.
+  // But "thin" changes the behavior in Windows,
+  // so it has no arrow buttons, and a weird "pressed" color.
+  // Also, on macOS, it changes the scrollbar to be so small,
+  // that e.g. the textarea resize grabber gets way smaller.
+
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 
   @supports not (scrollbar-color: auto) {
     // stylelint-disable
     &::-webkit-scrollbar {
       &:vertical {
-        width: 0.5rem;
+        width: var(--scrollbar-track-width, 0.5rem);
       }
       &:horizontal {
-        height: 0.5rem;
+        height: var(--scrollbar-track-width, 0.5rem);
       }
 
-      background-color: var(--color-black-8);
+      border-radius: var(--scrollbar-thumb-width, 0.5rem);
+      background-color: var(--scrollbar-track-color, #eee);
     }
     &::-webkit-scrollbar-thumb {
-      background-color: var(--color-sea-green);
+      background-color: var(--scrollbar-thumb-color, #888);
 
       &:hover {
-        background-color: var(--color-emerald-green);
+        background-color: var(--scrollbar-thumb-hover-color, #666);
       }
 
-      border-radius: 0.5rem;
+      border-radius: var(--scrollbar-thumb-width, 0.5rem);
     }
     // stylelint-enable
   }

package/es/style/dnb-ui-basis.css

@@ -6,93 +6,6 @@
 /*
  * Utilities
  */
-/*
- * CSS Properties
- *
- */
-:root {
-  --font-family-default: "DNB", sans-serif;
-  --font-family-monospace: "DNBMono", "Menlo", "Consolas", "Roboto Mono",
-    "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono",
-    monospace;
-  --font-weight-default: normal;
-  --font-weight-basis: normal;
-  --font-weight-regular: normal;
-  --font-weight-medium: 500;
-  --font-weight-bold: 600;
-  --font-size-x-small: 0.875rem;
-  --font-size-small: 1rem;
-  --font-size-basis: 1.125rem;
-  --font-size-basis--em: 1em;
-  --font-size-medium: 1.25rem;
-  --font-size-large: 1.625rem;
-  --font-size-x-large: 2.125rem;
-  --font-size-xx-large: 3rem;
-  --line-height-xx-small--em: 1em;
-  --line-height-x-small: 1.125rem;
-  --line-height-small: 1.25rem;
-  --line-height-basis: 1.5rem;
-  --line-height-basis--em: 1.333em;
-  --line-height-medium: 2rem;
-  --line-height-large: 2.5rem;
-  --line-height-x-large: 3.5rem;
-  --color-mint-green-50: #d2f0e9;
-  --color-mint-green-25: #e9f8f4;
-  --color-mint-green-12: #f4fbf9;
-  --color-sea-green-30: #b3dada;
-  --color-accent-yellow-30: #feebc1;
-  --color-signal-orange: #ff5400;
-  --color-fire-red: #dc2a2a;
-  --color-success-green: #007b5e;
-  --color-fire-red-8: #fdeeee;
-  --color-black: #000;
-  --color-black-80: #333;
-  --color-black-55: #737373;
-  --color-black-20: #ccc;
-  --color-black-8: #ebebeb;
-  --color-black-3: #f8f8f8;
-  --color-white: #fff;
-  --color-black-border: #cdcdcd;
-  --color-black-background: #fafafa;
-  --color-sea-green: #007272;
-  --color-mint-green: #a5e1d2;
-  --color-summer-green: #28b482;
-  --color-emerald-green: #14555a;
-  --color-ocean-green: #00343e;
-  --color-accent-yellow: #fdbb31;
-  --color-indigo: #23195a;
-  --color-violet: #6e2382;
-  --color-sky-blue: #4bbed2;
-  --color-lavender: #f2f2f5;
-  --color-sand-yellow: #fbf6ec;
-  --color-pistachio: #f2f4ec;
-  --color-mint-green-alt: #ebfffa;
-  --color-indigo-medium: #6e6491;
-  --color-indigo-light: #b9afc8;
-  --color-violet-medium: #a06eaf;
-  --color-violet-light: #cfb9d7;
-  --color-sky-blue-medium: #87d2e1;
-  --color-sky-blue-light: #c3ebf0;
-  --spacing-xx-small: 0.25rem;
-  --spacing-x-small: 0.5rem;
-  --spacing-small: 1rem;
-  --spacing-medium: 1.5rem;
-  --spacing-large: 2rem;
-  --spacing-x-large: 3rem;
-  --spacing-xx-large: 3.5rem;
-  --layout-small: 40em;
-  --layout-medium: 60em;
-  --layout-large: 72em;
-  --layout-x-large: 80em;
-  --layout-xx-large: 90em;
-  --shadow-default: 0 8px 16px rgb(51 51 51 / 8%);
-  --shadow-default-x: 0;
-  --shadow-default-y: 8px;
-  --shadow-default-blur-radius: 16px;
-  --shadow-default-color: rgb(51 51 51 / 8%);
-  --easing-default: cubic-bezier(0.42, 0, 0, 1);
-}
-
 /*
  * Scopes
  *
@@ -101,65 +14,6 @@
  * Document Reset
  *
  */
-/*
- * Typography
- *
- * The font-family properties are defined in the properties.scss file, like:
- * --font-family-default:
- *
- */
-.dnb-typo-regular {
-  font-family: var(--font-family-default);
-  font-weight: normal;
-  font-style: normal;
-}
-
-.dnb-typo-medium {
-  font-family: var(--font-family-default);
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-}
-
-.dnb-typo-bold {
-  font-family: var(--font-family-default);
-  font-weight: var(--font-weight-bold);
-  font-style: normal;
-}
-
-.dnb-typo-mono-regular {
-  font-family: var(--font-family-monospace);
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: DNB;
-  src: url("../assets/fonts/DNB-Regular.woff2") format("woff2"), url("../assets/fonts/DNB-Regular.woff") format("woff"), url("../assets/fonts/DNB-Regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-  font-display: fallback;
-}
-@font-face {
-  font-family: DNB;
-  src: url("../assets/fonts/DNB-Medium.woff2") format("woff2"), url("../assets/fonts/DNB-Medium.woff") format("woff"), url("../assets/fonts/DNB-Medium.ttf") format("truetype");
-  font-weight: 500;
-  font-style: normal;
-  font-display: fallback;
-}
-@font-face {
-  font-family: DNB;
-  src: url("../assets/fonts/DNB-Bold.woff2") format("woff2"), url("../assets/fonts/DNB-Bold.woff") format("woff"), url("../assets/fonts/DNB-Bold.ttf") format("truetype");
-  font-weight: 600;
-  font-style: normal;
-  font-display: fallback;
-}
-@font-face {
-  font-family: DNBMono;
-  src: url("../assets/fonts/DNBMono-Regular.woff2") format("woff2"), url("../assets/fonts/DNBMono-Regular.woff") format("woff"), url("../assets/fonts/DNBMono-Regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-  font-display: fallback;
-}
 /*
  * Helper Classes
  *
@@ -199,27 +53,27 @@ html[data-whatinput=mouse] .dnb-mouse-focus:focus {
 }
 
 .dnb-scrollbar-appearance {
-  scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
-  scrollbar-color: var(--color-sea-green) transparent;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
 }
 @supports not (scrollbar-color: auto) {
   .dnb-scrollbar-appearance::-webkit-scrollbar {
-    background-color: var(--color-black-8);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
   }
   .dnb-scrollbar-appearance::-webkit-scrollbar:vertical {
-    width: 0.5rem;
+    width: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-scrollbar-appearance::-webkit-scrollbar:horizontal {
-    height: 0.5rem;
+    height: var(--scrollbar-track-width, 0.5rem);
   }
   .dnb-scrollbar-appearance::-webkit-scrollbar-thumb {
-    background-color: var(--color-sea-green);
-    border-radius: 0.5rem;
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
   }
   .dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-emerald-green);
+    background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
 
@@ -370,7 +224,7 @@ html[data-whatintent=touch] .dnb-skip-link {
 html {
   font-size: 100%;
 }
-html:not([data-visual-test]) html {
+html:not([data-visual-test]) {
   scroll-behavior: smooth;
 }
 @supports (-webkit-touch-callout: none) {

package/es/style/dnb-ui-basis.min.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--font-family-default:"DNB",sans-serif;--font-family-monospace:"DNBMono","Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace;--font-weight-default:normal;--font-weight-basis:normal;--font-weight-regular:normal;--font-weight-medium:500;--font-weight-bold:600;--font-size-x-small:0.875rem;--font-size-small:1rem;--font-size-basis:1.125rem;--font-size-basis--em:1em;--font-size-medium:1.25rem;--font-size-large:1.625rem;--font-size-x-large:2.125rem;--font-size-xx-large:3rem;--line-height-xx-small--em:1em;--line-height-x-small:1.125rem;--line-height-small:1.25rem;--line-height-basis:1.5rem;--line-height-basis--em:1.333em;--line-height-medium:2rem;--line-height-large:2.5rem;--line-height-x-large:3.5rem;--color-mint-green-50:#d2f0e9;--color-mint-green-25:#e9f8f4;--color-mint-green-12:#f4fbf9;--color-sea-green-30:#b3dada;--color-accent-yellow-30:#feebc1;--color-signal-orange:#ff5400;--color-fire-red:#dc2a2a;--color-success-green:#007b5e;--color-fire-red-8:#fdeeee;--color-black:#000;--color-black-80:#333;--color-black-55:#737373;--color-black-20:#ccc;--color-black-8:#ebebeb;--color-black-3:#f8f8f8;--color-white:#fff;--color-black-border:#cdcdcd;--color-black-background:#fafafa;--color-sea-green:#007272;--color-mint-green:#a5e1d2;--color-summer-green:#28b482;--color-emerald-green:#14555a;--color-ocean-green:#00343e;--color-accent-yellow:#fdbb31;--color-indigo:#23195a;--color-violet:#6e2382;--color-sky-blue:#4bbed2;--color-lavender:#f2f2f5;--color-sand-yellow:#fbf6ec;--color-pistachio:#f2f4ec;--color-mint-green-alt:#ebfffa;--color-indigo-medium:#6e6491;--color-indigo-light:#b9afc8;--color-violet-medium:#a06eaf;--color-violet-light:#cfb9d7;--color-sky-blue-medium:#87d2e1;--color-sky-blue-light:#c3ebf0;--spacing-xx-small:0.25rem;--spacing-x-small:0.5rem;--spacing-small:1rem;--spacing-medium:1.5rem;--spacing-large:2rem;--spacing-x-large:3rem;--spacing-xx-large:3.5rem;--layout-small:40em;--layout-medium:60em;--layout-large:72em;--layout-x-large:80em;--layout-xx-large:90em;--shadow-default:0 8px 16px rgb(51 51 51/8%);--shadow-default-x:0;--shadow-default-y:8px;--shadow-default-blur-radius:16px;--shadow-default-color:rgb(51 51 51/8%);--easing-default:cubic-bezier(0.42,0,0,1)}.dnb-typo-regular{font-weight:400}.dnb-typo-medium,.dnb-typo-regular{font-family:var(--font-family-default);font-style:normal}.dnb-typo-medium{font-weight:var(--font-weight-medium)}.dnb-typo-bold{font-family:var(--font-family-default);font-style:normal;font-weight:var(--font-weight-bold)}.dnb-typo-mono-regular{font-family:var(--font-family-monospace);font-style:normal;font-weight:400}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:400;src:url(../assets/fonts/DNB-Regular.woff2) format("woff2"),url(../assets/fonts/DNB-Regular.woff) format("woff"),url(../assets/fonts/DNB-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:500;src:url(../assets/fonts/DNB-Medium.woff2) format("woff2"),url(../assets/fonts/DNB-Medium.woff) format("woff"),url(../assets/fonts/DNB-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNB;font-style:normal;font-weight:600;src:url(../assets/fonts/DNB-Bold.woff2) format("woff2"),url(../assets/fonts/DNB-Bold.woff) format("woff"),url(../assets/fonts/DNB-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMono;font-style:normal;font-weight:400;src:url(../assets/fonts/DNBMono-Regular.woff2) format("woff2"),url(../assets/fonts/DNBMono-Regular.woff) format("woff"),url(../assets/fonts/DNBMono-Regular.ttf) format("truetype")}.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 .125rem var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 .125rem var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--color-sea-green) transparent;scrollbar-width:thin}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--color-black-8)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:.5rem}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:.5rem}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--color-sea-green);border-radius:.5rem}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--color-emerald-green)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--color-sea-green);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--color-white);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--color-mint-green-50)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--color-emerald-green)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link--active:hover,.dnb-skip-link:focus:focus:not(:hover):not(:active),.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--color-sea-green)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--color-white)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;max-height:1px;max-width:1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;user-select:none;white-space:nowrap}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}html{font-size:100%}html:not([data-visual-test]) html{scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-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:var(--color-black-80,#333);font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}
+@charset "UTF-8";.dnb-no-focus,.dnb-tab-focus,.dnb-tab-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-tab-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-mouse-focus,.dnb-mouse-focus:focus{outline:none}html[data-whatinput=mouse] .dnb-mouse-focus:focus{box-shadow:0 0 0 .125rem var(--border-color)}.dnb-focus-ring,html[data-whatinput=mouse] .dnb-mouse-focus:focus{--border-color:var(--color-emerald-green);border-color:transparent}.dnb-focus-ring{box-shadow:0 0 0 .125rem var(--border-color)!important}.dnb-scrollbar-appearance{-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;scrollbar-color:var(--scrollbar-thumb-color,#888) transparent}@supports not (scrollbar-color:auto){.dnb-scrollbar-appearance::-webkit-scrollbar{background-color:var(--scrollbar-track-color,#eee);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:vertical{width:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar:horizontal{height:var(--scrollbar-track-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color,#888);border-radius:var(--scrollbar-thumb-width,.5rem)}.dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color,#666)}}.dnb-skip-link{opacity:.3;position:absolute;top:-100vh;transition:opacity .3s ease-out;z-index:0}.dnb-skip-link--active,.dnb-skip-link:focus{background-color:transparent;border:none;border-radius:0;box-shadow:none;color:var(--color-sea-green);font-size:var(--font-size-basis);left:40%;margin:0;outline:none;padding:.5rem 1rem;position:fixed;text-align:center;text-decoration:none;top:5%;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:9999}.dnb-skip-link--active:after,.dnb-skip-link:focus:after{background-color:hsla(0,0%,100%,.85);box-shadow:150vw 150vh 0 0 hsla(0,0%,100%,.85);content:"";height:150vh;left:-200vw;position:absolute;top:-200vh;width:150vw;z-index:-2}.dnb-skip-link--active:before,.dnb-skip-link:focus:before{background-color:var(--color-white);border-radius:1.5rem;content:"";height:100%;left:0;outline:none;position:absolute;top:0;width:100%;z-index:-1}html[data-whatinput=mouse] .dnb-skip-link--active:before,html[data-whatinput=mouse] .dnb-skip-link:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-skip-link--active:hover:before,.dnb-skip-link:focus:hover:before{background-color:var(--color-mint-green-50)}.dnb-skip-link--active:active:before,.dnb-skip-link:focus:active:before{background-color:var(--color-emerald-green)}.dnb-skip-link--active:focus:not(:active):before,.dnb-skip-link:focus:focus:not(:active):before{outline:none}html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active):before,html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active):before{--border-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 .125rem var(--border-color)}.dnb-skip-link--active:focus,.dnb-skip-link:focus:focus{opacity:1}.dnb-skip-link--active:focus:not(:hover):not(:active),.dnb-skip-link--active:hover,.dnb-skip-link:focus:focus:not(:hover):not(:active),.dnb-skip-link:focus:hover{background-color:transparent;box-shadow:none;color:var(--color-sea-green)}.dnb-skip-link--active:active,.dnb-skip-link:focus:active{background-color:transparent;color:var(--color-white)}html[data-whatintent=touch] .dnb-skip-link{display:none}.dnb-alignment-helper,.dnb-alignment-helper:before{speak:none;display:inline-block;font-size:var(--font-size-small);height:0;width:0}.dnb-alignment-helper:before{content:"‌"}.dnb-drop-shadow{box-shadow:var(--shadow-default)}.dnb-sr-only{-webkit-touch-callout:none;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;max-height:1px;max-width:1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;user-select:none;white-space:nowrap}.dnb-suffix{font-size:var(--font-size-basis);line-height:var(--line-height-basis);padding-left:.5rem;word-break:normal}html{font-size:100%}html:not([data-visual-test]){scroll-behavior:smooth}@supports (-webkit-touch-callout:none){@supports (font:-apple-system-body){html{font:-apple-system-body}}}html[xmlns="http://www.w3.org/1999/xhtml"] a:hover{text-decoration:none}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--active{color:var(--color-mint-green)!important}html[xmlns="http://www.w3.org/1999/xhtml"] .dnb-anchor--contrast:not(:hover){color:var(--color-white)!important}html[xmlns="http://www.w3.org/1999/xhtml"] a.dnb-button--primary{color:var(--color-white)}html[xmlns="http://www.w3.org/1999/xhtml"] ul{list-style:initial}html[xmlns="http://www.w3.org/1999/xhtml"] p{background-color:initial;overflow:initial;text-align:inherit}html[xmlns="http://www.w3.org/1999/xhtml"] i{font-style:italic}html[xmlns="http://www.w3.org/1999/xhtml"] #column_left,html[xmlns="http://www.w3.org/1999/xhtml"] #root{width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefault #wrapper,html[xmlns="http://www.w3.org/1999/xhtml"] body#dnbLayoutDefaultStartPage #wrapper{max-width:60rem;width:100%}html[xmlns="http://www.w3.org/1999/xhtml"] #column_content{box-shadow:none}body{margin:0}.dnb-core-style{-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:var(--color-black-80,#333);font-family:var(--font-family-default);font-size:var(--font-size-small);font-style:normal;font-weight:var(--font-weight-basis);line-height:var(--line-height-basis);tab-size:4;-moz-tab-size:4;word-break:break-word}.dnb-core-style *,.dnb-core-style :after,.dnb-core-style :before{background-repeat:no-repeat;box-sizing:border-box}.dnb-core-style :after,.dnb-core-style :before{text-decoration:inherit;vertical-align:inherit}.dnb-core-style hr{height:0;overflow:visible}.dnb-core-style main{display:block}.dnb-core-style nav ol,.dnb-core-style nav ul{list-style:none}.dnb-core-style abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.dnb-core-style b,.dnb-core-style strong{font-weight:bolder}.dnb-core-style code,.dnb-core-style kbd,.dnb-core-style pre,.dnb-core-style samp{font-family:var(--font-family-monospace);font-size:var(--font-size-basis--em)}.dnb-core-style ::selection{background-color:#b3d4fc;color:#000;text-shadow:none}.dnb-core-style audio,.dnb-core-style canvas,.dnb-core-style iframe,.dnb-core-style img,.dnb-core-style svg,.dnb-core-style video{vertical-align:middle}.dnb-core-style audio,.dnb-core-style video{display:inline-block}.dnb-core-style audio:not([controls]){display:none;height:0}.dnb-core-style img{border-style:none}.dnb-core-style svg:not([fill]){fill:currentcolor}.dnb-core-style svg:not(:root){overflow:hidden}.dnb-core-style table{border-collapse:collapse}.dnb-core-style button,.dnb-core-style input,.dnb-core-style select,.dnb-core-style textarea{font-family:inherit;font-size:inherit;line-height:inherit}.dnb-core-style button,.dnb-core-style figure,.dnb-core-style input,.dnb-core-style select{margin:0}.dnb-core-style button{overflow:visible;text-transform:none}.dnb-core-style fieldset{padding:.35rem .75rem .625rem}.dnb-core-style input{overflow:visible;word-break:normal}.dnb-core-style legend{color:inherit;display:table;max-width:100%;white-space:normal}.dnb-core-style progress{display:inline-block;vertical-align:baseline}.dnb-core-style select{text-transform:none}.dnb-core-style textarea{overflow:auto;resize:vertical}.dnb-core-style [type=checkbox],.dnb-core-style [type=radio]{padding:0}.dnb-core-style input[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}.dnb-core-style ::-webkit-inner-spin-button,.dnb-core-style ::-webkit-outer-spin-button{height:auto}.dnb-core-style ::input-placeholder{color:inherit;opacity:.54}.dnb-core-style ::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.dnb-core-style ::-webkit-file-upload-button{background-color:transparent;border:none;font:inherit}.dnb-core-style ::-moz-focus-inner{border-style:none;padding:0}.dnb-core-style details{display:block}.dnb-core-style summary{display:list-item}.dnb-core-style canvas{display:inline-block}.dnb-core-style template{display:none}.dnb-core-style [tabindex],.dnb-core-style a,.dnb-core-style area,.dnb-core-style button,.dnb-core-style input,.dnb-core-style label,.dnb-core-style select,.dnb-core-style summary,.dnb-core-style textarea{touch-action:manipulation}.dnb-core-style [hidden]{display:none}.dnb-core-style [aria-busy=true]{cursor:progress}.dnb-core-style [aria-controls]:not(input){cursor:pointer}.dnb-core-style [aria-disabled=true],.dnb-core-style [disabled]{cursor:not-allowed}.dnb-core-style [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}@media print{.dnb-core-style{background-color:#fff;color:#000}}

package/es/style/dnb-ui-basis.scss

@@ -5,9 +5,8 @@
 
 // core imports
 @import './core/utilities.scss';
-@import './core/properties.scss';
+
 @import './core/scopes.scss';
-@import './core/fonts.scss';
 @import './core/helper-classes/helper-classes.scss';
 
 // make sure we have dynamic root font size