@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/radiogroup.CMJ1b38q.js

@@ -1,11 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C-kxDJ4g.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import "./chunks/Fieldset.BokeZzG5.js";
-import "./radio.Bhu9OUY-.js";
-import "./chunks/RadioGroup.module.bi3leRes.js";
-import { D as s } from "./chunks/RadioGroup.DpwnVv7u.js";
-export {
-  s as DSRadioGroup
-};

package/select.DFJK2mHF.js

@@ -1,12 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C-kxDJ4g.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.DU8THnoC.js";
-import "./chunks/Icon.9gDIp6p4.js";
-import "./systemfeedback.4Hkfigi-.js";
-import { D as s } from "./chunks/Select.DkDZo0ky.js";
-export {
-  s as DSSelect
-};

package/spinner.BskX4ovu.js

@@ -1,58 +0,0 @@
-"use client";
-import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as n } from "./chunks/index.CvOaL64Y.js";
-import { D as _ } from "./chunks/Icon.9gDIp6p4.js";
-import './assets/spinner.C5rBmKiF.css';const m = "_root_1xfbe_63", z = "_root-size-small_1xfbe_69", c = "_root-size-medium_1xfbe_73", x = "_root-size-large_1xfbe_77", S = "_root-size-x-large_1xfbe_81", f = "_root-size-inherit_1xfbe_85", d = "_rotate_1xfbe_1", b = "_screenReaderOnly_1xfbe_105", e = {
-  root: m,
-  "root-size-small": "_root-size-small_1xfbe_69",
-  rootSizeSmall: z,
-  "root-size-medium": "_root-size-medium_1xfbe_73",
-  rootSizeMedium: c,
-  "root-size-large": "_root-size-large_1xfbe_77",
-  rootSizeLarge: x,
-  "root-size-x-large": "_root-size-x-large_1xfbe_81",
-  rootSizeXLarge: S,
-  "root-size-inherit": "_root-size-inherit_1xfbe_85",
-  rootSizeInherit: f,
-  rotate: d,
-  screenReaderOnly: b
-}, p = ({
-  aria: r,
-  className: i,
-  size: o = "small",
-  theme: s = "light",
-  ...a
-}) => {
-  const l = n(e.root, i, {
-    [e.rootSizeSmall]: o === "small",
-    [e.rootSizeMedium]: o === "medium",
-    [e.rootSizeLarge]: o === "large",
-    [e.rootSizeXLarge]: o === "x-large",
-    [e.rootSizeInherit]: o === "inherit"
-  });
-  return /* @__PURE__ */ t.jsxs(
-    "span",
-    {
-      className: l,
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-label": (r == null ? void 0 : r["aria-label"]) || void 0,
-      ...a,
-      children: [
-        /* @__PURE__ */ t.jsx("span", { className: e.screenReaderOnly, children: " " }),
-        /* @__PURE__ */ t.jsx(
-          _,
-          {
-            name: "loading-spinner",
-            theme: s,
-            focusable: "false",
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  p as DSSpinner
-};

package/styles/scss/_index.scss

@@ -1,23 +0,0 @@
-@import 'lib/_a11y.scss';
-@import 'lib/_animation.scss';
-@import 'lib/_breakpoints.scss';
-@import 'lib/_container-query.scss';
-@import 'lib/_focus.scss';
-@import 'lib/_grid.scss';
-@import 'lib/_grid-extended.scss';
-@import 'lib/_grid-full.scss';
-@import 'lib/_grid-main.scss';
-@import 'lib/_grid-narrow.scss';
-@import 'lib/_grid-sidebar.scss';
-@import 'lib/_grid-sidebar-sidebar.scss';
-@import 'lib/_heading.scss';
-@import 'lib/_helpers.scss';
-@import 'lib/_high-contrast.scss';
-@import 'lib/_hover.scss';
-@import 'lib/_link.scss';
-@import 'lib/_media-query.scss';
-@import 'lib/_shadow.scss';
-@import 'lib/_spacing.scss';
-@import 'lib/_text.scss';
-@import 'lib/_theme.scss';
-@import 'lib/_transition.scss';

package/styles/scss/lib/_a11y.scss

@@ -1,15 +0,0 @@
-// Visually hide an element but keep them available to screen reader and other assistive
-// technology users.
-// https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
-@mixin ds-visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  text-indent: -999999px;
-  white-space: nowrap;
-}

package/styles/scss/lib/_animation.scss

@@ -1,20 +0,0 @@
-$ds-animation-duration-100: var(--ds-animation-duration, 100ms);
-$ds-animation-duration-250: var(--ds-animation-duration, 250ms);
-$ds-animation-duration-400: var(--ds-animation-duration, 400ms);
-// TODO remove or move to spinner component after discussion with design took place
-$ds-animation-duration-spinner: var(--ds-animation-duration, 1100ms);
-
-$ds-animation-timing-function-ease-in-out: ease-in-out;
-$ds-animation-timing-function-motion-functional-linear: linear;
-$ds-animation-timing-function-motion-functional-ease-in: cubic-bezier(
-  0.5,
-  0,
-  1,
-  1
-);
-$ds-animation-timing-function-motion-functional-ease-out: cubic-bezier(
-  0,
-  0,
-  0.5,
-  1
-);

package/styles/scss/lib/_breakpoints.scss

@@ -1,16 +0,0 @@
-$ds-breakpoint-base: 0;
-$ds-breakpoint-s: 320;
-$ds-breakpoint-m: 768;
-$ds-breakpoint-l: 1024;
-$ds-breakpoint-xl: 1536;
-// only used in grid, exposed in media query stories for custom control over grid
-$ds-breakpoint-xxl: 1668;
-
-$ds-breakpoints: (
-  'base': $ds-breakpoint-base,
-  's': $ds-breakpoint-s,
-  'm': $ds-breakpoint-m,
-  'l': $ds-breakpoint-l,
-  'xl': $ds-breakpoint-xl,
-  'xxl': $ds-breakpoint-xxl,
-);

package/styles/scss/lib/_container-query.scss

@@ -1,58 +0,0 @@
-@import '_breakpoints.scss';
-
-@mixin ds-container-query-min($min: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $min) {
-    $value: #{map-get($ds-breakpoints, $min)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "Passed #{$min} breakpoint is not available for used ds-container-query-min() mixin.";
-  }
-}
-
-@mixin ds-container-query-max($max: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $max) {
-    $value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (width < #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (width < #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "Passed #{$max} breakpoint is not available for used ds-container-query-max() mixin.";
-  }
-}
-
-@mixin ds-container-query-min-max(
-  $min: null,
-  $max: null,
-  $container-name: null
-) {
-  @if map-has-key($ds-breakpoints, $min) and map-has-key($ds-breakpoints, $max)
-  {
-    $min-value: #{map-get($ds-breakpoints, $min)}px;
-    $max-value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "Passed #{$min} and/or #{$max} breakpoint is not available for used ds-container-query-min-max() mixin.";
-  }
-}

package/styles/scss/lib/_focus.scss

@@ -1,62 +0,0 @@
-@import '_theme';
-@import '_high-contrast';
-
-@mixin outline($theme, $offset, $thickness: 2px) {
-  outline: $thickness solid;
-  outline-color: if(
-    $theme == 'light',
-    $ds-theme-light-border-color-focus,
-    $ds-theme-dark-border-color-focus
-  );
-  outline-offset: $offset;
-
-  @include high-contrast-media-query {
-    forced-color-adjust: auto;
-    outline-color: Highlight;
-  }
-}
-
-// Read more here: https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-@mixin ds-focus($theme: 'light', $offset: 2px, $thickness: 2px) {
-  &:focus {
-    @include outline($theme, $offset, $thickness);
-  }
-  @supports selector(:focus-visible) {
-    &:focus {
-      /* revert all the above focus styles */
-      outline: revert;
-      outline-offset: revert;
-    }
-    &:focus-visible {
-      /* and then reapply the styles here instead */
-      @include outline($theme, $offset, $thickness);
-    }
-  }
-}
-
-/**
-* Adds focus to the before pseudo element, removing the original focus behavior on the parent element
-*/
-@mixin ds-focus-pseudo($theme: 'light', $offset: 2px, $thickness: 2px) {
-  // remove focus from actual element
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:focus::before {
-    @include outline($theme, $offset, $thickness);
-  }
-
-  @supports selector(:focus-visible) {
-    &:focus::before {
-      /* revert all the above focus styles */
-      outline: revert;
-      outline-offset: revert;
-    }
-    &:focus-visible::before {
-      /* and then reapply the styles here instead */
-      @include outline($theme, $offset, $thickness);
-    }
-  }
-}

package/styles/scss/lib/_grid-extended.scss

@@ -1,11 +0,0 @@
-$ds-grid-extended-column-start: extended-start;
-$ds-grid-extended-column-end: extended-end;
-
-@mixin ds-grid-extended-column {
-  grid-column: $ds-grid-extended-column-start / $ds-grid-extended-column-end;
-
-  @media (min-width: 1668px) {
-    margin-inline-start: -32px;
-    margin-inline-end: -32px;
-  }
-}

package/styles/scss/lib/_grid-full.scss

@@ -1,6 +0,0 @@
-$ds-grid-full-column-start: full-start;
-$ds-grid-full-column-end: full-end;
-
-@mixin ds-grid-full-column {
-  grid-column: $ds-grid-full-column-start / $ds-grid-full-column-end;
-}

package/styles/scss/lib/_grid-main.scss

@@ -1,117 +0,0 @@
-$ds-grid-main-column-start: main-start;
-$ds-grid-main-column-end: main-end;
-$ds-grid-sidebar-main-column-start: $ds-grid-main-column-start;
-$ds-grid-sidebar-main-column-end: $ds-grid-main-column-end;
-
-@mixin ds-grid-main-column {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-main-column {
-  @include ds-grid-main-column;
-}
-
-// Half
-@mixin ds-grid-span-first-half {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-half;
-}
-@mixin ds-grid-span-second-half {
-  grid-column: $ds-grid-span-one-half / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-span-first-half {
-  @include ds-grid-span-first-half;
-}
-@mixin ds-grid-sidebar-span-second-half {
-  @include ds-grid-span-second-half;
-}
-
-// Third
-@mixin ds-grid-span-first-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-third;
-  }
-}
-@mixin ds-grid-span-one-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-one-third;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-third {
-  @include ds-grid-span-first-third;
-}
-@mixin ds-grid-sidebar-span-one-third {
-  @include ds-grid-span-one-third;
-}
-
-// Two Thirds
-@mixin ds-grid-span-first-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-two-thirds;
-  }
-}
-@mixin ds-grid-span-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-two-thirds / $ds-grid-main-column-end;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-two-thirds {
-  @include ds-grid-span-first-two-thirds;
-}
-@mixin ds-grid-sidebar-span-two-thirds {
-  @include ds-grid-span-two-thirds;
-}
-
-// Quarter
-@mixin ds-grid-span-first-quarter {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-}
-@mixin ds-grid-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('l') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-quarter {
-  @include ds-grid-span-first-quarter;
-}
-
-@mixin ds-grid-sidebar-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('xl') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-$ds-grid-span-one-half: var(--ds-grid-span-one-half);
-$ds-grid-span-one-third: var(--ds-grid-span-one-third);
-$ds-grid-span-two-thirds: var(--ds-grid-span-two-thirds);
-$ds-grid-span-one-quarter: var(--ds-grid-span-one-quarter);
-
-$ds-grid-sidebar-span-one-half: $ds-grid-span-one-half;
-$ds-grid-sidebar-span-one-third: $ds-grid-span-one-third;
-$ds-grid-sidebar-span-two-thirds: $ds-grid-span-two-thirds;
-$ds-grid-sidebar-span-one-quarter: $ds-grid-span-one-quarter;

