import {
  Button
} from "../chunk-BFNQFABX.js";
import {
  AligncenterIcon,
  AlignleftIcon,
  AlignrightIcon,
  CalendarIcon,
  CheckboxIcon,
  ChevrondownIcon,
  ChevronleftIcon,
  ChevronrightIcon,
  CloseIcon,
  DashIcon,
  ImageIcon,
  ImagefitIcon,
  ImagefullIcon,
  ImagenarrowIcon,
  ImagewideIcon
} from "../chunk-M7BWH2NA.js";

// src/components/Button/Button.quanta.tsx
import "react";
import {
  composeRenderProps as composeRenderProps2,
  Button as RACButton
} from "react-aria-components";
import { tv as tv2 } from "tailwind-variants";

// src/components/utils.ts
import {
  useMemo,
  useLayoutEffect,
  useCallback,
  useRef,
  useState
} from "react";
import { composeRenderProps } from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { tv } from "tailwind-variants";
var focusRing = tv({
  base: "outline-quanta-cobalt outline forced-colors:outline-[Highlight]",
  variants: {
    isFocusVisible: {
      false: "outline-0",
      true: "outline-3"
    }
  }
});
function composeTailwindRenderProps(className, tw) {
  return composeRenderProps(className, (className2) => twMerge(tw, className2));
}
function useSlot(initialState = true) {
  const [hasSlot, setHasSlot] = useState(initialState);
  const hasRun = useRef(false);
  const ref = useCallback((el) => {
    hasRun.current = true;
    setHasSlot(!!el);
  }, []);
  useLayoutEffect(() => {
    if (!hasRun.current) {
      setHasSlot(false);
    }
  }, []);
  return [ref, hasSlot];
}

// src/components/Button/Button.quanta.tsx
import { jsx } from "react/jsx-runtime";
var button = tv2({
  extend: focusRing,
  base: "cursor-default rounded-md px-3 py-1.5 text-center text-base font-medium transition hover:shadow-sm focus:shadow-sm active:shadow-md has-[svg]:rounded-full has-[svg]:p-1.5 has-[svg]:text-xs",
  variants: {
    variant: {
      neutral: "pressed:bg-quanta-cobalt bg-quanta-air hover:bg-quanta-snow active:bg-quanta-silver focus:bg-quanta-snow text-quanta-iron has-[svg]:text-quanta-iron",
      primary: "pressed:bg-quanta-cobalt bg-quanta-air hover:bg-quanta-arctic hover:text-quanta-royal active:bg-quanta-sky active:text-quanta-royal focus:bg-quanta-artic focus:text-quanta-royal text-quanta-sapphire",
      destructive: "pressed:bg-quanta-rose active:bg-quanta-flamingo bg-quanta-air hover:bg-quanta-ballet hover:text-quanta-wine active:text-quanta-wine focus:bg-quanta-ballet focus:text-quanta-wine text-quanta-candy",
      icon: "pressed:bg-quanta-cobalt pressed:[&_svg]:text-white bg-quanta-air hover:bg-quanta-snow active:bg-quanta-silver focus:bg-quanta-artic text-quanta-iron has-[svg]:text-quanta-iron flex items-center justify-center border-0 p-1"
    },
    accent: {
      true: ""
    },
    size: {
      S: "text-xs has-[svg]:p-1.5 [&_svg]:size-5",
      L: "px-4.5 py-3 text-xl/6 has-[svg]:p-3 has-[svg]:text-xs"
    },
    isDisabled: {
      true: "bg-quanta-air hover:bg-quanta-air hover:text-quanta-silver has-[svg]:hover:text-quanta-silver text-quanta-smoke has-[svg]:text-quanta-smoke cursor-not-allowed"
    }
  },
  compoundVariants: [
    {
      variant: "neutral",
      accent: true,
      class: "pressed:bg-quanta-smoke focus:bg-quanta-smoke bg-quanta-snow hover:bg-quanta-smoke active:bg-quanta-silver text-quanta-iron"
    },
    {
      variant: "primary",
      accent: true,
      class: "text-quanta-air pressed:bg-quanta-cobalt bg-quanta-sapphire hover:bg-quanta-royal hover:text-quanta-air active:text-quanta-air focus:text-quanta-air active:bg-quanta-cobalt focus:bg-quanta-royal"
    },
    {
      variant: "icon",
      accent: true,
      class: "pressed:bg-quanta-cobalt pressed:[&_svg]:text-white bg-quanta-air hover:bg-quanta-snow active:bg-quanta-silver focus:bg-quanta-artic text-quanta-iron has-[svg]:text-quanta-iron flex items-center justify-center border-0 p-1"
    },
    {
      variant: "destructive",
      accent: true,
      class: "pressed:bg-quanta-rose active:bg-quanta-rose bg-quanta-candy hover:bg-quanta-wine focus:bg-quanta-wine text-quanta-air hover:text-quanta-air active:text-quanta-air focus:text-quanta-air"
    },
    {
      isDisabled: true,
      accent: true,
      class: "bg-quanta-snow hover:bg-quanta-smoke text-quanta-silver"
    }
  ],
  defaultVariants: {
    variant: "neutral"
  }
});
function Button2(props) {
  return /* @__PURE__ */ jsx(
    RACButton,
    {
      ...props,
      className: composeRenderProps2(
        props.className,
        (className, renderProps) => button({
          ...renderProps,
          variant: props.variant,
          size: props.size,
          accent: props.accent,
          className
        })
      )
    }
  );
}

// src/components/Breadcrumbs/Breadcrumbs.quanta.tsx
import "react";
import {
  Breadcrumbs as RACBreadcrumbs,
  Breadcrumb as RACBreadcrumb
} from "react-aria-components";
import { twMerge as twMerge2 } from "tailwind-merge";

// src/components/Link/Link.quanta.tsx
import "react";
import {
  Link as AriaLink,
  composeRenderProps as composeRenderProps3
} from "react-aria-components";
import { tv as tv3 } from "tailwind-variants";
import { jsx as jsx2 } from "react/jsx-runtime";
var styles = tv3({
  extend: focusRing,
  base: "rounded-xs underline transition disabled:cursor-default disabled:no-underline forced-colors:disabled:text-[GrayText]",
  variants: {
    variant: {
      primary: "text-quanta-sapphire decoration-quanta-sapphire/40 hover:decoration-quanta-royal hover:text-quanta-royal active:text-quanta-cobalt active:decoration-quanta-cobalt focus:decoration-quanta-royal focus:text-quanta-royal underline",
      secondary: "text-gray-700 underline decoration-gray-700/50 hover:decoration-gray-700"
    }
  },
  defaultVariants: {
    variant: "primary"
  }
});
function Link(props) {
  return /* @__PURE__ */ jsx2(
    AriaLink,
    {
      ...props,
      className: composeRenderProps3(
        props.className,
        (className, renderProps) => styles({ ...renderProps, className, variant: props.variant })
      )
    }
  );
}

