@persona/design-system 0.1.5-pre.4

package/dist/FormControl-DiR2e7Od.cjs

@@ -0,0 +1,212 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_Tooltip = require("./Tooltip-0i_15ysU.cjs");
+const require_useFormGroup = require("./useFormGroup-B_mFNoN9.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _radix_ui_react_label = require("@radix-ui/react-label");
+let lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
+lodash_fp_uniqueId_js = require_chunk.__toESM(lodash_fp_uniqueId_js);
+//#region components/FormControl/FormControl.tsx
+const LabelBase = (0, styled_components.default)(_radix_ui_react_label.Root)`
+  ${({ $size }) => {
+	switch ($size) {
+		default:
+		case "md": return styled_components.css`
+          ${_persona_design_tokens.Typography.TextMedium};
+        `;
+		case "sm": return styled_components.css`
+          ${_persona_design_tokens.Typography.TextSmall};
+        `;
+	}
+}}
+
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+const FormLabel = ({ tooltip, side, size, children, labelTooltipZIndex, ...props }) => {
+	const field = require_useFormField.useFormField({ labelId: props.id });
+	const formGroup = require_useFormGroup.useFormGroup();
+	const labelProps = {
+		id: field.labelId,
+		htmlFor: field.inputId,
+		...props
+	};
+	const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;
+	if (tooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		size,
+		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelBase, {
+			...labelProps,
+			$size: size,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TextWithDashedUnderline, { children })
+		}),
+		side,
+		...effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex },
+		children: tooltip
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelBase, {
+		...labelProps,
+		$size: size,
+		children
+	});
+};
+/**
+* Used to target an input field within a FormControl.
+*/
+const FormInputContainer = styled_components.default.div``;
+const HelperTextBase = styled_components.default.div`
+  ${_persona_design_tokens.Typography.TextSmall};
+  line-height: 1;
+  color: ${({ theme, hasWarning, hasError }) => hasError ? theme.color.variants.danger.default : hasWarning ? _persona_design_tokens.Color.CoreOrange900 : theme.color.text.secondary};
+`;
+const HelperText = (0, react.forwardRef)(function HelperText(props, ref) {
+	const field = require_useFormField.useFormField({ helperTextId: props.id });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelperTextBase, {
+		hasError: field.hasError,
+		hasWarning: field.hasWarning,
+		id: field.helperTextId,
+		ref,
+		...props
+	});
+});
+const ErrorText = (0, react.forwardRef)(function ErrorText(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelperTextBase, {
+		hasError: true,
+		id: require_useFormField.useFormField({ errorTextId: props.id }).errorTextId,
+		ref,
+		...props
+	});
+});
+const WarningText = (0, react.forwardRef)(function WarningText(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelperTextBase, {
+		hasWarning: true,
+		id: require_useFormField.useFormField({ warningTextId: props.id }).warningTextId,
+		ref,
+		...props
+	});
+});
+const Container = styled_components.default.div`
+  display: flex;
+  ${({ $configField, $hasRightActions, $configFieldInputWidth }) => $configField ? $hasRightActions ? styled_components.css`
+            flex-direction: column;
+          ` : styled_components.css`
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: ${_persona_design_tokens.Spacing[4]};
+            min-width: 288px;
+
+            > ${FormInputContainer} {
+              display: flex;
+              flex-direction: row-reverse;
+              width: ${$configFieldInputWidth ?? "50%"};
+              min-width: 180px;
+            }
+
+            &:has(textarea) {
+              flex-direction: column;
+              align-items: flex-start;
+              gap: ${_persona_design_tokens.Spacing[1]};
+
+              > ${FormInputContainer} {
+                width: 100%;
+              }
+            }
+          ` : styled_components.css`
+          flex-direction: column;
+          margin-bottom: ${_persona_design_tokens.Spacing[3]};
+        `}
+
+  > *:not(:first-child) {
+    margin-top: ${({ $configField, $hasRightActions }) => $hasRightActions ? _persona_design_tokens.Spacing[1] : $configField ? _persona_design_tokens.Spacing[0] : _persona_design_tokens.Spacing[2]};
+  }
+
+  > ${HelperTextBase} {
+    margin-top: ${_persona_design_tokens.Spacing[1]};
+  }
+`;
+const FormControl = (0, react.forwardRef)(function FormControl({ children, hasError, hasWarning, inputId, disabled, configField, hasRightActions, configFieldInputWidth, ...props }, ref) {
+	const generatedId = (0, react.useMemo)(() => (0, lodash_fp_uniqueId_js.default)("pds_form_control__"), []);
+	const initFormField = {
+		hasError,
+		hasWarning,
+		disabled,
+		inputId: inputId ?? generatedId,
+		configField
+	};
+	react.Children.map(children, (child) => {
+		if ((0, react.isValidElement)(child)) switch (child.type) {
+			case FormLabel:
+				initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;
+				break;
+			case HelperText:
+				initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;
+				break;
+			case ErrorText:
+				initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;
+				break;
+			case WarningText:
+				initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;
+				break;
+		}
+	});
+	const field = require_useFormField.useFormField(initFormField);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormField.FormControlContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
+			ref,
+			$configField: field.configField,
+			$hasRightActions: hasRightActions,
+			$configFieldInputWidth: configFieldInputWidth,
+			...props,
+			children
+		})
+	});
+});
+//#endregion
+Object.defineProperty(exports, "Container", {
+	enumerable: true,
+	get: function() {
+		return Container;
+	}
+});
+Object.defineProperty(exports, "ErrorText", {
+	enumerable: true,
+	get: function() {
+		return ErrorText;
+	}
+});
+Object.defineProperty(exports, "FormControl", {
+	enumerable: true,
+	get: function() {
+		return FormControl;
+	}
+});
+Object.defineProperty(exports, "FormInputContainer", {
+	enumerable: true,
+	get: function() {
+		return FormInputContainer;
+	}
+});
+Object.defineProperty(exports, "FormLabel", {
+	enumerable: true,
+	get: function() {
+		return FormLabel;
+	}
+});
+Object.defineProperty(exports, "HelperText", {
+	enumerable: true,
+	get: function() {
+		return HelperText;
+	}
+});
+Object.defineProperty(exports, "WarningText", {
+	enumerable: true,
+	get: function() {
+		return WarningText;
+	}
+});
+
+//# sourceMappingURL=FormControl-DiR2e7Od.cjs.map

package/dist/FormControl-DiR2e7Od.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl-DiR2e7Od.cjs","names":["Root","Typography","useFormField","useFormGroup","Tooltip","TextWithDashedUnderline","Color","Spacing","FormControlContext"],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { Root } from '@radix-ui/react-label';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n  FormControlContext,\n  type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' | 'sm';\n\ninterface StyledLabelProps {\n  $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n  ${({ $size }) => {\n    switch ($size) {\n      default:\n      case 'md':\n        return css`\n          ${Typography.TextMedium};\n        `;\n      case 'sm':\n        return css`\n          ${Typography.TextSmall};\n        `;\n    }\n  }}\n\n  color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n  tooltip?: ReactNode;\n  size?: LabelSizes;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n  tooltip,\n  side,\n  size,\n  children,\n  labelTooltipZIndex,\n  ...props\n}: FormLabelProps) => {\n  const field = useFormField({ labelId: props.id });\n  const formGroup = useFormGroup();\n  const labelProps = {\n    id: field.labelId,\n    htmlFor: field.inputId,\n    ...props,\n  };\n\n  // Use labelTooltipZIndex from props, then from form group context\n  const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n  if (tooltip) {\n    return (\n      <Tooltip\n        size={size}\n        trigger={\n          <LabelBase {...labelProps} $size={size}>\n            <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n          </LabelBase>\n        }\n        side={side}\n        {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n      >\n        {tooltip}\n      </Tooltip>\n    );\n  }\n\n  return (\n    <LabelBase {...labelProps} $size={size}>\n      {children}\n    </LabelBase>\n  );\n};\n\n/**\n * Used to target an input field within a FormControl.\n */\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n  ${Typography.TextSmall};\n  line-height: 1;\n  color: ${({ theme, hasWarning, hasError }) =>\n    hasError\n      ? theme.color.variants.danger.default\n      : hasWarning\n        ? Color.CoreOrange900\n        : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n  function HelperText(props, ref) {\n    const field = useFormField({ helperTextId: props.id });\n    return (\n      <HelperTextBase\n        hasError={field.hasError}\n        hasWarning={field.hasWarning}\n        id={field.helperTextId}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function ErrorText(props, ref) {\n    const field = useFormField({ errorTextId: props.id });\n    return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  function WarningText(props, ref) {\n    const field = useFormField({ warningTextId: props.id });\n    return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n  },\n);\n\nexport const Container = styled.div<{\n  $configField?: boolean;\n  $hasRightActions?: boolean;\n  $configFieldInputWidth?: string;\n}>`\n  display: flex;\n  ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n    $configField\n      ? $hasRightActions\n        ? css`\n            flex-direction: column;\n          `\n        : css`\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n            gap: ${Spacing[4]};\n            min-width: 288px;\n\n            > ${FormInputContainer} {\n              display: flex;\n              flex-direction: row-reverse;\n              width: ${$configFieldInputWidth ?? '50%'};\n              min-width: 180px;\n            }\n\n            &:has(textarea) {\n              flex-direction: column;\n              align-items: flex-start;\n              gap: ${Spacing[1]};\n\n              > ${FormInputContainer} {\n                width: 100%;\n              }\n            }\n          `\n      : css`\n          flex-direction: column;\n          margin-bottom: ${Spacing[3]};\n        `}\n\n  > *:not(:first-child) {\n    margin-top: ${({ $configField, $hasRightActions }) =>\n      $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n  }\n\n  > ${HelperTextBase} {\n    margin-top: ${Spacing[1]};\n  }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n  inputId?: string;\n  disabled?: boolean;\n  /**\n   * Whether to render the form field as a config field.\n   * This will remove the label and helper text.\n   */\n  configField?: boolean;\n  /**\n   * Whether the form field has right actions.\n   */\n  hasRightActions?: boolean;\n  /**\n   * Override the width of the form input container when `configField` is true.\n   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n   * Defaults to `'50%'`.\n   */\n  configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n  {\n    children,\n    hasError,\n    hasWarning,\n    inputId,\n    disabled,\n    configField,\n    hasRightActions,\n    configFieldInputWidth,\n    ...props\n  }: FormControlProps,\n  ref,\n) {\n  const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n  const initFormField: FormControlContextProps = {\n    hasError,\n    hasWarning,\n    disabled,\n    inputId: inputId ?? generatedId,\n    configField,\n  };\n\n  Children.map(children, (child: ReactNode) => {\n    if (isValidElement(child)) {\n      switch (child.type) {\n        case FormLabel: {\n          initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n          break;\n        }\n        case HelperText: {\n          initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n          break;\n        }\n        case ErrorText: {\n          initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n          break;\n        }\n        case WarningText: {\n          initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n          break;\n        }\n      }\n    }\n  });\n\n  const field = useFormField(initFormField);\n\n  return (\n    <FormControlContext.Provider value={field}>\n      <Container\n        ref={ref}\n        $configField={field.configField}\n        $hasRightActions={hasRightActions}\n        $configFieldInputWidth={configFieldInputWidth}\n        {...props}\n      >\n        {children}\n      </Container>\n    </FormControlContext.Provider>\n  );\n});\n\nexport default FormControl;\n"],"mappings":"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"}

