@dnb/eufemia 10.16.0 → 10.18.0

package/shared/helpers/useSharedState.js

@@ -0,0 +1,63 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useCallback, useEffect, useMemo, useState } from 'react';
+const sharedStates = {};
+export function getOrCreateSharedState(id, initialData) {
+  if (!sharedStates[id]) {
+    let subscribers = [];
+    const getSharedState = () => sharedStates[id].data;
+    const updateSharedState = newData => {
+      sharedStates[id].data = _objectSpread(_objectSpread({}, sharedStates[id].data), newData);
+      subscribers.forEach(subscriber => subscriber());
+    };
+    const subscribeToSharedState = subscriber => {
+      subscribers.push(subscriber);
+    };
+    const unsubscribeFromSharedState = subscriber => {
+      subscribers = subscribers.filter(sub => sub !== subscriber);
+    };
+    sharedStates[id] = {
+      data: initialData ? _objectSpread({}, initialData) : undefined,
+      getSharedState,
+      updateSharedState,
+      subscribeToSharedState,
+      unsubscribeFromSharedState
+    };
+  } else if (sharedStates[id].data === undefined && initialData !== undefined) {
+    sharedStates[id].data = _objectSpread({}, initialData);
+  }
+  return sharedStates[id];
+}
+export function useSharedState(id, initialData) {
+  var _sharedState$getShare;
+  const sharedState = useMemo(() => id && getOrCreateSharedState(id, initialData), [id, initialData]);
+  const [data, setData] = useState(sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$getShare = sharedState.getSharedState) === null || _sharedState$getShare === void 0 ? void 0 : _sharedState$getShare.call(sharedState));
+  const update = useCallback(newData => {
+    var _sharedState$updateSh;
+    if (!id) {
+      return;
+    }
+    sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$updateSh = sharedState.updateSharedState) === null || _sharedState$updateSh === void 0 ? void 0 : _sharedState$updateSh.call(sharedState, newData);
+  }, [id, sharedState]);
+  useEffect(() => {
+    if (!id) {
+      return;
+    }
+    const updateState = () => {
+      const existingData = sharedState.getSharedState();
+      setData(existingData);
+    };
+    sharedState.subscribeToSharedState(updateState);
+    return () => {
+      sharedState.unsubscribeFromSharedState(updateState);
+    };
+  }, [id, sharedState]);
+  return {
+    data,
+    update
+  };
+}
+//# sourceMappingURL=useSharedState.js.map