// src/components/Breadcrumbs/Breadcrumbs.quanta.tsx
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
function Breadcrumb(props) {
  return /* @__PURE__ */ jsx3(
    RACBreadcrumb,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "flex items-center gap-1 [&_a>svg]:mx-1 [&_a>svg]:inline [&_a>svg]:align-text-top"
      ),
      children: ({ isCurrent }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        props.value?.icon && props.value?.icon,
        /* @__PURE__ */ jsx3(Link, { variant: "secondary", ...props }),
        !isCurrent && (props.separator ?? /* @__PURE__ */ jsx3(ChevronrightIcon, { className: "h-3 w-3 text-gray-600" }))
      ] })
    }
  );
}
function Breadcrumbs(props) {
  const { root, items, homeIcon } = props;
  let itemsWithRoot;
  if (root && items) {
    const icon = null;
    const rootItem = {
      "@id": root["@id"] || "/",
      title: "Home",
      icon
    };
    itemsWithRoot = [rootItem, ...items];
  }
  return /* @__PURE__ */ jsx3(
    RACBreadcrumbs,
    {
      ...props,
      items: itemsWithRoot || items,
      className: twMerge2("flex gap-1", props.className)
    }
  );
}

// src/components/Accordion/Accordion.quanta.tsx
import "react";
import {
  DisclosureGroup,
  Button as Button3,
  Disclosure,
  DisclosurePanel,
  Heading
} from "react-aria-components";
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var Accordion = ({ children, ref, className, ...props }) => {
  return /* @__PURE__ */ jsx4(
    DisclosureGroup,
    {
      ref,
      "data-slot": "disclosure-group",
      ...props,
      className: composeTailwindRenderProps(
        className,
        "peer cursor-pointer disabled:cursor-not-allowed disabled:opacity-75"
      ),
      children: (values) => /* @__PURE__ */ jsx4("div", { "data-slot": "disclosure-content", children: typeof children === "function" ? children(values) : children })
    }
  );
};
var AccordionItem = ({ className, ref, ...props }) => {
  return /* @__PURE__ */ jsx4(
    Disclosure,
    {
      ref,
      "data-slot": "disclosure",
      ...props,
      className: composeTailwindRenderProps(
        className,
        "peer group/disclosure border-border w-full min-w-60 border-b disabled:opacity-60"
      ),
      children: props.children
    }
  );
};
var AccordionItemTrigger = ({
  className,
  ref,
  ...props
}) => {
  return /* @__PURE__ */ jsx4(Heading, { children: /* @__PURE__ */ jsx4(
    Button3,
    {
      ref,
      slot: "trigger",
      className: composeTailwindRenderProps(
        className,
        "group/trigger open:text-fg focus:text-fg **:data-[slot=icon]:text-muted-fg flex w-full items-center justify-between gap-x-2 py-3 text-left font-medium focus:outline-hidden disabled:cursor-default disabled:opacity-50 **:data-[slot=disclosure-chevron]:size-5 **:data-[slot=icon]:-mx-0.5 **:data-[slot=icon]:shrink-0 sm:text-sm forced-colors:disabled:text-[GrayText] **:[span]:flex **:[span]:items-center **:[span]:gap-x-1 **:[span]:*:data-[slot=icon]:mr-1 [&[aria-expanded=true]_[data-slot=disclosure-chevron]]:-rotate-90"
      ),
      ...props,
      children: (values) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
        typeof props.children === "function" ? props.children(values) : props.children,
        /* @__PURE__ */ jsx4(
          ChevronleftIcon,
          {
            "data-slot": "disclosure-chevron",
            className: "internal-chevron ml-auto size-4 shrink-0 transition duration-300"
          }
        )
      ] })
    }
  ) });
};
var AccordionPanel = ({ className, ref, ...props }) => {
  return /* @__PURE__ */ jsx4(
    DisclosurePanel,
    {
      ref,
      "data-slot": "disclosure-panel",
      className: composeTailwindRenderProps(
        className,
        "text-muted-fg overflow-hidden text-sm transition-all **:data-[slot=disclosure-group]:border-t **:data-[slot=disclosure-group]:**:[.internal-chevron]:hidden has-data-[slot=disclosure-group]:**:[button]:px-4"
      ),
      ...props,
      children: /* @__PURE__ */ jsx4(
        "div",
        {
          "data-slot": "disclosure-panel-content",
          className: "pt-0 not-has-data-[slot=disclosure-group]:group-data-expanded/disclosure:pb-3 [&:has([data-slot=disclosure-group])_&]:px-11",
          children: props.children
        }
      )
    }
  );
};

