@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/lib/components/Validation/index.js

@@ -0,0 +1,145 @@
+import "../../uuid.js";
+import "../../environment.js";
+import { n as AnalyticsId } from "../../constants2.js";
+import "../../usePseudoClasses.js";
+import "../../grid.js";
+import "../../palette.js";
+import "../../spacers.js";
+import "../../theme.js";
+import "../../color.js";
+import "../../spacing.js";
+import "../../currys.js";
+import "../../Icon.js";
+import "../../ArrowUpRight.js";
+import { t as AnchorLink_default } from "../../AnchorLink.js";
+import "../../language.js";
+import "../../refs.js";
+import "../../Check.js";
+import "../../_rolldown_dynamic_import_helper.js";
+import "../../useIsServerSide.js";
+import "../../LazyIcon.js";
+import { r as isComponentWithDisplayName, t as isComponent } from "../../component.js";
+import "../../useBreakpoint.js";
+import "../../useIdWithFallback.js";
+import "../../accessibility.js";
+import "../../ErrorWrapper.js";
+import "../../Spacer.js";
+import "../../Label.js";
+import "../../FormFieldTag.js";
+import "../../useElementList.js";
+import "../../useFocusableElements.js";
+import "../../useFocusToggle.js";
+import "../../focus.js";
+import "../../useFocusTrap.js";
+import "../../useIntersectionObserver.js";
+import "../../useIsVisible.js";
+import "../../debounce.js";
+import "../../useLayoutEvent.js";
+import "../../usePrevious.js";
+import "../../useSize.js";
+import "../../useResizeObserver.js";
+import "../../useToggle.js";
+import "../../useKeyboardEvent.js";
+import "../../useOutsideEvent.js";
+import "../../mobile.js";
+import "../../src.js";
+import "../../StatusDot.js";
+import "../../Checkbox.js";
+import { t as Checkbox_default } from "../../Checkbox2.js";
+import "../../Title.js";
+import { t as Title_default } from "../../Title2.js";
+import "../../ChevronDown.js";
+import "../../FormLayout.js";
+import "../../MaxCharacters.js";
+import "../../Input.js";
+import "../../RadioButton.js";
+import { t as Select_default } from "../../Select.js";
+import { t as Slider_default } from "../../Slider.js";
+import { t as Textarea_default } from "../../Textarea.js";
+import { n as FormGroup_default } from "../../FormGroup.js";
+import { t as Input_default } from "../../Input2.js";
+import { t as List_default } from "../../List.js";
+import { t as RadioButton_default } from "../../RadioButton2.js";
+import React, { useId } from "react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+var ErrorListItem = (props) => {
+	const handleClick = (event, element) => {
+		event?.preventDefault();
+		if (element?.focus) element?.focus();
+	};
+	if (props.error.ref) return /* @__PURE__ */ jsx(AnchorLink_default, {
+		href: `#${props.name}`,
+		onClick: (e) => handleClick(e, props.error.ref),
+		children: props.error.message
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: props.error.message });
+};
+var ErrorListItem_default = ErrorListItem;
+var ErrorList = (props) => /* @__PURE__ */ jsx(List_default, { children: Object.entries(props.errors).map(([name, error]) => /* @__PURE__ */ jsx(List_default.Item, { children: /* @__PURE__ */ jsx(ErrorListItem_default, {
+	name,
+	error
+}) }, name)) });
+var ErrorList_default = ErrorList;
+var ValidationSummary = (props) => {
+	const { errorTitleHtmlMarkup = "h2" } = props;
+	const titleId = useId();
+	const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
+	const visuallyHidden = props.visuallyHidden;
+	const summaryClasses = classNames(styles["validation__summary"], {
+		[styles["validation__summary--visible"]]: hasErrors && !visuallyHidden,
+		[styles["validation__summary--sr-only"]]: visuallyHidden
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-atomic": "true",
+		"aria-live": "polite",
+		"aria-relevant": "all",
+		"aria-labelledby": hasErrors && props.errorTitle ? titleId : void 0,
+		className: summaryClasses,
+		children: [hasErrors && /* @__PURE__ */ jsxs(Fragment, { children: [props.errorTitle && /* @__PURE__ */ jsx(Title_default, {
+			appearance: "title4",
+			id: titleId,
+			htmlMarkup: errorTitleHtmlMarkup,
+			margin: {
+				marginTop: 0,
+				marginBottom: 1
+			},
+			children: props.errorTitle
+		}), /* @__PURE__ */ jsx(ErrorList_default, { errors: props.errors })] }), props.children]
+	});
+};
+var ValidationSummary_default = ValidationSummary;
+const Validation = React.forwardRef((props, ref) => {
+	const validationErrorClass = styles["validation__error-wrapper"];
+	const cloneFormElement = (child) => {
+		return React.cloneElement(child, {
+			...child.props,
+			errorWrapperClassName: validationErrorClass
+		});
+	};
+	const renderChild = (child) => {
+		if (isComponent(child, FormGroup_default) || isComponent(child, Checkbox_default) || isComponent(child, RadioButton_default) || isComponent(child, Textarea_default) || isComponent(child, Input_default) || isComponent(child, Select_default) || isComponent(child, Slider_default) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) return cloneFormElement(child);
+		if (React.isValidElement(child) && child.type === React.Fragment) return React.Children.map(child.props.children, (child$1) => {
+			return renderChild(child$1);
+		});
+		return child;
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-testid": props.testId,
+		"data-analyticsid": AnalyticsId.Validation,
+		className: props.className,
+		ref,
+		children: React.Children.map(props.children, (child) => renderChild(child))
+	}), /* @__PURE__ */ jsx(ValidationSummary_default, {
+		errorTitle: props.errorTitle,
+		errors: props.errors,
+		visuallyHidden: props.visuallyHiddenSummary
+	})] });
+});
+Validation.displayName = "Validation";
+var Validation_default = Validation;
+export { Validation, Validation_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/Validation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;ACjBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACGf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;ACzBf,MAAa,aAAa,MAAM,YAAY,OAAwB,QAA4C;CAC9G,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,MAAM,eAAe,MAAM,IAAI,MAAM,SAAS,MAAM,SACtD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAgB;YACxG,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;EAEL;AAEF,WAAW,cAAc;AC5EzB,IAAA,qBD8Ee"}

package/lib/constants.d.ts

@@ -0,0 +1,139 @@
+export declare enum IconSize {
+    XXSmall = 24,
+    XSmall = 38,
+    Small = 48,
+    Medium = 64,
+    Large = 80,
+    XLarge = 130
+}
+export declare enum ZIndex {
+    OverlayScreen = 1300000,
+    PopOver = 11000,
+    LightBoxButtons = 1000
+}
+export declare const AVERAGE_CHARACTER_WIDTH_PX = 12;
+export interface HTMLButtonProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    type?: 'submit' | 'reset' | 'button' | string;
+    value?: string | string[] | number;
+    id?: string;
+}
+export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
+export interface HTMLAnchorProps {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: AnchorTarget;
+    target?: string;
+    referrerPolicy?: '' | 'same-origin' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+}
+export type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;
+export declare enum FormOnColor {
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    ondark = "ondark",
+    oninvalid = "oninvalid"
+}
+export declare enum FormSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum AnalyticsId {
+    AnchorLink = "anchor-link",
+    ArticleTeaser = "article-teaser",
+    Avatar = "avatar",
+    Badge = "badge",
+    Button = "button",
+    Checkbox = "checkbox",
+    Chip = "chip",
+    Close = "close",
+    DictionaryTrigger = "dictionary-trigger",
+    Drawer = "Drawer",
+    Dropdown = "dropdown",
+    Duolist = "duolist",
+    EmptyState = "empty-state",
+    Expander = "expander",
+    ExpanderHierarchy = "expander-hierarchy",
+    ExpanderHierarchyExpander = "expander-hierarchy-expander",
+    ExpanderList = "expander-list",
+    ExpanderListExpander = "expander-list-expander",
+    EyebrowHeader = "eyebrow-header",
+    FavoriteButton = "favorite-button",
+    FormFieldTag = "form-field-tag",
+    FormGroup = "form-group",
+    FormLayout = "form-layout",
+    HelpBubble = "help-bubble",
+    HelpDrawer = "help-drawer",
+    HelpExpanderInline = "help-expander-inline",
+    HelpExpanderStandalone = "help-expander-standalone",
+    HelpTooltip = "help-tooltip",
+    HelpTriggerIcon = "help-trigger-icon",
+    HelpTriggerInline = "help-trigger-inline",
+    HelpTriggerStandalone = "help-trigger-standalone",
+    HighlightPanel = "highlight-panel",
+    Icon = "icon",
+    Illustration = "Illustration",
+    InfoTeaser = "info-teaser",
+    Input = "input",
+    Label = "label",
+    Link = "link",
+    LinkList = "link-list",
+    List = "list",
+    Loader = "loader",
+    Logo = "logo",
+    Modal = "modal",
+    NotificationPanel = "notification-panel",
+    PanelOld = "panel",
+    PanelList = "panel-list",
+    PopMenu = "pop-menu",
+    PopOver = "pop-over",
+    Portal = "portal",
+    PromoPanel = "promo-panel",
+    RadioButton = "radio-button",
+    Select = "select",
+    SharingStatus = "sharing-status",
+    Slider = "slider",
+    Spacer = "spacer",
+    StatusDot = "status-dot",
+    Step = "step",
+    StepButtons = "step-buttons",
+    Stepper = "stepper",
+    Sublabel = "sublabel",
+    Table = "table",
+    Tag = "tag",
+    TagList = "tag-list",
+    Textarea = "textarea",
+    Tile = "tile",
+    Title = "title",
+    Toggle = "toggle",
+    Validation = "validation"
+}
+export declare enum KeyboardEventKey {
+    Enter = "Enter",
+    Escape = "Escape",
+    ArrowDown = "ArrowDown",
+    ArrowUp = "ArrowUp",
+    ArrowRight = "ArrowRight",
+    ArrowLeft = "ArrowLeft",
+    Home = "Home",
+    End = "End",
+    Space = " ",
+    Tab = "Tab"
+}
+export declare enum LanguageLocales {
+    NORWEGIAN = "nb-NO",
+    NORWEGIAN_NYNORSK = "nn-NO",
+    ENGLISH = "en-GB",
+    SAMI_NORTHERN = "se-NO"
+}