package/shared/helpers/useSharedState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSharedState.js","names":["useCallback","useEffect","useMemo","useState","sharedStates","getOrCreateSharedState","id","initialData","subscribers","getSharedState","data","updateSharedState","newData","_objectSpread","forEach","subscriber","subscribeToSharedState","push","unsubscribeFromSharedState","filter","sub","undefined","useSharedState","_sharedState$getShare","sharedState","setData","call","update","_sharedState$updateSh","updateState","existingData"],"sources":["../../../../src/shared/helpers/useSharedState.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\n\ntype SharedStateId = string\ntype Subscriber = () => void\n\ninterface SharedStateInstance<Data> {\n  data: Data\n  getSharedState: () => Data\n  updateSharedState: (newData: Partial<Data>) => void\n  subscribeToSharedState: (subscriber: Subscriber) => void\n  unsubscribeFromSharedState: (subscriber: Subscriber) => void\n}\n\nconst sharedStates: Record<SharedStateId, SharedStateInstance<any>> = {}\n\nexport function getOrCreateSharedState<Data>(\n  id: SharedStateId,\n  initialData: Data\n): SharedStateInstance<Data> {\n  if (!sharedStates[id]) {\n    let subscribers: Subscriber[] = []\n\n    const getSharedState = () => sharedStates[id].data\n\n    const updateSharedState = (newData: Partial<Data>) => {\n      sharedStates[id].data = { ...sharedStates[id].data, ...newData }\n      subscribers.forEach((subscriber) => subscriber())\n    }\n\n    const subscribeToSharedState = (subscriber: Subscriber) => {\n      subscribers.push(subscriber)\n    }\n\n    const unsubscribeFromSharedState = (subscriber: Subscriber) => {\n      subscribers = subscribers.filter((sub) => sub !== subscriber)\n    }\n\n    sharedStates[id] = {\n      data: initialData ? { ...initialData } : undefined,\n      getSharedState,\n      updateSharedState,\n      subscribeToSharedState,\n      unsubscribeFromSharedState,\n    } as SharedStateInstance<Data>\n  } else if (\n    sharedStates[id].data === undefined &&\n    initialData !== undefined\n  ) {\n    sharedStates[id].data = { ...initialData }\n  }\n\n  return sharedStates[id]\n}\n\nexport function useSharedState<Data>(\n  id: SharedStateId,\n  initialData: Data\n) {\n  const sharedState = useMemo(\n    () => id && getOrCreateSharedState<Data>(id, initialData),\n    [id, initialData]\n  )\n  const [data, setData] = useState(sharedState?.getSharedState?.())\n\n  const update = useCallback(\n    (newData: Data) => {\n      if (!id) {\n        return\n      }\n\n      sharedState?.updateSharedState?.(newData)\n    },\n    [id, sharedState]\n  )\n\n  useEffect(() => {\n    if (!id) {\n      return\n    }\n\n    const updateState = () => {\n      const existingData = sharedState.getSharedState()\n      setData(existingData)\n    }\n\n    sharedState.subscribeToSharedState(updateState)\n\n    return () => {\n      sharedState.unsubscribeFromSharedState(updateState)\n    }\n  }, [id, sharedState])\n\n  return { data, update }\n}\n"],"mappings":";;;;;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAajE,MAAMC,YAA6D,GAAG,CAAC,CAAC;AAExE,OAAO,SAASC,sBAAsBA,CACpCC,EAAiB,EACjBC,WAAiB,EACU;EAC3B,IAAI,CAACH,YAAY,CAACE,EAAE,CAAC,EAAE;IACrB,IAAIE,WAAyB,GAAG,EAAE;IAElC,MAAMC,cAAc,GAAGA,CAAA,KAAML,YAAY,CAACE,EAAE,CAAC,CAACI,IAAI;IAElD,MAAMC,iBAAiB,GAAIC,OAAsB,IAAK;MACpDR,YAAY,CAACE,EAAE,CAAC,CAACI,IAAI,GAAAG,aAAA,CAAAA,aAAA,KAAQT,YAAY,CAACE,EAAE,CAAC,CAACI,IAAI,GAAKE,OAAO,CAAE;MAChEJ,WAAW,CAACM,OAAO,CAAEC,UAAU,IAAKA,UAAU,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,MAAMC,sBAAsB,GAAID,UAAsB,IAAK;MACzDP,WAAW,CAACS,IAAI,CAACF,UAAU,CAAC;IAC9B,CAAC;IAED,MAAMG,0BAA0B,GAAIH,UAAsB,IAAK;MAC7DP,WAAW,GAAGA,WAAW,CAACW,MAAM,CAAEC,GAAG,IAAKA,GAAG,KAAKL,UAAU,CAAC;IAC/D,CAAC;IAEDX,YAAY,CAACE,EAAE,CAAC,GAAG;MACjBI,IAAI,EAAEH,WAAW,GAAAM,aAAA,KAAQN,WAAW,IAAKc,SAAS;MAClDZ,cAAc;MACdE,iBAAiB;MACjBK,sBAAsB;MACtBE;IACF,CAA8B;EAChC,CAAC,MAAM,IACLd,YAAY,CAACE,EAAE,CAAC,CAACI,IAAI,KAAKW,SAAS,IACnCd,WAAW,KAAKc,SAAS,EACzB;IACAjB,YAAY,CAACE,EAAE,CAAC,CAACI,IAAI,GAAAG,aAAA,KAAQN,WAAW,CAAE;EAC5C;EAEA,OAAOH,YAAY,CAACE,EAAE,CAAC;AACzB;AAEA,OAAO,SAASgB,cAAcA,CAC5BhB,EAAiB,EACjBC,WAAiB,EACjB;EAAA,IAAAgB,qBAAA;EACA,MAAMC,WAAW,GAAGtB,OAAO,CACzB,MAAMI,EAAE,IAAID,sBAAsB,CAAOC,EAAE,EAAEC,WAAW,CAAC,EACzD,CAACD,EAAE,EAAEC,WAAW,CAClB,CAAC;EACD,MAAM,CAACG,IAAI,EAAEe,OAAO,CAAC,GAAGtB,QAAQ,CAACqB,WAAW,aAAXA,WAAW,wBAAAD,qBAAA,GAAXC,WAAW,CAAEf,cAAc,cAAAc,qBAAA,uBAA3BA,qBAAA,CAAAG,IAAA,CAAAF,WAA8B,CAAC,CAAC;EAEjE,MAAMG,MAAM,GAAG3B,WAAW,CACvBY,OAAa,IAAK;IAAA,IAAAgB,qBAAA;IACjB,IAAI,CAACtB,EAAE,EAAE;MACP;IACF;IAEAkB,WAAW,aAAXA,WAAW,wBAAAI,qBAAA,GAAXJ,WAAW,CAAEb,iBAAiB,cAAAiB,qBAAA,uBAA9BA,qBAAA,CAAAF,IAAA,CAAAF,WAAW,EAAsBZ,OAAO,CAAC;EAC3C,CAAC,EACD,CAACN,EAAE,EAAEkB,WAAW,CAClB,CAAC;EAEDvB,SAAS,CAAC,MAAM;IACd,IAAI,CAACK,EAAE,EAAE;MACP;IACF;IAEA,MAAMuB,WAAW,GAAGA,CAAA,KAAM;MACxB,MAAMC,YAAY,GAAGN,WAAW,CAACf,cAAc,CAAC,CAAC;MACjDgB,OAAO,CAACK,YAAY,CAAC;IACvB,CAAC;IAEDN,WAAW,CAACR,sBAAsB,CAACa,WAAW,CAAC;IAE/C,OAAO,MAAM;MACXL,WAAW,CAACN,0BAA0B,CAACW,WAAW,CAAC;IACrD,CAAC;EACH,CAAC,EAAE,CAACvB,EAAE,EAAEkB,WAAW,CAAC,CAAC;EAErB,OAAO;IAAEd,IAAI;IAAEiB;EAAO,CAAC;AACzB"}

