@persona/design-system 0.1.7 → 0.1.9

package/dist/FilterPill.d.mts

@@ -0,0 +1,60 @@
+import { a as FilterField, d as FilterSize, l as FilterRule } from "./types-D58IoRx6.mjs";
+import * as _$react from "react";
+import { HTMLAttributes } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/FilterPill/FilterPill.d.ts
+/**
+ * Props for `FilterPill` — one entry in `FilterStateV2.topLevelRules`
+ * rendered as an interactive pill.
+ *
+ * The container chrome (rounded 24px pill, variant background, focus
+ * ring, caret↔dismiss swap) is provided by `PillShell`. This file
+ * owns the pill's filter-specific body content: field label, operator
+ * label, and value chip(s).
+ */
+interface FilterPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+  /** Field metadata, used for the label and value-chip lookups. */
+  field: FilterField;
+  /** Active rule, or `null` for the default/unset state. */
+  rule: FilterRule | null;
+  /**
+   * User clicked the pill body — parent should open the value-edit popover.
+   *
+   * Optional because the most common usage is as a Radix `Popover.Trigger`
+   * `asChild` element. In that case Radix's `Slot` injects its own click
+   * handler on the outer `<span>` that toggles the popover; clicks bubble
+   * from the inner body button up to the span and fire it. The dismiss
+   * button's `stopPropagation` (inside `PillShell`) keeps ✕ clicks from
+   * triggering the popover.
+   */
+  onClick?: () => void;
+  /** User clicked the ✕ — parent should remove the rule. */
+  onDismiss: () => void;
+  /**
+   * Visual variant.
+   *
+   * - `'default'` (default) — neutral gray pill, shows `▾`.
+   * - `'active'` — purple pill used when the popover is open. Always
+   *   shows `×` (in place of the caret).
+   *
+   * On hover, the default variant also swaps `▾` for `×`.
+   */
+  variant?: 'default' | 'active';
+  /**
+   * Optional label-lookup map for `choices` / `multi_choices` fields. When
+   * provided, raw option values in the rule are translated to their
+   * human-readable labels before rendering. Falls through to the raw value
+   * when the map is missing or doesn't contain the option.
+   */
+  optionLabels?: Record<string, string>;
+  /**
+   * Size variant. Forwarded to `PillShell` and to the value-chip
+   * styling. Defaults to whatever the surrounding `FilterBarContext`
+   * provides (`'sm'` outside a `FilterBar`).
+   */
+  size?: FilterSize;
+}
+declare const FilterPill: _$react.ForwardRefExoticComponent<FilterPillProps & _$react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { FilterPillProps, FilterPill as default };
+//# sourceMappingURL=FilterPill.d.mts.map

package/dist/FilterPopover.d.mts

