@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.31

package/radiogroup.oILRMrX-.js

@@ -1,102 +0,0 @@
-"use client";
-import { j as d } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as N } from "./chunks/index.CvOaL64Y.js";
-import { forwardRef as P, useState as C } from "react";
-import { DSFieldset as y } from "./fieldset.DGcIKzDI.js";
-import { DSRadio as z } from "./radio.Bhu9OUY-.js";
-import { s as c } from "./chunks/RadioGroup.module.bi3leRes.js";
-import { g as a } from "./chunks/helpers.B1JT5ShS.js";
-const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, M = ({
-  description: o,
-  id: e,
-  legend: t,
-  name: s,
-  options: i,
-  systemFeedback: n
-}) => {
-  if (!e && (o || n))
-    throw new Error(
-      a(
-        "DSRadioGroup",
-        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSRadioGroup component.'
-      )
-    );
-  if (!t)
-    throw new Error(
-      a("DSRadioGroup", f("legend"))
-    );
-  if (!s)
-    throw new Error(
-      a("DSRadioGroup", f("name"))
-    );
-  if (!i)
-    throw new Error(
-      a("DSRadioGroup", f("options"))
-    );
-}, O = P(
-  ({
-    legend: o,
-    name: e,
-    options: t,
-    alignment: s = "vertical",
-    className: i,
-    defaultValue: n,
-    description: m,
-    disabled: l = !1,
-    id: h,
-    invalid: p = !1,
-    required: S = !1,
-    systemFeedback: u,
-    value: D,
-    onChange: R,
-    ...G
-  }, v) => {
-    process.env.NODE_ENV !== "production" && M({ description: m, id: h, legend: o, name: e, options: t, systemFeedback: u });
-    const [E, x] = C(n), w = D !== void 0, g = w ? D : E, j = N(c.root, {
-      // In case of longer copy, use vertical alignment
-      [c.rootHorizontal]: s === "horizontal",
-      [c.rootInvalid]: p && !!u
-    }), q = (r) => {
-      if (l) {
-        r.preventDefault();
-        return;
-      }
-      w || x(
-        r.target.value
-      ), R && R(r);
-    };
-    return /* @__PURE__ */ d.jsx(
-      y,
-      {
-        id: h,
-        legend: o,
-        className: i,
-        description: m,
-        disabled: l,
-        required: S,
-        invalid: p,
-        systemFeedback: u,
-        ...G,
-        role: "radiogroup",
-        onChange: q,
-        children: /* @__PURE__ */ d.jsx("div", { className: j, children: t.map((r) => /* @__PURE__ */ d.jsx(
-          z,
-          {
-            name: e,
-            checked: r.value === g,
-            disabled: l,
-            invalid: p,
-            required: S,
-            ref: r.value === g ? v : null,
-            ...r
-          },
-          r.label + r.value
-        )) })
-      }
-    );
-  }
-);
-O.displayName = "DSRadioGroup";
-export {
-  O as DSRadioGroup
-};

package/select.OGcreXnT.js

