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

package/chunks/useBreakpoint.5xBNDiCf.js

@@ -1,48 +0,0 @@
-"use client";
-import { useState as c, useEffect as k } from "react";
-const a = typeof window < "u", o = {
-  base: 0,
-  s: 320,
-  m: 768,
-  l: 1024,
-  xl: 1536
-}, u = ["base", "s", "m", "l", "xl"], f = (e) => {
-  let n = "base";
-  for (const t of u)
-    if (e >= o[t])
-      n = t;
-    else
-      break;
-  return n;
-}, b = (e) => e && typeof e == "object" && "base" in e, d = () => {
-  const [e, n] = c("base");
-  k(() => {
-    if (a)
-      return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-  }, []);
-  const t = () => {
-    if (a) {
-      const r = window.innerWidth;
-      n(f(r));
-    }
-  };
-  return e;
-}, B = (e) => {
-  const n = d();
-  if (e && typeof e != "object" || !b(e))
-    return e;
-  const t = [...u].reverse();
-  let r = e.base;
-  for (const s of t) {
-    const i = e[s];
-    if (i !== void 0 && o[n] >= o[s]) {
-      r = i;
-      break;
-    }
-  }
-  return r;
-};
-export {
-  a as h,
-  B as u
-};

package/combobox.BaSkiD6f.js

@@ -1,47 +0,0 @@
-"use client";
-import { j as u } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { v as x, c as C } from "./chunks/CustomReactSelect.DtmbYZUf.js";
-const v = ({
-  id: s,
-  label: o,
-  className: n,
-  disabled: a = !1,
-  dropdownOnFocus: e = !1,
-  hideLabel: l = !1,
-  invalid: c = !1,
-  lang: m = "en",
-  required: r = !1,
-  variant: f = "single",
-  ...t
-}) => {
-  if (process.env.NODE_ENV !== "production") {
-    const { options: p } = t;
-    x({
-      id: s,
-      label: o,
-      options: p
-    });
-  }
-  const i = f === "multi";
-  return /* @__PURE__ */ u.jsx(
-    C,
-    {
-      id: s,
-      label: o,
-      className: n,
-      disabled: a,
-      hideLabel: l,
-      isMulti: i,
-      invalid: c,
-      lang: m,
-      openMenuOnClick: e,
-      openMenuOnFocus: e,
-      isClearable: !e || i,
-      required: r,
-      ...t
-    }
-  );
-};
-export {
-  v as DSCombobox
-};

package/components/CustomReactSelect/CustomReactSelect.d.ts

@@ -1,60 +0,0 @@
-import { GroupBase } from 'react-select';
-import { BreakpointCustomizable, Optional } from '../../types';
-import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox/Combobox.utils';
-import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
-import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
-
-type IncludedReactSelectKeys = 'className' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
-type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<Optional<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, 'inputValue'>, IncludedReactSelectKeys>;
-type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>;
-export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
-    /** Unique id for the DSCombobox */
-    id: string;
-    /** Label text displayed above the DSCombobox */
-    label: string;
-    /**
-     * Defines the options, can be a mixed array of options and option groups
-     *  `type ComboboxOption = {label: string; value: string | number; leadingIconName?: IconName; isDisabled?: boolean;}`
-     *  `type ComboboxOptionsGroup = {label: string; options: ComboboxOption[];}`
-     *  `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
-     * */
-    options: ComboboxOptionsOrOptGroups;
-    /** The value of autocomplete to use for the DSCombobox */
-    autoComplete?: string;
-    /** Value of the selected Option in **uncontrolled DSCombobox** component */
-    defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Disables the DSCombobox, preventing user interaction */
-    disabled?: boolean;
-    /** Hides the DSCombobox label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
-    hint?: string;
-    /** Marks the DSCombobox as invalid, typically used for form validation */
-    invalid?: boolean;
-    /** Allows selection of multiple options */
-    isMulti: boolean;
-    /** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided */
-    lang?: ComboboxLanguage;
-    /** Indicates that the DSCombobox is required */
-    required?: boolean;
-    /** Size of the input */
-    size?: ComboboxSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
-    systemFeedback?: string;
-    /** Translations for the DSCombobox. Use our [customization page](/?path=/story/components-combobox-translations--documentation) for creating custom translations. */
-    translations?: ComboboxAriaTranslations;
-    /** Value of the DSCombobox */
-    value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Callback function triggered when the selection of the DSCombobox changes */
-    onChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
-    /** Callback function triggered when the value of the DSCombobox input changes */
-    onInputChange?: (newValue: string) => void;
-}
-/**
- * Internal customized react select component, which is in parts exposed to our consumers
- * via the DSCombobox component
- * */
-export declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
-export {};