// src/components/Calendar/Calendar.quanta.tsx
import "react";
import {
  Calendar as AriaCalendar,
  CalendarGridHeader as AriaCalendarGridHeader,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarHeaderCell,
  Heading as Heading2,
  Text,
  useLocale
} from "react-aria-components";
import { tv as tv4 } from "tailwind-variants";
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var cellStyles = tv4({
  extend: focusRing,
  base: "m-px flex h-9 w-9 cursor-default items-center justify-center rounded-full text-sm forced-color-adjust-none",
  variants: {
    isSelected: {
      false: "pressed:bg-gray-200 dark:pressed:bg-zinc-600 text-zinc-900 hover:bg-gray-100 dark:text-zinc-200 dark:hover:bg-zinc-700",
      true: "bg-blue-600 text-white invalid:bg-red-600 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:invalid:bg-[Mark]"
    },
    isDisabled: {
      true: "text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]"
    }
  }
});
function Calendar({
  errorMessage,
  ...props
}) {
  return /* @__PURE__ */ jsxs3(AriaCalendar, { ...props, children: [
    /* @__PURE__ */ jsx5(CalendarHeader, {}),
    /* @__PURE__ */ jsxs3(CalendarGrid, { children: [
      /* @__PURE__ */ jsx5(CalendarGridHeader, {}),
      /* @__PURE__ */ jsx5(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx5(CalendarCell, { date, className: cellStyles }) })
    ] }),
    errorMessage && /* @__PURE__ */ jsx5(Text, { slot: "errorMessage", className: "text-sm text-red-600", children: errorMessage })
  ] });
}
function CalendarHeader() {
  const { direction } = useLocale();
  return /* @__PURE__ */ jsxs3("header", { className: "flex w-full items-center gap-1 px-1 pb-4", children: [
    /* @__PURE__ */ jsx5(Button, { slot: "previous", children: direction === "rtl" ? /* @__PURE__ */ jsx5(ChevronrightIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx5(ChevronleftIcon, { "aria-hidden": true }) }),
    /* @__PURE__ */ jsx5(Heading2, { className: "mx-2 flex-1 text-center text-xl font-semibold text-zinc-900 dark:text-zinc-200" }),
    /* @__PURE__ */ jsx5(Button, { slot: "next", children: direction === "rtl" ? /* @__PURE__ */ jsx5(ChevronleftIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx5(ChevronrightIcon, { "aria-hidden": true }) })
  ] });
}
function CalendarGridHeader() {
  return /* @__PURE__ */ jsx5(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx5(CalendarHeaderCell, { className: "text-xs font-semibold text-gray-500", children: day }) });
}

// src/components/Checkbox/Checkbox.quanta.tsx
import "react";
import {
  Checkbox as AriaCheckbox,
  CheckboxGroup as AriaCheckboxGroup,
  composeRenderProps as composeRenderProps5
} from "react-aria-components";
import { tv as tv6 } from "tailwind-variants";

// src/components/Field/Field.quanta.tsx
import React6 from "react";
import {
  Group,
  FieldError as RACFieldError,
  Input as RACInput,
  Label as RACLabel,
  Text as Text2,
  composeRenderProps as composeRenderProps4,
  useRenderProps,
  FieldErrorContext,
  LabelContext,
  Provider,
  GroupContext,
  TextContext
} from "react-aria-components";
import { twMerge as twMerge3 } from "tailwind-merge";
import { tv as tv5 } from "tailwind-variants";
import { useField } from "react-aria";
import { filterDOMProps } from "@react-aria/utils";
import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
function Label(props) {
  return /* @__PURE__ */ jsx6(
    RACLabel,
    {
      ...props,
      className: twMerge3(
        "group-data-disabled:text-quanta-silver group-data-invalid:text-quanta-candy not-group-data-invalid:not-group-data-readonly:has-[+input:focus]:text-quanta-sapphire text-quanta-pigeon after:bg-quanta-candy w-fit cursor-default text-xs font-medium group-data-required:after:mx-1 group-data-required:after:inline-block group-data-required:after:h-2 group-data-required:after:w-2 group-data-required:after:rounded-4xl",
        props.className
      )
    }
  );
}
function Description(props) {
  return /* @__PURE__ */ jsx6(
    Text2,
    {
      ...props,
      slot: "description",
      className: twMerge3(
        "text-quanta-pigeon group-data-disabled:text-quanta-silver text-xs font-normal",
        props.className
      )
    }
  );
}
function FieldError(props) {
  return /* @__PURE__ */ jsx6(
    RACFieldError,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "text-quanta-candy text-xs font-normal forced-colors:text-[Mark]"
      )
    }
  );
}
var fieldBorderStyles = tv5({
  variants: {
    isFocusWithin: {
      false: "border-gray-300 forced-colors:border-[ButtonBorder]",
      true: "inset-ring-quanta-sapphire inset-ring-2 outline-2 group-data-readonly:inset-ring-0 forced-colors:border-[Highlight]"
    },
    isInvalid: {
      true: "bg-quanta-ballet hover:bg-quanta-flamingo focus:inset-ring-quanta-candy outline-2 focus:inset-ring-2 forced-colors:border-[Mark]"
    },
    isDisabled: {
      true: "bg-quanta-air hover:bg-quanta-air text-quanta-silver forced-colors:border-[GrayText]"
    }
  }
});
var fieldGroupStyles = tv5({
  extend: focusRing,
  base: "group bg-quanta-air flex h-9 items-center overflow-hidden rounded-lg border-2 forced-colors:bg-[Field]",
  variants: fieldBorderStyles.variants
});
function FieldGroup(props) {
  return /* @__PURE__ */ jsx6(
    Group,
    {
      ...props,
      className: composeRenderProps4(
        props.className,
        (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
      )
    }
  );
}
function Input(props) {
  return /* @__PURE__ */ jsx6(
    RACInput,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "text-quanta-space bg-quanta-snow hover:bg-quanta-smoke disabled:text-quanta-silver read-only:hover:bg-quanta-air read-only:bg-quanta-air focus:bg-quanta-air active:bg-quanta-air min-w-0 flex-1 p-3 text-sm outline read-only:border-1 read-only:border-dashed disabled:cursor-not-allowed"
      )
    }
  );
}
var Field = React6.forwardRef(
  (props, ref) => {
    const [labelRef] = useSlot(
      !props["aria-label"] && !props["aria-labelledby"]
    );
    const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
      ...props,
      isInvalid: props.isInvalid || false,
      errorMessage: props.errorMessage
    });
    const renderProps = useRenderProps({
      ...props,
      values: {
        isDisabled: props.isDisabled || false,
        isInvalid: props.isInvalid || false,
        isReadOnly: props.isReadOnly || false,
        isRequired: props.isRequired || false
      },
      defaultClassName: "react-aria-Field"
    });
    const DOMProps = filterDOMProps(props);
    return /* @__PURE__ */ jsx6(
      "div",
      {
        ...DOMProps,
        ...renderProps,
        ref,
        slot: props.slot || void 0,
        "data-disabled": props.isDisabled || void 0,
        "data-invalid": props.isInvalid || void 0,
        "data-readonly": props.isReadOnly || void 0,
        "data-required": props.isRequired || void 0,
        children: /* @__PURE__ */ jsx6(
          Provider,
          {
            values: [
              [LabelContext, { ...labelProps, ref: labelRef }],
              [
                GroupContext,
                {
                  role: "presentation",
                  isInvalid: props.isInvalid || false,
                  isDisabled: props.isDisabled || false
                }
              ],
              [
                TextContext,
                {
                  slots: {
                    description: descriptionProps,
                    errorMessage: errorMessageProps
                  }
                }
              ],
              [
                FieldErrorContext,
                {
                  isInvalid: props.isInvalid || false,
                  validationErrors: props.errorMessage ? [props.errorMessage] : [],
                  // @ts-expect-error We won't use validationDetails in this context
                  validationDetails: null
                }
              ]
            ],
            children: renderProps.children
          }
        )
      }
    );
  }
);
Field.displayName = "Field";
var FieldWrapper = (props) => {
  const { wrapped = true, children, label, description, errorMessage } = props;
  return wrapped ? /* @__PURE__ */ jsxs4(
    Field,
    {
      ...props,
      className: twMerge3(props.className, "group flex flex-col gap-1"),
      children: [
        label && /* @__PURE__ */ jsx6(Label, { children: label }),
        children,
        description && /* @__PURE__ */ jsx6(Description, { children: description }),
        /* @__PURE__ */ jsx6(FieldError, { children: errorMessage })
      ]
    }
  ) : /* @__PURE__ */ jsx6(Fragment3, { children });
};

