@helsenorge/designsystem-react 8.6.0-beta.1 → 9.0.0-beta.0

package/components/Trigger/Trigger.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export type TriggerTags = 'button' | 'span';
 export type TriggerVariant = 'help';
 export type TriggerSize = 'medium' | 'large';
-export type TriggerMode = 'onlight' | 'ondark';
+export type TriggerOnColor = 'onlight' | 'ondark';
 export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {
     /**
      * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!
@@ -19,7 +19,7 @@ export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonE
     /**
      * Changes the design based on the background the trigger is placed on. Default: onlight.
      */
-    mode?: TriggerMode;
+    onColor?: TriggerOnColor;
     /**
      * Size of the trigger. Default: medium.
      */

package/components/Validation/index.js

@@ -1,50 +1,56 @@
-import { jsx as e, Fragment as m, jsxs as l } from "react/jsx-runtime";
-import o from "react";
-import c from "classnames";
-import { A as f } from "../../AnchorLink.js";
-import { L as d } from "../../List.js";
-import { useUuid as u } from "../../hooks/useUuid.js";
+import { jsx as o, Fragment as f, jsxs as c } from "react/jsx-runtime";
+import s from "react";
+import T from "classnames";
+import { A as C } from "../../AnchorLink.js";
+import { L as u } from "../../List.js";
+import { useUuid as y } from "../../hooks/useUuid.js";
 import { T as h } from "../../Title.js";
-import n from "./styles.module.scss";
-import { AnalyticsId as y } from "../../constants.js";
-import { isComponent as T } from "../../utils/component.js";
-import { F as g } from "../../FormGroup.js";
-const C = (r) => {
-  const t = (a, i) => {
-    a == null || a.preventDefault(), i != null && i.focus && (i == null || i.focus());
+import d from "./styles.module.scss";
+import { AnalyticsId as g } from "../../constants.js";
+import { isComponent as m, isComponentWithDisplayName as l } from "../../utils/component.js";
+import { C as k } from "../../Checkbox.js";
+import { F as v } from "../../FormGroup.js";
+import { I as E } from "../../Input.js";
+import { R as I } from "../../RadioButton.js";
+import { S as N } from "../../Select.js";
+import { T as b } from "../../Textarea.js";
+const _ = (r) => {
+  const i = (e, t) => {
+    e == null || e.preventDefault(), t != null && t.focus && (t == null || t.focus());
   };
-  return r.error.ref ? /* @__PURE__ */ e(f, { href: `#${r.name}`, onClick: (a) => t(a, r.error.ref), children: r.error.message }) : /* @__PURE__ */ e(m, { children: r.error.message });
-}, v = (r) => /* @__PURE__ */ e(d, { children: Object.entries(r.errors).map(([t, a]) => /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ e(C, { name: t, error: a }) }, t)) }), N = (r) => {
-  const { errorTitleHtmlMarkup: t = "h2" } = r, a = u(), i = !!r.errors && Object.entries(r.errors).length > 0, s = c(n.validation__summary, i && n["validation__summary--visible"]);
-  return /* @__PURE__ */ l(
+  return r.error.ref ? /* @__PURE__ */ o(C, { href: `#${r.name}`, onClick: (e) => i(e, r.error.ref), children: r.error.message }) : /* @__PURE__ */ o(f, { children: r.error.message });
+}, x = (r) => /* @__PURE__ */ o(u, { children: Object.entries(r.errors).map(([i, e]) => /* @__PURE__ */ o(u.Item, { children: /* @__PURE__ */ o(_, { name: i, error: e }) }, i)) }), D = (r) => {
+  const { errorTitleHtmlMarkup: i = "h2" } = r, e = y(), t = !!r.errors && Object.entries(r.errors).length > 0, n = T(d.validation__summary, t && d["validation__summary--visible"]);
+  return /* @__PURE__ */ c(
     "div",
     {
       role: "alert",
       "aria-live": "polite",
       "aria-relevant": "all",
-      "aria-labelledby": i && r.errorTitle ? a : void 0,
-      className: s,
+      "aria-labelledby": t && r.errorTitle ? e : void 0,
+      className: n,
       children: [
-        i && /* @__PURE__ */ l(m, { children: [
-          r.errorTitle && /* @__PURE__ */ e(h, { appearance: "title4", id: a, htmlMarkup: t, margin: { marginTop: 0, marginBottom: 1 }, children: r.errorTitle }),
-          /* @__PURE__ */ e(v, { errors: r.errors })
+        t && /* @__PURE__ */ c(f, { children: [
+          r.errorTitle && /* @__PURE__ */ o(h, { appearance: "title4", id: e, htmlMarkup: i, margin: { marginTop: 0, marginBottom: 1 }, children: r.errorTitle }),
+          /* @__PURE__ */ o(x, { errors: r.errors })
         ] }),
         r.children
       ]
     }
   );
-}, _ = o.forwardRef((r, t) => {
-  const a = (i) => T(i, g) ? o.cloneElement(i, {
-    errorWrapperClassName: n["validation__error-wrapper"]
-  }) : o.isValidElement(i) && i.type === o.Fragment ? o.Children.map(i.props.children, (s) => a(s)) : i;
-  return /* @__PURE__ */ l(m, { children: [
-    /* @__PURE__ */ e("div", { "data-testid": r.testId, "data-analyticsid": y.Validation, className: r.className, ref: t, children: o.Children.map(r.children, (i) => a(i)) }),
-    /* @__PURE__ */ e(N, { errorTitle: r.errorTitle, errors: r.errors })
+}, F = s.forwardRef((r, i) => {
+  const e = d["validation__error-wrapper"], t = (a) => s.cloneElement(a, {
+    ...a.props,
+    errorWrapperClassName: e
+  }), n = (a) => m(a, v) || m(a, k) || m(a, I) || m(a, b) || m(a, E) || m(a, N) || l(a, "DateTimePickerWrapper") || l(a, "DatePicker") || l(a, "DateTime") ? t(a) : s.isValidElement(a) && a.type === s.Fragment ? s.Children.map(a.props.children, (p) => n(p)) : a;
+  return /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ o("div", { "data-testid": r.testId, "data-analyticsid": g.Validation, className: r.className, ref: i, children: s.Children.map(r.children, (a) => n(a)) }),
+    /* @__PURE__ */ o(D, { errorTitle: r.errorTitle, errors: r.errors })
   ] });
 });
-_.displayName = "Validation";
+F.displayName = "Validation";
 export {
-  _ as Validation,
-  _ as default
+  F as Validation,
+  F as default
 };
 //# sourceMappingURL=index.js.map

package/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"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    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 from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\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}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\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 } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\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}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        errorWrapperClassName: styles['validation__error-wrapper'],\n      });\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} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","e","jsx","Fragment","ErrorList","List","name","error","ValidationSummary","errorTitleHtmlMarkup","titleId","useUuid","hasErrors","summaryClasses","classNames","styles","jsxs","Title","Validation","React","ref","renderChild","child","isComponent","FormGroup","AnalyticsId"],"mappings":";;;;;;;;;;;AAUA,MAAMA,IAA6C,CAASC,MAAA;AACpD,QAAAC,IAAc,CAACC,GAAgCC,MAAqC;AACxF,IAAAD,KAAA,QAAAA,EAAO,kBACEC,KAAA,QAAAA,EAAA,UAASA,KAAA,QAAAA,EAAS;AAAA,EAAM;AAG/B,SAAAH,EAAM,MAAM,wBAEXI,GAAW,EAAA,MAAM,IAAIJ,EAAM,IAAI,IAAI,SAAS,CAACK,MAAYJ,EAAYI,GAAGL,EAAM,MAAM,GAAG,GACrF,UAAAA,EAAM,MAAM,QACf,CAAA,IAIG,gBAAAM,EAAAC,GAAA,EAAG,UAAMP,EAAA,MAAM,QAAQ,CAAA;AAChC,GCfMQ,IAAsC,CAC1CR,MAAA,gBAAAM,EAACG,GACE,EAAA,UAAA,OAAO,QAAQT,EAAM,MAAM,EAAE,IAAI,CAAC,CAACU,GAAMC,CAAK,MAC7C,gBAAAL,EAACG,EAAK,MAAL,EACC,UAAA,gBAAAH,EAACP,GAAc,EAAA,MAAAW,GAAY,OAAAC,EAAc,CAAA,EAAA,GAD3BD,CAEhB,CACD,EACH,CAAA,GCKIE,IAAsD,CAASZ,MAAA;AAC7D,QAAA,EAAE,sBAAAa,IAAuB,KAAS,IAAAb,GAClCc,IAAUC,KAEVC,IAAY,CAAC,CAAChB,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,GAEpEiB,IAAiBC,EAAWC,EAAO,qBAAwBH,KAAaG,EAAO,8BAA8B,CAAC;AAGlH,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,mBAAiBJ,KAAahB,EAAM,aAAac,IAAU;AAAA,MAC3D,WAAWG;AAAA,MAEV,UAAA;AAAA,QAAAD,KAEI,gBAAAI,EAAAb,GAAA,EAAA,UAAA;AAAA,UAAAP,EAAM,cACJ,gBAAAM,EAAAe,GAAA,EAAM,YAAW,UAAS,IAAIP,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,EAAE,GAC/G,YAAM,YACT;AAAA,UAED,gBAAAP,EAAAE,GAAA,EAAU,QAAQR,EAAM,OAAS,CAAA;AAAA,QAAA,GACpC;AAAA,QAEDA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,GC1BasB,IAAaC,EAAM,WAAW,CAACvB,GAAwBwB,MAA4C;AACxG,QAAAC,IAAc,CAACC,MACfC,EAA4BD,GAAOE,CAAS,IACvCL,EAAM,aAAaG,GAAO;AAAA,IAC/B,uBAAuBP,EAAO,2BAA2B;AAAA,EAAA,CAC1D,IAECI,EAAM,eAAeG,CAAK,KAAKA,EAAM,SAASH,EAAM,WAC/CA,EAAM,SAAS,IAAIG,EAAM,MAAM,UAAU,CAACA,MACxCD,EAAYC,CAAK,CACzB,IAGIA;AAGT,SAEI,gBAAAN,EAAAb,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAD,EAAA,OAAA,EAAI,eAAaN,EAAM,QAAQ,oBAAkB6B,EAAY,YAAY,WAAW7B,EAAM,WAAW,KAAAwB,GACnG,UAAMD,EAAA,SAAS,IAAIvB,EAAM,UAAU,CAAC0B,MAA2BD,EAAYC,CAAK,CAAC,EACpF,CAAA;AAAA,sBACCd,GAAkB,EAAA,YAAYZ,EAAM,YAAY,QAAQA,EAAM,QAAQ;AAAA,EACzE,EAAA,CAAA;AAEJ,CAAC;AAEDsB,EAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"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    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 from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\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}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\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 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}\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      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} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","jsx","Fragment","ErrorList","List","name","error","ValidationSummary","errorTitleHtmlMarkup","titleId","useUuid","hasErrors","summaryClasses","classNames","styles","jsxs","Title","Validation","React","ref","validationErrorClass","cloneFormElement","child","renderChild","isComponent","FormGroup","Checkbox","RadioButton","Textarea","Input","Select","isComponentWithDisplayName","AnalyticsId"],"mappings":"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"}

package/constants.d.ts

@@ -40,7 +40,7 @@ export interface HTMLAnchorProps {
     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 FormMode {
+export declare enum FormOnColor {
     onwhite = "onwhite",
     ongrey = "ongrey",
     onblueberry = "onblueberry",

package/constants.js

@@ -4,7 +4,7 @@ var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.o
 export {
   u as AVERAGE_CHARACTER_WIDTH_PX,
   t as AnalyticsId,
-  p as FormMode,
+  p as FormOnColor,
   a as FormSize,
   e as IconSize,
   g as KeyboardEventKey,

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  PopOver = 11000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\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 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  Chip = 'chip',\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  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\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  Toggle = 'toggle',\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  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\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,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,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,OAAO,QACPA,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,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,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,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA3DHA,IAAAA,KAAA,CAAA,CAAA,GA8DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,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  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\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  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\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  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\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  Toggle = 'toggle',\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  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormOnColor","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,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,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,OAAO,QACPA,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,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,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,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA3DHA,IAAAA,KAAA,CAAA,CAAA,GA8DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}

package/docs/FormExample/FormExample.d.ts

@@ -9,7 +9,8 @@ export declare enum FormExampleVariants {
     radiobutton = "radiobutton",
     textarea = "textarea",
     input = "input",
-    select = "select"
+    select = "select",
+    withoutformgroup = "withoutformgroup"
 }
 export declare const FormExample: (props: FormExampleProps) => JSX.Element;
 export default FormExample;

package/index.js

@@ -3,46 +3,46 @@ import { Breakpoint as s, useBreakpoint as u } from "./hooks/useBreakpoint.js";
 import { useFocusToggle as p } from "./hooks/useFocusToggle.js";
 import { useFocusTrap as f } from "./hooks/useFocusTrap.js";
 import { useHover as n } from "./hooks/useHover.js";
-import { useIntersectionObserver as d } from "./hooks/useIntersectionObserver.js";
+import { useIntersectionObserver as v } from "./hooks/useIntersectionObserver.js";
 import { useIsVisible as E } from "./hooks/useIsVisible.js";
 import { useLayoutEvent as c } from "./hooks/useLayoutEvent.js";
-import { usePrevious as A } from "./hooks/usePrevious.js";
-import { useSticky as l } from "./hooks/useSticky.js";
+import { usePrevious as y } from "./hooks/usePrevious.js";
+import { useSticky as I } from "./hooks/useSticky.js";
 import { useSize as g } from "./hooks/useSize.js";
 import { useResizeObserver as F } from "./hooks/useResizeObserver.js";
-import { useToggle as S } from "./hooks/useToggle.js";
-import { useKeyboardEvent as H } from "./hooks/useKeyboardEvent.js";
-import { useOutsideEvent as O } from "./hooks/useOutsideEvent.js";
-import { useUuid as B } from "./hooks/useUuid.js";
-import { isMobileUA as M } from "./utils/mobile.js";
-import { u as U } from "./uuid.js";
-import { AVERAGE_CHARACTER_WIDTH_PX as h, AnalyticsId as D, FormMode as G, FormSize as L, IconSize as W, KeyboardEventKey as X, ZIndex as Z } from "./constants.js";
+import { useToggle as R } from "./hooks/useToggle.js";
+import { useKeyboardEvent as k } from "./hooks/useKeyboardEvent.js";
+import { useOutsideEvent as H } from "./hooks/useOutsideEvent.js";
+import { useUuid as _ } from "./hooks/useUuid.js";
+import { isMobileUA as P } from "./utils/mobile.js";
+import { u as V } from "./uuid.js";
+import { AVERAGE_CHARACTER_WIDTH_PX as D, AnalyticsId as G, FormOnColor as L, FormSize as M, IconSize as W, KeyboardEventKey as X, ZIndex as Z } from "./constants.js";
 export {
-  h as AVERAGE_CHARACTER_WIDTH_PX,
-  D as AnalyticsId,
+  D as AVERAGE_CHARACTER_WIDTH_PX,
+  G as AnalyticsId,
   s as Breakpoint,
-  G as FormMode,
-  L as FormSize,
+  L as FormOnColor,
+  M as FormSize,
   W as IconSize,
   X as KeyboardEventKey,
   Z as ZIndex,
-  M as isMobileUA,
+  P as isMobileUA,
   r as theme,
   u as useBreakpoint,
   p as useFocusToggle,
   f as useFocusTrap,
   n as useHover,
-  d as useIntersectionObserver,
+  v as useIntersectionObserver,
   E as useIsVisible,
-  H as useKeyboardEvent,
+  k as useKeyboardEvent,
   c as useLayoutEvent,
-  O as useOutsideEvent,
-  A as usePrevious,
+  H as useOutsideEvent,
+  y as usePrevious,
   F as useResizeObserver,
   g as useSize,
-  l as useSticky,
-  S as useToggle,
-  B as useUuid,
-  U as uuid
+  I as useSticky,
+  R as useToggle,
+  _ as useUuid,
+  V as uuid
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -7,18 +7,18 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "8.6.0-beta.1",
+  "version": "9.0.0-beta.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {
-    "framer-motion": "^11.5.4"
+    "framer-motion": "^11.11.8"
   },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "sideEffects": false
 }

package/utils/component.d.ts

@@ -1,3 +1,4 @@
 import React, { PropsWithChildren } from 'react';
 export declare const isComponent: <T>(element: {} | null | undefined, type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>) => element is React.ReactElement<T>;
 export declare const isComponentWithChildren: <T>(element: {} | null | undefined) => element is React.ReactElement<PropsWithChildren<T>>;
+export declare function isComponentWithDisplayName<T>(element: React.ReactNode, displayName: string): element is React.ReactElement<T>;

package/utils/component.js

@@ -1,7 +1,11 @@
 import i from "react";
-const e = (t, o) => i.isValidElement(t) && t.type === o, s = (t) => i.isValidElement(t);
+const p = (t, n) => i.isValidElement(t) && t.type === n, s = (t) => i.isValidElement(t);
+function a(t, n) {
+  return !i.isValidElement(t) || typeof t.type == "string" ? !1 : t.type.displayName === n;
+}
 export {
-  e as isComponent,
-  s as isComponentWithChildren
+  p as isComponent,
+  s as isComponentWithChildren,
+  a as isComponentWithDisplayName
 };
 //# sourceMappingURL=component.js.map

package/utils/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n"],"names":["isComponent","element","type","React","isComponentWithChildren"],"mappings":";AAEa,MAAAA,IAAc,CACzBC,GACAC,MACqCC,EAAM,eAAkBF,CAAO,KAAMA,EAA+B,SAASC,GAEvGE,IAA0B,CAAIH,MACzCE,EAAM,eAAqCF,CAAO;"}
+{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n\nexport function isComponentWithDisplayName<T>(element: React.ReactNode, displayName: string): element is React.ReactElement<T> {\n  if (!React.isValidElement(element) || typeof element.type === 'string') {\n    return false;\n  }\n\n  const componentType = element.type as React.ComponentType<T> & { displayName?: string };\n\n  return componentType.displayName === displayName;\n}\n"],"names":["isComponent","element","type","React","isComponentWithChildren","isComponentWithDisplayName","displayName"],"mappings":";AAEa,MAAAA,IAAc,CACzBC,GACAC,MACqCC,EAAM,eAAkBF,CAAO,KAAMA,EAA+B,SAASC,GAEvGE,IAA0B,CAAIH,MACzCE,EAAM,eAAqCF,CAAO;AAEpC,SAAAI,EAA8BJ,GAA0BK,GAAuD;AACzH,SAAA,CAACH,EAAM,eAAeF,CAAO,KAAK,OAAOA,EAAQ,QAAS,WACrD,KAGaA,EAAQ,KAET,gBAAgBK;AACvC;"}