@mastra/playground-ui 60.0.0 → 60.1.0-alpha.0

package/dist/{input-group-B8bnoDrA.js.map → input-group-0G9ZX_cM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-group-B8bnoDrA.js","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\nconst inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(({ className, size, ...props }, ref) => {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n});\nInputGroup.displayName = 'InputGroup';\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  ({ className, align = 'inline-start', onClick, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group-addon\"\n        data-align={align}\n        className={cn(inputGroupAddonVariants({ align }), className)}\n        onClick={event => {\n          // Click on non-interactive addon area focuses the control inside the group.\n          // Skip when a button/input handled the click itself.\n          const target = event.target as HTMLElement;\n          if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n            event.currentTarget.parentElement\n              ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n              ?.focus();\n          }\n          onClick?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupAddon.displayName = 'InputGroupAddon';\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\nexport type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n  ({ className, testId, error, type = 'text', ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          // Height fits the root's content box (see inputGroupControlHeightBySize).\n          'min-w-0 flex-1 bg-transparent px-3 text-foreground outline-hidden',\n          inputGroupControlHeightBySize,\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          // Hide native number-spinner arrows so consumers can compose their own\n          // stepper (see the NumberWithStepper story). WebKit uses the spin-button\n          // pseudo-elements; Firefox needs `appearance: textfield` on the input.\n          '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n          '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n          '[&[type=number]]:[appearance:textfield]',\n          // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n          // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\n  ({ className, testId, error, ...props }, ref) => {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;\n\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nInputGroupText.displayName = 'InputGroupText';\n\nexport type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  ({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }, ref) => {\n    return <Button ref={ref} type={type} size={size} variant={variant} {...props} />;\n  },\n);\nInputGroupButton.displayName = 'InputGroupButton';\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"input-group-0G9ZX_cM.js","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\nconst inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(({ className, size, ...props }, ref) => {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n});\nInputGroup.displayName = 'InputGroup';\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  ({ className, align = 'inline-start', onClick, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group-addon\"\n        data-align={align}\n        className={cn(inputGroupAddonVariants({ align }), className)}\n        onClick={event => {\n          // Click on non-interactive addon area focuses the control inside the group.\n          // Skip when a button/input handled the click itself.\n          const target = event.target as HTMLElement;\n          if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n            event.currentTarget.parentElement\n              ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n              ?.focus();\n          }\n          onClick?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupAddon.displayName = 'InputGroupAddon';\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\nexport type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n  ({ className, testId, error, type = 'text', ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          // Height fits the root's content box (see inputGroupControlHeightBySize).\n          'min-w-0 flex-1 bg-transparent px-3 text-foreground outline-hidden',\n          inputGroupControlHeightBySize,\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          // Hide native number-spinner arrows so consumers can compose their own\n          // stepper (see the NumberWithStepper story). WebKit uses the spin-button\n          // pseudo-elements; Firefox needs `appearance: textfield` on the input.\n          '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n          '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n          '[&[type=number]]:[appearance:textfield]',\n          // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n          // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\n  ({ className, testId, error, ...props }, ref) => {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;\n\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nInputGroupText.displayName = 'InputGroupText';\n\nexport type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  ({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }, ref) => {\n    return <Button ref={ref} type={type} size={size} variant={variant} {...props} />;\n  },\n);\nInputGroupButton.displayName = 'InputGroupButton';\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":[],"mappings":"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"}

package/dist/{input-group-I8YVM_Ps.cjs → input-group-BRhBfeHC.cjs}

@@ -3,7 +3,7 @@
 const jsxRuntime = require('react/jsx-runtime');
 const index = require('./index-C-fBJhpb.cjs');
 const React = require('react');
-const Button = require('./Button-BnmR2HRc.cjs');
+const Button = require('./Button-CXhSUBxN.cjs');
 const primitives_controlSize = require('./primitives/control-size.cjs.js');
 const primitives_formElement = require('./primitives/form-element.cjs.js');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
@@ -219,4 +219,4 @@ exports.InputGroupButton = InputGroupButton;
 exports.InputGroupInput = InputGroupInput;
 exports.InputGroupText = InputGroupText;
 exports.InputGroupTextarea = InputGroupTextarea;
-//# sourceMappingURL=input-group-I8YVM_Ps.cjs.map
+//# sourceMappingURL=input-group-BRhBfeHC.cjs.map

package/dist/{input-group-I8YVM_Ps.cjs.map → input-group-BRhBfeHC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"input-group-I8YVM_Ps.cjs","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\nconst inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(({ className, size, ...props }, ref) => {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n});\nInputGroup.displayName = 'InputGroup';\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  ({ className, align = 'inline-start', onClick, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group-addon\"\n        data-align={align}\n        className={cn(inputGroupAddonVariants({ align }), className)}\n        onClick={event => {\n          // Click on non-interactive addon area focuses the control inside the group.\n          // Skip when a button/input handled the click itself.\n          const target = event.target as HTMLElement;\n          if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n            event.currentTarget.parentElement\n              ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n              ?.focus();\n          }\n          onClick?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupAddon.displayName = 'InputGroupAddon';\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\nexport type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n  ({ className, testId, error, type = 'text', ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          // Height fits the root's content box (see inputGroupControlHeightBySize).\n          'min-w-0 flex-1 bg-transparent px-3 text-foreground outline-hidden',\n          inputGroupControlHeightBySize,\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          // Hide native number-spinner arrows so consumers can compose their own\n          // stepper (see the NumberWithStepper story). WebKit uses the spin-button\n          // pseudo-elements; Firefox needs `appearance: textfield` on the input.\n          '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n          '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n          '[&[type=number]]:[appearance:textfield]',\n          // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n          // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\n  ({ className, testId, error, ...props }, ref) => {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;\n\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nInputGroupText.displayName = 'InputGroupText';\n\nexport type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  ({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }, ref) => {\n    return <Button ref={ref} type={type} size={size} variant={variant} {...props} />;\n  },\n);\nInputGroupButton.displayName = 'InputGroupButton';\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":["cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","React","ControlSizeContext","jsx","controlHeight","cva","Button"],"mappings":"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"}
+{"version":3,"file":"input-group-BRhBfeHC.cjs","sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { ControlSizeContext, controlHeight } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\nconst inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nconst InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(({ className, size, ...props }, ref) => {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(inputGroupClassName, controlHeight[resolved], className)}\n      {...props}\n    />\n  );\n});\nInputGroup.displayName = 'InputGroup';\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    \"[&>svg:not([class*='size-'])]:size-4\",\n  ),\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(\n  ({ className, align = 'inline-start', onClick, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"input-group-addon\"\n        data-align={align}\n        className={cn(inputGroupAddonVariants({ align }), className)}\n        onClick={event => {\n          // Click on non-interactive addon area focuses the control inside the group.\n          // Skip when a button/input handled the click itself.\n          const target = event.target as HTMLElement;\n          if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n            event.currentTarget.parentElement\n              ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n              ?.focus();\n          }\n          onClick?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupAddon.displayName = 'InputGroupAddon';\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\nexport type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(\n  ({ className, testId, error, type = 'text', ...props }, ref) => {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          // Height fits the root's content box (see inputGroupControlHeightBySize).\n          'min-w-0 flex-1 bg-transparent px-3 text-foreground outline-hidden',\n          inputGroupControlHeightBySize,\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          // Hide native number-spinner arrows so consumers can compose their own\n          // stepper (see the NumberWithStepper story). WebKit uses the spin-button\n          // pseudo-elements; Firefox needs `appearance: textfield` on the input.\n          '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n          '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n          '[&[type=number]]:[appearance:textfield]',\n          // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n          // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  testId?: string;\n  error?: boolean;\n};\n\nconst InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(\n  ({ className, testId, error, ...props }, ref) => {\n    return (\n      <textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        data-testid={testId}\n        aria-invalid={error}\n        className={cn(\n          'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n          inputGroupControlTextBySize,\n          'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n          'focus:placeholder:opacity-70',\n          'disabled:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;\n\nconst InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(({ className, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nInputGroupText.displayName = 'InputGroupText';\n\nexport type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nconst InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(\n  ({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }, ref) => {\n    return <Button ref={ref} type={type} size={size} variant={variant} {...props} />;\n  },\n);\nInputGroupButton.displayName = 'InputGroupButton';\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"names":["cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","React","ControlSizeContext","jsx","controlHeight","cva","Button"],"mappings":"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"}

package/dist/layout/tabbed-container.cjs.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('../tabbed-container.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const combobox = require('../combobox-rKV-Lksj.cjs');
-const dataList = require('../data-list-D8bACyyK.cjs');
-const listSearch = require('../list-search-DXb7HFX8.cjs');
-const tabsContent = require('../tabs-content-DQNRMjup.cjs');
-const tabsTab = require('../tabs-tab-lm4xyjtD.cjs');
-const tabsRoot = require('../tabs-root-BqC8X_h6.cjs');
+const combobox = require('../combobox-DJ0c4o4S.cjs');
+const dataList = require('../data-list-Y42KyuI1.cjs');
+const listSearch = require('../list-search-BzAIj0DB.cjs');
+const tabsContent = require('../tabs-content-DnscxcLI.cjs');
+const tabsTab = require('../tabs-tab-BmIBFifi.cjs');
+const tabsRoot = require('../tabs-root-C-ePF1y9.cjs');
 const tooltip = require('../tooltip-DIZ5oqjV.cjs');
 const Txt = require('../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../cn-DG0X1KEP.cjs');

package/dist/layout/tabbed-container.es.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ListFilterIcon } from 'lucide-react';
 import { Children, isValidElement, useContext } from 'react';
-import { C as Combobox } from '../combobox-B_C0cNid.js';
-import { D as DataList } from '../data-list-DL_oFE4j.js';
-import { L as ListSearch } from '../list-search-9l8IEdxZ.js';
-import { T as TabContent } from '../tabs-content-h2qqD8t-.js';
-import { T as Tab, a as TabsContext } from '../tabs-tab-7e2as-AV.js';
-import { a as Tabs, T as TabList } from '../tabs-root-4vL8SHCO.js';
+import { C as Combobox } from '../combobox-B15qTrWO.js';
+import { D as DataList } from '../data-list-CyeD_u-6.js';
+import { L as ListSearch } from '../list-search-DI1DH7vU.js';
+import { T as TabContent } from '../tabs-content-CwbkTutf.js';
+import { T as Tab, a as TabsContext } from '../tabs-tab-DoPSW-1s.js';
+import { a as Tabs, T as TabList } from '../tabs-root-lrZZ3KwH.js';
 import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
 import { T as Txt } from '../Txt-BP1SRHmL.js';
 import { c as cn } from '../cn-65Adrsfj.js';

package/dist/lib/form/components/array-element-wrapper.cjs.js

@@ -9,7 +9,7 @@ const reactHookForm = require('react-hook-form');
 const lib_form_fieldContext = require('../field-context.cjs.js');
 const lib_form_useSectionDisclosure = require('../use-section-disclosure.cjs.js');
 const lib_form_utils = require('../utils.cjs.js');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const collapsible = require('../../../collapsible-jfzzU7Gp.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
@@ -54,7 +54,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
                   index + 1
                 ] }),
                 summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", title: summary, children: summary }),
-                invalid && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
+                invalid && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-foreground", children: "Needs input" })
               ]
             }
           ),