// src/components/Checkbox/Checkbox.quanta.tsx
import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
function CheckboxGroup(props) {
  return /* @__PURE__ */ jsxs5(
    AriaCheckboxGroup,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "flex flex-col gap-2"
      ),
      children: [
        /* @__PURE__ */ jsx7(Label, { children: props.label }),
        props.children,
        props.description && /* @__PURE__ */ jsx7(Description, { children: props.description }),
        /* @__PURE__ */ jsx7(FieldError, { children: props.errorMessage })
      ]
    }
  );
}
var checkboxStyles = tv6({
  base: "group flex items-center gap-2 text-sm transition",
  variants: {
    isDisabled: {
      false: "text-quanta-cobalt",
      true: "text-quanta-iron forced-colors:text-[GrayText]"
    }
  }
});
var boxStyles = tv6({
  extend: focusRing,
  base: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2 transition",
  variants: {
    isSelected: {
      false: "group-pressed:border-quanta-silver border-quanta-pigeon bg-quanta-snow",
      true: "group-pressed:border-quanta-sapphire border-quanta-sapphire bg-quanta-sapphire forced-colors:![--color:Highlight]"
    },
    isInvalid: {
      true: "group-pressed:border-quanta-ruby border-quanta-ruby forced-colors:![--color:Mark]"
    },
    isDisabled: {
      true: "border-quanta-silver bg-quanta-smoke forced-colors:![--color:GrayText]"
    }
  }
});
var iconStyles = "w-4 h-4 text-white group-disabled:text-quanta-iron forced-colors:text-[HighlightText]";
function Checkbox(props) {
  return /* @__PURE__ */ jsx7(
    AriaCheckbox,
    {
      ...props,
      className: composeRenderProps5(
        props.className,
        (className, renderProps) => checkboxStyles({ ...renderProps, className })
      ),
      children: ({ isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ jsxs5(Fragment4, { children: [
        /* @__PURE__ */ jsx7(
          "div",
          {
            className: boxStyles({
              isSelected: isSelected || isIndeterminate,
              ...renderProps
            }),
            children: isIndeterminate ? /* @__PURE__ */ jsx7(DashIcon, { "aria-hidden": true, className: iconStyles }) : isSelected ? /* @__PURE__ */ jsx7(CheckboxIcon, { "aria-hidden": true, className: iconStyles }) : null
          }
        ),
        props.children
      ] })
    }
  );
}

// src/components/Container/Container.quanta.tsx
import "react";
import { tv as tv7 } from "tailwind-variants";
import { twMerge as twMerge4 } from "tailwind-merge";
import { jsx as jsx8 } from "react/jsx-runtime";
var Container = (props) => {
  const { as: Component = "div", children, width, ...rest } = props;
  const container = tv7({
    base: "@container mx-auto",
    variants: {
      width: {
        layout: "max-w-(--layout-container-width)",
        default: "max-w-(--default-container-width)",
        narrow: "max-w-(--narrow-container-width)",
        full: "w-full"
      }
    },
    defaultVariants: {
      width: "full"
    }
  });
  return /* @__PURE__ */ jsx8(
    Component,
    {
      ...rest,
      className: twMerge4(props.className, container({ width })),
      children
    }
  );
};

// src/components/TextField/TextField.quanta.tsx
import "react";
import {
  TextField as AriaTextField
} from "react-aria-components";
import { tv as tv8 } from "tailwind-variants";
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var inputStyles = tv8({
  extend: focusRing,
  base: "rounded-md",
  variants: {
    isFocused: fieldBorderStyles.variants.isFocusWithin,
    isInvalid: fieldBorderStyles.variants.isInvalid,
    isDisabled: fieldBorderStyles.variants.isDisabled
  }
});
function TextField({
  label,
  description,
  errorMessage,
  ...props
}) {
  return /* @__PURE__ */ jsxs6(
    AriaTextField,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "group flex flex-col gap-1"
      ),
      children: [
        label && /* @__PURE__ */ jsx9(Label, { children: label }),
        /* @__PURE__ */ jsx9(Input, { className: inputStyles }),
        description && /* @__PURE__ */ jsx9(Description, { children: description }),
        /* @__PURE__ */ jsx9(FieldError, { children: errorMessage })
      ]
    }
  );
}

// src/components/SizeWidget/SizeWidget.tsx
import "react";

// src/components/RadioGroup/RadioGroup.quanta.tsx
import "react";
import {
  composeRenderProps as composeRenderProps6,
  Radio as RACRadio,
  RadioGroup as RACRadioGroup
} from "react-aria-components";
import { tv as tv9 } from "tailwind-variants";
import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
function RadioGroup(props) {
  return /* @__PURE__ */ jsxs7(
    RACRadioGroup,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "group flex flex-col gap-2"
      ),
      children: [
        /* @__PURE__ */ jsx10(Label, { children: props.label }),
        /* @__PURE__ */ jsx10("div", { className: "group-orientation-vertical:flex-col group-orientation-horizontal:gap-4 flex gap-2", children: props.children }),
        props.description && /* @__PURE__ */ jsx10(Description, { children: props.description }),
        /* @__PURE__ */ jsx10(FieldError, { children: props.errorMessage })
      ]
    }
  );
}
var styles2 = tv9({
  extend: focusRing,
  base: "h-5 w-5 rounded-full border-2 bg-white transition-all dark:bg-zinc-900",
  variants: {
    isSelected: {
      false: "group-pressed:border-gray-500 dark:group-pressed:border-zinc-300 border-gray-400 dark:border-zinc-400",
      true: "group-pressed:border-gray-800 dark:group-pressed:border-slate-200 border-[7px] border-gray-700 dark:border-slate-300 forced-colors:border-[Highlight]!"
    },
    isInvalid: {
      true: "group-pressed:border-red-800 dark:group-pressed:border-red-700 border-red-700 dark:border-red-600 forced-colors:border-[Mark]!"
    },
    isDisabled: {
      true: "border-gray-200 dark:border-zinc-700 forced-colors:border-[GrayText]!"
    }
  }
});
function Radio(props) {
  return /* @__PURE__ */ jsx10(
    RACRadio,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "group flex items-center gap-2 text-sm text-gray-800 transition disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText]"
      ),
      children: (renderProps) => /* @__PURE__ */ jsxs7(Fragment5, { children: [
        /* @__PURE__ */ jsx10("div", { className: styles2(renderProps) }),
        props.children
      ] })
    }
  );
}
var customRadioButton = tv9({
  extend: focusRing,
  base: "text-quanta-iron flex h-10 w-10 cursor-pointer items-center justify-center rounded-md font-medium transition",
  variants: {
    isSelected: {
      false: "bg-quanta-air hover:bg-quanta-sky active:bg-quanta-silver focus:bg-quanta-snow",
      true: "pressed:bg-quanta-sky bg-quanta-sky hover:bg-quanta-sky active:bg-quanta-sky focus:bg-quanta-sky"
    },
    isPressed: {
      true: "pressed:bg-quanta-cobalt"
    },
    isInvalid: {
      true: "border border-red-700 text-red-700 dark:border-red-600 dark:text-red-600"
    },
    isDisabled: {
      true: "text-quanta-smoke"
    }
  }
});
function CustomRadio(props) {
  return /* @__PURE__ */ jsx10(
    RACRadio,
    {
      ...props,
      className: composeRenderProps6(
        props.className,
        (className, renderProps) => customRadioButton({
          ...renderProps,
          className
        })
      ),
      children: props.children
    }
  );
}

// src/components/SizeWidget/SizeWidget.tsx
import { jsx as jsx11 } from "react/jsx-runtime";
var defaultSizeActionsInfo = {
  s: ["S", "Small"],
  m: ["M", "Medium"],
  l: ["L", "Large"]
};
function SizeWidget(props) {
  const {
    id,
    onChange,
    actions = ["s", "m", "l"],
    actionsInfoMap,
    ...radioGroupProps
  } = props;
  const actionsInfo = {
    ...defaultSizeActionsInfo,
    ...actionsInfoMap
  };
  const handleChange = (selectedValue) => {
    if (onChange) {
      onChange(selectedValue);
    }
  };
  return /* @__PURE__ */ jsx11(
    RadioGroup,
    {
      ...radioGroupProps,
      onChange: handleChange,
      orientation: props.orientation || "horizontal",
      children: actions.map((action) => /* @__PURE__ */ jsx11(CustomRadio, { value: action, children: /* @__PURE__ */ jsx11("span", { "aria-label": actionsInfo[action][1], children: actionsInfo[action][0] }) }, action))
    }
  );
}

// src/components/AlignWidget/AlignWidget.tsx
import "react";
import { jsx as jsx12 } from "react/jsx-runtime";
var defaultActionsInfo = {
  left: [AlignleftIcon, "Left"],
  right: [AlignrightIcon, "Right"],
  center: [AligncenterIcon, "Center"],
  narrow: [ImageIcon, "Narrow"],
  wide: [ImageIcon, "Wide"],
  full: [ImagefullIcon, "Full"]
};
function AlignWidget(props) {
  const {
    id,
    onChange,
    actions = ["left", "right", "center", "full"],
    actionsInfoMap,
    ...radioGroupProps
  } = props;
  const actionsInfo = {
    ...defaultActionsInfo,
    ...actionsInfoMap
  };
  const handleChange = (selectedValue) => {
    if (onChange) {
      onChange(selectedValue);
    }
  };
  return /* @__PURE__ */ jsx12(
    RadioGroup,
    {
      ...radioGroupProps,
      onChange: handleChange,
      orientation: "horizontal",
      children: actions.map((action) => {
        const [IconComponent, label] = actionsInfo[action];
        return /* @__PURE__ */ jsx12(CustomRadio, { value: action, children: /* @__PURE__ */ jsx12(IconComponent, { size: "base", "aria-label": label }) }, action);
      })
    }
  );
}

