@stihl-design-system/components 1.0.0-RC.0

package/textarea.e156b0ce.js

@@ -0,0 +1,189 @@
+import "./assets/Textarea.eecf04b3.css";
+import { j as o } from "./chunks/jsx-runtime.5c071667.js";
+import { c as S } from "./chunks/index.8021d3e0.js";
+import { useState as c, useRef as ie, useEffect as m } from "react";
+import { u as ne, h as re } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { g as H, p as V } from "./chunks/helpers.ea3ca41a.js";
+import { Asterisk as se } from "./asterisk.91abccec.js";
+import { DSSystemFeedback as le } from "./systemfeedback.6bbd1505.js";
+const ce = "_textarea_1oki7_73", de = "_textarea--invalid_1oki7_183", ue = "_textarea--small_1oki7_190", _e = "_textarea--resize-auto_1oki7_202", fe = "_root_1oki7_212", xe = "_hint_1oki7_220", me = "_label_1oki7_220", he = "_affix_1oki7_224", be = "_affix--small_1oki7_242", ke = "_affix--disabled_1oki7_254", pe = "_prefix_1oki7_258", ve = "_suffix_1oki7_264", Se = "_leading-icon_1oki7_269", Ce = "_leading-icon--small_1oki7_274", Ie = "_action-button_1oki7_278", ge = "_label--hidden_1oki7_295", je = "_feedback_1oki7_322", we = "_char-count_1oki7_327", Ae = "_char-count-announcer_1oki7_342", t = {
+  textarea: ce,
+  "textarea--invalid": "_textarea--invalid_1oki7_183",
+  textareaInvalid: de,
+  "textarea--small": "_textarea--small_1oki7_190",
+  textareaSmall: ue,
+  "textarea--resize-auto": "_textarea--resize-auto_1oki7_202",
+  textareaResizeAuto: _e,
+  root: fe,
+  hint: xe,
+  label: me,
+  affix: he,
+  "affix--small": "_affix--small_1oki7_242",
+  affixSmall: be,
+  "affix--disabled": "_affix--disabled_1oki7_254",
+  affixDisabled: ke,
+  prefix: pe,
+  suffix: ve,
+  "leading-icon": "_leading-icon_1oki7_269",
+  leadingIcon: Se,
+  "leading-icon--small": "_leading-icon--small_1oki7_274",
+  leadingIconSmall: Ce,
+  "action-button": "_action-button_1oki7_278",
+  actionButton: Ie,
+  "label--hidden": "_label--hidden_1oki7_295",
+  labelHidden: ge,
+  feedback: je,
+  "char-count": "_char-count_1oki7_327",
+  charCount: we,
+  "char-count-announcer": "_char-count-announcer_1oki7_342",
+  charCountAnnouncer: Ae
+}, ye = ({ id: i, label: u }) => {
+  if (!i)
+    throw new Error(
+      H(
+        "DSTextarea",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+      )
+    );
+  if (!u)
+    throw new Error(
+      H(
+        "DSTextarea",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+}, Ve = ({
+  id: i,
+  label: u,
+  charsLimitText: z = "Character limit reached",
+  charsRemainingText: P = "Characters remaining:",
+  className: q,
+  defaultValue: M,
+  disabled: O = !1,
+  hint: h,
+  hideLabel: F = !1,
+  invalid: n = !1,
+  maxLength: e,
+  readonly: C = !1,
+  required: I = !1,
+  resize: _ = "vertical",
+  size: W = "medium",
+  systemFeedback: s,
+  value: b,
+  wrapperClassName: G,
+  onChange: g,
+  onInput: j,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && ye({
+    id: i,
+    label: u
+  });
+  const [K, w] = c(M || ""), [l, A] = c(0), [Q, y] = c(0), [U, D] = c("off"), [N, k] = c(s), [p, v] = c(n), R = b !== void 0, f = R ? b : K, r = ie(null), X = ne(F);
+  m(() => {
+    if (!e || e <= 0)
+      return;
+    l >= e * 0.8 ? D("polite") : D("off");
+    const a = setTimeout(() => {
+      y(e - l || 0);
+    }, 1e3);
+    return () => clearTimeout(a);
+  }, [l]), m(() => {
+    w(f || ""), d(), e && e > 0 && (A(f.toString().length || 0), y(e - f.toString().length || 0));
+  }, [b]), m(() => {
+    n && s ? (k(s), v(n)) : !n && e && e >= 0 && l >= e ? (v(!0), k(z)) : (k(s), v(n));
+  }, [n, p, s, l]), m(() => {
+    if (re && _ === "auto")
+      return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [_, r.current]);
+  const Y = S(t.root, G), Z = S(t.textarea, q, {
+    // small textarea
+    [t.textareaSmall]: W === "small",
+    // invalid state
+    [t.textareaInvalid]: p,
+    // resize handling
+    [t.textareaResizeAuto]: _ === "auto"
+  }), L = S(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: X
+  }), T = `${i}-label`, B = `${i}-feedback`, E = `${i}-hint`, $ = `${i}-char-count-announcer`, ee = h ? ` ${E}` : "", d = () => {
+    if (r.current && _ === "auto") {
+      r.current.style.height = "auto";
+      const a = V(r.current.scrollHeight), x = V(2);
+      r.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
+      // from jumping as soon as the user starts typing.
+      a + x}rem`;
+    }
+  }, ae = () => {
+    const a = [];
+    return e && e > 0 && a.push($), n && s && a.push(B), a.length > 0 ? a.join(" ") : void 0;
+  }, te = (a) => {
+    var x;
+    j && j(a), e && e > 0 && A(((x = r.current) == null ? void 0 : x.value.length) || 0), d();
+  }, oe = (a) => {
+    g && g(a), R || w(a.target.value);
+  };
+  return /* @__PURE__ */ o.jsxs("div", { className: Y, children: [
+    /* @__PURE__ */ o.jsxs("label", { className: L, id: T, htmlFor: i, children: [
+      u,
+      I && /* @__PURE__ */ o.jsx(se, {})
+    ] }),
+    h && /* @__PURE__ */ o.jsx("div", { className: t.hint, id: E, children: h }),
+    p && N && /* @__PURE__ */ o.jsx(
+      le,
+      {
+        className: t.feedback,
+        message: N,
+        type: "invalid",
+        id: B
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      "textarea",
+      {
+        className: Z,
+        id: i,
+        ref: r,
+        ...J,
+        "aria-labelledby": `${T}${ee}`,
+        "aria-describedby": ae(),
+        "aria-invalid": n,
+        "aria-disabled": C,
+        maxLength: e,
+        readOnly: C,
+        required: I,
+        disabled: O,
+        value: f,
+        defaultValue: void 0,
+        rows: void 0,
+        cols: void 0,
+        onChange: oe,
+        onInput: te
+      }
+    ),
+    e !== void 0 && e > 0 && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsxs("div", { className: t.charCount, "aria-hidden": "true", children: [
+        l,
+        "/",
+        e
+      ] }),
+      /* @__PURE__ */ o.jsxs(
+        "div",
+        {
+          className: t.charCountAnnouncer,
+          id: $,
+          "aria-live": U,
+          "aria-atomic": "true",
+          children: [
+            P,
+            " ",
+            Q
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ve as DSTextarea
+};

package/title.d.ts

@@ -0,0 +1 @@
+export * from './components/Title/Title'

package/title.d855a8e4.js

@@ -0,0 +1,36 @@
+import "./assets/Title.60d50d3e.css";
+import { j as t } from "./chunks/jsx-runtime.5c071667.js";
+import { c as n } from "./chunks/index.8021d3e0.js";
+const q = "_root_116qq_25", h = "_root--x-large_116qq_28", m = "_root--large_116qq_42", d = "_root--theme-dark_116qq_56", i = "_dash_116qq_59", o = {
+  root: q,
+  "root--x-large": "_root--x-large_116qq_28",
+  rootXLarge: h,
+  "root--large": "_root--large_116qq_42",
+  rootLarge: m,
+  "root--theme-dark": "_root--theme-dark_116qq_56",
+  rootThemeDark: d,
+  dash: i
+}, L = ({
+  children: e,
+  className: a,
+  size: r = "x-large",
+  tag: s = "h1",
+  // Design suggested to set default tag to h1
+  theme: _ = "light",
+  ...l
+}) => {
+  const g = s, c = n(o.root, a, {
+    // sizes
+    [o.rootXLarge]: r === "x-large",
+    [o.rootLarge]: r === "large",
+    // dark theme
+    [o.rootThemeDark]: _ === "dark"
+  });
+  return /* @__PURE__ */ t.jsxs(g, { className: c, ...l, children: [
+    e,
+    /* @__PURE__ */ t.jsx("span", { className: o.dash, "aria-hidden": "true", children: "ƒ" })
+  ] });
+};
+export {
+  L as DSTitle
+};

package/types/aria-types.d.ts

@@ -0,0 +1,330 @@
+/* Auto Generated Below */
+
+type Booleanish = boolean | 'true' | 'false';
+
+export type AriaAttributes = {
+  /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+  'aria-activedescendant'?: string | undefined;
+  /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+  'aria-atomic'?: Booleanish | undefined;
+  /**
+   * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+   * presented if they are made.
+   */
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;
+  /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+  /**
+   * Defines a string value that labels the current element, which is intended to be converted into Braille.
+   * @see aria-label.
+   */
+  'aria-braillelabel'?: string | undefined;
+  /**
+   * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
+   * @see aria-roledescription.
+   */
+  'aria-brailleroledescription'?: string | undefined;
+  'aria-busy'?: Booleanish | undefined;
+  /**
+   * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+   * @see aria-pressed @see aria-selected.
+   */
+  'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;
+  /**
+   * Defines the total number of columns in a table, grid, or treegrid.
+   * @see aria-colindex.
+   */
+  'aria-colcount'?: number | undefined;
+  /**
+   * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+   * @see aria-colcount @see aria-colspan.
+   */
+  'aria-colindex'?: number | undefined;
+  /**
+   * Defines a human readable text alternative of aria-colindex.
+   * @see aria-rowindextext.
+   */
+  'aria-colindextext'?: string | undefined;
+  /**
+   * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-colindex @see aria-rowspan.
+   */
+  'aria-colspan'?: number | undefined;
+  /**
+   * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+   * @see aria-owns.
+   */
+  'aria-controls'?: string | undefined;
+  /** Indicates the element that represents the current item within a container or set of related elements. */
+  'aria-current'?:
+    | boolean
+    | 'false'
+    | 'true'
+    | 'page'
+    | 'step'
+    | 'location'
+    | 'date'
+    | 'time'
+    | undefined;
+  /**
+   * Identifies the element (or elements) that describes the object.
+   * @see aria-labelledby
+   */
+  'aria-describedby'?: string | undefined;
+  /**
+   * Defines a string value that describes or annotates the current element.
+   * @see related aria-describedby.
+   */
+  'aria-description'?: string | undefined;
+  /**
+   * Identifies the element that provides a detailed, extended description for the object.
+   * @see aria-describedby.
+   */
+  'aria-details'?: string | undefined;
+  /**
+   * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+   * @see aria-hidden @see aria-readonly.
+   */
+  'aria-disabled'?: Booleanish | undefined;
+  /**
+   * Indicates what functions can be performed when a dragged object is released on the drop target.
+   * @deprecated in ARIA 1.1
+   */
+  'aria-dropeffect'?:
+    | 'none'
+    | 'copy'
+    | 'execute'
+    | 'link'
+    | 'move'
+    | 'popup'
+    | undefined;
+  /**
+   * Identifies the element that provides an error message for the object.
+   * @see aria-invalid @see aria-describedby.
+   */
+  'aria-errormessage'?: string | undefined;
+  /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+  'aria-expanded'?: Booleanish | undefined;
+  /**
+   * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+   * allows assistive technology to override the general default of reading in document source order.
+   */
+  'aria-flowto'?: string | undefined;
+  /**
+   * Indicates an element's "grabbed" state in a drag-and-drop operation.
+   * @deprecated in ARIA 1.1
+   */
+  'aria-grabbed'?: Booleanish | undefined;
+  /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+  'aria-haspopup'?:
+    | boolean
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | 'dialog'
+    | undefined;
+  /**
+   * Indicates whether the element is exposed to an accessibility API.
+   * @see aria-disabled.
+   */
+  'aria-hidden'?: Booleanish | undefined;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   * @see aria-errormessage.
+   */
+  'aria-invalid'?:
+    | boolean
+    | 'false'
+    | 'true'
+    | 'grammar'
+    | 'spelling'
+    | undefined;
+  /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+  'aria-keyshortcuts'?: string | undefined;
+  /**
+   * Defines a string value that labels the current element.
+   * @see aria-labelledby.
+   */
+  'aria-label'?: string | undefined;
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @see aria-describedby.
+   */
+  'aria-labelledby'?: string | undefined;
+  /** Defines the hierarchical level of an element within a structure. */
+  'aria-level'?: number | undefined;
+  /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+  'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
+  /** Indicates whether an element is modal when displayed. */
+  'aria-modal'?: Booleanish | undefined;
+  /** Indicates whether a text box accepts multiple lines of input or only a single line. */
+  'aria-multiline'?: Booleanish | undefined;
+  /** Indicates that the user may select more than one item from the current selectable descendants. */
+  'aria-multiselectable'?: Booleanish | undefined;
+  /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+  'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
+  /**
+   * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+   * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+   * @see aria-controls.
+   */
+  'aria-owns'?: string | undefined;
+  /**
+   * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+   * A hint could be a sample value or a brief description of the expected format.
+   */
+  'aria-placeholder'?: string | undefined;
+  /**
+   * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-setsize.
+   */
+  'aria-posinset'?: number | undefined;
+  /**
+   * Indicates the current "pressed" state of toggle buttons.
+   * @see aria-checked @see aria-selected.
+   */
+  'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
+  /**
+   * Indicates that the element is not editable, but is otherwise operable.
+   * @see aria-disabled.
+   */
+  'aria-readonly'?: Booleanish | undefined;
+  /**
+   * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+   * @see aria-atomic.
+   */
+  'aria-relevant'?:
+    | 'additions'
+    | 'additions removals'
+    | 'additions text'
+    | 'all'
+    | 'removals'
+    | 'removals additions'
+    | 'removals text'
+    | 'text'
+    | 'text additions'
+    | 'text removals'
+    | undefined;
+  /** Indicates that user input is required on the element before a form may be submitted. */
+  'aria-required'?: Booleanish | undefined;
+  /** Defines a human-readable, author-localized description for the role of an element. */
+  'aria-roledescription'?: string | undefined;
+  /**
+   * Defines the total number of rows in a table, grid, or treegrid.
+   * @see aria-rowindex.
+   */
+  'aria-rowcount'?: number | undefined;
+  /**
+   * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+   * @see aria-rowcount @see aria-rowspan.
+   */
+  'aria-rowindex'?: number | undefined;
+  /**
+   * Defines a human readable text alternative of aria-rowindex.
+   * @see aria-colindextext.
+   */
+  'aria-rowindextext'?: string | undefined;
+  /**
+   * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+   * @see aria-rowindex @see aria-colspan.
+   */
+  'aria-rowspan'?: number | undefined;
+  /**
+   * Indicates the current "selected" state of various widgets.
+   * @see aria-checked @see aria-pressed.
+   */
+  'aria-selected'?: Booleanish | undefined;
+  /**
+   * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+   * @see aria-posinset.
+   */
+  'aria-setsize'?: number | undefined;
+  /** Indicates if items in a table or grid are sorted in ascending or descending order. */
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
+  /** Defines the maximum allowed value for a range widget. */
+  'aria-valuemax'?: number | undefined;
+  /** Defines the minimum allowed value for a range widget. */
+  'aria-valuemin'?: number | undefined;
+  /**
+   * Defines the current value for a range widget.
+   * @see aria-valuetext.
+   */
+  'aria-valuenow'?: number | undefined;
+  /** Defines the human readable text alternative of aria-valuenow for a range widget. */
+  'aria-valuetext'?: string | undefined;
+  /** All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions */
+  role?: AriaRole;
+};
+
+export type AriaRole =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'gridcell'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listbox'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'search'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'textbox'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem';

package/types/common-types.d.ts

@@ -0,0 +1,13 @@
+// common type definitions
+export type { BreakpointCustomizable } from '../utils/breakpoint-customizable';
+export type { LinkTarget } from '../utils/link-target';
+export type { Theme } from '../utils/theme';
+
+import type { AriaAttributes } from './aria-types';
+export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<
+  AriaAttributes,
+  T
+>;
+
+// Type that makes fields optional
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

package/types/icon-types.d.ts

@@ -0,0 +1,2 @@
+export declare const ICON_NAMES: readonly ["360", "academic-cap", "alarm-clock", "arrow-clockwise", "arrow-counterclockwise", "arrow-down", "arrow-down-line", "arrow-edge", "arrow-left", "arrow-out", "arrow-outline-left", "arrow-right", "arrow-up", "arrow-up-arrow-down", "at", "barcode-scanner", "battery", "bell", "bin", "bin-open", "bluetooth", "bookmark", "burger", "calendar", "camera", "cart", "cart-check", "cart-plus", "catalog", "certificate", "chain-link", "chainsaw", "check", "chevron-down", "chevron-left", "chevron-line-left", "chevron-line-right", "chevron-right", "chevron-up", "circle", "circle-check-colored", "circle-check-inverted", "circle-info-colored", "circle-info-inverted", "circle-pause", "circle-stroke", "clock", "coffee-cup", "compare", "connected-box", "connected-box-mobile", "connected-box-stationary", "cross", "diamond", "diamond-exclamationmark-colored", "diamond-exclamationmark-inverted", "diskette", "distance", "dots-connected", "download-complete", "envelope", "envelope-open", "exclamationmark", "exit", "eye", "eye-closed", "facebook", "filter", "finger-double-arrow", "flash", "fullscreen", "gear", "globe", "grid", "guidance", "haircross", "hanger", "headphones", "heart", "hexagon-arrow-clockwise", "horizontal-ellipsis", "house", "imow", "info", "instagram", "leave-fullscreen", "lightbulb", "linkedin", "list-three-rows", "list-two-rows", "loading-spinner", "lock", "magnifying-glass", "magnifying-glass-minus", "magnifying-glass-plus", "map", "minus", "mobile", "nine-squares", "note", "note-check", "note-plus", "number-input", "paperclip", "parcel", "pause", "pdf", "pen", "percent", "petrol", "phone", "pin", "pin-s", "pinterest", "placeholder", "play", "plug", "plus", "printer", "prohibition-sign", "questionmark", "security", "share", "shirt", "shop", "sound-off", "sound-on", "speechbubble", "speechbubbles", "square", "star", "star-half", "tag", "thumbs-down", "thumbs-up", "triangle", "triangle-exclamationmark-colored", "triangle-exclamationmark-inverted", "truck", "two-people-screen", "two-sheets", "upload", "user", "vertical-ellipsis", "wc", "wifi", "wifi-1bar", "wifi-2bars", "wifi-off", "wind-rose", "wrench", "x", "xing", "youtube"];
+export type IconName = typeof ICON_NAMES[number];

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './aria-types';
+export * from './common-types';
+export * from './icon-types';

package/utils/breakpoint-customizable.d.ts

@@ -0,0 +1,12 @@
+export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+export type BreakpointValue = string | number | boolean;
+export type BreakpointValues<T> = {
+    [key in Breakpoint]?: T;
+} & {
+    base: T;
+};
+export declare const breakpointMap: {
+    [key in Breakpoint]: number;
+};
+export declare const breakpoints: readonly ["base", "s", "m", "l", "xl"];
+export type Breakpoint = (typeof breakpoints)[number];

package/utils/has-document.d.ts

@@ -0,0 +1 @@
+export declare const hasDocument: boolean;

package/utils/has-window.d.ts

@@ -0,0 +1 @@
+export declare const hasWindow: boolean;

package/utils/helpers.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Converts a pixel value to rem units.
+ *
+ * This function assumes the root font size of the document is 16 pixels,
+ * which is a common default in web browsers. It divides the given pixel value by 16
+ * to convert it into rem units.
+ *
+ * @param {number} px - The pixel value to be converted to rem units.
+ * @returns {number} - The equivalent value in rem units.
+ */
+export declare const pixelToRem: (px: number) => number;
+/**
+ * Generates a message with a standardized format for all user facing warning/error messages.
+ *
+ * @param {string} componentName - The name of the component generating the message.
+ * @param {string} message - The message to be included in the generated message.
+ * @returns {string} A message with a standardized format: "[STIHL Design System] - [componentName]: message".
+ */
+export declare const generateDSMessage: (componentName: string, message: string) => string;
+/**
+ * Retrieves the closest ancestor of the given element that matches a specified selector.
+ *
+ * @param {HTMLElement} element - The HTMLElement from which to start searching.
+ * @param {string} selector - The CSS selector used to match the ancestor elements.
+ * @returns {Element|null} The closest ancestor element that matches the specified selector, or null if no matching element is found.
+ */
+export declare const getClosestHTMLElement: (element: HTMLElement, selector: string) => Element | null;

package/utils/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './has-window';
+export * from './helpers';
+export * from './theme';
+export * from './useBreakpoint';

package/utils/link-target.d.ts

@@ -0,0 +1,2 @@
+export declare const LINK_TARGETS: readonly ["_self", "_blank", "_parent", "_top"];
+export type LinkTarget = (typeof LINK_TARGETS)[number];

package/utils/render-documentation.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+type DocumentationRenderOptions = {
+    hideCodeExample?: boolean;
+    hideControls?: boolean;
+    isDocumentationAtTop?: boolean;
+};
+/**
+ * Renders documentation from a markdown string.
+ * @param documentation - The markdown string to render.
+ * @returns A JSX.Element with the rendered documentation.
+ */
+export declare function renderDocumentation(documentation: string): JSX.Element;
+/**
+ * Renders documentation with specified rendering options.
+ * @param options - Optional rendering options to customize the output.
+ * @returns A JSX.Element with the rendered documentation.
+ */
+export declare function renderDocumentation(options?: DocumentationRenderOptions): JSX.Element;
+/**
+ * Renders documentation from a markdown string with specified rendering options.
+ * @param documentation - Optional markdown string to render.
+ * @param options - Optional rendering options to customize the output.
+ * @returns A JSX.Element with the rendered documentation.
+ */
+export declare function renderDocumentation(documentation?: string, options?: DocumentationRenderOptions): JSX.Element;
+export {};

package/utils/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const THEMES: readonly ["light", "dark"];
+export type Theme = (typeof THEMES)[number];