package/dist/lib/form/components/array-element-wrapper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-element-wrapper.cjs.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["isPlainObject","useContext","FieldPathContext","FormReadOnlyContext","ArrayAddButtonContext","useFormContext","useWatch","useRef","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","jsx","ChevronRight","Txt","Button","Trash2","CollapsibleContent","Check"],"mappings":"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"}
+{"version":3,"file":"array-element-wrapper.cjs.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-foreground\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["isPlainObject","useContext","FieldPathContext","FormReadOnlyContext","ArrayAddButtonContext","useFormContext","useWatch","useRef","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","jsx","ChevronRight","Txt","Button","Trash2","CollapsibleContent","Check"],"mappings":"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"}

package/dist/lib/form/components/array-element-wrapper.es.js

@@ -5,7 +5,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { FieldPathContext, FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
 import { useSectionDisclosure } from '../use-section-disclosure.es.js';
 import { isPlainObject } from '../utils.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-BNUn4644.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
@@ -50,7 +50,7 @@ function ArrayElementWrapper({ children, onRemove, index }) {
                   index + 1
                 ] }),
                 summary && /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", title: summary, children: summary }),
-                invalid && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
+                invalid && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-foreground", children: "Needs input" })
               ]
             }
           ),

package/dist/lib/form/components/array-element-wrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-element-wrapper.es.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"array-element-wrapper.es.js","sources":["../../../../src/lib/form/components/array-element-wrapper.tsx"],"sourcesContent":["import type { ArrayElementWrapperProps } from '@autoform/react';\nimport { Check, ChevronRight, Trash2 } from 'lucide-react';\nimport { useContext, useRef } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { ArrayAddButtonContext, FieldPathContext, FormReadOnlyContext } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { isPlainObject } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nconst HUMAN_SUMMARY_KEYS = ['title', 'name', 'label'];\n\nfunction firstFilledText(values: unknown[]) {\n  return values.find((value): value is string => typeof value === 'string' && value.trim().length > 0);\n}\n\nfunction itemSummary(value: unknown) {\n  if (typeof value === 'string') return value.trim();\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value);\n  if (!isPlainObject(value)) return undefined;\n  return firstFilledText(HUMAN_SUMMARY_KEYS.map(key => value[key])) ?? firstFilledText(Object.values(value));\n}\n\nexport function ArrayElementWrapper({ children, onRemove, index }: ArrayElementWrapperProps) {\n  const path = useContext(FieldPathContext);\n  const readOnly = useContext(FormReadOnlyContext);\n  const addButtonRef = useContext(ArrayAddButtonContext);\n  const { control } = useFormContext();\n  const value: unknown = useWatch({ control, name: path });\n  const summary = itemSummary(value);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, !summary);\n  const itemLabel = `Item ${index + 1}${summary ? `: ${summary}` : ''}`;\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"overflow-hidden rounded-lg border border-border bg-background motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1 pr-1\">\n        <CollapsibleTrigger\n          ref={triggerRef}\n          aria-label={invalid ? `${itemLabel}, Needs input` : itemLabel}\n          className=\"flex min-h-11 min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-caption focus-visible:-outline-offset-1\"\n        >\n          <ChevronRight aria-hidden className=\"size-3.5 shrink-0 text-muted-foreground\" />\n          <span className=\"shrink-0 text-muted-foreground\">Item {index + 1}</span>\n          {summary && (\n            <span className=\"truncate text-foreground\" title={summary}>\n              {summary}\n            </span>\n          )}\n          {invalid && (\n            <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-foreground\">\n              Needs input\n            </Txt>\n          )}\n        </CollapsibleTrigger>\n        {!readOnly && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            className=\"size-11\"\n            aria-label={`Remove item ${index + 1}`}\n            onClick={() => {\n              onRemove();\n              addButtonRef?.current?.focus();\n            }}\n          >\n            <Trash2 />\n          </Button>\n        )}\n      </div>\n      <CollapsibleContent keepMounted className=\"border-t border-border p-3\">\n        {children}\n        {!readOnly && (\n          <div className=\"flex justify-end pt-2\">\n            <Button\n              type=\"button\"\n              className=\"min-h-11\"\n              aria-label={`Done editing item ${index + 1}`}\n              onClick={() => {\n                setExpanded(false);\n                triggerRef.current?.focus();\n              }}\n              icon={<Check />}\n            >\n              Done\n            </Button>\n          </div>\n        )}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/lib/form/components/array-wrapper.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const lib_form_fieldContext = require('../field-context.cjs.js');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
 function ArrayWrapper({ label, children, onAddItem }) {

package/dist/lib/form/components/array-wrapper.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Brackets, Plus } from 'lucide-react';
 import { useContext, Children, useRef } from 'react';
 import { FormReadOnlyContext, ArrayAddButtonContext } from '../field-context.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
 function ArrayWrapper({ label, children, onAddItem }) {

package/dist/lib/form/components/boolean-field.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const checkbox = require('../../../checkbox-CI8JtZKS.cjs');
-const fieldBlock = require('../../../field-block-BIDi9Bvc.cjs');
+const fieldBlock = require('../../../field-block-DtaPqBa3.cjs');
 
 const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsxRuntime.jsx(

package/dist/lib/form/components/boolean-field.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { C as Checkbox } from '../../../checkbox-CQedzgsi.js';
-import { F as FieldBlock } from '../../../field-block-DpejZ6U6.js';
+import { F as FieldBlock } from '../../../field-block--PeppIRb.js';
 
 const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsx(

package/dist/lib/form/components/date-field.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const datePicker = require('../../../date-picker-dRZF8frf.cjs');
 const popover = require('../../../popover-lBqKiPtp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');

package/dist/lib/form/components/date-field.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { isValid, format } from 'date-fns';
 import { CalendarIcon, X } from 'lucide-react';
 import { useState, useEffect } from 'react';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { D as DatePicker } from '../../../date-picker-DgWTsiJ7.js';
 import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../../../popover-Dg70UGyn.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';

package/dist/lib/form/components/error-message.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Notice = require('../../../Notice-CEBwitdf.cjs');
+const Notice = require('../../../Notice-C4Tgmtgb.cjs');
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/error-message.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { N as Notice } from '../../../Notice-Ce3r5x-7.js';
+import { N as Notice } from '../../../Notice-B8RIClJD.js';
 
 const ErrorMessage = ({ error }) => /* @__PURE__ */ jsx(Notice, { variant: "destructive", title: error });
 

package/dist/lib/form/components/field-wrapper.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const fieldBlock = require('../../../field-block-BIDi9Bvc.cjs');
+const fieldBlock = require('../../../field-block-DtaPqBa3.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 
 const DISABLED_LABELS = ["boolean", "object", "array"];

package/dist/lib/form/components/field-wrapper.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { F as FieldBlock } from '../../../field-block-DpejZ6U6.js';
+import { F as FieldBlock } from '../../../field-block--PeppIRb.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 
 const DISABLED_LABELS = ["boolean", "object", "array"];

package/dist/lib/form/components/form-submit-row.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 

package/dist/lib/form/components/form-submit-row.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Loader2 } from 'lucide-react';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 

package/dist/lib/form/components/object-wrapper.cjs.js

@@ -30,7 +30,7 @@ function ObjectGroup({ label, children }) {
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, { "aria-hidden": true, className: "size-3.5" }),
             label
           ] }),
-          invalid && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
+          invalid && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-foreground", children: "Needs input" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { keepMounted: true, className: "border-l border-border pt-2 pl-4", children })
       ]