// src/components/WidthWidget/WidthWidget.tsx
import "react";
import { jsx as jsx13 } from "react/jsx-runtime";
var defaultActionsInfo2 = {
  narrow: [ImagenarrowIcon, "Narrow"],
  default: [ImagefitIcon, "Default"],
  layout: [ImagewideIcon, "Layout"],
  full: [ImagefullIcon, "Full"]
};
function WidthWidget(props) {
  const {
    id,
    onChange,
    actions = ["narrow", "default", "layout", "full"],
    actionsInfoMap,
    ...radioGroupProps
  } = props;
  const actionsInfo = {
    ...defaultActionsInfo2,
    ...actionsInfoMap
  };
  const handleChange = (selectedValue) => {
    if (onChange) {
      onChange(selectedValue);
    }
  };
  return /* @__PURE__ */ jsx13(
    RadioGroup,
    {
      ...radioGroupProps,
      onChange: handleChange,
      orientation: "horizontal",
      children: actions.map((action) => {
        const [IconComponent, label] = actionsInfo[action];
        return /* @__PURE__ */ jsx13(CustomRadio, { value: action, children: /* @__PURE__ */ jsx13(IconComponent, { size: "base", "aria-label": label }) }, action);
      })
    }
  );
}

// src/components/DateTimePicker/DateTimePicker.quanta.tsx
import { useCallback as useCallback2, useState as useState2, useEffect } from "react";
import {
  DatePicker as AriaDatePicker
} from "react-aria-components";
import {
  now,
  getLocalTimeZone,
  parseDate,
  toZoned,
  parseAbsolute,
  ZonedDateTime
} from "@internationalized/date";

// src/components/Popover/Popover.quanta.tsx
import "react";
import {
  Popover as AriaPopover,
  composeRenderProps as composeRenderProps7,
  OverlayArrow,
  PopoverContext,
  useSlottedContext
} from "react-aria-components";
import { tv as tv10 } from "tailwind-variants";
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
var styles3 = tv10({
  base: "rounded-xl border border-black/10 bg-white bg-clip-padding text-slate-700 shadow-2xl dark:border-white/[15%] dark:bg-zinc-900/70 dark:text-zinc-300 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas]",
  variants: {
    isEntering: {
      true: "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 duration-200 ease-out"
    },
    isExiting: {
      true: "animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 duration-150 ease-in"
    }
  }
});
function Popover({
  children,
  showArrow,
  className,
  ...props
}) {
  const popoverContext = useSlottedContext(PopoverContext);
  const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
  let offset = showArrow ? 12 : 8;
  offset = isSubmenu ? offset - 6 : offset;
  return /* @__PURE__ */ jsxs8(
    AriaPopover,
    {
      offset,
      ...props,
      className: composeRenderProps7(
        className,
        (className2, renderProps) => styles3({ ...renderProps, className: className2 })
      ),
      children: [
        showArrow && /* @__PURE__ */ jsx14(OverlayArrow, { className: "group", children: /* @__PURE__ */ jsx14(
          "svg",
          {
            width: 12,
            height: 12,
            viewBox: "0 0 12 12",
            className: "group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90 block fill-white stroke-black/10 stroke-1 dark:fill-[#1f1f21] dark:stroke-zinc-600 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]",
            children: /* @__PURE__ */ jsx14("path", { d: "M0 0 L6 6 L12 0" })
          }
        ) }),
        children
      ]
    }
  );
}

// src/components/Dialog/Dialog.quanta.tsx
import "react";
import { Dialog as RACDialog } from "react-aria-components";
import { twMerge as twMerge5 } from "tailwind-merge";
import { jsx as jsx15 } from "react/jsx-runtime";
function Dialog(props) {
  return /* @__PURE__ */ jsx15(
    RACDialog,
    {
      ...props,
      className: twMerge5(
        "relative max-h-[inherit] overflow-auto p-6 outline outline-0 [[data-placement]>&]:p-4",
        props.className
      )
    }
  );
}

// src/components/DateInput/DateInput.quanta.tsx
import "react";
import {
  DateInput as AriaDateInput,
  composeRenderProps as composeRenderProps8,
  DateSegment
} from "react-aria-components";
import { tv as tv11 } from "tailwind-variants";
import { jsx as jsx16 } from "react/jsx-runtime";
var segmentStyles = tv11({
  base: "type-literal:px-0 inline rounded-xs p-0.5 text-gray-800 caret-transparent outline outline-0 forced-color-adjust-none dark:text-zinc-200 forced-colors:text-[ButtonText]",
  variants: {
    isPlaceholder: {
      true: "text-gray-600 italic dark:text-zinc-400"
    },
    isDisabled: {
      true: "text-gray-200 dark:text-zinc-600 forced-colors:text-[GrayText]"
    },
    isFocused: {
      true: "bg-blue-600 text-white dark:text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
    }
  }
});
function DateInput(props) {
  return /* @__PURE__ */ jsx16(
    AriaDateInput,
    {
      ...props,
      className: composeRenderProps8(
        props.className,
        (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
      ),
      children: (segment) => /* @__PURE__ */ jsx16(DateSegment, { segment, className: segmentStyles })
    }
  );
}

// src/components/DateTimePicker/DateTimePicker.quanta.tsx
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
function isDateOnly(granularity) {
  return granularity === "day";
}
function utcStringToLocalDateValue(utcString, isDateOnly2) {
  if (!utcString) return null;
  if (isDateOnly2) {
    return parseDate(utcString);
  }
  try {
    const localTimeZone = getLocalTimeZone();
    return parseAbsolute(utcString, localTimeZone);
  } catch (error) {
    console.warn("Failed to parse UTC string:", utcString, error);
    return null;
  }
}
function DateTimePicker({
  label,
  description,
  errorMessage,
  resettable = true,
  value,
  defaultValue,
  onChange,
  isDisabled,
  granularity = "minute",
  ...props
}) {
  const [internalValue, setInternalValue] = useState2(() => {
    const initialValue = value ?? defaultValue ?? null;
    return utcStringToLocalDateValue(initialValue, isDateOnly(granularity));
  });
  useEffect(() => {
    if (value !== void 0) {
      setInternalValue(
        utcStringToLocalDateValue(value, isDateOnly(granularity))
      );
    }
  }, [value, granularity]);
  const handleReset = useCallback2(() => {
    setInternalValue(null);
    if (onChange) {
      onChange(null);
    }
  }, [onChange]);
  const handleDateChange = useCallback2(
    (newValue) => {
      if (!isDateOnly(granularity) && !internalValue && newValue) {
        const currentTime = now(getLocalTimeZone());
        const localZoned = toZoned(
          newValue,
          getLocalTimeZone()
        );
        const dateTimeValue = localZoned.set({
          hour: currentTime.hour,
          minute: currentTime.minute,
          second: currentTime.second
        });
        setInternalValue(dateTimeValue);
        if (onChange) {
          onChange(dateTimeValue.toAbsoluteString());
        }
        return;
      }
      setInternalValue(newValue);
      if (onChange && newValue) {
        if (newValue instanceof ZonedDateTime) {
          onChange(newValue.toAbsoluteString());
        } else {
          onChange(newValue.toString());
        }
      }
    },
    [onChange, internalValue, granularity]
  );
  return /* @__PURE__ */ jsx17("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs9(
    AriaDatePicker,
    {
      ...props,
      value: value !== void 0 ? internalValue : internalValue,
      defaultValue: value === void 0 ? utcStringToLocalDateValue(
        defaultValue ?? null,
        isDateOnly(granularity)
      ) : void 0,
      onChange: handleDateChange,
      granularity,
      isDisabled,
      className: composeTailwindRenderProps(
        props.className,
        "group flex flex-col gap-1"
      ),
      children: [
        label && /* @__PURE__ */ jsx17(Label, { children: label }),
        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsxs9(FieldGroup, { className: "w-auto min-w-[208px]", children: [
            /* @__PURE__ */ jsx17(DateInput, { className: "min-w-[150px] flex-1 border-0 px-2 py-1.5 text-sm" }),
            /* @__PURE__ */ jsx17(
              Button2,
              {
                variant: "icon",
                className: "mr-1 w-7 rounded-xs outline-offset-0",
                children: /* @__PURE__ */ jsx17(CalendarIcon, { "aria-hidden": true, className: "h-4 w-4" })
              }
            )
          ] }),
          resettable && /* @__PURE__ */ jsx17(
            Button2,
            {
              variant: "icon",
              className: "h-7 w-7 flex-shrink-0 p-1",
              onPress: handleReset,
              isDisabled: isDisabled || !internalValue || props.isReadOnly,
              "aria-label": "Clear date and time",
              slot: null,
              children: /* @__PURE__ */ jsx17(CloseIcon, { className: "h-4 w-4" })
            }
          )
        ] }),
        description && /* @__PURE__ */ jsx17(Description, { children: description }),
        /* @__PURE__ */ jsx17(FieldError, { children: errorMessage }),
        /* @__PURE__ */ jsx17(Popover, { children: /* @__PURE__ */ jsx17(Dialog, { children: /* @__PURE__ */ jsx17(Calendar, {}) }) })
      ]
    }
  ) });
}

