@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/Textarea/Textarea.js

@@ -1,105 +1,102 @@
-import o, { useState as A, useRef as Y, useEffect as N } from "react";
-import h from "classnames";
+import n, { useState as I, useRef as Y, useEffect as A } from "react";
+import p from "classnames";
 import { FormMode as m, AnalyticsId as Z, AVERAGE_CHARACTER_WIDTH_PX as ee } from "../../constants.js";
 import { uuid as te } from "../../utils/uuid.js";
 import re from "../ErrorWrapper/ErrorWrapper.js";
 import { renderLabel as ae } from "../Label/Label.js";
 import ne from "../MaxCharacters/MaxCharacters.js";
 import t from "./styles.module.scss";
-const oe = (a) => {
-  const u = "2rem", n = "16px", p = "4px";
-  return `calc(${a * ee}px + ${u} + ${n} + ${p})`;
-}, $ = o.forwardRef((a, u) => {
+const oe = (a) => `calc(${a * ee}px + 2rem + 16px + 4px)`, N = n.forwardRef((a, h) => {
   const {
-    maxCharacters: n,
-    maxText: p,
+    maxCharacters: o,
+    maxText: x,
     width: f,
-    testId: B,
+    testId: $,
     defaultValue: s,
-    marginBottom: M,
-    transparent: k,
+    marginBottom: B,
+    transparent: M,
     mode: i = m.onwhite,
-    label: L,
+    label: k,
     textareaId: b = te(),
     minRows: g = 3,
     maxRows: c = 10,
     grow: w,
     errorText: C,
-    autoFocus: S,
-    disabled: E,
+    autoFocus: L,
+    disabled: S,
     name: D,
-    autoComplete: y = "off",
+    autoComplete: E = "off",
     placeholder: F,
     readOnly: V,
     required: q,
-    onChange: R,
+    onChange: W,
     ...z
-  } = a, [G, T] = A(g), [v, W] = A(s || ""), l = Y(null);
-  N(() => {
-    W(s || "");
+  } = a, [G, y] = I(g), [R, T] = I(s || ""), d = Y(null);
+  A(() => {
+    T(s || "");
   }, [s]);
-  const _ = (e) => {
-    const d = e.rows;
+  const v = (e) => {
+    const l = e.rows;
     e.rows = g;
     const r = Math.floor((e.scrollHeight - 16) / 28);
-    r === d && (e.rows = r), r >= c && (e.rows = c, e.scrollTop = e.scrollHeight), r < c ? T(r) : T(c);
-  }, O = i === m.ondark, P = i === m.onblueberry, X = !!n && v.toString().length > n, H = i === m.oninvalid || !!C || X, j = h(t.textarea, {
-    [t["textarea--gutterBottom"]]: M
-  }), J = h(t["input-container"], {
-    [t["input-container--transparent"]]: k,
+    r === l && (e.rows = r), r >= c && (e.rows = c, e.scrollTop = e.scrollHeight), r < c ? y(r) : y(c);
+  }, O = i === m.ondark, P = i === m.onblueberry, X = !!o && R.toString().length > o, _ = i === m.oninvalid || !!C || X, j = p(t.textarea, {
+    [t["textarea--gutterBottom"]]: B
+  }), J = p(t["input-container"], {
+    [t["input-container--transparent"]]: M,
     [t["input-container--on-blueberry"]]: P,
     [t["input-container--on-dark"]]: O,
-    [t["input-container--invalid"]]: H,
+    [t["input-container--invalid"]]: _,
     [t["input-container--disabled"]]: a.disabled
-  }), K = h(t["input-container__input"], {
+  }), K = p(t["input-container__input"], {
     [t["input-container__input--disabled"]]: a.disabled
   });
-  N(() => {
-    var e, x, d;
-    if (w && ((e = l.current) != null && e.children) && ((x = l.current) != null && x.children[0])) {
-      const r = (d = l.current) == null ? void 0 : d.children[0];
-      _(r);
+  A(() => {
+    var e, u, l;
+    if (w && ((e = d.current) != null && e.children) && ((u = d.current) != null && u.children[0])) {
+      const r = (l = d.current) == null ? void 0 : l.children[0];
+      v(r);
     }
   }, []);
   const Q = (e) => {
-    w && _(e.target), W(e.target.value);
+    w && v(e.target), T(e.target.value);
   }, U = (e) => {
-    R && R(e), Q(e);
-  }, I = f ? oe(f) : void 0;
-  return /* @__PURE__ */ o.createElement(re, { errorText: C }, /* @__PURE__ */ o.createElement("div", { "data-testid": B, "data-analyticsid": Z.Textarea, className: j }, ae(L, b, i, E), /* @__PURE__ */ o.createElement("div", { className: J, ref: l, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
+    W && W(e), Q(e);
+  }, H = f ? oe(f) : void 0;
+  return /* @__PURE__ */ n.createElement(re, { errorText: C }, /* @__PURE__ */ n.createElement("div", { "data-testid": $, "data-analyticsid": Z.Textarea, className: j }, ae(k, b, i), /* @__PURE__ */ n.createElement("div", { className: J, ref: d, style: { maxWidth: H } }, /* @__PURE__ */ n.createElement(
     "textarea",
     {
       rows: G,
       defaultValue: s,
       id: b,
       className: K,
-      ref: u,
+      ref: h,
       "aria-describedby": a["aria-describedby"] ?? void 0,
-      "aria-invalid": !!H,
-      autoFocus: S,
-      disabled: E,
+      "aria-invalid": !!_,
+      autoFocus: L,
+      disabled: S,
       name: D,
-      autoComplete: y || void 0,
+      autoComplete: E || void 0,
       placeholder: F,
       readOnly: V,
       required: q,
       onChange: U,
       ...z
     }
-  )), n && /* @__PURE__ */ o.createElement(
+  )), o && /* @__PURE__ */ n.createElement(
     ne,
     {
-      maxCharacters: n,
-      length: v.toString().length,
-      maxText: p,
+      maxCharacters: o,
+      length: R.toString().length,
+      maxText: x,
       mode: i,
-      maxWidth: I
+      maxWidth: H
     }
   )));
 });
-$.displayName = "Textarea";
-const xe = $;
+N.displayName = "Textarea";
+const he = N;
 export {
-  xe as default
+  he as default
 };
 //# sourceMappingURL=Textarea.js.map

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormMode } from '../../constants';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Textarea").TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        maxCharacters: number;
+        maxText: string;
+        width: undefined;
+        mode: FormMode.onwhite;
+        testId: string;
+        transparent: false;
+        disabled: false;
+        minRows: number;
+        maxRows: number;
+        grow: true;
+        errorText: string;
+        autoFocus: false;
+        readOnly: false;
+        autoComplete: string;
+        name: string;
+        required: false;
+    };
+    argTypes: {
+        placeholder: {
+            control: string;
+        };
+        maxCharacters: {
+            control: string;
+        };
+        maxText: {
+            control: string;
+        };
+        width: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        defaultValue: {
+            control: string;
+        };
+        testId: {
+            control: string;
+        };
+        transparent: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        minRows: {
+            control: string;
+        };
+        maxRows: {
+            control: string;
+        };
+        grow: {
+            control: string;
+        };
+        errorText: {
+            control: string;
+        };
+        autoFocus: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+        autoComplete: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const MaxCharacters: Story;

package/components/Textarea/index.d.ts

@@ -1,4 +1,3 @@
 import Textarea from './Textarea';
 export * from './Textarea';
 export default Textarea;
-//# sourceMappingURL=index.d.ts.map

package/components/Tile/Tile.d.ts

@@ -29,4 +29,3 @@ export interface TileCompound extends React.ForwardRefExoticComponent<TileProps
 }
 export declare const Tile: TileCompound;
 export default Tile;
-//# sourceMappingURL=Tile.d.ts.map

package/components/Tile/Tile.stories.d.ts

@@ -0,0 +1,39 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("./Tile").TileCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        fixed: false;
+        highlighted: false;
+        href: string;
+        description: string;
+    };
+    argTypes: {
+        fixed: {
+            control: string;
+        };
+        highlighted: {
+            control: string;
+        };
+        href: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const External: Story;
+export declare const WrappedContainer: StoryObj;
+export declare const WithOnClick: Story;
+export declare const ReactChildren: Story;

package/components/Tile/index.d.ts

@@ -1,4 +1,3 @@
 import Tile from './Tile';
 export * from './Tile';
 export default Tile;
-//# sourceMappingURL=index.d.ts.map

package/components/Title/Title.d.ts

@@ -23,4 +23,3 @@ export interface TitleMargin {
 }
 export declare const instanceOfTitleMargin: (margin: unknown) => margin is TitleMargin;
 export default Title;
-//# sourceMappingURL=Title.d.ts.map

package/components/Title/Title.stories.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Title").TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        htmlMarkup: "h1";
+        margin: number;
+        appearance: "title1";
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        htmlMarkup: {
+            control: string;
+            options: import("./Title").TitleTags[];
+        };
+        margin: {
+            control: string;
+        };
+        appearance: {
+            control: string;
+            options: import("./Title").TitleAppearances[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllAppearances: Story;

package/components/Title/index.d.ts

@@ -1,4 +1,3 @@
 import Title from './Title';
 export * from './Title';
 export default Title;
-//# sourceMappingURL=index.d.ts.map

package/components/Tooltip/Tooltip.d.ts

@@ -14,4 +14,3 @@ export type TooltipContext = {
 };
 export declare const TooltipOpenProvider: React.FC;
 export default Tooltip;
-//# sourceMappingURL=Tooltip.d.ts.map

package/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Tooltip").TooltipProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        description: string;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleExample: Story;

package/components/Tooltip/TooltipWord/TooltipWord.d.ts

@@ -17,4 +17,3 @@ export interface TooltipWordProps {
 }
 declare const TooltipWord: React.ForwardRefExoticComponent<TooltipWordProps & React.RefAttributes<HTMLButtonElement>>;
 export default TooltipWord;
-//# sourceMappingURL=TooltipWord.d.ts.map

package/components/Tooltip/TooltipWord/index.d.ts

@@ -1,4 +1,3 @@
 import TooltipWord from './TooltipWord';
 export * from './TooltipWord';
 export default TooltipWord;
-//# sourceMappingURL=index.d.ts.map

package/components/Tooltip/index.d.ts

@@ -1,4 +1,3 @@
 import Tooltip from './Tooltip';
 export * from './Tooltip';
 export default Tooltip;
-//# sourceMappingURL=index.d.ts.map

package/components/TooltipExample/TooltipExample.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { TooltipProps } from '../Tooltip';
 declare const TooltipExample: React.FC<TooltipProps>;
 export default TooltipExample;
-//# sourceMappingURL=TooltipExample.d.ts.map

package/components/TooltipExample/index.d.ts

@@ -1,4 +1,3 @@
 import TooltipExample from './TooltipExample';
 export * from './TooltipExample';
 export default TooltipExample;
-//# sourceMappingURL=index.d.ts.map

package/components/Trigger/HelpSign.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { SvgPathProps } from '../Icon';
 declare const HelpSign: React.FC<SvgPathProps>;
 export default HelpSign;
-//# sourceMappingURL=HelpSign.d.ts.map

package/components/Trigger/InfoSignStroke.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { SvgPathProps } from '../Icon';
 declare const InfoSignStroke: React.FC<SvgPathProps>;
 export default InfoSignStroke;
-//# sourceMappingURL=InfoSignStroke.d.ts.map

package/components/Trigger/Trigger.d.ts

@@ -47,4 +47,3 @@ export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonE
 }
 declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export default Trigger;
-//# sourceMappingURL=Trigger.d.ts.map

package/components/Trigger/Trigger.js

@@ -6,15 +6,15 @@ import { useHover as $ } from "../../hooks/useHover.js";
 import { getColor as u } from "../../theme/currys/color.js";
 import { getAriaLabelAttributes as E } from "../../utils/accessibility.js";
 import { mergeRefs as H } from "../../utils/refs.js";
-import { Icon as v } from "../Icon/Icon.js";
+import { Icon as k } from "../Icon/Icon.js";
 import e from "./styles.module.scss";
-const w = {
+const v = {
   help: R
   //info: InfoSignStroke, // @todo Support variant='info' in later version
-}, x = {
+}, w = {
   medium: f.XSmall,
   large: f.Small
-}, z = (o, i, t) => {
+}, x = (o, i, t) => {
   if (o === "ondark")
     return "white";
   const r = t ? 800 : 600;
@@ -40,12 +40,12 @@ const w = {
       e.trigger,
       r === "onlight" && e[`trigger--${t}`],
       // variants look the same when mode=ondark
-      e[`trigger--${r}`],
+      r === "ondark" && e[`trigger--${r}`],
       e[`trigger--${l}`],
       s && e["trigger--hovered"],
       n && e["trigger--selected"],
       y
-    ), A = z(r, t, s || m || n), p = /* @__PURE__ */ a.createElement(v, { svgIcon: w[t], size: x[l], color: A, isHovered: s || m });
+    ), A = x(r, t, s || m || n), p = /* @__PURE__ */ a.createElement(k, { svgIcon: v[t], size: w[l], color: A, isHovered: s || m });
     if (h === "span")
       return /* @__PURE__ */ a.createElement("span", { "data-testid": g, "data-analyticsid": d.Trigger, className: c }, p);
     const C = E({ label: o, id: i });

package/components/Trigger/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["iconMap","HelpSign","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","size","selected","isHovered","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs","Trigger$1"],"mappings":";;;;;;;;;;AAiEA,MAAMA,IAA2C;AAAA,EAC/C,MAAMC;AAAA;AAER,GAEMC,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAS,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPtB,MAAS,aAAasB,EAAO,YAAYrB,CAAO,EAAE;AAAA;AAAA,MAClDqB,EAAO,YAAYtB,CAAI,EAAE;AAAA,MACzBsB,EAAO,YAAYb,CAAI,EAAE;AAAA,MACzBE,KAAaW,EAAO,kBAAkB;AAAA,MACtCZ,KAAYY,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYxB,EAAaC,GAAMC,GAASU,KAAaM,KAAmBP,CAAQ,GAEhFc,IAAOlB,gBAAAA,EAAA,cAACmB,GAAK,EAAA,SAAS9B,EAAQM,CAAO,GAAG,MAAMJ,EAAYY,CAAI,GAAG,OAAOc,GAAW,WAAWZ,KAAaM,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAAN,gBAAAA,EAAA,cAAC,UAAK,eAAaQ,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,EAAA,GAC1EI,CACH;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOrB,GAAW,IAAIC,GAAkB;AAG3F,WAAAF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYC;AAAA,QACZ,MAAK;AAAA,QACL,eAAaO;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeR;AAAA,QACd,GAAGiB;AAAA,QACH,GAAGZ;AAAA,MAAA;AAAA,MAEHS;AAAA,IAAA;AAAA,EAGP;AACF;AAEAnB,EAAQ,cAAc;AAEtB,MAAAyB,IAAezB;"}
+{"version":3,"file":"Trigger.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      mode === 'ondark' && styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["iconMap","HelpSign","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","size","selected","isHovered","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs","Trigger$1"],"mappings":";;;;;;;;;;AAiEA,MAAMA,IAA2C;AAAA,EAC/C,MAAMC;AAAA;AAER,GAEMC,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAS,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPtB,MAAS,aAAasB,EAAO,YAAYrB,CAAO,EAAE;AAAA;AAAA,MAClDD,MAAS,YAAYsB,EAAO,YAAYtB,CAAI,EAAE;AAAA,MAC9CsB,EAAO,YAAYb,CAAI,EAAE;AAAA,MACzBE,KAAaW,EAAO,kBAAkB;AAAA,MACtCZ,KAAYY,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYxB,EAAaC,GAAMC,GAASU,KAAaM,KAAmBP,CAAQ,GAEhFc,IAAOlB,gBAAAA,EAAA,cAACmB,GAAK,EAAA,SAAS9B,EAAQM,CAAO,GAAG,MAAMJ,EAAYY,CAAI,GAAG,OAAOc,GAAW,WAAWZ,KAAaM,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAAN,gBAAAA,EAAA,cAAC,UAAK,eAAaQ,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,EAAA,GAC1EI,CACH;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOrB,GAAW,IAAIC,GAAkB;AAG3F,WAAAF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYC;AAAA,QACZ,MAAK;AAAA,QACL,eAAaO;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeR;AAAA,QACd,GAAGiB;AAAA,QACH,GAAGZ;AAAA,MAAA;AAAA,MAEHS;AAAA,IAAA;AAAA,EAGP;AACF;AAEAnB,EAAQ,cAAc;AAEtB,MAAAyB,IAAezB;"}

package/components/Trigger/Trigger.stories.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Trigger").TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        ariaLabel: string;
+        variant: "help";
+        size: "medium";
+        mode: "onlight";
+        selected: false;
+        htmlMarkup: "button";
+    };
+    argTypes: {
+        ariaLabel: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        mode: {
+            control: string;
+            options: string[];
+        };
+        selected: {
+            control: string;
+        };
+        htmlMarkup: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const HelpTrigger: Story;
+export declare const OnDark: Story;
+export declare const NextToText: Story;

package/components/Trigger/index.d.ts

@@ -1,4 +1,3 @@
 import Trigger from './Trigger';
 export * from './Trigger';
 export default Trigger;
-//# sourceMappingURL=index.d.ts.map

package/components/Validation/Validation.d.ts

@@ -14,4 +14,3 @@ interface ValidationProps {
 }
 export declare const Validation: React.ForwardRefExoticComponent<ValidationProps & React.RefAttributes<HTMLDivElement>>;
 export default Validation;
-//# sourceMappingURL=Validation.d.ts.map