@ndla/primitives 0.0.2 → 0.0.4

package/lib/Text.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Text = exports.Heading = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -14,49 +17,45 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const BaseText = props => {
-  const {
-    as: As = "p",
-    className,
+const StyledP = (0, _jsx2.styled)(_react2.ark.p);
+const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "body.medium",
     fontWeight,
     color,
-    textStyle = "body.medium",
     srOnly,
+    css: cssProp,
     ...rest
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(As, {
-    className: (0, _css.cx)((0, _css.css)({
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledP, {
+    css: _css.css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className),
+      srOnly
+    }, cssProp),
+    ref: ref,
     ...rest
   });
-};
-const Heading = props => {
-  const {
-    as = "h1",
+});
+const StyledH1 = (0, _jsx2.styled)(_react2.ark.h1);
+const Heading = exports.Heading = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
     textStyle = "heading.medium",
+    fontWeight,
+    color,
+    srOnly,
+    css: cssProp,
     ...rest
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseText, {
-    as: as,
-    textStyle: textStyle,
-    ...rest
-  });
-};
-exports.Heading = Heading;
-const Text = props => {
-  const {
-    as = "p",
-    textStyle = "body.medium",
-    ...rest
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseText, {
-    as: as,
-    textStyle: textStyle,
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledH1, {
+    css: _css.css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ref: ref,
     ...rest
   });
-};
-exports.Text = Text;
+});

package/lib/Toast.d.ts

@@ -6,13 +6,16 @@
  *
  */
 import { Toast } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export interface RootProps extends Toast.RootProps {
+export interface RootProps extends Toast.RootProps, JsxStyleProps {
 }
 export declare const ToastRoot: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponent<Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const InternalToastDescription: import("react").ForwardRefExoticComponent<Toast.DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastDescription: ({ textStyle, ...props }: Toast.DescriptionProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const InternalToastTitle: import("react").ForwardRefExoticComponent<Toast.TitleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastTitle: ({ textStyle, fontWeight, ...props }: Toast.TitleProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ToastDescription: ({ textStyle, children, ...props }: Toast.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToastTitle: ({ textStyle, fontWeight, children, ...props }: JsxStyleProps & Toast.TitleProps & TextProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Toast.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastTitle = exports.ToastRoot = exports.ToastDescription = exports.ToastCloseTrigger = exports.ToastActionTrigger = exports.InternalToastTitle = exports.InternalToastDescription = void 0;
+exports.ToastTitle = exports.ToastRoot = exports.ToastDescription = exports.ToastCloseTrigger = exports.ToastActionTrigger = void 0;
 var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -54,36 +54,44 @@ const {
 const ToastRoot = exports.ToastRoot = withProvider(_react.Toast.Root, "root");
 const ToastActionTrigger = exports.ToastActionTrigger = withContext(_react.Toast.ActionTrigger, "actionTrigger");
 const ToastCloseTrigger = exports.ToastCloseTrigger = withContext(_react.Toast.CloseTrigger, "closeTrigger");
-const InternalToastDescription = exports.InternalToastDescription = withContext(_react.Toast.Description, "description");
+const InternalToastDescription = withContext(_react.Toast.Description, "description");
 const ToastDescription = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastDescription, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      as: "div",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })
     })
   });
 };
 exports.ToastDescription = ToastDescription;
-const InternalToastTitle = exports.InternalToastTitle = withContext(_react.Toast.Title, "title");
+const InternalToastTitle = withContext(_react.Toast.Title, "title");
 const ToastTitle = _ref2 => {
   let {
     textStyle = "label.medium",
     fontWeight = "semibold",
+    children,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastTitle, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      as: "div",
+      asChild: true,
       fontWeight: fontWeight,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })
     })
   });
 };

package/lib/Tooltip.d.ts

@@ -7,10 +7,22 @@
  */
 import { Tooltip } from "@ark-ui/react";
 export type TooltipRootProps = Tooltip.RootProps;