// src/components/DatePicker/DatePicker.quanta.tsx
import "react";
import "react-aria-components";
import { jsx as jsx18 } from "react/jsx-runtime";
function DatePicker({
  label,
  description,
  errorMessage,
  ...props
}) {
  return /* @__PURE__ */ jsx18(
    DateTimePicker,
    {
      ...props,
      label,
      description,
      errorMessage,
      granularity: "day"
    }
  );
}

// src/components/TimeField/TimeField.quanta.tsx
import "react";
import {
  TimeField as AriaTimeField
} from "react-aria-components";
import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
function TimeField({
  label,
  description,
  errorMessage,
  ...props
}) {
  return /* @__PURE__ */ jsxs10(AriaTimeField, { ...props, children: [
    /* @__PURE__ */ jsx19(Label, { children: label }),
    /* @__PURE__ */ jsx19(DateInput, { className: "w-fit px-2" }),
    description && /* @__PURE__ */ jsx19(Description, { children: description }),
    /* @__PURE__ */ jsx19(FieldError, { children: errorMessage })
  ] });
}

// src/components/MultiSelect/MultiSelect.quanta.tsx
import { useRef as useRef3, useState as useState3, useEffect as useEffect2, useCallback as useCallback3, useId } from "react";
import {
  Button as Button4,
  ComboBox,
  Input as Input2,
  ListBox,
  Popover as Popover2,
  ListBoxItem,
  TagGroup,
  TagList,
  Tag
} from "react-aria-components";
import { useListData } from "react-stately";
import { useFilter } from "react-aria";
import { twMerge as twMerge6 } from "tailwind-merge";
import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
function MultiSelect({
  label,
  placeholder = "Select items...",
  items,
  className = "",
  description,
  onItemCleared,
  onItemInserted,
  renderEmptyState,
  selectedItems,
  creatable = true,
  ...props
}) {
  const triggerRef = useRef3(null);
  const tagGroupIdentifier = useId();
  const selectedKeys = selectedItems?.items.map((i) => i.id);
  const [width, setWidth] = useState3(0);
  const { contains } = useFilter({ sensitivity: "base" });
  const filter = useCallback3(
    (item, filterText) => {
      return !selectedKeys.includes(item.id) && contains(item.name, filterText);
    },
    [contains, selectedKeys]
  );
  const accessibleList = useListData({
    initialItems: items,
    filter
  });
  const [fieldState, setFieldState] = useState3({
    selectedKey: null,
    inputValue: ""
  });
  const onRemove = useCallback3(
    (keys) => {
      const key = keys.values().next().value;
      if (key) {
        selectedItems.remove(key);
        setFieldState({
          inputValue: "",
          selectedKey: null
        });
        onItemCleared?.(key);
      }
    },
    [selectedItems, onItemCleared]
  );
  const onSelectionChange = (id) => {
    if (!id) {
      return;
    }
    const item = accessibleList.getItem(id);
    if (!item) {
      return;
    }
    if (!selectedKeys.includes(id)) {
      selectedItems.append(item);
      setFieldState({
        inputValue: "",
        selectedKey: id
      });
      onItemInserted?.(id);
    }
    accessibleList.setFilterText("");
  };
  const onInputChange = (value) => {
    setFieldState((prev) => ({
      inputValue: value,
      selectedKey: value === "" ? null : prev.selectedKey
    }));
    accessibleList.setFilterText(value);
  };
  useEffect2(() => {
    const trigger = triggerRef.current;
    if (!trigger) return;
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setWidth(entry.target.clientWidth);
      }
    });
    observer.observe(trigger);
    return () => {
      observer.unobserve(trigger);
    };
  }, []);
  const onCreateTag = useCallback3(() => {
    const inputValue = fieldState.inputValue.trim();
    const id = inputValue.toLocaleLowerCase();
    let item = accessibleList.getItem(id);
    if (!item) {
      item = {
        id,
        name: inputValue
      };
      setFieldState((prev) => ({
        ...prev,
        inputValue: "",
        selectedKey: id
      }));
      accessibleList.append(item);
      selectedItems.append(item);
    }
  }, [fieldState.inputValue, accessibleList, selectedItems, setFieldState]);
  const popLast = useCallback3(() => {
    if (selectedItems.items.length === 0) {
      return;
    }
    const endKey = selectedItems.items[selectedItems.items.length - 1];
    if (endKey) {
      selectedItems.remove(endKey.id);
      onItemCleared?.(endKey.id);
    }
    setFieldState({
      inputValue: "",
      selectedKey: null
    });
  }, [selectedItems, onItemCleared]);
  const onKeyDownCapture = useCallback3(
    (e) => {
      if (e.key === "Backspace" && fieldState.inputValue === "") {
        popLast();
      }
      if (e.key === "Enter" && fieldState.inputValue && creatable && accessibleList.items.length === 0) {
        onCreateTag();
      }
    },
    [popLast, fieldState.inputValue, onCreateTag, creatable, accessibleList]
  );
  return /* @__PURE__ */ jsxs11("div", { className: twMerge6("w-full", className), children: [
    label && /* @__PURE__ */ jsx20(Label, { children: label }),
    /* @__PURE__ */ jsx20("div", { ref: triggerRef, className: "relative", children: /* @__PURE__ */ jsxs11("div", { className: "relative flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-1.5 shadow-sm focus-within:border-gray-500 focus-within:ring-2 focus-within:ring-gray-400", children: [
      /* @__PURE__ */ jsx20(
        TagGroup,
        {
          id: tagGroupIdentifier,
          "aria-label": "Selected items",
          onRemove,
          children: /* @__PURE__ */ jsx20(
            TagList,
            {
              items: selectedItems.items,
              className: "flex flex-wrap items-center gap-1",
              children: (item) => /* @__PURE__ */ jsxs11(
                Tag,
                {
                  className: "inline-flex items-center gap-x-1.5 rounded-md bg-gray-200 px-2 py-0.5 text-sm text-gray-800",
                  textValue: item.name,
                  id: item.id,
                  children: [
                    item.name,
                    /* @__PURE__ */ jsx20(
                      Button4,
                      {
                        slot: "remove",
                        className: "grid cursor-pointer place-content-center text-gray-500 hover:bg-gray-600 hover:text-gray-300 focus:bg-gray-600 focus:outline-none",
                        type: "button",
                        children: /* @__PURE__ */ jsx20(CloseIcon, { size: "xs" })
                      }
                    )
                  ]
                }
              )
            }
          )
        }
      ),
      /* @__PURE__ */ jsxs11(
        ComboBox,
        {
          ...props,
          allowsEmptyCollection: true,
          "aria-label": "Available items",
          items: accessibleList.items,
          selectedKey: fieldState.selectedKey,
          inputValue: fieldState.inputValue,
          onSelectionChange,
          onInputChange,
          className: "relative flex flex-1",
          children: [
            /* @__PURE__ */ jsx20(
              Input2,
              {
                placeholder,
                onBlur: () => {
                  setFieldState({
                    inputValue: "",
                    selectedKey: null
                  });
                  accessibleList.setFilterText("");
                },
                onKeyDownCapture,
                className: "min-w-0 flex-1 bg-white px-2 py-1.5 text-sm text-gray-800 outline-0 disabled:text-gray-200"
              }
            ),
            /* @__PURE__ */ jsx20(
              Button4,
              {
                className: "absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 focus:outline-none",
                type: "button",
                children: /* @__PURE__ */ jsx20(ChevrondownIcon, {})
              }
            ),
            /* @__PURE__ */ jsx20(
              Popover2,
              {
                isNonModal: true,
                trigger: "ComboBox",
                triggerRef,
                style: { width: `${width}px` },
                className: "max-w-none overflow-hidden",
                children: /* @__PURE__ */ jsx20(
                  ListBox,
                  {
                    selectionMode: "multiple",
                    className: "rounded-md border border-gray-200 bg-white p-1 shadow-lg",
                    disallowEmptySelection: false,
                    renderEmptyState: renderEmptyState ? () => renderEmptyState(fieldState.inputValue) : () => /* @__PURE__ */ jsx20(
                      "div",
                      {
                        className: "block cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none",
                        role: "button",
                        onMouseDown: (e) => {
                          e.stopPropagation();
                          if (fieldState.inputValue && creatable) {
                            onCreateTag();
                          }
                        },
                        tabIndex: 0,
                        children: fieldState.inputValue ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
                          creatable ? "Create:" : "No results found for:",
                          " ",
                          /* @__PURE__ */ jsx20("strong", { className: "font-medium text-gray-900", children: fieldState.inputValue })
                        ] }) : "No options"
                      }
                    ),
                    children: (item) => /* @__PURE__ */ jsx20(
                      ListBoxItem,
                      {
                        id: item.id,
                        textValue: item.name,
                        className: "cursor-pointer rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none data-[focused]:bg-gray-100",
                        children: item.name
                      },
                      item.id
                    )
                  }
                )
              }
            )
          ]
        }
      )
    ] }) }),
    description && /* @__PURE__ */ jsx20(Description, { children: description })
  ] });
}