@@ -0,0 +1,87 @@
+import { a as FilterField, c as FilterOperator, d as FilterSize } from "./types-D58IoRx6.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.d.ts
+/**
+ * Props for `FilterPopover` — the single-rule editor that opens from a
+ * `FilterPill` body click or from the `FilterPickerMenu` after a field
+ * is picked.
+ *
+ *   ┌──────────────────────────────────┐
+ *   │ Field name   is ▾                │  ← inline header (12px secondary + operator)
+ *   │ ┌────────────────────────────┐   │
+ *   │ │ value control (parent slot)│   │
+ *   │ └────────────────────────────┘   │
+ *   ├──────────────────────────────────┤
+ *   │ ⓘ Field name is a field on …    │  ← footer (10px secondary, custom fields only)
+ *   └──────────────────────────────────┘
+ *
+ * The value control slot is whatever the parent passes
+ * — text input, multi-select, calendar, etc.
+ */
+interface FilterPopoverProps {
+  /** Field metadata, used for the header label, operator vocabulary, and footer. */
+  field: FilterField;
+  /** Currently selected operator for this rule. */
+  operator: FilterOperator;
+  /** Called when the user picks a new operator from the dropdown. */
+  onChangeOperator: (op: FilterOperator) => void;
+  /**
+   * The parent-supplied value control. This component is intentionally
+   * agnostic about the inner UI — the per-type value controls (text input,
+   * multi-select, calendar, etc.) live outside this file and are wired in
+   * by the parent via this slot.
+   */
+  valueControlSlot: ReactNode;
+  /** Called when the popover should close (e.g. Escape, click-outside). */
+  onClose: () => void;
+  /** Anchor element — passed through to Radix `Popover.Trigger` as a child. */
+  trigger: ReactNode;
+  /**
+   * Controlled-open flag. Same pass-through convention as `FilterPickerMenu`:
+   * when both `open` and `onOpenChange` are provided the popover behaves as a
+   * fully controlled component; otherwise Radix manages open state internally.
+   */
+  open?: boolean;
+  /**
+   * Controlled-open setter, called by Radix whenever it wants to transition
+   * the popover's open state. The parent is free to ignore this and force a
+   * different state if it needs to (e.g. block-close while editing).
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Size variant. Defaults to whatever the surrounding
+   * `FilterBarContext` provides (`'sm'` outside a FilterBar).
+   * Drives header/operator font + glyph sizes plus the `size` prop
+   * passed to any DropdownMenu items.
+   */
+  size?: FilterSize;
+}
+/**
+ * The single-rule editor popover. Renders a Radix `Popover` anchored on
+ * `trigger`, with a `Popover.Card` body that stacks:
+ *
+ *   1. Inline header — "[Field name]  [operator ▾]" on one line.
+ *   2. Parent-supplied value control.
+ *   3. Custom-field footer (`ⓘ [label] is a field on [parentRecordType]`).
+ *
+ * The popover stays purely presentational. Rule state lives in the parent's
+ * `useFilterStateV2()` hook; this component just routes operator changes
+ * back through `onChangeOperator` and forwards open/close transitions
+ * through Radix's controlled props.
+ */
+declare const FilterPopover: ({
+  field,
+  operator,
+  onChangeOperator,
+  valueControlSlot,
+  onClose,
+  trigger,
+  open,
+  onOpenChange,
+  size
+}: FilterPopoverProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FilterPopoverProps, FilterPopover as default };
+//# sourceMappingURL=FilterPopover.d.mts.map

package/dist/FloatValueControl.d.mts

@@ -0,0 +1,40 @@
+import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/DataTable/TableControls/FiltersV2/value-controls/FloatValueControl/FloatValueControl.d.ts
+type FloatValueControlProps = ValueControlProps;
+/**
+ * Float-typed value control for the Filter UI v2 popover.
+ *
+ * Used for `float` fields with operators `is` / `is_not`. The popover
+ * renders nothing when the operator is valueless (`is_empty` /
+ * `is_not_empty`). Range operators are not part of the current numeric
+ * field vocabulary.
+ *
+ * The control accepts decimal input and emits a `number` via `onChange`.
+ * We keep local display state as a string so partial input like `"3."` is
+ * preserved while the user types; the emitted numeric value is only updated
+ * once the input parses to a finite number.
+ *
+ * `isFocused` ref guards the external-value sync effect: typing a
+ * mid-decimal value like `"3."` parses to `3` and emits it, which
+ * round-trips back through the controlled `value` prop. Without the
+ * guard, the sync effect would rewrite the display from `"3."` to
+ * `"3"` and the next keystroke (`"7"`) would land at the wrong cursor
+ * position. The blur handler resyncs the display so any half-typed
+ * string that never parsed (`"-"`, `"."`) renders as whatever the
+ * rule actually carries when focus leaves.
+ *
+ * `onChange` is debounced (300ms) to avoid committing on every keystroke;
+ * the debounce flushes on blur and on unmount so no pending value is lost.
+ */
+declare const FloatValueControl: ({
+  field,
+  operator,
+  value,
+  onChange,
+  ariaLabel
+}: FloatValueControlProps) => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { FloatValueControl, FloatValueControl as default, FloatValueControlProps };
+//# sourceMappingURL=FloatValueControl.d.mts.map