package/styles/scss/lib/_grid-narrow.scss

@@ -1,14 +0,0 @@
-$ds-grid-narrow-left-column-start: narrow-left-start;
-$ds-grid-narrow-left-column-end: narrow-left-end;
-$ds-grid-narrow-center-column-start: narrow-center-start;
-$ds-grid-narrow-center-column-end: narrow-center-end;
-
-@mixin ds-grid-narrow-left-column {
-  grid-column: $ds-grid-narrow-left-column-start /
-    $ds-grid-narrow-left-column-end;
-}
-
-@mixin ds-grid-narrow-center-column {
-  grid-column: $ds-grid-narrow-center-column-start /
-    $ds-grid-narrow-center-column-end;
-}

package/styles/scss/lib/_grid-sidebar-sidebar.scss

@@ -1,50 +0,0 @@
-$ds-grid-sidebar-sidebar-1-column-start: sidebar-1-start;
-$ds-grid-sidebar-sidebar-1-column-end: sidebar-1-end;
-$ds-grid-sidebar-sidebar-2-column-start: sidebar-2-start;
-$ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
-
-// Sidebar 1
-@mixin ds-grid-sidebar-sidebar-1($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    display: unset;
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    grid-column: $ds-grid-sidebar-sidebar-1-column-start /
-      $ds-grid-sidebar-sidebar-1-column-end;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      width: 264px;
-      max-width: 264px;
-    } @else {
-      width: 64px;
-      max-width: 64px;
-    }
-  }
-}
-// Sidebar 2
-@mixin ds-grid-sidebar-sidebar-2($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      grid-column: $ds-grid-sidebar-sidebar-2-column-start /
-        $ds-grid-sidebar-sidebar-2-column-end;
-      display: unset;
-      width: 320px;
-      max-width: 320px;
-      margin-inline-start: -24px;
-    }
-  }
-  @media (min-width: 1535px) {
-    margin-inline-start: -32px;
-  }
-}