// src/components/Separator/Separator.quanta.tsx
import "react";
import {
  Separator as RACSeparator
} from "react-aria-components";
import { tv as tv12 } from "tailwind-variants";
import { jsx as jsx21 } from "react/jsx-runtime";
var styles4 = tv12({
  base: "bg-gray-300 dark:bg-zinc-600 forced-colors:bg-[ButtonBorder]",
  variants: {
    orientation: {
      horizontal: "h-px w-full",
      vertical: "w-px"
    }
  },
  defaultVariants: {
    orientation: "horizontal"
  }
});
function Separator(props) {
  return /* @__PURE__ */ jsx21(
    RACSeparator,
    {
      ...props,
      className: styles4({
        orientation: props.orientation,
        className: props.className
      })
    }
  );
}

// src/components/Tabs/Tabs.quanta.tsx
import "react";
import {
  composeRenderProps as composeRenderProps9,
  Tabs as RACTabs,
  Tab as RACTab,
  TabPanel as RACTabPanel,
  TabList as RACTabList
} from "react-aria-components";
import { tv as tv13 } from "tailwind-variants";
import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
var tabs = tv13({
  base: "",
  variants: {
    orientation: {
      vertical: "flex flex-row",
      horizontal: "flex flex-col"
    }
  }
});
var tabListStyles = tv13({
  base: "flex gap-1",
  variants: {
    orientation: {
      horizontal: "flex-row",
      vertical: "flex-col items-start"
    }
  }
});
function TabList(props) {
  return /* @__PURE__ */ jsx22(
    RACTabList,
    {
      ...props,
      className: composeRenderProps9(
        props.className,
        (className, renderProps) => tabListStyles({ ...renderProps, className })
      )
    }
  );
}
var tabProps = tv13({
  extend: focusRing,
  base: "flex cursor-default items-center px-4 py-1.5 text-sm font-medium transition",
  variants: {
    isSelected: {
      false: "pressed:text-gray-700 dark:pressed:text-zinc-200 pressed:bg-gray-200 dark:pressed:bg-zinc-800 text-gray-600 hover:bg-gray-200 hover:text-gray-700 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
      true: "bg-gray-800 text-white dark:bg-zinc-200 dark:text-black forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
    },
    isDisabled: {
      true: "selected:text-gray-300 dark:selected:text-zinc-500 forced-colors:selected:text-[HighlightText] selected:bg-gray-200 dark:selected:bg-zinc-600 forced-colors:selected:bg-[GrayText] text-gray-200 dark:text-zinc-600 forced-colors:text-[GrayText]"
    }
  }
});
function Tab(props) {
  return /* @__PURE__ */ jsx22(
    RACTab,
    {
      ...props,
      className: composeRenderProps9(
        props.className,
        (className, renderProps) => tabProps({ ...renderProps, className })
      )
    }
  );
}
var tabPanelStyles = tv13({
  extend: focusRing,
  base: "flex-1 p-4 text-sm text-gray-900 dark:text-zinc-100"
});
function TabPanel(props) {
  return /* @__PURE__ */ jsx22(
    RACTabPanel,
    {
      ...props,
      className: composeRenderProps9(
        props.className,
        (className, renderProps) => tabPanelStyles({ ...renderProps, className })
      )
    }
  );
}
function Tabs(props) {
  return /* @__PURE__ */ jsxs12(
    RACTabs,
    {
      ...props,
      orientation: props.orientation || "horizontal",
      className: composeRenderProps9(
        props.className,
        (className, renderProps) => tabs({
          ...renderProps,
          orientation: props.orientation,
          className
        })
      ),
      children: [
        /* @__PURE__ */ jsx22(
          TabList,
          {
            className: composeRenderProps9(
              props.className,
              (className, renderProps) => tabListStyles({
                ...renderProps,
                orientation: props.orientation || "horizontal",
                className
              })
            ),
            children: props.tabs.map((tab) => /* @__PURE__ */ jsx22(Tab, { id: tab.id, children: tab.title }, tab.id))
          }
        ),
        props.tabs.map((tab) => /* @__PURE__ */ jsx22(TabPanel, { id: tab.id, className: "p-3", children: tab.content }, tab.id))
      ]
    }
  );
}