package/dist/FormControl-KkeIYuBa.d.cts

@@ -0,0 +1,60 @@
+import { t as ErrorProps } from "./ErrorProps-DLdVsYlk.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Root } from "@radix-ui/react-label";
+
+//#region components/FormControl/FormControl.d.ts
+type LabelSizes = 'md' | 'sm';
+interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {
+  tooltip?: ReactNode;
+  size?: LabelSizes;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  labelTooltipZIndex?: number;
+}
+declare const FormLabel: ({
+  tooltip,
+  side,
+  size,
+  children,
+  labelTooltipZIndex,
+  ...props
+}: FormLabelProps) => _$react_jsx_runtime0.JSX.Element;
+/**
+ * Used to target an input field within a FormControl.
+ */
+declare const FormInputContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+interface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}
+declare const HelperText: _$react.ForwardRefExoticComponent<HelperTextProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const ErrorText: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const WarningText: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const Container: _$styled_components0.StyledComponent<"div", any, {
+  $configField?: boolean;
+  $hasRightActions?: boolean;
+  $configFieldInputWidth?: string;
+}, never>;
+interface FormControlBaseProps extends ErrorProps {
+  inputId?: string;
+  disabled?: boolean;
+  /**
+   * Whether to render the form field as a config field.
+   * This will remove the label and helper text.
+   */
+  configField?: boolean;
+  /**
+   * Whether the form field has right actions.
+   */
+  hasRightActions?: boolean;
+  /**
+   * Override the width of the form input container when `configField` is true.
+   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).
+   * Defaults to `'50%'`.
+   */
+  configFieldInputWidth?: string;
+}
+interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}
+declare const FormControl: _$react.ForwardRefExoticComponent<FormControlProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FormControlProps as a, FormLabelProps as c, FormControlBaseProps as i, HelperText as l, ErrorText as n, FormInputContainer as o, FormControl as r, FormLabel as s, Container as t, WarningText as u };
+//# sourceMappingURL=FormControl-KkeIYuBa.d.cts.map

