@helsenorge/designsystem-react 6.4.0 → 6.6.0

package/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { TagAction, TagSize, TagVariant } from './Tag';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Tag").TagProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        size: TagSize.medium;
+        color: "blueberry";
+        variant: TagVariant.normal;
+        action: TagAction.remove;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: typeof TagSize;
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        variant: {
+            control: string;
+            options: typeof TagVariant;
+        };
+        action: {
+            control: string;
+            options: typeof TagAction;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const Action: Story;
+//# sourceMappingURL=Tag.stories.d.ts.map

package/components/TagList/TagList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface TagListPropsProps {
+export interface TagListPropsProps {
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
 }

package/components/TagList/TagList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface TagListPropsProps {\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child","TagList$1"],"mappings":";;;AAWA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH,GAIJC,IAAeP;"}
+{"version":3,"file":"TagList.js","sources":["../../../src/components/TagList/TagList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n"],"names":["TagList","children","testId","React","styles","AnalyticsId","child","TagList$1"],"mappings":";;;AAWA,MAAMA,IAAuC,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAEtDC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,UAAU,GAAG,eAAaF,GAAQ,oBAAkBG,EAAY,QACnF,GAAAF,EAAM,SAAS,IAAIF,GAAU,CAC5BK,MAAAH,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWC,EAAO,gBAAgB,EAAA,GAAIE,CAAM,CACjD,CACH,GAIJC,IAAeP;"}

package/components/TagList/TagList.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./TagList").TagListPropsProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=TagList.stories.d.ts.map

package/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode } from '../../constants';
-interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
+export interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
     /** max character limit in textarea  */
     maxCharacters?: number;
     /** The text is displayed in the end of the text-counter */

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, 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":";;;;;;;;AAsDA,MAAMA,KAAsB,CAACC,MAA+B;AAC1D,QAAMC,IAAe,QACfC,IAAiB,QACjBC,IAAc;AAEb,SAAA,QAAQH,IAAaI,EAA0B,QAAQH,CAAY,MAAMC,CAAc,MAAMC,CAAW;AACjH,GAEME,IAAWC,EAAM,WAAW,CAACC,GAAsBC,MAAwC;AACzF,QAAA;AAAA,IACJ,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAcC;AAAA,IACd,aAAAC;AAAA,IACA,MAAAC,IAAOC,EAAS;AAAA,IAChB,OAAAC;AAAA,IACA,YAAAC,IAAaC,GAAK;AAAA,IAClB,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAA1B,GAEE,CAAC2B,GAAMC,CAAO,IAAIC,EAASf,CAAO,GAClC,CAACgB,GAAeC,CAAgB,IAAIF,EAASvB,KAAgB,EAAE,GAC/D0B,IAAYC,EAAuB,IAAI;AAE7C,EAAAC,EAAU,MAAM;AACd,IAAAH,EAAiBzB,KAAgB,EAAE;AAAA,EAAA,GAClC,CAACA,CAAY,CAAC;AAEX,QAAA6B,IAAe,CAACC,MAAsC;AAG1D,UAAMC,IAAeD,EAAO;AAC5B,IAAAA,EAAO,OAAOtB;AAEd,UAAMwB,IAAc,KAAK,OAAOF,EAAO,eAAe,MAAM,EAAkB;AAE9E,IAAIE,MAAgBD,MAClBD,EAAO,OAAOE,IAGZA,KAAevB,MACjBqB,EAAO,OAAOrB,GACdqB,EAAO,YAAYA,EAAO,eAGxBE,IAAcvB,IAChBa,EAAQU,CAAW,IAEnBV,EAAQb,CAAO;AAAA,EACjB,GAGIwB,IAAS9B,MAASC,EAAS,QAC3B8B,IAAc/B,MAASC,EAAS,aAChC+B,IAAwB,CAAC,CAACvC,KAAiB4B,EAAc,WAAW,SAAS5B,GAC7EwC,IAAUjC,MAASC,EAAS,aAAa,CAAC,CAACO,KAAawB,GAExDE,IAAuBC,EAAGC,EAAO,UAAU;AAAA,IAC/C,CAACA,EAAO,wBAAwB,CAAC,GAAGtC;AAAA,EAAA,CACrC,GAEKuC,IAAsBF,EAAGC,EAAO,iBAAiB,GAAG;AAAA,IACxD,CAACA,EAAO,8BAA8B,CAAC,GAAGrC;AAAA,IAC1C,CAACqC,EAAO,+BAA+B,CAAC,GAAGL;AAAA,IAC3C,CAACK,EAAO,0BAA0B,CAAC,GAAGN;AAAA,IACtC,CAACM,EAAO,0BAA0B,CAAC,GAAGH;AAAA,IACtC,CAACG,EAAO,2BAA2B,CAAC,GAAG7C,EAAM;AAAA,EAAA,CAC9C,GAEK+C,IAAgBH,EAAGC,EAAO,wBAAwB,GAAG;AAAA,IACzD,CAACA,EAAO,kCAAkC,CAAC,GAAG7C,EAAM;AAAA,EAAA,CACrD;AAED,EAAAkC,EAAU,MAAM;;AACV,QAAAlB,OAAQgC,IAAAhB,EAAU,YAAV,QAAAgB,EAAmB,eAAYC,IAAAjB,EAAU,YAAV,QAAAiB,EAAmB,SAAS,KAAI;AACzE,YAAMC,KAAWC,IAAAnB,EAAU,YAAV,gBAAAmB,EAAmB,SAAS;AAC7C,MAAAhB,EAAae,CAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAE,CAAA;AAEC,QAAAE,IAAe,CAAC,MAAoD;AACxE,IAAIpC,KACFmB,EAAa,EAAE,MAAM,GAENJ,EAAA,EAAE,OAAO,KAAK;AAAA,EAAA,GAG3BsB,IAAkB,CAAC,MAAoD;AAC3E,IAAI5B,KACFA,EAAS,CAAC,GAEZ2B,EAAa,CAAC;AAAA,EAAA,GAGVE,IAAWlD,IAAQZ,GAAoBY,CAAK,IAAI;AAGpD,SAAAL,gBAAAA,EAAA,cAACwD,IAAa,EAAA,WAAAtC,EAAA,GACXlB,gBAAAA,EAAA,cAAA,OAAA,EAAI,eAAaM,GAAQ,oBAAkBmD,EAAY,UAAU,WAAWb,KAC1Ec,GAAY9C,GAAOC,GAAYH,GAAkBU,CAAQ,GAC1DpB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAW+C,GAAqB,KAAKd,GAAW,OAAO,EAAE,UAAAsB,EAC5D,EAAA,GAAAvD,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAA4B;AAAA,MACA,cAAArB;AAAA,MACA,IAAIM;AAAA,MACJ,WAAWmC;AAAA,MACX,KAAA9C;AAAA,MACA,oBAAkBD,EAAM,kBAAkB,KAAK;AAAA,MAC/C,gBAAc,CAAC,CAAC0C;AAAA,MAEhB,WAAAxB;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC5C,aAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAU6B;AAAA,MACT,GAAG3B;AAAA,IAAA;AAAA,EAAA,CAER,GACCxB,KACCH,gBAAAA,EAAA;AAAA,IAAC2D;AAAA,IAAA;AAAA,MACC,eAAAxD;AAAA,MACA,QAAQ4B,EAAc,SAAA,EAAW;AAAA,MACjC,SAAA3B;AAAA,MACA,MAAAM;AAAA,MACA,UAAA6C;AAAA,IAAA;AAAA,EAGN,CAAA,CACF;AAEJ,CAAC;AAEDxD,EAAS,cAAc;AAEvB,MAAA6D,KAAe7D;"}

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

@@ -0,0 +1,94 @@
+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;
+//# sourceMappingURL=Textarea.stories.d.ts.map

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

@@ -0,0 +1,40 @@
+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;
+//# sourceMappingURL=Tile.stories.d.ts.map

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

@@ -0,0 +1,40 @@
+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;
+//# sourceMappingURL=Title.stories.d.ts.map

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

@@ -0,0 +1,30 @@
+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;
+//# sourceMappingURL=Tooltip.stories.d.ts.map

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

@@ -0,0 +1,52 @@
+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;
+//# sourceMappingURL=Trigger.stories.d.ts.map

package/components/Validation/Validation.stories.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { FormSize } from '../../constants';
+declare const meta: {
+    title: string;
+    component: (props: import("../FormExample/FormExample").FormExampleProps) => JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+                markdown: string;
+            };
+            source: {
+                code: string;
+                language: string;
+            };
+        };
+    };
+    args: {
+        size: FormSize.medium;
+    };
+    argTypes: {
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FormGroup: Story;
+export declare const Checkbox: Story;
+export declare const Radiobutton: Story;
+export declare const Textarea: Story;
+export declare const Input: Story;
+export declare const Select: Story;
+//# sourceMappingURL=Validation.stories.d.ts.map

package/constants.d.ts

@@ -8,6 +8,7 @@ export declare enum IconSize {
 }
 export declare enum ZIndex {
     Modal = 1300000,
+    PopOver = 11000,
     ExpanderTrigger = 10000
 }
 export declare const AVERAGE_CHARACTER_WIDTH_PX = 12;

package/constants.js

@@ -1,4 +1,4 @@
-var e = /* @__PURE__ */ ((r) => (r[r.XXSmall = 24] = "XXSmall", r[r.XSmall = 38] = "XSmall", r[r.Small = 48] = "Small", r[r.Medium = 64] = "Medium", r[r.Large = 80] = "Large", r[r.XLarge = 130] = "XLarge", r))(e || {}), o = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r))(o || {});
+var e = /* @__PURE__ */ ((r) => (r[r.XXSmall = 24] = "XXSmall", r[r.XSmall = 38] = "XSmall", r[r.Small = 48] = "Small", r[r.Medium = 64] = "Medium", r[r.Large = 80] = "Large", r[r.XLarge = 130] = "XLarge", r))(e || {}), o = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.PopOver = 11e3] = "PopOver", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r))(o || {});
 const g = 12;
 var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightBox = "highlight-box", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), u = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.Home = "Home", r.End = "End", r))(u || {});
 export {

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  ExpanderTrigger = 10000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBAFUA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,eAAe,iBACfA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cAxDHA,IAAAA,KAAA,CAAA,CAAA,GA2DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,OAAO,QACPA,EAAA,MAAM,OANIA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  ExpanderTrigger = 10000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBAHUA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,eAAe,iBACfA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cAxDHA,IAAAA,KAAA,CAAA,CAAA,GA2DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,OAAO,QACPA,EAAA,MAAM,OANIA,IAAAA,KAAA,CAAA,CAAA;"}

package/hoc/withBreakpoint/withBreakpoint.stories.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { BreakpointProps } from './withBreakpoint';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<BreakpointProps, "breakpoint">>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=withBreakpoint.stories.d.ts.map

package/hooks/useBreakpoint.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useBreakpoint.stories.d.ts.map

package/hooks/useDelayedState.stories.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+interface UseDelayedStateExampleProps {
+    delay: number;
+}
+declare const meta: {
+    title: string;
+    component: React.FC<UseDelayedStateExampleProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        delay: number;
+    };
+    argTypes: {
+        delay: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useDelayedState.stories.d.ts.map

package/hooks/useElementList.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useElementList.stories.d.ts.map

package/hooks/useFocusToggle.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useFocusToggle.stories.d.ts.map

package/hooks/useFocusTrap.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useFocusTrap.stories.d.ts.map

package/hooks/useFocusableElements.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useFocusableElements.stories.d.ts.map

package/hooks/useHover.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<{}>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=useHover.stories.d.ts.map