@ndla/primitives 0.0.1

package/lib/FormControl.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormControlProps = exports.useFormControlContext = exports.useFormControl = exports.FormControl = void 0;
+var _react = require("react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _util = require("@ndla/util");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const StyledFormControl = (0, _jsx2.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] = (0, _react.useState)(false);
+  const [hasHelpText, setHasHelpText] = (0, _react.useState)(false);
+  const getHelpTextProps = (0, _react.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: (0, _util.composeRefs)(forwardedRef, node => {
+        if (!node) return;
+        setHasHelpText(true);
+      })
+    };
+  }, [helpTextId]);
+  const getLabelProps = (0, _react.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 = (0, _react.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: (0, _util.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__*/(0, _react.createContext)(undefined);
+
+/**
+ * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
+ */
+const FormControl = _ref2 => {
+  let {
+    children,
+    id,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    ...rest
+  } = _ref2;
+  const context = useFormControlProvider({
+    id,
+    isDisabled,
+    isInvalid,
+    isRequired
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFormControl, {
+      ...rest,
+      children: children
+    })
+  });
+};
+exports.FormControl = FormControl;
+const useFormControlContext = () => {
+  const context = (0, _react.useContext)(FormControlContext);
+  return context;
+};
+exports.useFormControlContext = useFormControlContext;
+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
+  };
+};
+exports.useFormControlProps = useFormControlProps;
+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
+  };
+};
+exports.useFormControl = useFormControl;

package/lib/FramedContent.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+import { RecipeVariantProps } from "@ndla/styled-system/types";
+declare const framedContentRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    colorTheme: {
+        neutral: {
+            backgroundColor: "surface.default";
+            borderColor: "stroke.subtle";
+            boxShadowColor: "stroke.subtle";
+        };
+        brand1: {
+            backgroundColor: "surface.brand.1.subtle";
+            borderColor: "surface.brand.1.strong";
+            boxShadowColor: "surface.brand.1.strong";
+        };
+        brand2: {
+            backgroundColor: "surface.brand.2.subtle";
+            borderColor: "surface.brand.2.strong";
+            boxShadowColor: "surface.brand.2.strong";
+        };
+    };
+}>;
+export type FramedContentVariantProps = RecipeVariantProps<typeof framedContentRecipe>;
+export type FramedContentProps = ComponentPropsWithoutRef<"div"> & FramedContentVariantProps;
+export declare const FramedContent: ({ className, colorTheme, ...rest }: FramedContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/FramedContent.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FramedContent = void 0;
+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.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const framedContentRecipe = (0, _css.cva)({
+  base: {
+    padding: "medium",
+    border: "1px solid",
+    borderRadius: "small",
+    boxShadow: "4px 4px 0px 0px var(--shadow-color)"
+  },
+  variants: {
+    colorTheme: {
+      neutral: {
+        backgroundColor: "surface.default",
+        borderColor: "stroke.subtle",
+        boxShadowColor: "stroke.subtle"
+      },
+      brand1: {
+        backgroundColor: "surface.brand.1.subtle",
+        borderColor: "surface.brand.1.strong",
+        boxShadowColor: "surface.brand.1.strong"
+      },
+      brand2: {
+        backgroundColor: "surface.brand.2.subtle",
+        borderColor: "surface.brand.2.strong",
+        boxShadowColor: "surface.brand.2.strong"
+      }
+    }
+  },
+  defaultVariants: {
+    colorTheme: "neutral"
+  }
+});
+const FramedContent = _ref => {
+  let {
+    className,
+    colorTheme,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
+    className: (0, _css.cx)(framedContentRecipe({
+      colorTheme
+    }), className),
+    ...rest
+  });
+};
+exports.FramedContent = FramedContent;