package/dist/FormControl.d.cts

@@ -0,0 +1,2 @@
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "./FormControl-KkeIYuBa.cjs";
+export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText };

package/dist/FormControl.d.mts

@@ -0,0 +1,2 @@
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "./FormControl-CM7wTn1P.mjs";
+export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText };

package/dist/FormField-19ownwjH.d.cts

@@ -0,0 +1,69 @@
+import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-KkeIYuBa.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+//#region components/FormField/FormField.d.ts
+interface FormFieldBaseProps {
+  /**
+   * Renders `<Label>` above input
+   */
+  label?: ReactNode;
+  /**
+   * ID of the input element. Providing this will automatically link the label to the input.
+   */
+  inputId?: string;
+  /**
+   * Renders `<HelperText>` below input
+   */
+  helperText?: ReactNode;
+  /**
+   * Renders `<ErrorText>` below input and helper text.
+   */
+  errorText?: ReactNode;
+  /**
+   * Renders `<WarningText>` below input and helper text.
+   */
+  warningText?: ReactNode;
+  /**
+   * Should be an input of some sort
+   */
+  children?: ReactElement;
+  labelProps?: ComponentPropsWithRef<typeof FormLabel>;
+  helperProps?: ComponentPropsWithRef<typeof HelperText>;
+  warningProps?: ComponentPropsWithRef<typeof WarningText>;
+  errorProps?: ComponentPropsWithRef<typeof ErrorText>;
+  /**
+   * Whether to render the form field as a config field.
+   * This will render the helper text as a tooltip.
+   */
+  configField?: boolean;
+  /**
+   * Override the width of the input area when `configField` is true.
+   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).
+   * Defaults to `'50%'`.
+   */
+  configFieldInputWidth?: string;
+  /**
+   * Renders actions to the right of the label.
+   */
+  rightActions?: ReactNode;
+}
+interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}
+/**
+ * > **Please do not use in production! This component is subject to API and style changes.**
+ *
+ * Helper components with preset slots for label, input, and helper texts.
+ * Fully composed components with different form input types are available.
+ * This is the recommended way to implement form elements.
+ * You can use `<FormControl>` if you require more flexibility.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import FormField from 'design-system/components/FormField';
+ * ```
+ */
+declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
+//# sourceMappingURL=FormField-19ownwjH.d.cts.map