-export declare const TooltipRoot: (props: Tooltip.RootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const TooltipArrow: import("react").ForwardRefExoticComponent<Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipArrowTip: import("react").ForwardRefExoticComponent<Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipContentStandalone: import("react").ForwardRefExoticComponent<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipContent: import("react").ForwardRefExoticComponent<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipPositioner: import("react").ForwardRefExoticComponent<Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TooltipRoot: (props: Tooltip.RootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipArrow: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipArrowTip: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipContentStandalone: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipPositioner: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/createStyleContext.d.ts

@@ -6,9 +6,11 @@
  *
  */
 import { type ElementType, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
+import { WithCss } from "@ndla/styled-system/types";
 type Props = Record<string, unknown>;
 type Recipe = {
     (props?: Props): Props;
+    raw: (props?: Props) => Props;
     splitVariantProps: (props: Props) => [Props, Props];
 };
 type Slot<R extends Recipe> = keyof ReturnType<R>;
@@ -16,12 +18,12 @@ type Slot<R extends Recipe> = keyof ReturnType<R>;
  * A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
  */
 export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
-    withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("@emotion/react/jsx-runtime").JSX.Element;
+    withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("react/jsx-runtime").JSX.Element;
     withProvider: <T, P_1 extends {
         className?: string | undefined;
-    }>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
+    } & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
     withContext: <T_1, P_2 extends {
         className?: string | undefined;
-    }>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
+    } & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
 };
 export {};

package/lib/createStyleContext.js

@@ -24,7 +24,7 @@ const createStyleContext = recipe => {
   const withRootProvider = Component => {
     const StyledComponent = props => {
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const slotStyles = recipe(variantProps);
+      const slotStyles = recipe.raw(variantProps);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
         value: slotStyles,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
@@ -36,27 +36,35 @@ const createStyleContext = recipe => {
   };
   const withProvider = (Component, slot) => {
     const StyledComponent = (0, _jsx2.styled)(Component);
-    return /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+    return /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+      let {
+        css: cssProp,
+        ...props
+      } = _ref;
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const slotStyles = recipe(variantProps);
+      const slotStyles = recipe.raw(variantProps);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
         value: slotStyles,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
           ...otherProps,
           ref: ref,
-          className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
+          css: _css.css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
         })
       });
     });
   };
   const withContext = (Component, slot) => {
     const StyledComponent = (0, _jsx2.styled)(Component);
-    return /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+    return /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+      let {
+        css: cssProp,
+        ...props
+      } = _ref2;
       const slotStyles = (0, _react.useContext)(StyleContext);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
         ...props,
         ref: ref,
-        className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
+        css: _css.css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
       });
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,13 +28,13 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/anatomy": "^3.3.1",
-    "@ark-ui/react": "^3.3.0",
+    "@ark-ui/anatomy": "^3.4.0",
+    "@ark-ui/react": "^3.4.0",
     "@ndla/styled-system": "workspace:^",
     "@ndla/util": "^4.0.4"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.1",
+    "@ndla/preset-panda": "^0.0.3",
     "@pandacss/dev": "^0.40.1"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "882ce593e9f688151f370555f8203ca467ac7e2b"
+  "gitHead": "8f0469f768ed618830dea90b36b92b0d4bb20639"
 }

package/es/FormControl.js