package/lib/Icon.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 } from "react";
+import { type RecipeVariantProps } from "@ndla/styled-system/css";
+export declare const iconRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    size: {
+        xsmall: {
+            width: "xsmall";
+            height: "xsmall";
+        };
+        small: {
+            width: "small";
+            height: "small";
+        };
+        medium: {
+            width: "medium";
+            height: "medium";
+        };
+        large: {
+            width: "large";
+            height: "large";
+        };
+    };
+}>;
+export type IconVariantProps = RecipeVariantProps<typeof iconRecipe>;
+interface BaseIconProps extends ComponentPropsWithRef<"svg"> {
+    title?: string;
+    description?: string;
+}
+export type IconProps = BaseIconProps & IconVariantProps;
+export declare const Icon: ({ children, size, role, title, description, width, height, className, "aria-hidden": ariaHidden, ...props }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/Icon.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconRecipe = exports.Icon = void 0;
+var _css = require("@ndla/styled-system/css");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const iconRecipe = exports.iconRecipe = (0, _css.cva)({
+  base: {
+    display: "inline-block",
+    fill: "currentcolor",
+    verticalAlign: "middle",
+    lineHeight: "1em",
+    flexShrink: "0"
+  },
+  defaultVariants: {
+    size: "medium"
+  },
+  variants: {
+    size: {
+      xsmall: {
+        width: "xsmall",
+        height: "xsmall"
+      },
+      small: {
+        width: "small",
+        height: "small"
+      },
+      medium: {
+        width: "medium",
+        height: "medium"
+      },
+      large: {
+        width: "large",
+        height: "large"
+      }
+    }
+  }
+});
+// TODO: Move this component over to ndla/icons
+const Icon = _ref => {
+  let {
+    children,
+    size,
+    role,
+    title,
+    description,
+    width,
+    height,
+    className,
+    "aria-hidden": ariaHidden = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    "data-icon": "",
+    "aria-hidden": ariaHidden,
+    preserveAspectRatio: "xMidYMid meet",
+    ...props,
+    className: (0, _css.cx)(iconRecipe({
+      size
+    }), className),
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
+      children: description
+    }), children]
+  });
+};
+exports.Icon = Icon;

package/lib/Input.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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, HTMLAttributes } from "react";
+export declare const InputContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FormInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+interface TextAreaProps extends ComponentPropsWithRef<"textarea"> {
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const FormTextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/lib/Input.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = exports.InputContainer = exports.Input = exports.FormTextArea = exports.FormInput = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _util = require("@ndla/util");
+var _FormControl = require("./FormControl");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const InputContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const inputCss = _css.css.raw({
+  outline: "1px solid",
+  outlineColor: "stroke.subtle",
+  background: "background.default",
+  borderRadius: "xsmall",
+  minHeight: "xxlarge",
+  paddingBlock: "0",
+  paddingInline: "xsmall",
+  _ariaInvalid: {
+    outlineColor: "stroke.error",
+    _hover: {
+      outlineColor: "stroke.error"
+    },
+    _focusWithin: {
+      outlineColor: "stroke.error",
+      _hover: {
+        outlineColor: "stroke.error"
+      }
+    }
+  },
+  _hover: {
+    outlineColor: "stroke.hover"
+  },
+  _focusWithin: {
+    outlineWidth: "2px",
+    outlineOffset: "-1px",
+    outlineColor: "stroke.default",
+    _hover: {
+      outlineColor: "stroke.default"
+    }
+  },
+  "&:disabled, &:has(:disabled)": {
+    outlineColor: "stroke.subtle",
+    _hover: {
+      outlineColor: "stroke.subtle"
+    }
+  }
+});
+const StyledInputContainer = (0, _jsx2.styled)("div", {
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    "& svg": {
+      width: "medium",
+      height: "medium"
+    }
+  }
+});
+const InputContainer = exports.InputContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputContext.Provider, {
+    value: {},
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputContainer, {
+      className: (0, _css.cx)((0, _css.css)(inputCss), className),
+      ...rest,
+      ref: ref,
+      children: children
+    })
+  });
+});
+const baseInputCss = _css.css.raw({
+  width: "100%",
+  color: "text.default",
+  outline: "none",
+  background: "none",
+  border: "0",
+  padding: "xxsmall",
+  _disabled: {
+    cursor: "not-allowed"
+  },
+  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.
+  _autofill: {
+    transition: "background-color 600000s 0s, color 600000s 0s"
+  },
+  _focus: {
+    appearance: "none"
+  }
+});
+const baseTextAreaCss = _css.css.raw({
+  paddingInline: "xsmall",
+  paddingBlock: "xsmall",
+  resize: "none",
+  overflowY: "hidden"
+});
+const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref2;
+  const context = (0, _react.useContext)(InputContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.input, {
+    className: (0, _css.cx)((0, _css.css)(baseInputCss, context ? undefined : inputCss), className),
+    ref: ref,
+    ...props
+  });
+});
+const FormInput = exports.FormInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const field = (0, _FormControl.useFormControl)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
+    ...field,
+    ref: ref
+  });
+});
+const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref3;
+  const context = (0, _react.useContext)(InputContext);
+  const localRef = (0, _react.useRef)(null);
+
+  // Automatically resize a textarea based on its content
+  const resize = (0, _react.useCallback)(() => {
+    if (!localRef.current) return;
+    localRef.current.style.height = "0";
+    localRef.current.style.height = "".concat(localRef.current.scrollHeight + 3, "px");
+  }, []);
+  (0, _react.useEffect)(() => {
+    window.addEventListener("input", resize);
+    window.addEventListener("resize", resize);
+    resize();
+    return () => {
+      window.removeEventListener("input", resize);
+      window.removeEventListener("resize", resize);
+    };
+  }, [resize]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.textarea, {
+    className: (0, _css.cx)((0, _css.css)(baseInputCss, context ? undefined : inputCss, baseTextAreaCss), className),
+    ref: (0, _util.composeRefs)(ref, localRef),
+    ...props
+  });
+});
+const FormTextArea = exports.FormTextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const field = (0, _FormControl.useFormControl)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {
+    ...field,
+    ref: ref
+  });
+});