// src/components/GridList/GridList.quanta.tsx
import "react";
import {
  GridList as AriaGridList,
  GridListItem as AriaGridListItem,
  Button as Button5
} from "react-aria-components";
import { tv as tv14 } from "tailwind-variants";
import { twMerge as twMerge7 } from "tailwind-merge";
import "clsx";
import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
function GridList({
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx23(
    AriaGridList,
    {
      ...props,
      className: composeTailwindRenderProps(
        props.className,
        "relative overflow-auto rounded-lg border"
      ),
      children
    }
  );
}
var itemStyles = tv14({
  extend: focusRing,
  //   Data- selectors not even showing up, wtf
  base: "relative -mb-px flex cursor-default gap-3 border-y border-transparent px-3 py-2 text-sm -outline-offset-2 select-none first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0",
  variants: {
    isSelected: {
      false: "hover:bg-gray-100",
      true: "z-20"
    },
    isDisabled: {
      true: "z-10 forced-colors:text-[GrayText]"
    }
  }
});
function GridListItem({
  children,
  className = "",
  ...props
}) {
  const textValue = typeof children === "string" ? children : void 0;
  return /* @__PURE__ */ jsx23(
    AriaGridListItem,
    {
      textValue,
      ...props,
      className: (renderProps) => twMerge7(
        itemStyles(renderProps),
        typeof className === "function" ? className(renderProps) : className
      ),
      children: ({ selectionMode, selectionBehavior, allowsDragging }) => /* @__PURE__ */ jsxs13(Fragment7, { children: [
        allowsDragging && /* @__PURE__ */ jsx23(Button5, { slot: "drag", children: "\u2261" }),
        selectionMode === "multiple" && selectionBehavior === "toggle" && /* @__PURE__ */ jsx23(Checkbox, { slot: "selection" }),
        children
      ] })
    }
  );
}

// src/components/TagGroup/TagGroup.quanta.tsx
import { createContext, useContext } from "react";
import {
  Tag as AriaTag,
  TagGroup as AriaTagGroup,
  Button as Button6,
  TagList as TagList2,
  Text as Text3,
  composeRenderProps as composeRenderProps10
} from "react-aria-components";
import { twMerge as twMerge8 } from "tailwind-merge";
import { tv as tv15 } from "tailwind-variants";
import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
var colors = {
  gray: "bg-quanta-silver text-foreground border-gray-200 hover:border-gray-300  ",
  green: "bg-green-100 text-green-700 border-green-200 hover:border-green-300 dark:bg-green-300/20 dark:text-green-400 dark:border-green-300/10 dark:hover:border-green-300/20",
  yellow: "bg-yellow-100 text-yellow-700 border-yellow-200 hover:border-yellow-300 dark:bg-yellow-300/20 dark:text-yellow-400 dark:border-yellow-300/10 dark:hover:border-yellow-300/20",
  blue: "bg-blue-100 text-blue-700 border-blue-200 hover:border-blue-300 dark:bg-blue-400/20 dark:text-blue-300 dark:border-blue-400/10 dark:hover:border-blue-400/20"
};
var ColorContext = createContext("gray");
var tagStyles = tv15({
  extend: focusRing,
  base: "flex max-w-fit cursor-default items-center gap-1 rounded-sm border px-3 py-0.5 text-xs transition",
  variants: {
    color: {
      gray: "",
      green: "",
      yellow: "",
      blue: ""
    },
    allowsRemoving: {
      true: "pr-1"
    },
    isSelected: {
      true: "border-transparent"
    },
    isDisabled: {
      true: "bg-quanta-pigeon text-gray-300"
    }
  },
  compoundVariants: Object.keys(colors).map((color) => ({
    isSelected: false,
    isDisabled: false,
    color,
    class: colors[color]
  }))
});
function TagGroup2({
  label,
  description,
  errorMessage,
  items,
  children,
  renderEmptyState,
  ...props
}) {
  return /* @__PURE__ */ jsxs14(
    AriaTagGroup,
    {
      ...props,
      className: twMerge8("flex flex-col gap-1", props.className),
      children: [
        /* @__PURE__ */ jsx24(Label, { children: label }),
        /* @__PURE__ */ jsx24(ColorContext.Provider, { value: props.color || "gray", children: /* @__PURE__ */ jsx24(
          TagList2,
          {
            items,
            renderEmptyState,
            className: "flex flex-wrap gap-1",
            children
          }
        ) }),
        description && /* @__PURE__ */ jsx24(Description, { children: description }),
        errorMessage && /* @__PURE__ */ jsx24(Text3, { slot: "errorMessage", className: "text-sm text-red-600", children: errorMessage })
      ]
    }
  );
}
var removeButtonStyles = tv15({
  extend: focusRing,
  base: "flex cursor-default items-center justify-center rounded-full p-0.5 transition-[background-color]"
});
function Tag2({ children, color, ...props }) {
  const textValue = typeof children === "string" ? children : void 0;
  const groupColor = useContext(ColorContext);
  return /* @__PURE__ */ jsx24(
    AriaTag,
    {
      textValue,
      ...props,
      className: composeRenderProps10(
        props.className,
        (className, renderProps) => tagStyles({ ...renderProps, className, color: color || groupColor })
      ),
      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs14(Fragment8, { children: [
        children,
        allowsRemoving && /* @__PURE__ */ jsx24(Button6, { slot: "remove", className: removeButtonStyles, children: /* @__PURE__ */ jsx24(CloseIcon, { "aria-hidden": true, className: "h-3 w-3" }) })
      ] })
    }
  );
}
export {
  Accordion,
  AccordionItem,
  AccordionItemTrigger,
  AccordionPanel,
  AlignWidget,
  Breadcrumb,
  Breadcrumbs,
  Button2 as Button,
  Calendar,
  CalendarGridHeader,
  CalendarHeader,
  Checkbox,
  CheckboxGroup,
  Container,
  CustomRadio,
  DateInput,
  DatePicker,
  DateTimePicker,
  Description,
  Field,
  FieldError,
  FieldGroup,
  FieldWrapper,
  GridList,
  GridListItem,
  Input,
  Label,
  Link,
  MultiSelect,
  Radio,
  RadioGroup,
  Separator,
  SizeWidget,
  Tab,
  TabList,
  TabPanel,
  Tabs,
  Tag2 as Tag,
  TagGroup2 as TagGroup,
  TextField,
  TimeField,
  WidthWidget,
  fieldBorderStyles,
  fieldGroupStyles
};