package/dist/lib/form/components/object-wrapper.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"object-wrapper.cjs.js","sources":["../../../../src/lib/form/components/object-wrapper.tsx"],"sourcesContent":["import type { ObjectWrapperProps } from '@autoform/react';\nimport { Braces, ChevronRight } from 'lucide-react';\nimport { useContext } from 'react';\nimport { FieldPathContext, ROOT_FIELD_KEY } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function ObjectWrapper({ label, children }: ObjectWrapperProps) {\n  if (label === ROOT_FIELD_KEY || label === '') return <div className=\"flex flex-col gap-2\">{children}</div>;\n\n  return <ObjectGroup label={label}>{children}</ObjectGroup>;\n}\n\nfunction ObjectGroup({ label, children }: Pick<ObjectWrapperProps, 'label' | 'children'>) {\n  const path = useContext(FieldPathContext);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, false);\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <CollapsibleTrigger className=\"flex min-h-11 w-full items-center gap-2 text-left text-caption text-muted-foreground\">\n        <ChevronRight aria-hidden className=\"size-3.5 shrink-0\" />\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Braces aria-hidden className=\"size-3.5\" />\n          {label}\n        </span>\n        {invalid && (\n          <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n            Needs input\n          </Txt>\n        )}\n      </CollapsibleTrigger>\n      <CollapsibleContent keepMounted className=\"border-l border-border pt-2 pl-4\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["ROOT_FIELD_KEY","jsx","useContext","FieldPathContext","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","ChevronRight","Braces","Txt","CollapsibleContent"],"mappings":";;;;;;;;;;;;AAQO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAS,EAAuB;AACrE,EAAA,IAAI,KAAA,KAAUA,wCAAkB,KAAA,KAAU,EAAA,yBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA;AAEpG,EAAA,uBAAOA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAe,QAAA,EAAS,CAAA;AAC9C;AAEA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmD;AACxF,EAAA,MAAM,IAAA,GAAOC,iBAAWC,sCAAgB,CAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,aAAY,GAAIC,kDAAA,CAAqB,MAAM,KAAK,CAAA;AAE3E,EAAA,uBACEC,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,YAAA,EAAc,WAAA;AAAA,MACd,SAAA,EAAU,yGAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,8BAAA,EAAA,EAAmB,WAAU,sFAAA,EAC5B,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACO,wBAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,0BACxDH,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EACd,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACQ,kBAAA,EAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,YACxC;AAAA,WAAA,EACH,CAAA;AAAA,UACC,OAAA,mCACEC,OAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,aAAA,EAEtF;AAAA,SAAA,EAEJ,CAAA;AAAA,uCACCC,8BAAA,EAAA,EAAmB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,oCACvC,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"object-wrapper.cjs.js","sources":["../../../../src/lib/form/components/object-wrapper.tsx"],"sourcesContent":["import type { ObjectWrapperProps } from '@autoform/react';\nimport { Braces, ChevronRight } from 'lucide-react';\nimport { useContext } from 'react';\nimport { FieldPathContext, ROOT_FIELD_KEY } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function ObjectWrapper({ label, children }: ObjectWrapperProps) {\n  if (label === ROOT_FIELD_KEY || label === '') return <div className=\"flex flex-col gap-2\">{children}</div>;\n\n  return <ObjectGroup label={label}>{children}</ObjectGroup>;\n}\n\nfunction ObjectGroup({ label, children }: Pick<ObjectWrapperProps, 'label' | 'children'>) {\n  const path = useContext(FieldPathContext);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, false);\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <CollapsibleTrigger className=\"flex min-h-11 w-full items-center gap-2 text-left text-caption text-muted-foreground\">\n        <ChevronRight aria-hidden className=\"size-3.5 shrink-0\" />\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Braces aria-hidden className=\"size-3.5\" />\n          {label}\n        </span>\n        {invalid && (\n          <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-foreground\">\n            Needs input\n          </Txt>\n        )}\n      </CollapsibleTrigger>\n      <CollapsibleContent keepMounted className=\"border-l border-border pt-2 pl-4\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":["ROOT_FIELD_KEY","jsx","useContext","FieldPathContext","useSectionDisclosure","jsxs","Collapsible","CollapsibleTrigger","ChevronRight","Braces","Txt","CollapsibleContent"],"mappings":";;;;;;;;;;;;AAQO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAS,EAAuB;AACrE,EAAA,IAAI,KAAA,KAAUA,wCAAkB,KAAA,KAAU,EAAA,yBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA;AAEpG,EAAA,uBAAOA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAe,QAAA,EAAS,CAAA;AAC9C;AAEA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmD;AACxF,EAAA,MAAM,IAAA,GAAOC,iBAAWC,sCAAgB,CAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,aAAY,GAAIC,kDAAA,CAAqB,MAAM,KAAK,CAAA;AAE3E,EAAA,uBACEC,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,YAAA,EAAc,WAAA;AAAA,MACd,SAAA,EAAU,yGAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,8BAAA,EAAA,EAAmB,WAAU,sFAAA,EAC5B,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACO,wBAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,0BACxDH,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EACd,QAAA,EAAA;AAAA,4BAAAJ,cAAA,CAACQ,kBAAA,EAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,YACxC;AAAA,WAAA,EACH,CAAA;AAAA,UACC,OAAA,mCACEC,OAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,8CAAA,EAA+C,QAAA,EAAA,aAAA,EAEvF;AAAA,SAAA,EAEJ,CAAA;AAAA,uCACCC,8BAAA,EAAA,EAAmB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,oCACvC,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/lib/form/components/object-wrapper.es.js

@@ -26,7 +26,7 @@ function ObjectGroup({ label, children }) {
             /* @__PURE__ */ jsx(Braces, { "aria-hidden": true, className: "size-3.5" }),
             label
           ] }),