package/lib/constants.js

@@ -0,0 +1,2 @@
+import { a as IconSize, c as ZIndex, i as FormSize, n as AnalyticsId, o as KeyboardEventKey, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
+export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex };

package/lib/constants2.js

@@ -0,0 +1,123 @@
+let IconSize = /* @__PURE__ */ function(IconSize$1) {
+	IconSize$1[IconSize$1["XXSmall"] = 24] = "XXSmall";
+	IconSize$1[IconSize$1["XSmall"] = 38] = "XSmall";
+	IconSize$1[IconSize$1["Small"] = 48] = "Small";
+	IconSize$1[IconSize$1["Medium"] = 64] = "Medium";
+	IconSize$1[IconSize$1["Large"] = 80] = "Large";
+	IconSize$1[IconSize$1["XLarge"] = 130] = "XLarge";
+	return IconSize$1;
+}({});
+let ZIndex = /* @__PURE__ */ function(ZIndex$1) {
+	ZIndex$1[ZIndex$1["OverlayScreen"] = 13e5] = "OverlayScreen";
+	ZIndex$1[ZIndex$1["PopOver"] = 11e3] = "PopOver";
+	ZIndex$1[ZIndex$1["LightBoxButtons"] = 1e3] = "LightBoxButtons";
+	return ZIndex$1;
+}({});
+const AVERAGE_CHARACTER_WIDTH_PX = 12;
+let FormOnColor = /* @__PURE__ */ function(FormOnColor$1) {
+	FormOnColor$1["onwhite"] = "onwhite";
+	FormOnColor$1["ongrey"] = "ongrey";
+	FormOnColor$1["onblueberry"] = "onblueberry";
+	FormOnColor$1["ondark"] = "ondark";
+	FormOnColor$1["oninvalid"] = "oninvalid";
+	return FormOnColor$1;
+}({});
+let FormSize = /* @__PURE__ */ function(FormSize$1) {
+	FormSize$1["medium"] = "medium";
+	FormSize$1["large"] = "large";
+	return FormSize$1;
+}({});
+let AnalyticsId = /* @__PURE__ */ function(AnalyticsId$1) {
+	AnalyticsId$1["AnchorLink"] = "anchor-link";
+	AnalyticsId$1["ArticleTeaser"] = "article-teaser";
+	AnalyticsId$1["Avatar"] = "avatar";
+	AnalyticsId$1["Badge"] = "badge";
+	AnalyticsId$1["Button"] = "button";
+	AnalyticsId$1["Checkbox"] = "checkbox";
+	AnalyticsId$1["Chip"] = "chip";
+	AnalyticsId$1["Close"] = "close";
+	AnalyticsId$1["DictionaryTrigger"] = "dictionary-trigger";
+	AnalyticsId$1["Drawer"] = "Drawer";
+	AnalyticsId$1["Dropdown"] = "dropdown";
+	AnalyticsId$1["Duolist"] = "duolist";
+	AnalyticsId$1["EmptyState"] = "empty-state";
+	AnalyticsId$1["Expander"] = "expander";
+	AnalyticsId$1["ExpanderHierarchy"] = "expander-hierarchy";
+	AnalyticsId$1["ExpanderHierarchyExpander"] = "expander-hierarchy-expander";
+	AnalyticsId$1["ExpanderList"] = "expander-list";
+	AnalyticsId$1["ExpanderListExpander"] = "expander-list-expander";
+	AnalyticsId$1["EyebrowHeader"] = "eyebrow-header";
+	AnalyticsId$1["FavoriteButton"] = "favorite-button";
+	AnalyticsId$1["FormFieldTag"] = "form-field-tag";
+	AnalyticsId$1["FormGroup"] = "form-group";
+	AnalyticsId$1["FormLayout"] = "form-layout";
+	AnalyticsId$1["HelpBubble"] = "help-bubble";
+	AnalyticsId$1["HelpDrawer"] = "help-drawer";
+	AnalyticsId$1["HelpExpanderInline"] = "help-expander-inline";
+	AnalyticsId$1["HelpExpanderStandalone"] = "help-expander-standalone";
+	AnalyticsId$1["HelpTooltip"] = "help-tooltip";
+	AnalyticsId$1["HelpTriggerIcon"] = "help-trigger-icon";
+	AnalyticsId$1["HelpTriggerInline"] = "help-trigger-inline";
+	AnalyticsId$1["HelpTriggerStandalone"] = "help-trigger-standalone";
+	AnalyticsId$1["HighlightPanel"] = "highlight-panel";
+	AnalyticsId$1["Icon"] = "icon";
+	AnalyticsId$1["Illustration"] = "Illustration";
+	AnalyticsId$1["InfoTeaser"] = "info-teaser";
+	AnalyticsId$1["Input"] = "input";
+	AnalyticsId$1["Label"] = "label";
+	AnalyticsId$1["Link"] = "link";
+	AnalyticsId$1["LinkList"] = "link-list";
+	AnalyticsId$1["List"] = "list";
+	AnalyticsId$1["Loader"] = "loader";
+	AnalyticsId$1["Logo"] = "logo";
+	AnalyticsId$1["Modal"] = "modal";
+	AnalyticsId$1["NotificationPanel"] = "notification-panel";
+	AnalyticsId$1["PanelOld"] = "panel";
+	AnalyticsId$1["PanelList"] = "panel-list";
+	AnalyticsId$1["PopMenu"] = "pop-menu";
+	AnalyticsId$1["PopOver"] = "pop-over";
+	AnalyticsId$1["Portal"] = "portal";
+	AnalyticsId$1["PromoPanel"] = "promo-panel";
+	AnalyticsId$1["RadioButton"] = "radio-button";
+	AnalyticsId$1["Select"] = "select";
+	AnalyticsId$1["SharingStatus"] = "sharing-status";
+	AnalyticsId$1["Slider"] = "slider";
+	AnalyticsId$1["Spacer"] = "spacer";
+	AnalyticsId$1["StatusDot"] = "status-dot";
+	AnalyticsId$1["Step"] = "step";
+	AnalyticsId$1["StepButtons"] = "step-buttons";
+	AnalyticsId$1["Stepper"] = "stepper";
+	AnalyticsId$1["Sublabel"] = "sublabel";
+	AnalyticsId$1["Table"] = "table";
+	AnalyticsId$1["Tag"] = "tag";
+	AnalyticsId$1["TagList"] = "tag-list";
+	AnalyticsId$1["Textarea"] = "textarea";
+	AnalyticsId$1["Tile"] = "tile";
+	AnalyticsId$1["Title"] = "title";
+	AnalyticsId$1["Toggle"] = "toggle";
+	AnalyticsId$1["Validation"] = "validation";
+	return AnalyticsId$1;
+}({});
+let KeyboardEventKey = /* @__PURE__ */ function(KeyboardEventKey$1) {
+	KeyboardEventKey$1["Enter"] = "Enter";
+	KeyboardEventKey$1["Escape"] = "Escape";
+	KeyboardEventKey$1["ArrowDown"] = "ArrowDown";
+	KeyboardEventKey$1["ArrowUp"] = "ArrowUp";
+	KeyboardEventKey$1["ArrowRight"] = "ArrowRight";
+	KeyboardEventKey$1["ArrowLeft"] = "ArrowLeft";
+	KeyboardEventKey$1["Home"] = "Home";
+	KeyboardEventKey$1["End"] = "End";
+	KeyboardEventKey$1["Space"] = " ";
+	KeyboardEventKey$1["Tab"] = "Tab";
+	return KeyboardEventKey$1;
+}({});
+let LanguageLocales = /* @__PURE__ */ function(LanguageLocales$1) {
+	LanguageLocales$1["NORWEGIAN"] = "nb-NO";
+	LanguageLocales$1["NORWEGIAN_NYNORSK"] = "nn-NO";
+	LanguageLocales$1["ENGLISH"] = "en-GB";
+	LanguageLocales$1["SAMI_NORTHERN"] = "se-NO";
+	return LanguageLocales$1;
+}({});
+export { IconSize as a, ZIndex as c, FormSize as i, AnalyticsId as n, KeyboardEventKey as o, FormOnColor as r, LanguageLocales as s, AVERAGE_CHARACTER_WIDTH_PX as t };
+
+//# sourceMappingURL=constants2.js.map

