@coopdigital/react 0.44.0 → 0.45.0

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,98 @@
+import clsx from "clsx"
+import { type FieldsetHTMLAttributes, type JSX } from "react"
+
+import { StandardSizes } from "../../../src/types"
+import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
+import { Legend as BaseLegend, type LegendProps } from "../FieldMarkers/Legend"
+
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** Form elements inside the Fieldset.
+   *
+   * Usually this will be a combination of `Fieldset.Legend` and `Fieldset.Fields`. */
+  children: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Fieldset, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
+  /** **(Optional)** Specify the Fieldset error state. Use this to apply visual styling to the field control. */
+  error?: boolean
+  /** **(Optional)** Specify whether the Fieldset should show the left-hand error bar if it is in an error state. */
+  hideErrorBar?: boolean
+  /** **(Optional)** Specify the size of the Fieldset and all its descendents. */
+  size?: StandardSizes
+}
+const Root = ({
+  children,
+  className,
+  disabled,
+  error = false,
+  hideErrorBar = false,
+  size = "md",
+  ...props
+}: FieldsetProps): JSX.Element => {
+  const componentProps = {
+    "aria-disabled": disabled,
+    className: clsx("coop-fieldset", className),
+    "data-error": error || undefined,
+    //"data-variant": variant !== "default" ? variant : undefined,
+    "data-hide-error": hideErrorBar || undefined,
+    // "data-orientation": orientation !== "vertical" ? orientation : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    ...props,
+  }
+
+  return <fieldset {...componentProps}>{children}</fieldset>
+}
+
+interface FieldsetFieldsProps {
+  /** **(Optional)** Specify whether all descendent Fields should render inside a box. */
+  boxed?: boolean
+  /** **(Optional)** Form elements inside the Fieldset.Fields container. */
+  children?: string | React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the CheckboxGroup orientation. */
+  orientation?: "horizontal" | "vertical"
+}
+
+export const FieldsetFields = ({
+  boxed = false,
+  children,
+  className,
+  orientation = "vertical",
+  ...props
+}: FieldsetFieldsProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-fieldset-fields", className),
+    "data-boxed": boxed || undefined,
+    "data-orientation": orientation !== "vertical" ? orientation : undefined,
+    ...props,
+  }
+
+  return <div {...componentProps}>{children}</div>
+}
+
+FieldsetFields.displayName = "Fieldset.Fields"
+
+const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
+
+FieldsetLegend.displayName = "Fieldset.Legend"
+
+const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
+
+FieldsetHint.displayName = "Fieldset.Hint"
+
+const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
+
+FieldsetError.displayName = "Fieldset.Error"
+
+export const Fieldset = Object.assign(Root, {
+  Error: FieldsetError,
+  Fields: FieldsetFields,
+  Hint: FieldsetHint,
+  Legend: FieldsetLegend,
+})
+
+export default Fieldset

package/src/components/Fieldset/index.ts

@@ -0,0 +1,5 @@
+import Fieldset from "./Fieldset"
+
+export default Fieldset
+export { Fieldset }
+export * from "./Fieldset"

package/src/components/RadioButton/RadioButton.tsx

@@ -1,11 +1,6 @@
 import clsx from "clsx"
 import { type InputHTMLAttributes, type JSX, useId } from "react"
-import { FormFieldError, StandardSizes } from "src/types"
-
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
-import Tag from "../Tag"
+import { StandardSizes } from "src/types"
 
 export interface RadioButtonProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -13,46 +8,23 @@ export interface RadioButtonProps
   className?: string
   /** **(Optional)** Specify whether the RadioButton should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
   disabled?: boolean
-  /** **(Optional)** Specify the RadioButton error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the RadioButton hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the RadioButton error state. */
+  error?: boolean
   /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the RadioButton label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** Specify the RadioButton name. */
   name: string
   /** **(Optional)** Specify the RadioButton size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the RadioButton tag text. */