package/components/CustomReactSelect/CustomReactSelect.utils.d.ts

@@ -1,16 +0,0 @@
-import { AriaLiveMessages, GroupBase } from 'react-select';
-import { ComboboxAriaTranslations } from '../Combobox/Combobox.utils';
-
-type ComboboxAriaTranslationKey = keyof ComboboxAriaTranslations;
-/**
- * Translates a given key using specified translations and dynamic replacements of placeholders like {0} or {1}.
- * Unmatched placeholders in the translation are removed.
- *
- * @param {ComboboxAriaTranslationKey} key - The key identifying the text to be translated.
- * @param {ComboboxAriaTranslations} translations - Object containing translation mappings.
- * @param {string[]} [replacements=[]] - Optional array of replacement strings for placeholders in the translation.
- * @returns {string} The translated string with placeholders replaced by corresponding values in replacements array or removed if no match is found.
- */
-export declare const translate: (key: ComboboxAriaTranslationKey, translations: ComboboxAriaTranslations, replacements?: string[]) => string;
-export declare const defaultAriaLiveMessages: (translations: ComboboxAriaTranslations) => AriaLiveMessages<unknown, boolean, GroupBase<unknown>>;
-export {};

package/components/InputStepper/InputStepper.d.ts

@@ -1,53 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
-import { InputSize } from '../Input/Input.utils';
-
-export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
-    /** Unique id for the input */
-    id: string;
-    /** Label text displayed above the input */
-    label: string;
-    /** Text used for assistive technologies when the value changes */
-    announcementText?: string;
-    /** Disables the input, preventing user interaction */
-    disabled?: boolean;
-    /** Accessibility label for the decrease button */
-    decreaseAmountButtonLabel?: string;
-    /** Hides the input label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
-    hint?: string;
-    /** Accessibility label for the increase button */
-    increaseAmountButtonLabel?: string;
-    /** Marks the input as invalid, typically used for form validation */
-    invalid?: boolean;
-    /** The maximum value for the input */
-    max?: number;
-    /** The minimum value for the input */
-    min?: number;
-    /** Text displayed as a prefix inside the input, maximum 8 characters */
-    prefix?: string;
-    /** Enables the readonly state of the input */
-    readonly?: boolean;
-    /** Indicates that the input is required */
-    required?: boolean;
-    /** The interval between legal numbers of the input */
-    step?: number;
-    /** Text displayed as a suffix inside the input, maximum 5 characters */
-    suffix?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
-    systemFeedback?: string;
-    /** Size of the input */
-    size?: InputSize;
-    /** Value of the input */
-    value?: string;
-}
-/**
- * The `<DSInputStepper />` component is a versatile input field that allows users to easily enter a value and decrease or increase it as needed.
- * It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.
- *
- * Next to the input field, there are two buttons to increase or decrease the input value.
- */
-export declare const DSInputStepper: ({ id, label, announcementText, className, disabled, decreaseAmountButtonLabel, hint, hideLabel, invalid, increaseAmountButtonLabel, prefix, max, min, readonly, required, size, step, suffix, systemFeedback, value, onChange, ...rest }: InputStepperProps) => JSX.Element;

package/components/InputStepper/InputStepper.utils.d.ts

@@ -1,13 +0,0 @@
-import { InputStepperProps } from './InputStepper';
-
-type ValidationProps = Pick<InputStepperProps, 'id' | 'label' | 'prefix' | 'suffix'>;
-/**
- * Validates the given properties of the DSInputStepper component for common configuration errors.
- * This function is intended to be used in development mode to provide developers with
- * warnings about potential misuse of the component.
- *
- * @param validationProps - The subset of DSInputStepper properties to validate. This includes
- *                          properties related to the prefix, suffix, icons and action button of the input.
- */
-export declare const validateInputStepperProps: ({ id, label, prefix, suffix, }: ValidationProps) => void;
-export {};

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -1,15 +0,0 @@
-import { CommonLinkProps } from '../Link/Link';
-import { LinkStandaloneVariant } from './LinkStandalone.utils';
-
-export interface LinkStandaloneProps extends CommonLinkProps {
-    /** Content within the link */
-    children: React.ReactNode;
-    /** Enables the active state */
-    active?: boolean;
-    /** Visual style variant of the Link Standalone */
-    variant?: LinkStandaloneVariant;
-}
-/**
- * Use LinkStandalone when you want the users to navigate to another internal or external page.
- * */
-export declare const DSLinkStandalone: ({ children, aria, active, className, dataTrackingid, download, href, iconName, iconPosition, iconSource, referrerPolicy, rel, target, theme, variant, ...rest }: LinkStandaloneProps) => JSX.Element;