package/lib/constants2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants2.js","names":[],"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  OverlayScreen = 1300000,\n  PopOver = 11000,\n  LightBoxButtons = 1000,\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 FormOnColor {\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  ArticleTeaser = 'article-teaser',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\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  EyebrowHeader = 'eyebrow-header',\n  FavoriteButton = 'favorite-button',\n  FormFieldTag = 'form-field-tag',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpDrawer = 'help-drawer',\n  HelpExpanderInline = 'help-expander-inline',\n  HelpExpanderStandalone = 'help-expander-standalone',\n  HelpTooltip = 'help-tooltip',\n  HelpTriggerIcon = 'help-trigger-icon',\n  HelpTriggerInline = 'help-trigger-inline',\n  HelpTriggerStandalone = 'help-trigger-standalone',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  InfoTeaser = 'info-teaser',\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  PanelOld = '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  Toggle = 'toggle',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n  NORWEGIAN = 'nb-NO',\n  NORWEGIAN_NYNORSK = 'nn-NO',\n  ENGLISH = 'en-GB',\n  SAMI_NORTHERN = 'se-NO',\n}\n"],"mappings":"AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,WAAA,aAAA,MAAA;AACA,YAAA,WAAA,YAAA,MAAA;AACA,YAAA,WAAA,WAAA,MAAA;AACA,YAAA,WAAA,YAAA,MAAA;AACA,YAAA,WAAA,WAAA,MAAA;AACA,YAAA,WAAA,YAAA,OAAA;;;AAGF,IAAY,SAAA,yBAAA,UAAL;AACL,UAAA,SAAA,mBAAA,QAAA;AACA,UAAA,SAAA,aAAA,QAAA;AACA,UAAA,SAAA,qBAAA,OAAA;;;AAGF,MAAa,6BAA6B;AAyC1C,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,aAAA;AACA,eAAA,YAAA;AACA,eAAA,iBAAA;AACA,eAAA,YAAA;AACA,eAAA,eAAA;;;AAGF,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,gBAAA;AACA,eAAA,mBAAA;AACA,eAAA,YAAA;AACA,eAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,uBAAA;AACA,eAAA,YAAA;AACA,eAAA,cAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;AACA,eAAA,cAAA;AACA,eAAA,uBAAA;AACA,eAAA,+BAAA;AACA,eAAA,kBAAA;AACA,eAAA,0BAAA;AACA,eAAA,mBAAA;AACA,eAAA,oBAAA;AACA,eAAA,kBAAA;AACA,eAAA,eAAA;AACA,eAAA,gBAAA;AACA,eAAA,gBAAA;AACA,eAAA,gBAAA;AACA,eAAA,wBAAA;AACA,eAAA,4BAAA;AACA,eAAA,iBAAA;AACA,eAAA,qBAAA;AACA,eAAA,uBAAA;AACA,eAAA,2BAAA;AACA,eAAA,oBAAA;AACA,eAAA,UAAA;AACA,eAAA,kBAAA;AACA,eAAA,gBAAA;AACA,eAAA,WAAA;AACA,eAAA,WAAA;AACA,eAAA,UAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,YAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,uBAAA;AACA,eAAA,cAAA;AACA,eAAA,eAAA;AACA,eAAA,aAAA;AACA,eAAA,aAAA;AACA,eAAA,YAAA;AACA,eAAA,gBAAA;AACA,eAAA,iBAAA;AACA,eAAA,YAAA;AACA,eAAA,mBAAA;AACA,eAAA,YAAA;AACA,eAAA,YAAA;AACA,eAAA,eAAA;AACA,eAAA,UAAA;AACA,eAAA,iBAAA;AACA,eAAA,aAAA;AACA,eAAA,cAAA;AACA,eAAA,WAAA;AACA,eAAA,SAAA;AACA,eAAA,aAAA;AACA,eAAA,cAAA;AACA,eAAA,UAAA;AACA,eAAA,WAAA;AACA,eAAA,YAAA;AACA,eAAA,gBAAA;;;AAGF,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,WAAA;AACA,oBAAA,YAAA;AACA,oBAAA,eAAA;AACA,oBAAA,aAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA,oBAAA,UAAA;AACA,oBAAA,SAAA;AACA,oBAAA,WAAA;AACA,oBAAA,SAAA;;;AAGF,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,eAAA;AACA,mBAAA,uBAAA;AACA,mBAAA,aAAA;AACA,mBAAA,mBAAA"}

package/lib/debounce.js

@@ -0,0 +1,16 @@
+function debounce(func, wait) {
+	let timeout;
+	const debouncedFunc = (args) => new Promise((resolve) => {
+		if (timeout) clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			resolve(func(args));
+		}, wait);
+	});
+	const teardown = () => {
+		if (timeout) clearTimeout(timeout);
+	};
+	return [debouncedFunc, teardown];
+}
+export { debounce as t };
+
+//# sourceMappingURL=debounce.js.map