package/style/core/utilities.scss

@@ -248,8 +248,7 @@
 
 // Firefox fix
 @mixin IS_FF() {
-  @supports (-moz-appearance: meterbar) and
-    (background-blend-mode: difference, normal) {
+  @-moz-document url-prefix() {
     @content;
   }
 }

package/style/dnb-ui-components.css

@@ -455,16 +455,26 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+/*
+ * Utilities
+ */
+.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
+  row-gap: var(--spacing-x-small);
+}
+@media screen and (min-width: 40em) {
+  .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
+    line-height: 2.5rem;
+    margin-bottom: 0;
+  }
 }
 
 .dnb-forms-field-expiry .dnb-multi-input-mask {
@@ -474,6 +484,199 @@ html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
   justify-content: center;
 }
 
+/*
+ * Utilities
+ */
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
+  );
+}
+.dnb-forms-field-number__contents {
+  display: flex;
+  align-items: center;
+}
+.dnb-forms-field-number__contents--has-controls {
+  border-radius: 0.25rem;
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]) {
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within {
+  --border-color: var(--number-control-button-border-color--focus);
+  --border-width: var(--number-control-button-border-width--focus);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input__shell {
+  border-radius: 0;
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]) {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button-background-color--hover);
+  color: var(--number-control-button-color--hover);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button-background-color--active);
+  color: var(--number-control-button-color--active);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]) {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after {
+  color: var(--number-control-button--error);
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button--error-contrast);
+  color: var(--number-control-button--error);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button--error);
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled] {
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]) {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled] {
+  background-color: var(--color-black-3);
+  color: var(--color-black-20);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
+  width: calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
+  width: var(--number-control-button-width--small);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
+  width: calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
+  width: var(--number-control-button-width--medium);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
+  width: calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}
+
 .dnb-forms-field-phone-number__country-code {
   width: calc(var(--forms-field-width--medium) - 2rem);
 }
@@ -539,6 +742,15 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 .dnb-forms-field-block__grid {
   display: grid;
 }
+@media screen and (max-width: 40em) {
+  .dnb-forms-field-block__grid {
+    flex-wrap: wrap;
+  }
+  .dnb-forms-field-block__grid > .dnb-form-label {
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+}
 .dnb-forms-field-block--layout-vertical {
   grid-template-columns: auto;
   grid-template-areas: "label" "contents" "status";
@@ -568,15 +780,6 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
-.dnb-forms-field-block__label-description {
-  margin-left: 0.3em;
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
-.dnb-forms-field-block__label-secondary {
-  color: var(--color-black-55);
-  font-size: var(--font-size-small);
-}
 .dnb-forms-field-block__status {
   grid-area: status;
 }
@@ -905,14 +1108,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 .dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   font-size: inherit;
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon,
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default {
-  font-size: 1.11em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon svg path,
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
-  stroke-width: 1.2;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
@@ -1020,14 +1215,6 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   .dnb-p :not(.dnb-anchor--no-style).dnb-anchor, .dnb-lead :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor {
     font-size: inherit;
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon,
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon svg path,
-  :not(.dnb-anchor--no-style).dnb-anchor--launch-icon .dnb-icon.dnb-icon--default svg path {
-    stroke-width: 1.2;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     background-color: transparent;
     transition: none;
@@ -1680,6 +1867,7 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1777,6 +1965,12 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -1831,6 +2025,12 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
@@ -8456,6 +8656,11 @@ html:not([data-visual-test]) .dnb-textarea__textarea {
     background-color: var(--scrollbar-thumb-hover-color, #666);
   }
 }
+@-moz-document url-prefix() {
+  .dnb-textarea__textarea {
+    overflow-x: clip;
+  }
+}
 .dnb-textarea__input:-webkit-autofill {
   box-shadow: 0 0 0 var(--border-width) var(--border-color), 0 0 0 10em var(--textarea-background-color) inset;
 }