package/styles/scss/lib/_grid-sidebar.scss

@@ -1,157 +0,0 @@
-@import './_grid-sidebar-sidebar.scss';
-
-@mixin ds-grid-sidebar($is-sidebar-1-open: false, $is-sidebar-2-open: false) {
-  @if $is-sidebar-1-open == false and $is-sidebar-2-open == true {
-    @error "Sidebar 1 cannot be visually closed when sidebar 2 is open";
-  }
-
-  display: grid;
-  --ds-grid-sidebar-gap: 16px;
-  gap: var(--ds-grid-sidebar-gap);
-  min-width: 320px;
-  grid-template-columns:
-    var(--ds-internal-grid-safe-zone)
-    [main-start] repeat(4, minmax(0, 1fr))
-    [main-end] var(--ds-internal-grid-safe-zone);
-  --ds-internal-grid-safe-zone: 0;
-  --ds-grid-span-one-half: span 4;
-  --ds-grid-span-one-third: span 4;
-  --ds-grid-span-two-thirds: span 4;
-  --ds-grid-span-one-quarter: span 2;
-
-  @if $is-sidebar-1-open == false {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(false);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
-    }
-  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(true);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(false);
-    }
-  } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-    & > :first-child {
-      @include ds-grid-sidebar-sidebar-1(true);
-    }
-    & > :nth-child(2) {
-      @include ds-grid-sidebar-sidebar-2(true);
-    }
-  }
-
-  @include ds-media-query-min('m') {
-    --ds-grid-sidebar-gap: 24px;
-    gap: var(--ds-grid-sidebar-gap);
-    grid-template-columns:
-      var(--ds-internal-grid-safe-zone)
-      [main-start] repeat(6, minmax(0, 1fr))
-      [main-end] var(--ds-internal-grid-safe-zone);
-    --ds-internal-grid-safe-zone: 9px;
-    --ds-grid-span-one-half: span 3;
-    --ds-grid-span-one-third: span 2;
-    --ds-grid-span-two-thirds: span 4;
-    --ds-grid-span-one-quarter: span 3;
-  }
-
-  @include ds-media-query-min('l') {
-    --ds-grid-sidebar-gap: 0px;
-    gap: var(--ds-grid-sidebar-gap);
-    column-gap: 24px;
-    // The children get a margin-block-end to imitate row-gap behavior
-    // This is counteracted for the last row in the parent
-    margin-block-end: -24px;
-    & > * {
-      margin-block-end: 24px;
-    }
-    @if $is-sidebar-1-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(64px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end sidebar-2-start] fit-content(320px)
-        [sidebar-2-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(6, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    }
-
-    --ds-internal-grid-safe-zone-left: 2px;
-    /**
-     * The safe zone + gap equal to what is called "margin" in the designs.
-     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
-     * HOWEVER, in code, the margins are always the same!
-     * 26 + 24 = 50
-     */
-    --ds-internal-grid-safe-zone-right: 26px;
-
-    --ds-grid-span-one-half: span 3;
-    --ds-grid-span-one-third: span 2;
-    --ds-grid-span-two-thirds: span 4;
-  }
-
-  @include ds-media-query-min('xl') {
-    column-gap: 32px;
-    // The children get a margin-block-end to imitate row-gap behavior
-    // This is counteracted for the last row in the parent
-    margin-block-end: -32px;
-    & > * {
-      margin-block-end: 32px;
-    }
-
-    @if $is-sidebar-1-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(64px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
-      grid-template-columns:
-        [sidebar-1-start] fit-content(264px)
-        [sidebar-1-end sidebar-2-start] fit-content(320px)
-        [sidebar-2-end]
-        var(--ds-internal-grid-safe-zone-left)
-        [main-start] repeat(12, minmax(0, 1fr))
-        [main-end] var(--ds-internal-grid-safe-zone-right);
-    }
-
-    --ds-internal-grid-safe-zone-left: 0px;
-    /**
-     * The safe zone + gap equal to what is called "margin" in the designs.
-     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
-     * HOWEVER, in code, the margins are always the same!
-     * 32 + 32 = 64
-     */
-    --ds-internal-grid-safe-zone-right: 32px;
-
-    --ds-grid-span-one-half: span 6;
-    --ds-grid-span-one-third: span 4;
-    --ds-grid-span-two-thirds: span 8;
-  }
-
-  @media (min-width: 2304px) {
-    max-width: 2304px;
-  }
-}