-          invalid && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-indicator", children: "Needs input" })
+          invalid && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: "ml-auto shrink-0 text-destructive-foreground", children: "Needs input" })
         ] }),
         /* @__PURE__ */ jsx(CollapsibleContent, { keepMounted: true, className: "border-l border-border pt-2 pl-4", children })
       ]

package/dist/lib/form/components/object-wrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"object-wrapper.es.js","sources":["../../../../src/lib/form/components/object-wrapper.tsx"],"sourcesContent":["import type { ObjectWrapperProps } from '@autoform/react';\nimport { Braces, ChevronRight } from 'lucide-react';\nimport { useContext } from 'react';\nimport { FieldPathContext, ROOT_FIELD_KEY } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function ObjectWrapper({ label, children }: ObjectWrapperProps) {\n  if (label === ROOT_FIELD_KEY || label === '') return <div className=\"flex flex-col gap-2\">{children}</div>;\n\n  return <ObjectGroup label={label}>{children}</ObjectGroup>;\n}\n\nfunction ObjectGroup({ label, children }: Pick<ObjectWrapperProps, 'label' | 'children'>) {\n  const path = useContext(FieldPathContext);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, false);\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <CollapsibleTrigger className=\"flex min-h-11 w-full items-center gap-2 text-left text-caption text-muted-foreground\">\n        <ChevronRight aria-hidden className=\"size-3.5 shrink-0\" />\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Braces aria-hidden className=\"size-3.5\" />\n          {label}\n        </span>\n        {invalid && (\n          <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-indicator\">\n            Needs input\n          </Txt>\n        )}\n      </CollapsibleTrigger>\n      <CollapsibleContent keepMounted className=\"border-l border-border pt-2 pl-4\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAS,EAAuB;AACrE,EAAA,IAAI,KAAA,KAAU,kBAAkB,KAAA,KAAU,EAAA,yBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA;AAEpG,EAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAe,QAAA,EAAS,CAAA;AAC9C;AAEA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmD;AACxF,EAAA,MAAM,IAAA,GAAO,WAAW,gBAAgB,CAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,aAAY,GAAI,oBAAA,CAAqB,MAAM,KAAK,CAAA;AAE3E,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,YAAA,EAAc,WAAA;AAAA,MACd,SAAA,EAAU,yGAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,kBAAA,EAAA,EAAmB,WAAU,sFAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,0BACxD,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,YACxC;AAAA,WAAA,EACH,CAAA;AAAA,UACC,OAAA,wBACE,GAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,aAAA,EAEtF;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,kBAAA,EAAA,EAAmB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,oCACvC,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"object-wrapper.es.js","sources":["../../../../src/lib/form/components/object-wrapper.tsx"],"sourcesContent":["import type { ObjectWrapperProps } from '@autoform/react';\nimport { Braces, ChevronRight } from 'lucide-react';\nimport { useContext } from 'react';\nimport { FieldPathContext, ROOT_FIELD_KEY } from '../field-context';\nimport { useSectionDisclosure } from '../use-section-disclosure';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function ObjectWrapper({ label, children }: ObjectWrapperProps) {\n  if (label === ROOT_FIELD_KEY || label === '') return <div className=\"flex flex-col gap-2\">{children}</div>;\n\n  return <ObjectGroup label={label}>{children}</ObjectGroup>;\n}\n\nfunction ObjectGroup({ label, children }: Pick<ObjectWrapperProps, 'label' | 'children'>) {\n  const path = useContext(FieldPathContext);\n  const { expanded, invalid, setExpanded } = useSectionDisclosure(path, false);\n\n  return (\n    <Collapsible\n      open={expanded}\n      onOpenChange={setExpanded}\n      className=\"motion-reduce:[&_[data-slot=collapsible-content]]:transition-none motion-reduce:[&_svg]:transition-none\"\n    >\n      <CollapsibleTrigger className=\"flex min-h-11 w-full items-center gap-2 text-left text-caption text-muted-foreground\">\n        <ChevronRight aria-hidden className=\"size-3.5 shrink-0\" />\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Braces aria-hidden className=\"size-3.5\" />\n          {label}\n        </span>\n        {invalid && (\n          <Txt as=\"span\" variant=\"meta\" className=\"ml-auto shrink-0 text-destructive-foreground\">\n            Needs input\n          </Txt>\n        )}\n      </CollapsibleTrigger>\n      <CollapsibleContent keepMounted className=\"border-l border-border pt-2 pl-4\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,QAAA,EAAS,EAAuB;AACrE,EAAA,IAAI,KAAA,KAAU,kBAAkB,KAAA,KAAU,EAAA,yBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAS,CAAA;AAEpG,EAAA,uBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAe,QAAA,EAAS,CAAA;AAC9C;AAEA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmD;AACxF,EAAA,MAAM,IAAA,GAAO,WAAW,gBAAgB,CAAA;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,aAAY,GAAI,oBAAA,CAAqB,MAAM,KAAK,CAAA;AAE3E,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAA;AAAA,MACN,YAAA,EAAc,WAAA;AAAA,MACd,SAAA,EAAU,yGAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,kBAAA,EAAA,EAAmB,WAAU,sFAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,0BACxD,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,UAAA,EAAW,CAAA;AAAA,YACxC;AAAA,WAAA,EACH,CAAA;AAAA,UACC,OAAA,wBACE,GAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,8CAAA,EAA+C,QAAA,EAAA,aAAA,EAEvF;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,kBAAA,EAAA,EAAmB,WAAA,EAAW,IAAA,EAAC,SAAA,EAAU,oCACvC,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/lib/form/components/record-field.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const uuid = require('@lukeed/uuid');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const input = require('../../../input-bd223EJW.cjs');
 
 function _interopNamespaceDefault(e) {

package/dist/lib/form/components/record-field.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { v4 } from '@lukeed/uuid';
 import { TrashIcon, Plus } from 'lucide-react';
 import * as React from 'react';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { I as Input } from '../../../input-CHghVv3k.js';
 
 const RecordField = ({ inputProps, field }) => {

package/dist/lib/form/components/select-field.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const select = require('../../../select-C0ZGSJYa.cjs');
+const select = require('../../../select-DBY9LQFQ.cjs');
 
 const SelectField = ({ field, inputProps, error, id, value }) => {
   const {

package/dist/lib/form/components/select-field.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../../../select-ch8imm15.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../../../select-DZeNf-kI.js';
 
 const SelectField = ({ field, inputProps, error, id, value }) => {
   const {

package/dist/lib/form/components/submit-button.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "submit", children });
 

package/dist/lib/form/components/submit-button.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button, { type: "submit", children });
 

package/dist/{list-search-DXb7HFX8.cjs → list-search-BzAIj0DB.cjs}

@@ -3,7 +3,7 @@
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useDebounce = require('use-debounce');
-const searchFieldBlock = require('./search-field-block-B1eqMV8x.cjs');
+const searchFieldBlock = require('./search-field-block-DRa-ZNQj.cjs');
 const keyboard_useKeydown = require('./keyboard/use-keydown.cjs.js');
 require('./keyboard/keyboard-shortcuts-context.cjs.js');
 
@@ -68,4 +68,4 @@ const ListSearch = ({
 };
 
 exports.ListSearch = ListSearch;
-//# sourceMappingURL=list-search-DXb7HFX8.cjs.map
+//# sourceMappingURL=list-search-BzAIj0DB.cjs.map