package/lib/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","names":["timeout: ReturnType<typeof setTimeout> | null"],"sources":["../src/utils/debounce.ts"],"sourcesContent":["/**\n * debounce limits time a function can be executed\n * @param func function to debounce\n * @param wait wait for x time\n */\n\nexport function debounce<A = unknown, R = void>(func: (args?: A) => R, wait: number): [(args?: A) => Promise<R>, () => void] {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  const debouncedFunc = (args?: A): Promise<R> =>\n    new Promise(resolve => {\n      if (timeout) {\n        clearTimeout(timeout);\n      }\n\n      timeout = setTimeout((): void => {\n        resolve(func(args));\n      }, wait);\n    });\n\n  const teardown = (): void => {\n    if (timeout) clearTimeout(timeout);\n  };\n\n  return [debouncedFunc, teardown];\n}\n"],"mappings":"AAMA,SAAgB,SAAgC,MAAuB,MAAsD;CAC3H,IAAIA;CAEJ,MAAM,iBAAiB,SACrB,IAAI,SAAQ,YAAW;AACrB,MAAI,QACF,cAAa,QAAQ;AAGvB,YAAU,iBAAuB;AAC/B,WAAQ,KAAK,KAAK,CAAC;KAClB,KAAK;GACR;CAEJ,MAAM,iBAAuB;AAC3B,MAAI,QAAS,cAAa,QAAQ;;AAGpC,QAAO,CAAC,eAAe,SAAS"}