@@ -1,190 +0,0 @@
-"use client";
-import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as _ } from "./chunks/index.CvOaL64Y.js";
-import { useRef as $, useState as C, useEffect as W } from "react";
-import { u as F } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { Asterisk as M } from "./asterisk.DU8THnoC.js";
-import { DSIcon as O } from "./icon.PX9_1kNB.js";
-import { DSSystemFeedback as V } from "./systemfeedback.C7iXO5A1.js";
-import { g as f } from "./chunks/helpers.B1JT5ShS.js";
-import './assets/select.D2qBxaHP.css';const J = "_root_quxca_187", K = "_hint_quxca_195", Q = "_label_quxca_195", T = "_wrapper_quxca_199", U = "_affix_quxca_205", X = "_affix--small_quxca_225", Y = "_affix--disabled_quxca_237", Z = "_prefix_quxca_240", z = "_affix--readonly_quxca_243", G = "_suffix_quxca_253", ee = "_action-button_quxca_260", ae = "_label--hidden_quxca_277", te = "_feedback_quxca_304", ce = "_select-wrapper_quxca_309", se = "_select_quxca_309", ne = "_select--invalid_quxca_428", le = "_select--small_quxca_435", oe = "_input--has-leading-icon_quxca_481", ie = "_input--has-action-button_quxca_484", re = "_input--has-second-action-button_quxca_487", _e = "_select--has-leading-icon_quxca_490", ue = "_select--has-action-button_quxca_493", de = "_select--has-second-action-button_quxca_496", xe = "_select--has-affix_quxca_499", fe = "_select--is-ready_quxca_511", he = "_select--placeholder_quxca_523", pe = "_chevron_quxca_532", be = "_chevron--small_quxca_536", me = "_chevron--disabled_quxca_539", e = {
-  root: J,
-  hint: K,
-  label: Q,
-  wrapper: T,
-  affix: U,
-  "affix--small": "_affix--small_quxca_225",
-  affixSmall: X,
-  "affix--disabled": "_affix--disabled_quxca_237",
-  affixDisabled: Y,
-  prefix: Z,
-  "affix--readonly": "_affix--readonly_quxca_243",
-  affixReadonly: z,
-  suffix: G,
-  "action-button": "_action-button_quxca_260",
-  actionButton: ee,
-  "label--hidden": "_label--hidden_quxca_277",
-  labelHidden: ae,
-  feedback: te,
-  "select-wrapper": "_select-wrapper_quxca_309",
-  selectWrapper: ce,
-  select: se,
-  "select--invalid": "_select--invalid_quxca_428",
-  selectInvalid: ne,
-  "select--small": "_select--small_quxca_435",
-  selectSmall: le,
-  "input--has-leading-icon": "_input--has-leading-icon_quxca_481",
-  inputHasLeadingIcon: oe,
-  "input--has-action-button": "_input--has-action-button_quxca_484",
-  inputHasActionButton: ie,
-  "input--has-second-action-button": "_input--has-second-action-button_quxca_487",
-  inputHasSecondActionButton: re,
-  "select--has-leading-icon": "_select--has-leading-icon_quxca_490",
-  selectHasLeadingIcon: _e,
-  "select--has-action-button": "_select--has-action-button_quxca_493",
-  selectHasActionButton: ue,
-  "select--has-second-action-button": "_select--has-second-action-button_quxca_496",
-  selectHasSecondActionButton: de,
-  "select--has-affix": "_select--has-affix_quxca_499",
-  selectHasAffix: xe,
-  "select--is-ready": "_select--is-ready_quxca_511",
-  selectIsReady: fe,
-  "select--placeholder": "_select--placeholder_quxca_523",
-  selectPlaceholder: he,
-  chevron: pe,
-  "chevron--small": "_chevron--small_quxca_536",
-  chevronSmall: be,
-  "chevron--disabled": "_chevron--disabled_quxca_539",
-  chevronDisabled: me
-}, qe = ({
-  id: a,
-  label: n,
-  options: s
-}) => {
-  if (!a)
-    throw new Error(
-      f(
-        "DSSelect",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
-      )
-    );
-  if (!n)
-    throw new Error(
-      f(
-        "DSSelect",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-  if (!s || s.length === 0)
-    throw new Error(
-      f(
-        "DSSelect",
-        'Options are always required. Please add an "options" prop to the DSSelect component.'
-      )
-    );
-}, ve = (a, n, s) => a === "" || n !== void 0 && n !== "" ? !1 : !(s !== void 0 && s !== ""), Ae = ({
-  id: a,
-  label: n,
-  options: s,
-  className: H,
-  defaultValue: h,
-  disabled: p = !1,
-  hideLabel: w = !1,
-  hint: u,
-  invalid: r = !1,
-  placeholder: d = "Select",
-  required: b = !1,
-  size: m = "medium",
-  systemFeedback: x,
-  value: q,
-  ...D
-}) => {
-  process.env.NODE_ENV !== "production" && qe({
-    id: a,
-    label: n,
-    options: s
-  });
-  const i = $(null), [I, j] = C(
-    ve(d, h, q)
-  );
-  W(() => {
-    if (!i.current)
-      return;
-    const l = () => {
-      if (!i.current)
-        return;
-      const o = i.current.value;
-      j(o === "");
-    }, c = i.current;
-    return c.addEventListener("change", l), () => {
-      c.removeEventListener("change", l);
-    };
-  }, []);
-  const A = F(w), v = `${a}-label`, S = `${a}-feedback`, g = `${a}-hint`, B = u ? ` ${g}` : "", N = (l) => [
-    d && /* @__PURE__ */ t.jsx("option", { value: "", children: d }, `${a}-hidden-option-disabled-placeholder`),
-    ...l.map((c) => {
-      if ("options" in c) {
-        const { label: o, options: R } = c;
-        return /* @__PURE__ */ t.jsx("optgroup", { label: o, children: R.map(y) }, o);
-      } else
-        return y(c);
-    })
-  ], y = ({ label: l, value: c, isDisabled: o }) => /* @__PURE__ */ t.jsx("option", { value: c, disabled: o, children: l }, c), P = _(e.root, H), E = _(e.select, {
-    [e.selectSmall]: m === "small",
-    [e.selectInvalid]: r,
-    [e.selectPlaceholder]: I
-  }), L = _(e.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [e.labelHidden]: A
-  }), k = _(e.chevron, {
-    [e.chevronSmall]: m === "small",
-    [e.chevronDisabled]: p
-  });
-  return /* @__PURE__ */ t.jsxs("div", { className: P, children: [
-    /* @__PURE__ */ t.jsxs("label", { className: L, id: v, htmlFor: a, children: [
-      n,
-      b && /* @__PURE__ */ t.jsx(M, {})
-    ] }),
-    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: g, children: u }),
-    r && x && /* @__PURE__ */ t.jsx(
-      V,
-      {
-        className: e.feedback,
-        message: x,
-        type: "invalid",
-        id: S,
-        "aria-live": "assertive"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
-      /* @__PURE__ */ t.jsx(
-        "select",
-        {
-          ...D,
-          id: a,
-          ref: i,
-          className: E,
-          "aria-labelledby": `${v}${B}`,
-          "aria-describedby": r && x ? S : void 0,
-          "aria-invalid": r,
-          defaultValue: h,
-          value: q,
-          disabled: p,
-          required: b,
-          children: N(s)
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        O,
-        {
-          name: "chevron-down",
-          className: k,
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Ae as DSSelect
-};

package/spinner.Diy_EeFY.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 { DSIcon as _ } from "./icon.PX9_1kNB.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,22 +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/_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,6 +0,0 @@
-$ds-animation-duration-short: var(--ds-animation-duration, 550ms);
-$ds-animation-duration-medium: var(--ds-animation-duration, 1100ms);
-$ds-animation-duration-long: var(--ds-animation-duration, 1650ms);
-
-$ds-animation-timing-function-ease-in-out: ease-in-out;
-$ds-animation-timing-function-linear: linear;

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/_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,48 +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;
-    @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;
-    @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;
-  }
-}