package/components/LinkStandalone/LinkStandalone.utils.d.ts

@@ -1,2 +0,0 @@
-export declare const LINK_STANDALONE_VARIANT: readonly ["neutral", "highlight"];
-export type LinkStandaloneVariant = typeof LINK_STANDALONE_VARIANT[number];

package/customreactselect.LTbjaBN2.js

@@ -1,13 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C-kxDJ4g.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import { c as l } from "./chunks/CustomReactSelect.DtmbYZUf.js";
-import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.DU8THnoC.js";
-import "./chunks/Icon.9gDIp6p4.js";
-import "./systemfeedback.4Hkfigi-.js";
-import "./optioncheckbox.CUV1MQhh.js";
-export {
-  l as CustomReactSelect
-};

package/dialog.BkXwcbUh.js

@@ -1,45 +0,0 @@
-"use client";
-import { j as r } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as f } from "./chunks/index.CvOaL64Y.js";
-import { useRef as u, useEffect as l } from "react";
-import { DSButton as m } from "./button.DX_nxoJC.js";
-import './assets/dialog.BGK3mgk7.css';const _ = "_root_5faj1_63", d = "_success_5faj1_67", g = "_info_5faj1_71", j = "_warning_5faj1_75", p = {
-  root: _,
-  success: d,
-  info: g,
-  warning: j
-}, D = ({
-  children: c,
-  className: i,
-  footer: n,
-  header: a,
-  isOpen: t,
-  onClose: s
-}) => {
-  const e = u(null);
-  return l(() => {
-    const o = e.current;
-    return o && (t ? o.showModal() : o.close(), s && o.addEventListener("close", s)), () => {
-      o && s && o.removeEventListener("close", s);
-    };
-  }, [t, s]), /* @__PURE__ */ r.jsxs("dialog", { ref: e, className: f(p.root, i), children: [
-    /* @__PURE__ */ r.jsx(
-      m,
-      {
-        type: "button",
-        iconName: "cross",
-        variant: "ghost",
-        hideLabel: !0,
-        onClick: s,
-        autoFocus: !0,
-        children: "Close Dialog"
-      }
-    ),
-    a,
-    c,
-    n
-  ] });
-};
-export {
-  D as DSDialog
-};

package/fieldset.BXOWK-B-.js

@@ -1,11 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C-kxDJ4g.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import "./asterisk.DU8THnoC.js";
-import "./heading.DqGbFfj2.js";
-import "./systemfeedback.4Hkfigi-.js";
-import { D as l } from "./chunks/Fieldset.BokeZzG5.js";
-export {
-  l as DSFieldset
-};

package/floatingactionbutton.-nDRRiXY.js

