@telia/teddy 0.0.3 → 0.0.5

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Heading
+ * -----------------------------------------------------------------------------------------------*/
+declare const headingVariants: readonly ["title-100", "title-200", "title-300", "title-400", "title-500", "title-600", "title-700", "subsection-100", "display-25", "display-50", "display-100", "display-200"];
+type AsChildProps = {
+    /**
+     * If `true`, the children element will be cloned and used instead of the heading element.
+     */
+    asChild: true;
+    as?: never;
+} & React.ComponentPropsWithoutRef<'h1'>;
+type H1Props = {
+    as: 'h1';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h1'>;
+type H2Props = {
+    as: 'h2';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h2'>;
+type H3Props = {
+    as: 'h3';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h3'>;
+type H4Props = {
+    as: 'h4';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h4'>;
+type H5Props = {
+    as: 'h5';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h5'>;
+type H6Props = {
+    as: 'h6';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'h6'>;
+type HeadingVariant = (typeof headingVariants)[number];
+type RootProps = {
+    /**
+     * EnableHyphenation
+     * The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
+     */
+    enableHyphenation?: boolean;
+    variant: HeadingVariant;
+} & (AsChildProps | H1Props | H2Props | H3Props | H4Props | H5Props | H6Props);
+declare const Heading: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLHeadingElement>> & {
+    headingVariants: readonly ["title-100", "title-200", "title-300", "title-400", "title-500", "title-600", "title-700", "subsection-100", "display-25", "display-50", "display-100", "display-200"];
+};
+type HeadingProps = {
+    Root: RootProps;
+    headingVariants: typeof headingVariants;
+    AsChildProps: AsChildProps;
+    H1Props: H1Props;
+    H2Props: H2Props;
+    H3Props: H3Props;
+    H4Props: H4Props;
+    H5Props: H5Props;
+    H6Props: H6Props;
+};
+export { Heading };
+export type { HeadingProps };

package/dist/components/heading/heading.js

@@ -0,0 +1,53 @@
+import '../../assets/heading.css';
+import { jsx as n } from "react/jsx-runtime";
+import { $ as q } from "../../index-DpfSJps6.js";
+import { c as o } from "../../clsx-DB4S2d7J.js";
+import p from "react";
+const d = {
+  "teddy-heading": "_teddy-heading_1qjqc_2",
+  "teddy-heading--hyphens": "_teddy-heading--hyphens_1qjqc_9",
+  "teddy-heading--subsection-100": "_teddy-heading--subsection-100_1qjqc_12",
+  "teddy-heading--title-100": "_teddy-heading--title-100_1qjqc_18",
+  "teddy-heading--title-200": "_teddy-heading--title-200_1qjqc_24",
+  "teddy-heading--title-300": "_teddy-heading--title-300_1qjqc_30",
+  "teddy-heading--title-400": "_teddy-heading--title-400_1qjqc_36",
+  "teddy-heading--title-500": "_teddy-heading--title-500_1qjqc_42",
+  "teddy-heading--title-600": "_teddy-heading--title-600_1qjqc_48",
+  "teddy-heading--title-700": "_teddy-heading--title-700_1qjqc_54",
+  "teddy-heading--display-25": "_teddy-heading--display-25_1qjqc_60",
+  "teddy-heading--display-50": "_teddy-heading--display-50_1qjqc_66",
+  "teddy-heading--display-100": "_teddy-heading--display-100_1qjqc_72",
+  "teddy-heading--display-200": "_teddy-heading--display-200_1qjqc_78"
+}, e = "teddy-heading", j = [
+  "title-100",
+  "title-200",
+  "title-300",
+  "title-400",
+  "title-500",
+  "title-600",
+  "title-700",
+  "subsection-100",
+  "display-25",
+  "display-50",
+  "display-100",
+  "display-200"
+], y = p.forwardRef(
+  ({ className: s, children: t, variant: i, asChild: _, enableHyphenation: l, as: a, ...h }, c) => {
+    const g = o(
+      d[`${e}`],
+      {
+        [d[`${e}--${i}`]]: i,
+        [d[`${e}--hyphens`]]: l
+      },
+      s
+    );
+    return /* @__PURE__ */ n(q, { ...h, ref: c, className: g, children: _ ? t : a ? /* @__PURE__ */ n(a, { children: t }) : null });
+  }
+);
+y.displayName = "Heading";
+const u = Object.assign(y, {
+  headingVariants: j
+});
+export {
+  u as Heading
+};

package/dist/components/heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading';
+export type { HeadingProps } from './heading';

package/dist/components/heading/index.js

@@ -0,0 +1,4 @@
+import { Heading as r } from "./heading.js";
+export {
+  r as Heading
+};

package/dist/components/helper-text/helper-text.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type HelperTextProps = React.ComponentPropsWithoutRef<'span'>;
 declare const HelperText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { HelperText };

package/dist/components/helper-text/helper-text.js

@@ -1,20 +1,20 @@
-import "../../assets/helper-text.css";
+import '../../assets/helper-text.css';
 import { jsx as l } from "react/jsx-runtime";
-import { c as o } from "../../clsx-DB4S2d7J.js";
-import a from "react";
+import { c as a } from "../../clsx-DB4S2d7J.js";
+import o from "react";
 const p = {
   "teddy-helper-text": "_teddy-helper-text_6xdzb_1",
   "teddy-helper-text--disabled": "_teddy-helper-text--disabled_6xdzb_9"
-}, x = "teddy-helper-text", m = a.forwardRef(
+}, x = "teddy-helper-text", c = o.forwardRef(
   ({ className: e, children: t, ...r }, s) => {
-    const d = o(
+    const d = a(
       [p[x]],
       e
     );
     return /* @__PURE__ */ l("span", { ...r, ref: s, className: d, children: t });
   }
 );
-m.displayName = "HelperText";
+c.displayName = "HelperText";
 export {
-  m as HelperText
+  c as HelperText
 };

package/dist/components/icon/icon.d.ts

@@ -1,9 +1,20 @@
-/// <reference types="react" />
-import { type IconName } from '../../icons/name';
+import { IconName } from '../../icons/name';
+
 export { IconName };
 type Size = 'font' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconProps = React.SVGProps<SVGSVGElement> & {
     name: IconName;
+    /**
+     * Size of the icon
+     * @default 'font'
+     * @property font => 1em
+     * @property xxs => 12px (0.75rem)
+     * @property xs => 16px (1rem)
+     * @property sm => 20px (1.25rem)
+     * @property md => 24px (1.5rem)
+     * @property lg => 32px (2rem)
+     * @property xl => 48px (3rem)
+     */
     size?: Size;
     children?: React.ReactNode;
 };

package/dist/components/icon/icon.js

@@ -1,26 +1,26 @@
-import "../../assets/icon.css";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import r from "../../assets/f2a2f391a886d395.svg";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-const d = {
-  "teddy-icon": "_teddy-icon_mqgol_1",
-  "teddy-icon--font": "_teddy-icon--font_mqgol_6",
-  "teddy-icon--xxs": "_teddy-icon--xxs_mqgol_10",
-  "teddy-icon--xs": "_teddy-icon--xs_mqgol_14",
-  "teddy-icon--sm": "_teddy-icon--sm_mqgol_18",
-  "teddy-icon--md": "_teddy-icon--md_mqgol_22",
-  "teddy-icon--lg": "_teddy-icon--lg_mqgol_26",
-  "teddy-icon--xl": "_teddy-icon--xl_mqgol_30",
-  "teddy-icon-with-children": "_teddy-icon-with-children_mqgol_35"
-}, t = "teddy-icon", y = `${t}-with-children`;
-function g({ name: n, size: c = "font", className: i, children: e, ...s }) {
-  if (e)
-    return /* @__PURE__ */ m("span", { className: _([d[y]]), children: [
-      /* @__PURE__ */ o(g, { name: n, size: c, className: i, ...s }),
-      e
+import '../../assets/icon.css';
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import f from "../../assets/5161b177f001ea1a.svg";
+import { c as s } from "../../clsx-DB4S2d7J.js";
+const t = {
+  "teddy-icon": "_teddy-icon_1rwgf_2",
+  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
+  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
+  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
+  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
+  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
+  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+}, o = "teddy-icon", l = `${o}-with-children`;
+function g({ name: n, size: c = "font", className: e, children: i, ...r }) {
+  if (i)
+    return /* @__PURE__ */ y("span", { className: s([t[l]]), children: [
+      /* @__PURE__ */ d(g, { name: n, size: c, className: e, ...r }),
+      i
     ] });
-  const l = _([d[t], d[`${t}--${c}`]], i);
-  return /* @__PURE__ */ o("svg", { ...s, className: l, children: /* @__PURE__ */ o("use", { href: `${r}#${n}` }) });
+  const _ = s([t[o], t[`${o}--${c}`]], e);
+  return /* @__PURE__ */ d("svg", { ...r, className: _, children: /* @__PURE__ */ d("use", { href: `${f}#${n}` }) });
 }
 export {
   g as Icon

package/dist/components/icon/index.d.ts

@@ -1,4 +1,5 @@
-import iconsHref from '../../icons/sprite.svg';
+import { default as iconsHref } from '../../icons/sprite.svg';
+
 export { Icon } from './icon';
 export type { IconName, IconProps } from './icon';
 export { iconsHref };

package/dist/components/icon/index.js

@@ -1,4 +1,4 @@
-import { default as e } from "../../assets/f2a2f391a886d395.svg";
+import { default as e } from "../../assets/5161b177f001ea1a.svg";
 import { Icon as t } from "./icon.js";
 export {
   t as Icon,

package/dist/components/index.d.ts

@@ -1,3 +1,10 @@
+export * from './card';
+export * from './grid';
+export * from './navigation-menu';
+export * from './switch';
+export * from './accordion';
+export * from './link';
+export * from './badge';
 export * from './button';
 export * from './field-error-text';
 export * from './helper-text';
@@ -7,3 +14,6 @@ export * from './label';
 export * from './spinner';
 export * from './text';
 export * from './text-field';
+export * from './heading';
+export * from './visually-hidden';
+export * from './text-spacing';

package/dist/components/index.js

@@ -1,23 +1,40 @@
-import { Button as e } from "./button/button.js";
-import { FieldErrorText as p } from "./field-error-text/field-error-text.js";
-import { HelperText as f } from "./helper-text/helper-text.js";
-import { default as n } from "../assets/f2a2f391a886d395.svg";
-import { Icon as u } from "./icon/icon.js";
-import { Input as T, InputGroup as a } from "./input/input.js";
-import { Label as I } from "./label/label.js";
-import { Spinner as s } from "./spinner/spinner.js";
-import { Text as H } from "./text/text.js";
-import { TextField as B } from "./text-field/text-field.js";
+import { A as e, B as t, C as p, S as x } from "../badge-CbHdlkcM.js";
+import { Grid as m } from "./grid/grid.js";
+import { N as i } from "../navigation-menu-BgN7IKev.js";
+import { Link as d } from "./link/link.js";
+import { Button as l } from "./button/button.js";
+import { FieldErrorText as c } from "./field-error-text/field-error-text.js";
+import { HelperText as g } from "./helper-text/helper-text.js";
+import { default as S } from "../assets/5161b177f001ea1a.svg";
+import { Icon as I } from "./icon/icon.js";
+import { Input as C, InputGroup as F } from "./input/input.js";
+import { Label as L } from "./label/label.js";
+import { Spinner as b } from "./spinner/spinner.js";
+import { Text as k } from "./text/text.js";
+import { TextField as w } from "./text-field/text-field.js";
+import { Heading as E } from "./heading/heading.js";
+import { VisuallyHidden as V } from "./visually-hidden/visually-hidden.js";
+import { TextSpacing as q } from "./text-spacing/text-spacing.js";
 export {
-  e as Button,
-  p as FieldErrorText,
-  f as HelperText,
-  u as Icon,
-  T as Input,
-  a as InputGroup,
-  I as Label,
-  s as Spinner,
-  H as Text,
-  B as TextField,
-  n as iconsHref
+  e as Accordion,
+  t as Badge,
+  l as Button,
+  p as Card,
+  c as FieldErrorText,
+  m as Grid,
+  E as Heading,
+  g as HelperText,
+  I as Icon,
+  C as Input,
+  F as InputGroup,
+  L as Label,
+  d as Link,
+  i as NavigationMenu,
+  b as Spinner,
+  x as Switch,
+  k as Text,
+  w as TextField,
+  q as TextSpacing,
+  V as VisuallyHidden,
+  S as iconsHref
 };

package/dist/components/input/input.d.ts

@@ -1,28 +1,22 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type InputGroupRootProps = React.ComponentPropsWithoutRef<'div'> & {};
 type ValidationState = 'valid' | 'invalid';
-type InputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> & {
-    /**
-     * Whether the input should display its "valid" or "invalid" visual styling.
-     */
+type Input = React.ComponentPropsWithoutRef<'input'>;
+type InputProps = Omit<Input, 'children'> & {
+    /** Whether the input should display its "valid" or "invalid" visual styling. */
     validationState?: ValidationState;
-    /**
-     * Whether to show a loading indicator.
-     */
+    /** Whether to show a loading indicator. */
     isLoading?: boolean;
+    onValueChange?: (value: string) => void;
 };
-/**
- *  The input
- */
+/** The input element */
 declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
-    /**
-     * Whether the input should display its "valid" or "invalid" visual styling.
-     */
+    /** Whether the input should display its "valid" or "invalid" visual styling. */
     validationState?: ValidationState | undefined;
-    /**
-     * Whether to show a loading indicator.
-     */
+    /** Whether to show a loading indicator. */
     isLoading?: boolean | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
     isLoading?: boolean;
@@ -30,14 +24,11 @@ type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
 };
 declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
-        /**
-         * Whether the input should display its "valid" or "invalid" visual styling.
-         */
+        /** Whether the input should display its "valid" or "invalid" visual styling. */
         validationState?: ValidationState | undefined;
-        /**
-         * Whether to show a loading indicator.
-         */
+        /** Whether to show a loading indicator. */
         isLoading?: boolean | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
     } & React.RefAttributes<HTMLInputElement>>;
     Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
         isLoading?: boolean | undefined;

package/dist/components/input/input.js

@@ -1,82 +1,104 @@
-import "../../assets/input.css";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { c as d } from "../../clsx-DB4S2d7J.js";
-import _ from "react";
-import "../../assets/f2a2f391a886d395.svg";
-import { Icon as y } from "../icon/icon.js";
-import { Spinner as x } from "../spinner/spinner.js";
-const N = "_fadeInAnimation_1bk8x_1", v = "_scaleInAnimation_1bk8x_1", s = {
-  "teddy-input": "_teddy-input_1bk8x_17",
-  "teddy-input__frame": "_teddy-input__frame_1bk8x_24",
-  "teddy-input__input": "_teddy-input__input_1bk8x_31",
-  "teddy-input__input--valid": "_teddy-input__input--valid_1bk8x_62",
-  "teddy-input__input--invalid": "_teddy-input__input--invalid_1bk8x_62",
-  "teddy-input__indicator": "_teddy-input__indicator_1bk8x_68",
-  "teddy-input__input--error": "_teddy-input__input--error_1bk8x_71",
-  fadeInAnimation: N,
-  scaleInAnimation: v
-}, a = "teddy-input";
-function b(n) {
-  const e = n == null ? void 0 : n.target;
+import '../../assets/input.css';
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { c } from "../../clsx-DB4S2d7J.js";
+import s from "react";
+import "../../assets/5161b177f001ea1a.svg";
+import { Icon as C } from "../icon/icon.js";
+import { Spinner as h } from "../spinner/spinner.js";
+const x = "_fadeInAnimation_1o9uu_1", A = "_scaleInAnimation_1o9uu_1", a = {
+  "teddy-input": "_teddy-input_1o9uu_17",
+  "teddy-input__frame": "_teddy-input__frame_1o9uu_24",
+  "teddy-input__input": "_teddy-input__input_1o9uu_31",
+  "teddy-input__input--valid": "_teddy-input__input--valid_1o9uu_66",
+  "teddy-input__input--invalid": "_teddy-input__input--invalid_1o9uu_66",
+  "teddy-input__indicator": "_teddy-input__indicator_1o9uu_72",
+  "teddy-input__input--error": "_teddy-input__input--error_1o9uu_75",
+  fadeInAnimation: x,
+  scaleInAnimation: A
+}, _ = "teddy-input";
+function G(i) {
+  const e = i == null ? void 0 : i.target;
   if (e.closest("input, button, a"))
     return;
-  const t = [...n.currentTarget.getElementsByTagName("input")].find((p) => p);
+  const t = [...i.currentTarget.getElementsByTagName("input")].find((d) => d);
   if (!t)
     return;
-  const u = (t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
+  const r = (t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
   requestAnimationFrame(() => {
     try {
-      t.setSelectionRange(u, u);
+      t.setSelectionRange(r, r);
     } finally {
       t.focus();
     }
   });
 }
-const f = _.createContext(void 0), c = _.forwardRef(
-  ({ className: n, children: e, ...t }, i) => {
-    const r = d([s[`${a}`]], n);
-    return /* @__PURE__ */ m("div", { ...t, onPointerDown: b, ref: i, className: r, children: [
-      /* @__PURE__ */ o(f.Provider, { value: !0, children: e }),
-      /* @__PURE__ */ o("div", { className: s[`${a}__frame`] })
+const g = s.createContext(void 0), p = s.forwardRef(
+  ({ className: i, children: e, ...t }, n) => {
+    const u = c([a[`${_}`]], i);
+    return /* @__PURE__ */ y("div", { ...t, onPointerDown: G, ref: n, className: u, children: [
+      /* @__PURE__ */ o(g.Provider, { value: !0, children: e }),
+      /* @__PURE__ */ o("div", { className: a[`${_}__frame`] })
     ] });
   }
 );
-c.displayName = "InputGroup";
-const I = _.forwardRef(
-  ({ className: n, isLoading: e, validationState: t, ...i }, r) => {
-    const u = _.useContext(f), p = d(
+p.displayName = "InputGroup";
+const v = s.forwardRef(
+  ({ className: i, isLoading: e, validationState: t, ...n }, u) => {
+    const r = s.useContext(g), d = c(
       [
-        s[`${a}__input`],
+        a[`${_}__input`],
         {
-          [s[`${a}__input--valid`]]: t === "valid",
-          [s[`${a}__input--error`]]: t === "invalid"
+          [a[`${_}__input--valid`]]: t === "valid",
+          [a[`${_}__input--error`]]: t === "invalid"
         }
       ],
-      n
-    );
-    return u === !0 ? /* @__PURE__ */ o("input", { ...i, className: p, ref: r }) : /* @__PURE__ */ m(c, { children: [
-      /* @__PURE__ */ o("input", { ...i, className: p, ref: r }),
+      i
+    ), N = r === !0;
+    function m(f) {
+      var I;
+      (I = n.onValueChange) == null || I.call(n, f.target.value), n.onChange && n.onChange(f);
+    }
+    return N ? /* @__PURE__ */ o(
+      "input",
+      {
+        "aria-invalid": t === "invalid",
+        ...n,
+        onChange: m,
+        className: d,
+        ref: u
+      }
+    ) : /* @__PURE__ */ y(p, { children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          "aria-invalid": t === "invalid",
+          ...n,
+          onChange: m,
+          className: d,
+          ref: u
+        }
+      ),
       /* @__PURE__ */ o(l, { isValid: t === "valid", isLoading: e })
     ] });
   }
 );
-I.displayName = "Input";
-const l = _.forwardRef(
-  ({ className: n, isLoading: e, isValid: t, ...i }, r) => {
+v.displayName = "Input";
+const l = s.forwardRef(
+  ({ className: i, isLoading: e, isValid: t, ...n }, u) => {
     if (!t && !e)
       return null;
     if (!t && e)
-      return /* @__PURE__ */ o(x, { className: n, size: "xs", ...i, ref: r });
-    const u = d([s[`${a}__indicator`]], n);
-    return /* @__PURE__ */ o(y, { ...i, size: "md", name: "check-circle-filled", className: u, ref: r });
+      return /* @__PURE__ */ o(h, { className: i, size: "xs", ...n, ref: u });
+    const r = c([a[`${_}__indicator`]], i);
+    return /* @__PURE__ */ o(C, { ...n, size: "md", name: "check-circle-filled", className: r, ref: u });
   }
 );
 l.displayName = "InputIndicator";
-const O = Object.assign(c, {
-  Input: I,
+const T = Object.assign(p, {
+  Input: v,
   Indicator: l
 });
 export {
-  I as Input,
-  O as InputGroup
+  v as Input,
+  T as InputGroup
 };

package/dist/components/label/label.d.ts

@@ -1,9 +1,11 @@
+import { default as React } from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import React from 'react';
 export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
     disabled?: boolean;
+    isRequired?: boolean;
 };
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
     disabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
 } & React.RefAttributes<HTMLLabelElement>>;
 export { Label };