package/dist/FormField-CdMru4s5.d.mts

@@ -0,0 +1,69 @@
+import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-CM7wTn1P.mjs";
+import * as _$react from "react";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+//#region components/FormField/FormField.d.ts
+interface FormFieldBaseProps {
+  /**
+   * Renders `<Label>` above input
+   */
+  label?: ReactNode;
+  /**
+   * ID of the input element. Providing this will automatically link the label to the input.
+   */
+  inputId?: string;
+  /**
+   * Renders `<HelperText>` below input
+   */
+  helperText?: ReactNode;
+  /**
+   * Renders `<ErrorText>` below input and helper text.
+   */
+  errorText?: ReactNode;
+  /**
+   * Renders `<WarningText>` below input and helper text.
+   */
+  warningText?: ReactNode;
+  /**
+   * Should be an input of some sort
+   */
+  children?: ReactElement;
+  labelProps?: ComponentPropsWithRef<typeof FormLabel>;
+  helperProps?: ComponentPropsWithRef<typeof HelperText>;
+  warningProps?: ComponentPropsWithRef<typeof WarningText>;
+  errorProps?: ComponentPropsWithRef<typeof ErrorText>;
+  /**
+   * Whether to render the form field as a config field.
+   * This will render the helper text as a tooltip.
+   */
+  configField?: boolean;
+  /**
+   * Override the width of the input area when `configField` is true.
+   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).
+   * Defaults to `'50%'`.
+   */
+  configFieldInputWidth?: string;
+  /**
+   * Renders actions to the right of the label.
+   */
+  rightActions?: ReactNode;
+}
+interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}
+/**
+ * > **Please do not use in production! This component is subject to API and style changes.**
+ *
+ * Helper components with preset slots for label, input, and helper texts.
+ * Fully composed components with different form input types are available.
+ * This is the recommended way to implement form elements.
+ * You can use `<FormControl>` if you require more flexibility.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import FormField from 'design-system/components/FormField';
+ * ```
+ */
+declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
+//# sourceMappingURL=FormField-CdMru4s5.d.mts.map