@@ -1,87 +0,0 @@
-"use client";
-import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as t } from "./chunks/index.CvOaL64Y.js";
-import { D } from "./chunks/Icon.9gDIp6p4.js";
-import { DSSpinner as x } from "./spinner.BskX4ovu.js";
-import './assets/floatingactionbutton.D7ywURL3.css';const S = "_root_1milf_63", j = "_root--dark_1milf_120", H = "_root--small_1milf_160", y = "_loader_1milf_179", N = "_icon--hidden_1milf_191", C = "_label--hidden_1milf_195", o = {
-  root: S,
-  "root--dark": "_root--dark_1milf_120",
-  rootDark: j,
-  "root--small": "_root--small_1milf_160",
-  rootSmall: H,
-  loader: y,
-  "icon--hidden": "_icon--hidden_1milf_191",
-  iconHidden: N,
-  "label--hidden": "_label--hidden_1milf_195",
-  labelHidden: C
-}, E = ({
-  aria: m,
-  children: c,
-  className: _,
-  dataTrackingid: f,
-  disabled: r = !1,
-  iconName: s = "placeholder",
-  iconSource: i,
-  loading: l = !1,
-  size: b = "medium",
-  theme: e = "light",
-  onClick: n,
-  ...p
-}) => {
-  const u = t(
-    o.root,
-    o.rootIconOnlySmall,
-    _,
-    {
-      // dark theme
-      [o.rootDark]: e === "dark",
-      // size
-      [o.rootSmall]: b === "small"
-    }
-  ), h = t(o.icon, {
-    // set icon opacity to 0 when loading to prevent button size from changing
-    [o.iconHidden]: l
-  }), k = (d) => {
-    if (r || l) {
-      d.preventDefault();
-      return;
-    }
-    n && n(d);
-  };
-  return /* @__PURE__ */ a.jsxs(
-    "button",
-    {
-      className: u,
-      "data-trackingid": f,
-      type: "button",
-      onClick: k,
-      ...m,
-      ...p,
-      "aria-disabled": r || l,
-      "aria-busy": l,
-      children: [
-        l && /* @__PURE__ */ a.jsx(
-          x,
-          {
-            className: o.loader,
-            aria: { "aria-label": "Loading state" }
-          }
-        ),
-        /* @__PURE__ */ a.jsx("span", { className: t(o.label, o.labelHidden), children: c }),
-        (s || i) && /* @__PURE__ */ a.jsx(
-          D,
-          {
-            name: s,
-            theme: e,
-            source: i,
-            className: h,
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  E as DSFloatingActionButton
-};

package/heading.DqGbFfj2.js

@@ -1,50 +0,0 @@
-"use client";
-import { j as l } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c } from "./chunks/index.CvOaL64Y.js";
-import './assets/heading.CGFucb-C.css';const d = "_root_d88h5_63", u = "_root--x-large_d88h5_66", g = "_root--x-large-uppercase_d88h5_80", h = "_root--large_d88h5_94", n = "_root--large-uppercase_d88h5_108", i = "_root--medium_d88h5_122", x = "_root--medium-uppercase_d88h5_130", L = "_root--small_d88h5_138", U = "_root--small-uppercase_d88h5_146", k = "_root--theme-dark_d88h5_154", o = {
-  root: d,
-  "root--x-large": "_root--x-large_d88h5_66",
-  rootXLarge: u,
-  "root--x-large-uppercase": "_root--x-large-uppercase_d88h5_80",
-  rootXLargeUppercase: g,
-  "root--large": "_root--large_d88h5_94",
-  rootLarge: h,
-  "root--large-uppercase": "_root--large-uppercase_d88h5_108",
-  rootLargeUppercase: n,
-  "root--medium": "_root--medium_d88h5_122",
-  rootMedium: i,
-  "root--medium-uppercase": "_root--medium-uppercase_d88h5_130",
-  rootMediumUppercase: x,
-  "root--small": "_root--small_d88h5_138",
-  rootSmall: L,
-  "root--small-uppercase": "_root--small-uppercase_d88h5_146",
-  rootSmallUppercase: U,
-  "root--theme-dark": "_root--theme-dark_d88h5_154",
-  rootThemeDark: k
-}, X = ({
-  children: e,
-  className: a,
-  size: r = "medium",
-  tag: t = "h2",
-  // default tag because of SEO reasons (h1 should be used only once per page)
-  theme: p = "light",
-  ...s
-}) => {
-  const _ = t, m = c(o.root, a, {
-    // sizes
-    [o.rootXLarge]: r === "x-large",
-    [o.rootXLargeUppercase]: r === "x-large-uppercase",
-    [o.rootLarge]: r === "large",
-    [o.rootLargeUppercase]: r === "large-uppercase",
-    [o.rootMedium]: r == "medium",
-    [o.rootMediumUppercase]: r == "medium-uppercase",
-    [o.rootSmall]: r == "small",
-    [o.rootSmallUppercase]: r == "small-uppercase",
-    // dark theme
-    [o.rootThemeDark]: p === "dark"
-  });
-  return /* @__PURE__ */ l.jsx(_, { className: m, ...s, children: e });
-};
-export {
-  X as DSHeading
-};

package/icon.Cpp_9L1I.js

@@ -1,8 +0,0 @@
-"use client";
-import "./chunks/jsx-runtime.C-kxDJ4g.js";
-import "./chunks/index.CvOaL64Y.js";
-import "react";
-import { D as p } from "./chunks/Icon.9gDIp6p4.js";
-export {
-  p as DSIcon
-};