@dnb/eufemia 10.62.3 → 10.63.0

package/components/toggle-button/ToggleButtonDocs.js

@@ -0,0 +1,80 @@
+import { ButtonProperties } from '../button/ButtonDocs';
+export const ToggleButtonProperties = {
+  value: {
+    doc: 'Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **ToggleButtonGroup**.',
+    type: 'string',
+    status: 'required'
+  },
+  text: {
+    doc: 'The text shown in the ToggleButton.',
+    type: 'string',
+    status: 'required'
+  },
+  checked: {
+    doc: 'Determine whether the ToggleButton is checked or not. The default will be `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  title: {
+    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',
+    type: 'string',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Use either the `label` property or provide a custom one.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon: {
+    doc: 'Icon to be included in the toggle button.',
+    type: ['string', 'React.ReactNode'],
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'Define icon width and height. Defaults to 16px.',
+    type: 'string',
+    status: 'optional'
+  },
+  size: ButtonProperties.size,
+  status: {
+    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['error', 'info', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: ['error', 'info'],
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.',
+    type: ['string', 'React.ReactNode'],
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ToggleButtonDocs.js.map

package/components/toggle-button/ToggleButtonDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonDocs.js","names":["ButtonProperties","ToggleButtonProperties","value","doc","type","status","text","checked","title","label","icon","icon_position","icon_size","size","status_state","status_props","globalStatus","suffix","skeleton"],"sources":["../../../../src/components/toggle-button/ToggleButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { ButtonProperties } from '../button/ButtonDocs'\n\nexport const ToggleButtonProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **ToggleButtonGroup**.',\n    type: 'string',\n    status: 'required',\n  },\n  text: {\n    doc: 'The text shown in the ToggleButton.',\n    type: 'string',\n    status: 'required',\n  },\n  checked: {\n    doc: 'Determine whether the ToggleButton is checked or not. The default will be `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',\n    type: 'string',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Icon to be included in the toggle button.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Define icon width and height. Defaults to 16px.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: ButtonProperties.size,\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.',\n    type: ['string', 'React.ReactNode'],\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,sBAAsB;AAEvD,OAAO,MAAMC,sBAA4C,GAAG;EAC1DC,KAAK,EAAE;IACLC,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,oFAAoF;IACzFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACnCC,MAAM,EAAE;EACV,CAAC;EACDM,aAAa,EAAE;IACbR,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,IAAI,EAAEb,gBAAgB,CAACa,IAAI;EAC3BR,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC;IAClCC,MAAM,EAAE;EACV,CAAC;EACDS,YAAY,EAAE;IACZX,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDU,YAAY,EAAE;IACZZ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,MAAM,EAAE;IACNd,GAAG,EAAE,oKAAoK;IACzKC,IAAI,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACnCC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/toggle-button/ToggleButtonGroup.d.ts

@@ -32,12 +32,21 @@ export interface ToggleButtonGroupProps
    * Use either the `label` property or provide a custom one.
    */
   label?: React.ReactNode;
+  /**
+   * To define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
   label_direction?: FormLabelLabelDirection;
+  /**
+   * Use `true` to make the label only readable by screen readers.
+   */
   label_sr_only?: boolean;
   /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
+   * The `title` of group, describing it a bit further for accessibility reasons.
    */
   title?: string;
+  /**
+   * Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to `false`.
+   */
   multiselect?: boolean;
   variant?: ToggleButtonGroupVariant;
   left_component?: React.ReactNode;
@@ -50,7 +59,7 @@ export interface ToggleButtonGroupProps
   id?: string;
   name?: string;
   /**
-   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
+   * Uses the `form-status` component to show failure messages.
    */
   status?: FormStatusText;
   /**
@@ -63,21 +72,27 @@ export interface ToggleButtonGroupProps
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
-   * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.
+   * Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.
    */
   suffix?: ToggleButtonGroupSuffix;
+  /**
+   * Will force both `direction` and `label_direction` to be **vertical** if set to `true`.
+   */
   vertical?: boolean;
+  /**
+   * Define the layout direction of the ToggleButton buttons. Can be either `column` or `row`. Defaults to `column`.
+   */
   layout_direction?: ToggleButtonGroupLayoutDirection;
   /**
-   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   * Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.
    */
   value?: ToggleButtonGroupValue;
   /**
-   * function values() { [native code] }
+   * Defines the pre-selected ToggleButton buttons in `multiselect` mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.
    */
   values?: ToggleButtonGroupValues;
   attributes?: ToggleButtonGroupAttributes;

package/components/toggle-button/ToggleButtonGroupDocs.d.ts

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

package/components/toggle-button/ToggleButtonGroupDocs.js

@@ -0,0 +1,83 @@
+export const ToggleButtonGroupProperties = {
+  value: {
+    doc: 'Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.',
+    type: 'string',
+    status: 'optional'
+  },
+  values: {
+    doc: 'Defines the pre-selected ToggleButton buttons in `multiselect` mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.',
+    type: 'array',
+    status: 'optional'
+  },
+  multiselect: {
+    doc: "Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to `false`.",
+    type: 'boolean',
+    status: 'optional'
+  },
+  layout_direction: {
+    doc: 'Define the layout direction of the ToggleButton buttons. Can be either `column` or `row`. Defaults to `column`.',
+    type: ['column', 'row'],
+    status: 'optional'
+  },
+  title: {
+    doc: 'The `title` of group, describing it a bit further for accessibility reasons.',
+    type: 'string',
+    status: 'optional'
+  },
+  status: {
+    doc: 'Uses the `form-status` component to show failure messages.',
+    type: 'string',
+    status: 'optional'
+  },
+  status_state: {
+    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
+    type: ['error', 'info'],
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'Use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  label: {
+    doc: 'Use either the `label` property or provide a custom one.',
+    type: 'string',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'To define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.',
+    type: ['vertical', 'horizontal'],
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'Will force both `direction` and `label_direction` to be **vertical** if set to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ToggleButtonGroupDocs.js.map

package/components/toggle-button/ToggleButtonGroupDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroupDocs.js","names":["ToggleButtonGroupProperties","value","doc","type","status","values","multiselect","layout_direction","title","status_state","status_props","globalStatus","label","label_direction","label_sr_only","vertical","suffix","skeleton"],"sources":["../../../../src/components/toggle-button/ToggleButtonGroupDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ToggleButtonGroupProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.',\n    type: 'string',\n    status: 'optional',\n  },\n  values: {\n    doc: 'Defines the pre-selected ToggleButton buttons in `multiselect` mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.',\n    type: 'array',\n    status: 'optional',\n  },\n  multiselect: {\n    doc: \"Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to `false`.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  layout_direction: {\n    doc: 'Define the layout direction of the ToggleButton buttons. Can be either `column` or `row`. Defaults to `column`.',\n    type: ['column', 'row'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of group, describing it a bit further for accessibility reasons.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Uses the `form-status` component to show failure messages.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'string',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'To define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.',\n    type: ['vertical', 'horizontal'],\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Will force both `direction` and `label_direction` to be **vertical** if set to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,KAAK,EAAE;IACLC,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,qLAAqL;IAC1LC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,YAAY,EAAE;IACZP,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,YAAY,EAAE;IACZT,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,KAAK,EAAE;IACLV,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,eAAe,EAAE;IACfX,GAAG,EAAE,yJAAyJ;IAC9JC,IAAI,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;IAChCC,MAAM,EAAE;EACV,CAAC;EACDU,aAAa,EAAE;IACbZ,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,MAAM,EAAE;IACNd,GAAG,EAAE,8KAA8K;IACnLC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/toggle-button/style/dnb-toggle-button.css

@@ -96,15 +96,15 @@
 .dnb-toggle-button-group fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-toggle-button-group fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-toggle-button-group fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-toggle-button-group fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-toggle-button-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 .dnb-toggle-button-group--column .dnb-toggle-button {
   display: flex;
   margin-right: 0;

package/components/toggle-button/style/dnb-toggle-button.min.css

@@ -1 +1 @@
-.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group,.dnb-toggle-button-group__fieldset,.dnb-toggle-button-group__shell{flex-grow:1}.dnb-toggle-button-group fieldset{border:none;padding:0}.dnb-toggle-button-group fieldset:not([class*=space__top]){margin-top:0}.dnb-toggle-button-group fieldset:not([class*=space__right]){margin-right:0}.dnb-toggle-button-group fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-toggle-button-group fieldset:not([class*=space__left]){margin-left:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;-moz-column-gap:var(--toggle-button-group-column-gap);column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40.00625em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}
+.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group,.dnb-toggle-button-group__fieldset,.dnb-toggle-button-group__shell{flex-grow:1}.dnb-toggle-button-group fieldset{border:none;padding:0}.dnb-toggle-button-group fieldset:not([class*=space__top]){margin-top:0}.dnb-toggle-button-group fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-toggle-button-group fieldset:not([class*=space__left]){margin-left:0}.dnb-toggle-button-group fieldset:not([class*=space__right]){margin-right:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;-moz-column-gap:var(--toggle-button-group-column-gap);column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40.00625em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}

package/elements/blockquote/style/blockquote-mixins.scss

@@ -1,4 +1,5 @@
 @use '../../../style/elements/ui-spacing.scss';
+@import '../../../components/space/style/space-mixins.scss';
 
 @mixin blockquoteStyle() {
   --blockquote-padding-top: 2rem;
@@ -15,9 +16,7 @@
   display: inline-block;
   width: auto;
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
   padding: 1.5rem;
 
   font-size: var(--font-size-small);
@@ -92,6 +91,9 @@
   .dnb-anchor {
     font-size: inherit;
   }
+  .dnb-code {
+    color: var(--color-black-80);
+  }
 }
 
 @mixin blockquoteTag() {

package/elements/code/style/code-mixins.scss

@@ -1,4 +1,5 @@
 @use '../../../style/elements/ui-spacing.scss';
+@import '../../../components/space/style/space-mixins.scss';
 
 @mixin codeStyle() {
   $code-scale: 0.875;
@@ -27,9 +28,7 @@
   display: block;
   overflow: auto;
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
   padding: 1rem;
 
   border-radius: 0.5rem;

package/elements/hr/style/hr-mixins.scss

@@ -1,4 +1,5 @@
 @use '../../../style/elements/ui-spacing.scss';
+@import '../../../components/space/style/space-mixins.scss';
 
 @mixin hrStyle() {
   position: relative;
@@ -8,9 +9,7 @@
 
   display: flow-root; // avoid margin collapsing on Safari
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
 
   border: 0;
 

package/elements/img/style/img-mixins.scss

@@ -3,6 +3,8 @@
  *
  */
 
+@import '../../../components/space/style/space-mixins.scss';
+
 @mixin imageStyle() {
   position: relative;
   z-index: 2;
@@ -35,9 +37,7 @@
   display: inline-flex;
   flex-direction: column;
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
   padding: 0;
 
   text-align: center; // works on Chrome – hides the alt text

package/elements/lists/style/lists-mixins.scss

@@ -5,6 +5,7 @@
 
 @use '../../../style/elements/ui-spacing.scss';
 @import '../../../style/core/utilities.scss';
+@import '../../../components/space/style/space-mixins.scss';
 
 @mixin listDefaults() {
   & ul,
@@ -42,9 +43,7 @@
 }
 
 @mixin ulStyle() {
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
 
   padding: 0;
   &:not([class*='dnb-space__left']) {
@@ -277,9 +276,7 @@
 @mixin unstyledList() {
   list-style-type: none;
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
   &:not([class*='dnb-space__left']) {
     padding-left: 0;
   }

package/elements/typography/style/typography-mixins.scss

@@ -1,4 +1,5 @@
 @use '../../../style/elements/ui-spacing.scss';
+@import '../../../components/space/style/space-mixins.scss';
 
 // includes all classes, tags, etc. needed for "global" typography rules (like css variables)
 @mixin typographySelectors() {
@@ -92,9 +93,7 @@
 @mixin headingDefaults() {
   padding: 0;
 
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
+  @include spaceReset();
 
   font-family: var(--font-family-heading);
 

package/es/components/accordion/Accordion.d.ts

@@ -122,130 +122,6 @@ export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> & Spacing
 };
 declare function Accordion({ variant, icon_size, ...restOfProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
-    var defaultProps: Omit<React.HTMLProps<HTMLElement>, "ref"> & import("../space/types").SpacingElementProps & {
-        space?: import("../space/types").SpaceTypeAll;
-        innerSpace?: import("../space/types").SpaceTypeAll | import("../space/types").SpaceTypeMedia;
-    } & {
-        /**
-         * A title as a string or React element. It will be used as the button text.
-         */
-        title?: React.ReactNode;
-        description?: React.ReactNode;
-        /**
-         * If set to `true` the accordion will be expanded as its initial state.
-         */
-        expanded?: boolean;
-        /**
-         * If set to `true`, the open and close animation will be omitted.
-         */
-        no_animation?: boolean;
-        /**
-         * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
-         */
-        expanded_ssr?: boolean;
-        /**
-         */
-        prerender?: boolean;
-        /**
-         * If set to `true` the accordion component will not re-render its content – can be useful for components you don&#39;t have control of storing the temporary state during an interaction.
-         */
-        prevent_rerender?: boolean;
-        /**
-         * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.
-         */
-        prevent_rerender_conditional?: boolean;
-        /**
-         * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
-         */
-        remember_state?: boolean;
-        /**
-         * Send along a custom React Ref for `.dnb-accordion__content`.
-         */
-        contentRef?: React.MutableRefObject<unknown>;
-        /**
-         * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.
-         */
-        flush_remembered_state?: boolean;
-        /**
-         * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.
-         */
-        single_container?: boolean;
-        /**
-         * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.
-         */
-        variant?: AccordionVariant;
-        /**
-         * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.
-         */
-        left_component?: React.ReactNode;
-        /**
-         * If set to `true`, the accordion button will be disabled (dimmed).
-         */
-        disabled?: boolean;
-        /**
-         * If set to `true`, an overlaying skeleton with animation will be shown.
-         */
-        skeleton?: boolean;
-        /**
-         * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
-         */
-        id?: string;
-        group?: string;
-        /**
-         * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.
-         */
-        element?: React.ReactNode;
-        /**
-         * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.
-         */
-        heading?: AccordionHeading;
-        /**
-         * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.
-         */
-        heading_level?: HeadingLevel;
-        /**
-         * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.
-         */
-        icon?: AccordionIcon;
-        /**
-         * Will set the placement of the icon. Defaults to `left`.
-         */
-        icon_position?: ButtonIconPosition;
-        /**
-         * Define a different icon size. Defaults to `medium` (1.5rem).
-         */
-        icon_size?: IconSize;
-        attributes?: AccordionAttributes;
-        className?: string;
-        children?: React.ReactNode;
-        /**
-         * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.
-         */
-        on_change?: (...args: any[]) => any;
-        on_state_update?: (...args: any[]) => any;
-    } & {
-        allow_close_all?: boolean;
-        /**
-         * Determines how many accordions can be expanded at once.
-         * Default: `single`
-         */
-        /**
-         * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11
-         */
-        expandBehaviour?: "multiple" | "single";
-        /**
-         * Determines how many accordions can be expanded at once.
-         * Default: `single`
-         */
-        expandBehavior?: "multiple" | "single";
-        /**
-         * ref handle to collapse all expanded accordions. Send in a ref and use `.current()` to collapse all accordions.
-         *
-         * Default: `undefined`
-         */
-        expanded_id?: string;
-        collapseAllHandleRef?: React.MutableRefObject<() => void>;
-    };
     var Provider: {
         (props: import("./AccordionGroup").AccordionGroupProps): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
@@ -273,7 +149,7 @@ export type GroupProps = AccordionProps & {
      * Default: `single`
      */
     /**
-     * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11
+     * @deprecated – Replaced with expandBehavior, expandBehaviour can be removed in v11.
      */
     expandBehaviour?: 'single' | 'multiple';
     /**

package/es/components/accordion/Accordion.js

@@ -208,7 +208,6 @@ function Accordion(_ref) {
     }, React.createElement("div", mainParams, findElementInChildren(children, cur => cur.type === AccordionHeader) ? null : _AccordionHeader || (_AccordionHeader = React.createElement(AccordionHeader, null)), findElementInChildren(children, cur => cur.type === AccordionContent) ? children : React.createElement(AccordionContent, null, children)));
   }));
 }
-Accordion.defaultProps = accordionDefaultProps;
 const Group = _ref2 => {
   let {
       expandBehaviour = 'single',