package/lib/Label.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 } from "react";
+import { TextProps } from "./Text";
+export type LegendProps = ComponentPropsWithRef<"legend"> & TextProps;
+export declare const Legend: import("react").ForwardRefExoticComponent<Omit<LegendProps, "ref"> & import("react").RefAttributes<HTMLLegendElement>>;
+export declare const FormLegend: import("react").ForwardRefExoticComponent<Omit<LegendProps, "ref"> & import("react").RefAttributes<HTMLLegendElement>>;
+export type LabelProps = ComponentPropsWithRef<"label"> & TextProps;
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const FormLabel: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const Fieldset: import("@ndla/styled-system/jsx").StyledComponent<"fieldset", {}>;

package/lib/Label.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Legend = exports.Label = exports.FormLegend = exports.FormLabel = exports.Fieldset = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _FormControl = require("./FormControl");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const StyledLegend = (0, _jsx2.styled)("legend", {
+  base: {
+    float: "none",
+    width: "inherit",
+    _disabled: {
+      color: "text.subtle"
+    }
+  }
+});
+const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    className,
+    srOnly,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLegend, {
+    className: (0, _css.cx)((0, _css.css)({
+      textStyle,
+      fontWeight,
+      srOnly
+    }), className),
+    ...rest,
+    ref: ref
+  });
+});
+const FormLegend = exports.FormLegend = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var _control$getLabelProp;
+  const control = (0, _FormControl.useFormControlContext)();
+  // Legend does not use htmlFor (for), so we remove it.
+  const {
+    id: _,
+    htmlFor: __,
+    ...fieldProps
+  } = (_control$getLabelProp = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp !== void 0 ? _control$getLabelProp : {
+    ref,
+    ...props
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Legend, {
+    ...props,
+    ...fieldProps,
+    ref: ref
+  });
+});
+const StyledLabel = (0, _jsx2.styled)("label", {
+  base: {
+    display: "inline-block",
+    _disabled: {
+      color: "text.subtle"
+    }
+  }
+});
+const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    className,
+    srOnly,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLabel, {
+    className: (0, _css.cx)((0, _css.css)({
+      textStyle,
+      fontWeight,
+      srOnly
+    }), className),
+    ...rest,
+    ref: ref
+  });
+});
+const FormLabel = exports.FormLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var _control$getLabelProp2;
+  const control = (0, _FormControl.useFormControlContext)();
+  const fieldProps = (_control$getLabelProp2 = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp2 !== void 0 ? _control$getLabelProp2 : {
+    ref,
+    ...props
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+    ...props,
+    ...fieldProps,
+    ref: ref
+  });
+});
+const Fieldset = exports.Fieldset = (0, _jsx2.styled)("fieldset", {
+  base: {
+    border: "none",
+    padding: "0",
+    margin: "0"
+  }
+});