@@ -1,163 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { createContext, useCallback, useContext, useState } from "react";
-import { styled } from "@ndla/styled-system/jsx";
-import { composeRefs } from "@ndla/util";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFormControl = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
-});
-const useFormControlProvider = _ref => {
-  let {
-    id: idProp,
-    isRequired,
-    isDisabled,
-    isInvalid
-  } = _ref;
-  const id = "field-".concat(idProp);
-  const labelId = "".concat(id, "-label");
-  const errorTextId = "".concat(id, "-error-message");
-  const helpTextId = "".concat(id, "-helper");
-  const [hasErrorText, setHasErrorText] = useState(false);
-  const [hasHelpText, setHasHelpText] = useState(false);
-  const getHelpTextProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: helpTextId,
-      ...props,
-      ref: composeRefs(forwardedRef, node => {
-        if (!node) return;
-        setHasHelpText(true);
-      })
-    };
-  }, [helpTextId]);
-  const getLabelProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      ...props,
-      ref: forwardedRef,
-      "data-disabled": props !== null && props !== void 0 && props["data-disabled"] ? props["data-disabled"] : isDisabled,
-      "data-invalid": props !== null && props !== void 0 && props["data-invalid"] ? props["data-invalid"] : isInvalid,
-      id: props.id !== undefined ? props.id : labelId,
-      htmlFor: props.htmlFor !== undefined ? props.htmlFor : id
-    };
-  }, [id, isDisabled, isInvalid, labelId]);
-  const getErrorMessageProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: errorTextId,
-      ...props,
-      ref: composeRefs(forwardedRef, node => {
-        if (!node) return;
-        setHasErrorText(true);
-      }),
-      "aria-live": "polite"
-    };
-  }, [errorTextId]);
-  return {
-    isRequired: !!isRequired,
-    isDisabled: !!isDisabled,
-    isInvalid: !!isInvalid,
-    hasErrorText,
-    setHasErrorText,
-    hasHelpText,
-    setHasHelpText,
-    id,
-    labelId,
-    errorTextId,
-    helpTextId,
-    getHelpTextProps,
-    getErrorMessageProps,
-    getLabelProps
-  };
-};
-const FormControlContext = /*#__PURE__*/createContext(undefined);
-
-/**
- * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
- */
-export const FormControl = _ref2 => {
-  let {
-    children,
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref2;
-  const context = useFormControlProvider({
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired
-  });
-  return /*#__PURE__*/_jsx(FormControlContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/_jsx(StyledFormControl, {
-      ...rest,
-      children: children
-    })
-  });
-};
-export const useFormControlContext = () => {
-  const context = useContext(FormControlContext);
-  return context;
-};
-export const useFormControlProps = _ref3 => {
-  let {
-    id,
-    disabled,
-    required,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref3;
-  const field = useFormControlContext();
-  const labelIds = [];
-  if (field !== null && field !== void 0 && field.hasErrorText && field !== null && field !== void 0 && field.isInvalid) {
-    labelIds.push(field.errorTextId);
-  }
-  if (rest["aria-describedby"]) {
-    labelIds.push(rest["aria-describedby"]);
-  }
-  if (field !== null && field !== void 0 && field.hasHelpText) {
-    labelIds.push(field.helpTextId);
-  }
-  return {
-    ...rest,
-    "aria-describedby": labelIds.join(" ") || undefined,
-    id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-    isDisabled: disabled !== null && disabled !== void 0 ? disabled : field === null || field === void 0 ? void 0 : field.isDisabled,
-    isRequired: required !== null && required !== void 0 ? required : field === null || field === void 0 ? void 0 : field.isRequired,
-    isInvalid: isInvalid !== null && isInvalid !== void 0 ? isInvalid : field === null || field === void 0 ? void 0 : field.isInvalid
-  };
-};
-export const useFormControl = props => {
-  const {
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = useFormControlProps(props);
-  return {
-    ...rest,
-    disabled: isDisabled,
-    required: isRequired,
-    "aria-invalid": isInvalid ? true : undefined,
-    "aria-required": isRequired ? true : undefined
-  };
-};

package/lib/FormControl.d.ts

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { ComponentPropsWithRef, ElementType, HTMLAttributes, Ref, RefObject } from "react";
-type Merge<T, P> = P & Omit<T, keyof P>;
-type PropGetter<T extends ElementType = ElementType, P = {}> = (props?: Merge<ComponentPropsWithRef<T>, P>, ref?: Ref<any> | RefObject<any>) => Merge<ComponentPropsWithRef<T>, P>;
-export interface FormControlOptions {
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
-}
-export interface FormControlProps extends FormControlOptions {
-    id: string;
-}
-/**
- * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
- */
-export declare const FormControl: ({ children, id, isDisabled, isInvalid, isRequired, ...rest }: HTMLAttributes<HTMLDivElement> & FormControlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const useFormControlContext: () => {
-    isRequired: boolean;
-    isDisabled: boolean;
-    isInvalid: boolean;
-    hasErrorText: boolean;
-    setHasErrorText: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    hasHelpText: boolean;
-    setHasHelpText: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    id: string;
-    labelId: string;
-    errorTextId: string;
-    helpTextId: string;
-    getHelpTextProps: PropGetter<ElementType, {}>;
-    getErrorMessageProps: PropGetter<ElementType, {}>;
-    getLabelProps: PropGetter<ElementType, {}>;
-} | undefined;
-export interface UseFormControlProps extends FormControlOptions {
-    id?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    "aria-describedby"?: string;
-}
-export declare const useFormControlProps: <T extends UseFormControlProps>({ id, disabled, required, isDisabled, isInvalid, isRequired, ...rest }: T) => Omit<T, "id" | "disabled" | "required" | "isRequired" | "isDisabled" | "isInvalid"> & {
-    "aria-describedby": string | undefined;
-    id: string | undefined;
-    isDisabled: boolean | undefined;
-    isRequired: boolean | undefined;
-    isInvalid: boolean | undefined;
-};
-export declare const useFormControl: <T extends UseFormControlProps>(props: T) => Omit<Omit<T, "id" | "disabled" | "required" | "isRequired" | "isDisabled" | "isInvalid"> & {
-    "aria-describedby": string | undefined;
-    id: string | undefined;
-    isDisabled: boolean | undefined;
-    isRequired: boolean | undefined;
-    isInvalid: boolean | undefined;
-}, "isRequired" | "isDisabled" | "isInvalid"> & {
-    disabled: boolean | undefined;
-    required: boolean | undefined;
-    "aria-invalid": boolean | undefined;
-    "aria-required": boolean | undefined;
-};
-export {};