-  tag?: string
-  /** **(Optional)** Specify the RadioButton tag className. */
-  tagClassName?: string
 }
 
 export const RadioButton = ({
   className,
   disabled,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   name,
   size = "md",
-  tag,
-  tagClassName,
   ...props
 }: RadioButtonProps): JSX.Element => {
   const internalId = useId()
@@ -61,7 +33,7 @@ export const RadioButton = ({
 
   const componentProps = {
     className: clsx("coop-radio-button", className),
-    "data-error": error ? "" : undefined,
+    "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
     id,
@@ -69,29 +41,8 @@ export const RadioButton = ({
     type: "radio",
     ...props,
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return (
-    <div className="coop-form-item" {...formItemProps}>
-      <div className="coop-radio-button-wrapper">
-        <div className="coop-radio-button-input-wrapper">
-          <input {...componentProps} />
-
-          {label && (
-            <FieldLabel htmlFor={id} isVisible={labelVisible}>
-              <span>{label}</span>{" "}
-              {tag && (
-                <Tag className={tagClassName} size="sm">
-                  {tag}
-                </Tag>
-              )}
-            </FieldLabel>
-          )}
-        </div>
-        {hint && <FieldHint>{hint}</FieldHint>}
-      </div>
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-    </div>
-  )
+  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  return <input {...componentProps} />
 }
 
 export default RadioButton

package/src/components/RadioButton/index.ts

@@ -1,6 +1,5 @@
 import RadioButton from "./RadioButton"
-import RadioButtonGroup from "./RadioButtonGroup"
 
 export default RadioButton
-export { RadioButton, RadioButtonGroup }
+export { RadioButton }
 export * from "./RadioButton"

package/src/components/SearchBox/SearchBox.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useId, useState } from "react"
 
 import { StandardSizes } from "../../../src/types"
 import { Button, type ButtonProps } from "../Button"
-import { FieldLabel } from "../FieldLabel"
+import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
 
@@ -57,6 +57,7 @@ export const SearchBox = ({
   autoComplete = "off",
   button = defaultButtonProps,
   className,
+
   id,
   label,
   labelVisible = false,
@@ -92,7 +93,7 @@ export const SearchBox = ({
   const formProps = {
     action: action ?? undefined,
     className: clsx("coop-search-box", className),
-    //"data-size": size && size !== "md" ? size : undefined,
+    "data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
@@ -126,6 +127,7 @@ export const SearchBox = ({
       )}
       <div className="coop-search-box--inner">
         <TextInput {...inputProps} />
+
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/components/TextInput/TextInput.tsx

@@ -1,12 +1,9 @@
 import type { InputHTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
-import { useId } from "react"
 
-import { FormFieldError, StandardSizes } from "../../../src/types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
+import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
 
 export interface TextInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
@@ -14,24 +11,10 @@ export interface TextInputProps
   className?: string
   /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
   disabled?: boolean
-  /** **(Optional)** Specify the TextInput error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the TextInput hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the TextInput error state. */
+  error?: boolean
   /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the TextInput label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label?: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** Specify the TextInput name. */
   name: string
   /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
@@ -51,10 +34,7 @@ export const TextInput = ({
   className,
   disabled,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   name,
   placeholder,
   prefix,
@@ -63,39 +43,26 @@ export const TextInput = ({
   type = "text",
   ...props
 }: TextInputProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", className),
-    "data-error": error ? "" : undefined,
+    "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
-    id,
+    id: uid,
     name,
     placeholder,
     type,
     ...props,
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item" {...formItemProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
-
-      {hint && <FieldHint>{hint}</FieldHint>}
-
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      <div className="coop-text-input-wrapper">
-        {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
-        <input {...componentProps} />
-        {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
-      </div>
+    <div className="coop-text-input-wrapper">
+      {prefix && <span className="coop-text-input--prefix">{prefix}</span>}
+      <input {...componentProps} />
+      {suffix && <span className="coop-text-input--suffix">{suffix}</span>}
     </div>
   )
 }

package/src/components/Textarea/Textarea.tsx

@@ -1,13 +1,11 @@
 import type { ChangeEvent, JSX, TextareaHTMLAttributes } from "react"
 
 import clsx from "clsx"
-import { useId, useState } from "react"
+import { useState } from "react"
 
 import { useDebounce } from "../../hooks/useDebounce"
-import { FormFieldError, StandardSizes } from "../../types"
-import { FieldError } from "../FieldError"
-import { FieldHint } from "../FieldHint"
-import { FieldLabel } from "../FieldLabel"
+import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../types"
 
 const DEBOUNCE_DELAY = 750
 
@@ -31,24 +29,10 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   cutoff?: boolean
   /** **(Optional)** Specify whether the Textarea should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
   disabled?: boolean
-  /** **(Optional)** Specify the Textarea error state.
-   *
-   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-   */
-  error?: FormFieldError
-  /** **(Optional)** Specify the Textarea hint.
-   *
-   * This text is rendered under the label to provide further guidance for users.
-   */
-  hint?: string
+  /** **(Optional)** Specify the Textarea error state */
+  error?: boolean
   /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
   id?: string
-  /** **(Optional)** Specify the Textarea label.
-   *
-   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
-  label?: string
-  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-  labelVisible?: boolean
   /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
   maxLength?: number
   /** Specify the Textarea name. */
@@ -69,10 +53,7 @@ export const Textarea = ({
   cutoff = false,
   disabled = false,
   error = false,
-  hint,
   id,
-  label,
-  labelVisible = true,
   maxLength,
   name,
   onChange: userOnChange = undefined,
@@ -89,7 +70,7 @@ export const Textarea = ({
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-textarea", className),
     cols,
-    "data-error": error ? "" : undefined,
+    "data-error": error ?? undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
     id,
@@ -102,23 +83,15 @@ export const Textarea = ({
 
   const [remaining, setRemaining] = useState(maxLength)
   const debouncedRemaining = useDebounce(remaining, DEBOUNCE_DELAY)
+  const showCounter =
+    !disabled && counter && maxLength && remaining != null && debouncedRemaining != null
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     maxLength && e.target && setRemaining(maxLength - e.target.value.length)
   }
-  const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  // const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (
-    <div className="coop-form-item" {...formItemProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
-
-      {hint && <FieldHint>{hint}</FieldHint>}
-
-      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-
+    <div className="coop-textarea-wrapper">
       <textarea
         {...componentProps}
         onChange={(e) => {
@@ -126,13 +99,12 @@ export const Textarea = ({
           handleChange(e)
         }}
       ></textarea>
-
-      {!disabled && counter && maxLength && remaining != null && debouncedRemaining != null && (
+      {showCounter && (
         <>
           <small
             aria-hidden="true"
             className="coop-textarea-counter"
-            {...(remaining < 0 && { "data-error": "" })}
+            {...(remaining < 0 && { "data-error": true })}
           >
             {charCountMessage(remaining)}
           </small>

package/src/hooks/useId.ts

@@ -0,0 +1,9 @@
+import { useId as _useId } from "react"
+
+export type UseId = (id?: string) => string
+
+export const useId: UseId = (id) => {
+  const uniqueId = _useId()
+
+  return id ?? uniqueId
+}

package/src/index.ts

@@ -5,9 +5,7 @@ export * from "./components/Card"
 export * from "./components/Checkbox"
 export * from "./components/Expandable"
 export * from "./components/Field"
-export * from "./components/FieldError"
-export * from "./components/FieldHint"
-export * from "./components/FieldLabel"
+export * from "./components/Fieldset"
 export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Pill"

package/src/utils/slots.ts

@@ -12,13 +12,21 @@ export function getSlotName(node: React.ReactNode): string | false {
     : false
 }
 
-export function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode): Slots<T> {
+export function getSlots<T>(
+  componentSlots: Slots<T>,
+  children: React.ReactNode,
+  options?: { collect?: string[] }
+): Slots<T> {
   return React.Children.toArray(children).reduce(
     (slots, child: React.ReactNode) => {
       const slotName = getSlotName(child)
 
       if (child && slotName && isKey(componentSlots, slotName)) {
-        slots[slotName] = child
+        if (options?.collect?.includes(slotName)) {
+          slots[slotName] = slots[slotName] ? [...[slots[slotName]].flat(), child] : [child]
+        } else {
+          slots[slotName] = child
+        }
       } else if ("Children" in slots) {
         slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child]
       }

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -1,32 +0,0 @@
-import type { FieldsetHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../../src/types";
-export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the CheckboxGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the CheckboxGroup error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the CheckboxGroup hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
-    /** **(Optional)** Specify the label for the CheckboxGroup. This will be rendered as a fieldset legend. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
-    /** **(Optional)** Specify the CheckboxGroup orientation. */
-    orientation?: "horizontal" | "vertical";
-    /** **(Optional)** Specify the CheckboxGroup size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the CheckboxGroup variant. */
-    variant?: "default" | "boxed";
-}
-export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: CheckboxGroupProps) => JSX.Element;
-export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -1,21 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { FieldError } from '../FieldError/FieldError.js';
-import { FieldHint } from '../FieldHint/FieldHint.js';
-
-const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
-    const componentProps = {
-        className: clsx("coop-fieldset", "coop-checkbox-group", className),
-        "data-error": error ? "" : undefined,
-        "data-orientation": orientation !== "vertical" ? orientation : undefined,
-        "data-size": size.length && size !== "md" ? size : undefined,
-        "data-variant": variant !== "default" ? variant : undefined,
-        ...props,
-    };
-    const legendProps = {
-        className: clsx("coop-field-label", !labelVisible && "sr-only"),
-    };
-    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-checkbox-group-options", children: children })] }));
-};
-
-export { CheckboxGroup, CheckboxGroup as default };

package/dist/components/FieldError/FieldError.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-}
-export declare const FieldError: ({ children, className, ...props }: FieldErrorProps) => JSX.Element;
-export default FieldError;

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

@@ -1,4 +0,0 @@
-import FieldError from "./FieldError";
-export default FieldError;
-export { FieldError };
-export * from "./FieldError";

package/dist/components/FieldHint/FieldHint.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react";
-export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
-    /** Main content inside the component. It can be any valid JSX or string. */
-    children: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-}
-export declare const FieldHint: ({ children, className, ...props }: FieldHintProps) => JSX.Element | null;
-export default FieldHint;

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

@@ -1,4 +0,0 @@
-import FieldHint from "./FieldHint";
-export default FieldHint;
-export { FieldHint };
-export * from "./FieldHint";

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -1,13 +0,0 @@
-import type { JSX, LabelHTMLAttributes, ReactNode } from "react";
-export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: string | ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** Specify the field ID to connect FieldLabel to the field itself. */
-    htmlFor: string;
-    /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
-    isVisible?: boolean;
-}
-export declare const FieldLabel: ({ children, className, htmlFor, isVisible, ...props }: FieldLabelProps) => JSX.Element | null;
-export default FieldLabel;

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,13 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-
-const FieldLabel = ({ children, className, htmlFor, isVisible = true, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
-        htmlFor,
-        ...props,
-    };
-    return children && htmlFor ? jsx("label", { ...componentProps, children: children }) : null;
-};
-
-export { FieldLabel, FieldLabel as default };

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

@@ -1,4 +0,0 @@
-import FieldLabel from "./FieldLabel";
-export default FieldLabel;
-export { FieldLabel };
-export * from "./FieldLabel";

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -1,32 +0,0 @@
-import type { FieldsetHTMLAttributes, JSX } from "react";
-import { FormFieldError, StandardSizes } from "../../types";
-export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify whether the RadioButtonGroup, and all of its descendents, should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
-    disabled?: boolean;
-    /** **(Optional)** Specify the RadioButtonGroup error state.
-     *
-     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
-     */
-    error?: FormFieldError;
-    /** **(Optional)** Specify the RadioButtonGroup hint.
-     *
-     * This text is rendered under the label to provide further guidance for users.
-     */
-    hint?: string;
-    /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
-    label?: string;
-    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
-    labelVisible?: boolean;
-    /** **(Optional)** Specify the RadioButtonGroup orientation. */
-    orientation?: "horizontal" | "vertical";
-    /** **(Optional)** Specify the RadioButtonGroup size. */
-    size?: StandardSizes;
-    /** **(Optional)** Specify the RadioButtonGroup variant. */
-    variant?: "default" | "boxed";
-}
-export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: RadioButtonGroupProps) => JSX.Element;
-export default RadioButtonGroup;