package/dist/FormField.d.cts

@@ -0,0 +1,2 @@
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-19ownwjH.cjs";
+export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/FormField.d.mts

@@ -0,0 +1,2 @@
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-CdMru4s5.mjs";
+export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/Header-D8oDtnIL.d.cts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Card/Header/Header.d.ts
+interface HeaderProps {
+  children: ReactNode;
+  subtitle?: ReactNode;
+  variant?: 'title' | 'section';
+  actions?: ReactNode;
+  $matchCardV2?: boolean;
+}
+declare const HeaderContainer: _$styled_components0.StyledComponent<"div", any, Pick<HeaderProps, "variant" | "$matchCardV2">, never>;
+declare const TitleContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const Title: _$styled_components0.StyledComponent<"h3", any, Pick<HeaderProps, "variant" | "$matchCardV2">, never>;
+declare const ActionsContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const Header: ({
+  children,
+  variant,
+  actions,
+  subtitle,
+  $matchCardV2,
+  ...elemProps
+}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const Root: ({
+  children,
+  variant,
+  actions,
+  subtitle,
+  $matchCardV2,
+  ...elemProps
+}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Root as a, HeaderProps as i, Header as n, Title as o, HeaderContainer as r, TitleContainer as s, ActionsContainer as t };
+//# sourceMappingURL=Header-D8oDtnIL.d.cts.map

package/dist/Header-t1plnZc0.d.mts

@@ -0,0 +1,35 @@
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/Card/Header/Header.d.ts
+interface HeaderProps {
+  children: ReactNode;
+  subtitle?: ReactNode;
+  variant?: 'title' | 'section';
+  actions?: ReactNode;
+  $matchCardV2?: boolean;
+}
+declare const HeaderContainer: _$styled_components0.StyledComponent<"div", any, Pick<HeaderProps, "variant" | "$matchCardV2">, never>;
+declare const TitleContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const Title: _$styled_components0.StyledComponent<"h3", any, Pick<HeaderProps, "variant" | "$matchCardV2">, never>;
+declare const ActionsContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+declare const Header: ({
+  children,
+  variant,
+  actions,
+  subtitle,
+  $matchCardV2,
+  ...elemProps
+}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
+declare const Root: ({
+  children,
+  variant,
+  actions,
+  subtitle,
+  $matchCardV2,
+  ...elemProps
+}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Root as a, HeaderProps as i, Header as n, Title as o, HeaderContainer as r, TitleContainer as s, ActionsContainer as t };
+//# sourceMappingURL=Header-t1plnZc0.d.mts.map

package/dist/Header.d.cts

@@ -0,0 +1,2 @@
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-D8oDtnIL.cjs";
+export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/Header.d.mts

@@ -0,0 +1,2 @@
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-t1plnZc0.mjs";
+export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/HelperTooltip-Cd7I0Ucq.d.mts

@@ -0,0 +1,20 @@
+import { i as TooltipWithIconProps } from "./Tooltip-C0PS5InA.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/Tooltip/HelperTooltip.d.ts
+interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {
+  children: ReactNode;
+  size?: 'md' | 'sm';
+}
+/**
+ * Helper component for rendering help text via help icons.
+ */
+declare const HelperTooltip: ({
+  children,
+  size,
+  ...props
+}: HelperTooltipProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HelperTooltipProps as n, HelperTooltip as t };
+//# sourceMappingURL=HelperTooltip-Cd7I0Ucq.d.mts.map

package/dist/HelperTooltip-oXdyk2At.d.cts

@@ -0,0 +1,20 @@
+import { i as TooltipWithIconProps } from "./Tooltip-CE1oH6Iz.cjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Tooltip/HelperTooltip.d.ts
+interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {
+  children: ReactNode;
+  size?: 'md' | 'sm';
+}
+/**
+ * Helper component for rendering help text via help icons.
+ */
+declare const HelperTooltip: ({
+  children,
+  size,
+  ...props
+}: HelperTooltipProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { HelperTooltipProps as n, HelperTooltip as t };
+//# sourceMappingURL=HelperTooltip-oXdyk2At.d.cts.map

package/dist/HelperTooltip.d.cts

@@ -0,0 +1,2 @@
+import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-oXdyk2At.cjs";
+export { HelperTooltipProps, HelperTooltip as default };

package/dist/HelperTooltip.d.mts

@@ -0,0 +1,2 @@
+import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-Cd7I0Ucq.mjs";
+export { HelperTooltipProps, HelperTooltip as default };