package/lib/deepContains.js

@@ -0,0 +1,13 @@
+function deepContains(container, element) {
+	let node = element;
+	while (node) {
+		if (node === container) return true;
+		const rootNode = node.getRootNode();
+		if (rootNode instanceof ShadowRoot) node = rootNode.host;
+		else node = node.parentNode;
+	}
+	return false;
+}
+export { deepContains as t };
+
+//# sourceMappingURL=deepContains.js.map

package/lib/deepContains.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deepContains.js","names":[],"sources":["../src/utils/deepContains.ts"],"sourcesContent":["/**\n * Determines whether a given container node contains a specific element, traversing through shadow DOM boundaries if necessary.\n * This function extends the behavior of `Node.contains` to support scenarios involving shadow DOM.\n *\n * @param container - The container node to check, typically the document or a specific DOM element.\n * @param element - The target node to verify if it is contained within the container.\n * @returns `true` if the container node contains the target node, including through shadow DOM boundaries; otherwise, `false`.\n */\nexport function deepContains(container: Node, element: Node | null): boolean {\n  let node = element;\n  while (node) {\n    if (node === container) {\n      return true;\n    }\n    // Step out of shadow roots if necessary\n    const rootNode = node.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      node = rootNode.host;\n    } else {\n      node = node.parentNode;\n    }\n  }\n  return false;\n}\n"],"mappings":"AAQA,SAAgB,aAAa,WAAiB,SAA+B;CAC3E,IAAI,OAAO;AACX,QAAO,MAAM;AACX,MAAI,SAAS,UACX,QAAO;EAGT,MAAM,WAAW,KAAK,aAAa;AACnC,MAAI,oBAAoB,WACtB,QAAO,SAAS;MAEhB,QAAO,KAAK;;AAGhB,QAAO"}