package/dist/{FormControl-ArDcvmir.mjs → FormControl-CFU9uKF7.mjs}

@@ -1,12 +1,12 @@
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-CDvOu1UN.mjs";
-import { n as useFormGroup } from "./useFormGroup-BMukAMAd.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-eftOPiXj.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-BvDbmXak.mjs";
+import { n as useFormGroup } from "./useFormGroup-DWVW7A9f.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-DhYd6bNn.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { Children, forwardRef, isValidElement, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Root } from "@radix-ui/react-label";
+import { Children, forwardRef, isValidElement, useMemo } from "react";
 import uniqueId from "lodash/fp/uniqueId.js";
+import { Root } from "@radix-ui/react-label";
 //#region components/FormControl/FormControl.tsx
 const LabelBase = styled(Root)`
   ${({ $size }) => {
@@ -165,4 +165,4 @@ const FormControl = forwardRef(function FormControl({ children, hasError, hasWar
 //#endregion
 export { FormLabel as a, FormInputContainer as i, ErrorText as n, HelperText as o, FormControl as r, WarningText as s, Container as t };
 
-//# sourceMappingURL=FormControl-ArDcvmir.mjs.map
+//# sourceMappingURL=FormControl-CFU9uKF7.mjs.map

package/dist/{FormControl-ArDcvmir.mjs.map → FormControl-CFU9uKF7.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FormControl-ArDcvmir.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { 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 { Color, Spacing, Typography } from '@persona/design-tokens';\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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"}
+{"version":3,"file":"FormControl-CFU9uKF7.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { 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 { Color, Spacing, Typography } from '@persona/design-tokens';\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":";;;;;;;;;;AA2BA,MAAM,YAAY,OAAO,KAAK;KACzB,EAAE,YAAY;AACf,SAAQ,OAAR;EACE;EACA,KAAK,KACH,QAAO,GAAG;YACN,WAAW,WAAW;;EAE5B,KAAK,KACH,QAAO,GAAG;YACN,WAAW,UAAU;;;EAG7B;;YAEQ,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;AAUnD,MAAa,aAAa,EACxB,SACA,MACA,MACA,UACA,oBACA,GAAG,YACiB;CACpB,MAAM,QAAQ,aAAa,EAAE,SAAS,MAAM,IAAI,CAAC;CACjD,MAAM,YAAY,cAAc;CAChC,MAAM,aAAa;EACjB,IAAI,MAAM;EACV,SAAS,MAAM;EACf,GAAG;EACJ;CAGD,MAAM,8BAA8B,sBAAsB,UAAU;AAEpE,KAAI,QACF,QACE,oBAAC,SAAD;EACQ;EACN,SACE,oBAAC,WAAD;GAAW,GAAI;GAAY,OAAO;aAChC,oBAAC,yBAAD,EAA0B,UAAmC,CAAA;GACnD,CAAA;EAER;EACN,GAAK,+BAA+B,QAAQ,EAAE,QAAQ,6BAA6B;YAElF;EACO,CAAA;AAId,QACE,oBAAC,WAAD;EAAW,GAAI;EAAY,OAAO;EAC/B;EACS,CAAA;;;;;AAOhB,MAAa,qBAAqB,OAAO,GAAG;AAE5C,MAAM,iBAAiB,OAAO,GAAe;IACzC,WAAW,UAAU;;YAEb,EAAE,OAAO,YAAY,eAC7B,WACI,MAAM,MAAM,SAAS,OAAO,UAC5B,aACE,MAAM,gBACN,MAAM,MAAM,KAAK,UAAU;;AAKrC,MAAa,aAAa,WACxB,SAAS,WAAW,OAAO,KAAK;CAC9B,MAAM,QAAQ,aAAa,EAAE,cAAc,MAAM,IAAI,CAAC;AACtD,QACE,oBAAC,gBAAD;EACE,UAAU,MAAM;EAChB,YAAY,MAAM;EAClB,IAAI,MAAM;EACL;EACL,GAAI;EACJ,CAAA;EAGP;AAED,MAAa,YAAY,WACvB,SAAS,UAAU,OAAO,KAAK;AAE7B,QAAO,oBAAC,gBAAD;EAAgB,UAAA;EAAS,IADlB,aAAa,EAAE,aAAa,MAAM,IAAI,CACX,CAAC;EAAkB;EAAK,GAAI;EAAS,CAAA;EAEjF;AAED,MAAa,cAAc,WACzB,SAAS,YAAY,OAAO,KAAK;AAE/B,QAAO,oBAAC,gBAAD;EAAgB,YAAA;EAAW,IADpB,aAAa,EAAE,eAAe,MAAM,IAAI,CACX,CAAC;EAAoB;EAAK,GAAI;EAAS,CAAA;EAErF;AAED,MAAa,YAAY,OAAO,GAI9B;;KAEG,EAAE,cAAc,kBAAkB,6BACnC,eACI,mBACE,GAAG;;cAGH,GAAG;;;;mBAIM,QAAQ,GAAG;;;gBAGd,mBAAmB;;;uBAGZ,0BAA0B,MAAM;;;;;;;qBAOlC,QAAQ,GAAG;;kBAEd,mBAAmB;;;;cAK7B,GAAG;;2BAEgB,QAAQ,GAAG;UAC5B;;;mBAGS,EAAE,cAAc,uBAC7B,mBAAmB,QAAQ,KAAK,eAAe,QAAQ,KAAK,QAAQ,GAAG;;;MAGvE,eAAe;kBACH,QAAQ,GAAG;;;AA0B7B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EACE,UACA,UACA,YACA,SACA,UACA,aACA,iBACA,uBACA,GAAG,SAEL,KACA;CACA,MAAM,cAAc,cAAc,SAAS,qBAAqB,EAAE,EAAE,CAAC;CAErE,MAAM,gBAAyC;EAC7C;EACA;EACA;EACA,SAAS,WAAW;EACpB;EACD;AAED,UAAS,IAAI,WAAW,UAAqB;AAC3C,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK;AACH,kBAAc,UAAU,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACnE;GAEF,KAAK;AACH,kBAAc,eAAe,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACxE;GAEF,KAAK;AACH,kBAAc,cAAc,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACvE;GAEF,KAAK;AACH,kBAAc,gBAAgB,MAAM,MAAM,MAAM,GAAG,cAAc,QAAQ;AACzE;;GAIN;CAEF,MAAM,QAAQ,aAAa,cAAc;AAEzC,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,WAAD;GACO;GACL,cAAc,MAAM;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,GAAI;GAEH;GACS,CAAA;EACgB,CAAA;EAEhC"}

package/dist/{FormControl-DnsC4vTX.d.mts → FormControl-DH3bgqaB.d.mts}

@@ -1,8 +1,8 @@
-import { t as ErrorProps } from "./ErrorProps-iEj4BIVA.mjs";
+import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
 import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Root } from "@radix-ui/react-label";
 
 //#region components/FormControl/FormControl.d.ts
@@ -57,4 +57,4 @@ interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlB
 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-DnsC4vTX.d.mts.map
+//# sourceMappingURL=FormControl-DH3bgqaB.d.mts.map

package/dist/FormControl.d.mts

@@ -1,2 +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-DnsC4vTX.mjs";
+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-DH3bgqaB.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText };

package/dist/FormControlLabel.d.mts

@@ -1,4 +1,4 @@
-import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-D3FXEnG6.mjs";
+import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-DNPbAuUG.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 

package/dist/{FormField-BddCs6P0.d.mts → FormField-BugkBvN4.d.mts}

@@ -1,4 +1,4 @@
-import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-DnsC4vTX.mjs";
+import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-DH3bgqaB.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 
@@ -66,4 +66,4 @@ interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBa
 declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
-//# sourceMappingURL=FormField-BddCs6P0.d.mts.map
+//# sourceMappingURL=FormField-BugkBvN4.d.mts.map