@spear-ai/spectral 1.13.0 → 1.14.1

package/dist/ControlGroup/ControlGroupSelect.js

@@ -1,128 +1,170 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { getStateClasses as t } from "../utils/formFieldUtils.js";
-import { Label as n } from "../Label.js";
-import { Input as r } from "../primitives/input.js";
-import { i, l as a, n as o, t as s, u as c } from "../select-oAOoVl5g.js";
-import { ControlGroup as l, ControlGroupItem as u, useControlGroup as d } from "../ControlGroup.js";
-import { useId as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { getStateClasses } from "../utils/formFieldUtils.js";
+import { Label } from "../Label.js";
+import { Input } from "../primitives/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../primitives/select.js";
+import { ControlGroup, ControlGroupItem, useControlGroup } from "../ControlGroup.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/ControlGroup/ControlGroupSelect.tsx
-var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", _ = "Amount", v = "Select an option", y = "flex w-full min-w-0 flex-col gap-1.5", b = "!h-12 min-h-12 !border-2 border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", x = (e, t = 0) => {
-	let n = e?.trim();
-	if (n) return `${Math.max(n.length + t, 8)}ch`;
-}, S = (e, t) => {
-	let n = e?.trim();
-	return n && n.length > 0 ? n : t;
-}, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, id: s, dropdownWidth: c = "trigger", inputAriaLabel: u, inputPlaceholder: d, inputValue: p, maxAmount: h = 1e6, minAmount: g = 0, onInputChange: y, orientation: b = "horizontal", selectAriaLabel: C, selectOptions: T, selectPlaceholder: E, state: D = "default", type: O = "number", warningMessage: k, ...A }) => {
-	let j = f(), M = s ?? j, N = `${M}-amount`, P = `${M}-select`, F = `${N}-label`, I = `${P}-label`, L = n === "above", R = L ? void 0 : d, z = L ? void 0 : E, B = S(d, _), V = S(E, v), H = u ?? (L ? void 0 : B), U = C ?? (L ? void 0 : V), W = x(d, 3), G = x(E, 5), K = t ?? `${B} and ${V}`, q = !!a, J = p !== void 0 && y !== void 0;
-	return /* @__PURE__ */ m(l, {
-		"aria-label": K,
-		className: r,
-		"data-testid": i,
-		disabled: a,
-		errorMessage: o,
-		id: M,
-		orientation: b,
-		state: D,
-		warningMessage: k,
-		children: /* @__PURE__ */ m(w, {
-			amountStep: e,
-			dataTestId: i,
-			inputAccessibleName: H,
-			inputCaption: R,
-			inputId: N,
-			inputLabelId: F,
-			inputLabelText: B,
-			inputMinWidth: W,
-			inputValue: J ? p : void 0,
-			isDisabled: q,
-			maxAmount: h,
-			minAmount: g,
-			onInputChange: J ? y : void 0,
-			dropdownWidth: c,
-			selectCaption: z,
-			selectOptions: T,
-			selectLabelId: I,
-			selectLabelText: V,
-			selectProps: A,
-			selectTriggerAriaLabel: U,
-			selectTriggerId: P,
-			selectTriggerMinWidth: G,
-			type: O,
-			useAboveLabels: L
+const numberInputNoSpinner = "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
+const defaultInputLabel = "Amount";
+const defaultSelectLabel = "Select an option";
+const fieldStackClass = "flex w-full min-w-0 flex-col gap-1.5";
+const groupedFieldBaseClasses = "h-12! min-h-12! border-2! border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus-visible:border-input-border--focus focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled";
+const getFieldMinWidth = (caption, extraCharacters = 0) => {
+	const normalizedCaption = caption?.trim();
+	if (!normalizedCaption) return void 0;
+	return `${Math.max(normalizedCaption.length + extraCharacters, 8)}ch`;
+};
+const getReadableLabel = (label, fallback) => {
+	const normalizedLabel = label?.trim();
+	return normalizedLabel && normalizedLabel.length > 0 ? normalizedLabel : fallback;
+};
+const ControlGroupSelect = ({ amountStep, ariaLabel, captionLayout = "inline", className, dataTestId = "spectral-control-group-select", disabled, errorMessage, id, dropdownWidth = "trigger", inputAriaLabel, inputPlaceholder, inputItemClassName, inputValue, maxAmount = 1e6, minAmount = 0, onInputChange, orientation = "horizontal", selectAriaLabel, selectItemClassName, selectOptions, selectPlaceholder, state = "default", type = "number", warningMessage, ...selectProps }) => {
+	const baseId = useId();
+	const idPrefix = id ?? baseId;
+	const inputId = `${idPrefix}-amount`;
+	const selectTriggerId = `${idPrefix}-select`;
+	const inputLabelId = `${inputId}-label`;
+	const selectLabelId = `${selectTriggerId}-label`;
+	const useAboveLabels = captionLayout === "above";
+	const inputCaption = useAboveLabels ? void 0 : inputPlaceholder;
+	const selectCaption = useAboveLabels ? void 0 : selectPlaceholder;
+	const inputLabelText = getReadableLabel(inputPlaceholder, defaultInputLabel);
+	const selectLabelText = getReadableLabel(selectPlaceholder, defaultSelectLabel);
+	const inputAccessibleName = inputAriaLabel ?? (useAboveLabels ? void 0 : inputLabelText);
+	const selectTriggerAriaLabel = selectAriaLabel ?? (useAboveLabels ? void 0 : selectLabelText);
+	const inputMinWidth = getFieldMinWidth(inputPlaceholder, 3);
+	const selectTriggerMinWidth = getFieldMinWidth(selectPlaceholder, 5);
+	const groupAriaLabel = ariaLabel ?? `${inputLabelText} and ${selectLabelText}`;
+	const isDisabled = !!disabled;
+	const isInputControlled = inputValue !== void 0 && onInputChange !== void 0;
+	return /* @__PURE__ */ jsx(ControlGroup, {
+		"aria-label": groupAriaLabel,
+		className,
+		"data-testid": dataTestId,
+		disabled,
+		errorMessage,
+		id: idPrefix,
+		orientation,
+		state,
+		warningMessage,
+		children: /* @__PURE__ */ jsx(ControlGroupSelectInner, {
+			amountStep,
+			dataTestId,
+			inputAccessibleName,
+			inputCaption,
+			inputId,
+			inputLabelId,
+			inputLabelText,
+			inputItemClassName,
+			inputMinWidth,
+			inputValue: isInputControlled ? inputValue : void 0,
+			isDisabled,
+			maxAmount,
+			minAmount,
+			onInputChange: isInputControlled ? onInputChange : void 0,
+			dropdownWidth,
+			selectCaption,
+			selectOptions,
+			selectLabelId,
+			selectLabelText,
+			selectItemClassName,
+			selectProps,
+			selectTriggerAriaLabel,
+			selectTriggerId,
+			selectTriggerMinWidth,
+			type,
+			useAboveLabels
 		})
 	});
-}, w = ({ amountStep: l, dataTestId: f, dropdownWidth: _, inputAccessibleName: v, inputCaption: x, inputId: S, inputLabelId: C, inputLabelText: w, inputMinWidth: T, inputValue: E, isDisabled: D, maxAmount: O, minAmount: k, onInputChange: A, selectCaption: j, selectLabelId: M, selectLabelText: N, selectOptions: P, selectProps: F, selectTriggerAriaLabel: I, selectTriggerId: L, selectTriggerMinWidth: R, type: z, useAboveLabels: B }) => {
-	let { messageId: V, orientation: H, state: U } = d(), W = H === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", G = H === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", K = H === "horizontal" ? "me-0" : "mbe-0", q = H === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", J = /* @__PURE__ */ m(r, {
-		"aria-describedby": V,
-		"aria-label": v,
-		"aria-labelledby": B ? C : void 0,
-		className: e(b, W, t(U), z === "number" && g, z === "number" && "tabular-nums"),
-		"data-testid": `${f}-input`,
-		disabled: D,
-		id: B ? S : void 0,
-		type: z === "number" ? "number" : "text",
-		placeholder: x,
-		style: T ? { minWidth: T } : void 0,
-		min: k ?? 0,
-		max: O ?? 1e6,
-		...E !== void 0 && A !== void 0 ? {
-			value: E,
-			onChange: A
+};
+const ControlGroupSelectInner = ({ amountStep, dataTestId, dropdownWidth, inputAccessibleName, inputCaption, inputId, inputLabelId, inputLabelText, inputItemClassName, inputMinWidth, inputValue, isDisabled, maxAmount, minAmount, onInputChange, selectCaption, selectLabelId, selectLabelText, selectItemClassName, selectOptions, selectProps, selectTriggerAriaLabel, selectTriggerId, selectTriggerMinWidth, type, useAboveLabels }) => {
+	const { messageId, orientation, state } = useControlGroup();
+	const isSelectOpenControlled = selectProps.open !== void 0;
+	const handleSelectOpenChange = (nextOpen) => {
+		selectProps.onOpenChange?.(nextOpen);
+	};
+	const inputRadiusClasses = orientation === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none";
+	const selectRadiusClasses = orientation === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md";
+	const firstItemAboveLabelClasses = orientation === "horizontal" ? "me-0" : "mbe-0";
+	const secondItemAboveLabelClasses = orientation === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5";
+	const inputElement = /* @__PURE__ */ jsx(Input, {
+		"aria-describedby": messageId,
+		"aria-label": inputAccessibleName,
+		"aria-labelledby": useAboveLabels ? inputLabelId : void 0,
+		className: cn(groupedFieldBaseClasses, inputRadiusClasses, getStateClasses(state), type === "number" && numberInputNoSpinner, type === "number" && "tabular-nums"),
+		"data-testid": `${dataTestId}-input`,
+		disabled: isDisabled,
+		id: useAboveLabels ? inputId : void 0,
+		type: type === "number" ? "number" : "text",
+		placeholder: inputCaption,
+		style: inputMinWidth ? { minWidth: inputMinWidth } : void 0,
+		min: minAmount ?? 0,
+		max: maxAmount ?? 1e6,
+		...inputValue !== void 0 && onInputChange !== void 0 ? {
+			value: inputValue,
+			onChange: onInputChange
 		} : {},
-		step: l ?? 1
-	}), Y = /* @__PURE__ */ m(a, {
-		"aria-describedby": V,
-		"aria-label": I,
-		"aria-labelledby": B ? M : void 0,
-		className: e(b, G, "px-4 w-full justify-between focus-visible:ring-0", t(U)),
-		"data-testid": `${f}-select-trigger`,
-		disabled: D,
-		id: B ? L : void 0,
-		style: R ? { minWidth: R } : void 0,
-		children: /* @__PURE__ */ m(c, {
+		step: amountStep ?? 1
+	});
+	const selectTriggerElement = /* @__PURE__ */ jsx(SelectTrigger, {
+		"aria-describedby": messageId,
+		"aria-label": selectTriggerAriaLabel,
+		"aria-labelledby": useAboveLabels ? selectLabelId : void 0,
+		className: cn("text-input-text data-placeholder:text-input-text-placeholder!", selectRadiusClasses, "px-4 w-full justify-between focus-visible:border-input-border--focus focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus", getStateClasses(state)),
+		"data-testid": `${dataTestId}-select-trigger`,
+		disabled: isDisabled,
+		id: useAboveLabels ? selectTriggerId : void 0,
+		style: selectTriggerMinWidth ? { minWidth: selectTriggerMinWidth } : void 0,
+		children: /* @__PURE__ */ jsx(SelectValue, {
 			className: "min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!",
-			placeholder: j
+			placeholder: selectCaption
 		})
 	});
-	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
-		className: B ? K : void 0,
-		children: B ? /* @__PURE__ */ h("div", {
-			className: y,
-			children: [/* @__PURE__ */ m(n, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ControlGroupItem, {
+		className: cn(useAboveLabels ? firstItemAboveLabelClasses : void 0, inputItemClassName),
+		children: useAboveLabels ? /* @__PURE__ */ jsxs("div", {
+			className: fieldStackClass,
+			children: [/* @__PURE__ */ jsx(Label, {
 				className: "text-text-primary",
-				htmlFor: S,
-				id: C,
-				children: w
-			}), J]
-		}) : J
-	}), /* @__PURE__ */ h(s, {
-		"data-testid": `${f}-select-root`,
-		disabled: D,
-		...F,
-		children: [/* @__PURE__ */ m(u, {
-			className: B ? q : void 0,
-			children: B ? /* @__PURE__ */ h("div", {
-				className: y,
-				children: [/* @__PURE__ */ m(n, {
+				htmlFor: inputId,
+				id: inputLabelId,
+				children: inputLabelText
+			}), inputElement]
+		}) : inputElement
+	}), /* @__PURE__ */ jsxs(Select, {
+		...selectProps,
+		"data-testid": `${dataTestId}-select-root`,
+		disabled: isDisabled,
+		...isSelectOpenControlled ? { open: selectProps.open } : {},
+		onOpenChange: handleSelectOpenChange,
+		children: [/* @__PURE__ */ jsx(ControlGroupItem, {
+			className: cn(useAboveLabels ? secondItemAboveLabelClasses : void 0, selectItemClassName),
+			children: useAboveLabels ? /* @__PURE__ */ jsxs("div", {
+				className: fieldStackClass,
+				children: [/* @__PURE__ */ jsx(Label, {
 					className: "text-text-primary",
-					htmlFor: L,
-					id: M,
-					children: N
-				}), Y]
-			}) : Y
-		}), /* @__PURE__ */ m(o, {
-			"data-testid": `${f}-select-content`,
-			dropdownWidth: _,
-			children: P.map((e) => /* @__PURE__ */ m(i, {
-				disabled: e.disabled,
-				value: e.value,
-				children: e.label
-			}, e.value))
+					htmlFor: selectTriggerId,
+					id: selectLabelId,
+					children: selectLabelText
+				}), selectTriggerElement]
+			}) : selectTriggerElement
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			"data-testid": `${dataTestId}-select-content`,
+			dropdownWidth,
+			children: selectOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				disabled: option.disabled,
+				value: option.value,
+				children: option.label
+			}, option.value))
 		})]
 	})] });
 };
+
 //#endregion
-export { C as ControlGroupSelect };
+export { ControlGroupSelect };
+//# sourceMappingURL=ControlGroupSelect.js.map

package/dist/ControlGroup/ControlGroupSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroupSelect.js","names":[],"sources":["../../src/components/ControlGroup/ControlGroupSelect.tsx"],"sourcesContent":["import { Label } from '@components/Label/Label'\nimport { Input } from '@primitives/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@primitives/select'\nimport { getStateClasses, type DropdownWidth, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useId, type ComponentProps } from 'react'\nimport { ControlGroup, ControlGroupItem, useControlGroup, type ControlGroupProps } from './ControlGroup'\n\nconst numberInputNoSpinner = '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'\nconst defaultInputLabel = 'Amount'\nconst defaultSelectLabel = 'Select an option'\n\nexport interface SelectOptionType {\n  disabled?: boolean\n  label: string\n  value: string\n}\n\n/** `inline`: `inputPlaceholder` / `selectPlaceholder` show inside the fields. `above`: same strings render as labels above each control (no inner placeholders). */\nexport type ControlGroupSelectCaptionLayout = 'above' | 'inline'\n\ntype ControlGroupSelectInputControlProps =\n  | {\n      inputValue: ComponentProps<typeof Input>['value']\n      onInputChange: ComponentProps<typeof Input>['onChange']\n    }\n  | {\n      inputValue?: undefined\n      onInputChange?: undefined\n    }\n\ntype ControlGroupSelectBaseProps = ComponentProps<typeof Select> &\n  Pick<ControlGroupProps, 'orientation'> & {\n    amountStep?: number\n    /** Accessible name for the group wrapper (use when there is no visible group heading). */\n    ariaLabel?: string\n    captionLayout?: ControlGroupSelectCaptionLayout\n    className?: string\n    dataTestId?: string\n    disabled?: boolean\n    dropdownWidth?: DropdownWidth\n    errorMessage?: string | string[] | Record<string, unknown> | null\n    id?: string\n    /** Class applied to the input `ControlGroupItem` segment for width/split composition. */\n    inputItemClassName?: string\n    /** When `captionLayout` is `inline`, overrides the input's accessible name (defaults to `inputPlaceholder` when set). */\n    inputAriaLabel?: string\n    inputPlaceholder?: string\n    maxAmount?: number\n    minAmount?: number\n    selectPlaceholder?: string\n    /** When `captionLayout` is `inline` and `selectPlaceholder` is empty, sets the select trigger's accessible name. */\n    selectAriaLabel?: string\n    /** Class applied to the select `ControlGroupItem` segment for width/split composition. */\n    selectItemClassName?: string\n    selectOptions: SelectOptionType[]\n    state?: Exclude<FormFieldState, 'disabled'>\n    type?: 'number' | 'text'\n    warningMessage?: string | string[] | Record<string, unknown> | null\n  }\n\nexport type ControlGroupSelectProps = ControlGroupSelectBaseProps & ControlGroupSelectInputControlProps\n\nconst fieldStackClass = 'flex w-full min-w-0 flex-col gap-1.5'\nconst groupedFieldBaseClasses =\n  'h-12! min-h-12! border-2! border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus-visible:border-input-border--focus focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled'\n\nconst getFieldMinWidth = (caption?: string, extraCharacters: number = 0): string | undefined => {\n  const normalizedCaption = caption?.trim()\n  if (!normalizedCaption) return undefined\n  return `${Math.max(normalizedCaption.length + extraCharacters, 8)}ch`\n}\n\nconst getReadableLabel = (label: string | undefined, fallback: string): string => {\n  const normalizedLabel = label?.trim()\n  return normalizedLabel && normalizedLabel.length > 0 ? normalizedLabel : fallback\n}\n\nexport const ControlGroupSelect = ({\n  amountStep,\n  ariaLabel,\n  captionLayout = 'inline',\n  className,\n  dataTestId = 'spectral-control-group-select',\n  disabled,\n  errorMessage,\n  id,\n  dropdownWidth = 'trigger',\n  inputAriaLabel,\n  inputPlaceholder,\n  inputItemClassName,\n  inputValue,\n  maxAmount = 1000000,\n  minAmount = 0,\n  onInputChange,\n  orientation = 'horizontal',\n  selectAriaLabel,\n  selectItemClassName,\n  selectOptions,\n  selectPlaceholder,\n  state = 'default',\n  type = 'number',\n  warningMessage,\n  ...selectProps\n}: ControlGroupSelectProps) => {\n  const baseId = useId()\n  const idPrefix = id ?? baseId\n  const inputId = `${idPrefix}-amount`\n  const selectTriggerId = `${idPrefix}-select`\n  const inputLabelId = `${inputId}-label`\n  const selectLabelId = `${selectTriggerId}-label`\n\n  const useAboveLabels = captionLayout === 'above'\n  const inputCaption = useAboveLabels ? undefined : inputPlaceholder\n  const selectCaption = useAboveLabels ? undefined : selectPlaceholder\n  const inputLabelText = getReadableLabel(inputPlaceholder, defaultInputLabel)\n  const selectLabelText = getReadableLabel(selectPlaceholder, defaultSelectLabel)\n\n  const inputAccessibleName = inputAriaLabel ?? (useAboveLabels ? undefined : inputLabelText)\n  const selectTriggerAriaLabel = selectAriaLabel ?? (useAboveLabels ? undefined : selectLabelText)\n  const inputMinWidth = getFieldMinWidth(inputPlaceholder, 3)\n  const selectTriggerMinWidth = getFieldMinWidth(selectPlaceholder, 5)\n  const groupAriaLabel = ariaLabel ?? `${inputLabelText} and ${selectLabelText}`\n\n  const isDisabled = !!disabled\n  const isInputControlled = inputValue !== undefined && onInputChange !== undefined\n\n  return (\n    <ControlGroup aria-label={groupAriaLabel} className={className} data-testid={dataTestId} disabled={disabled} errorMessage={errorMessage} id={idPrefix} orientation={orientation} state={state} warningMessage={warningMessage}>\n      <ControlGroupSelectInner\n        amountStep={amountStep}\n        dataTestId={dataTestId}\n        inputAccessibleName={inputAccessibleName}\n        inputCaption={inputCaption}\n        inputId={inputId}\n        inputLabelId={inputLabelId}\n        inputLabelText={inputLabelText}\n        inputItemClassName={inputItemClassName}\n        inputMinWidth={inputMinWidth}\n        inputValue={isInputControlled ? inputValue : undefined}\n        isDisabled={isDisabled}\n        maxAmount={maxAmount}\n        minAmount={minAmount}\n        onInputChange={isInputControlled ? onInputChange : undefined}\n        dropdownWidth={dropdownWidth}\n        selectCaption={selectCaption}\n        selectOptions={selectOptions}\n        selectLabelId={selectLabelId}\n        selectLabelText={selectLabelText}\n        selectItemClassName={selectItemClassName}\n        selectProps={selectProps}\n        selectTriggerAriaLabel={selectTriggerAriaLabel}\n        selectTriggerId={selectTriggerId}\n        selectTriggerMinWidth={selectTriggerMinWidth}\n        type={type}\n        useAboveLabels={useAboveLabels}\n      />\n    </ControlGroup>\n  )\n}\n\ninterface ControlGroupSelectInnerProps {\n  amountStep?: number\n  dataTestId: string\n  dropdownWidth: DropdownWidth\n  inputAccessibleName?: string\n  inputCaption?: string\n  inputId: string\n  inputLabelId: string\n  inputLabelText: string\n  inputItemClassName?: string\n  inputMinWidth?: string\n  inputValue?: ComponentProps<typeof Input>['value']\n  isDisabled: boolean\n  maxAmount: number\n  minAmount: number\n  onInputChange?: ComponentProps<typeof Input>['onChange']\n  selectCaption?: string\n  selectLabelId: string\n  selectLabelText: string\n  selectItemClassName?: string\n  selectOptions: SelectOptionType[]\n  selectProps: Omit<ComponentProps<typeof Select>, 'children'>\n  selectTriggerAriaLabel?: string\n  selectTriggerId: string\n  selectTriggerMinWidth?: string\n  type: 'number' | 'text'\n  useAboveLabels: boolean\n}\n\nconst ControlGroupSelectInner = ({\n  amountStep,\n  dataTestId,\n  dropdownWidth,\n  inputAccessibleName,\n  inputCaption,\n  inputId,\n  inputLabelId,\n  inputLabelText,\n  inputItemClassName,\n  inputMinWidth,\n  inputValue,\n  isDisabled,\n  maxAmount,\n  minAmount,\n  onInputChange,\n  selectCaption,\n  selectLabelId,\n  selectLabelText,\n  selectItemClassName,\n  selectOptions,\n  selectProps,\n  selectTriggerAriaLabel,\n  selectTriggerId,\n  selectTriggerMinWidth,\n  type,\n  useAboveLabels,\n}: ControlGroupSelectInnerProps) => {\n  const { messageId, orientation, state } = useControlGroup()\n  const isSelectOpenControlled = selectProps.open !== undefined\n  const handleSelectOpenChange: NonNullable<ComponentProps<typeof Select>['onOpenChange']> = (nextOpen) => {\n    selectProps.onOpenChange?.(nextOpen)\n  }\n\n  const inputRadiusClasses = orientation === 'horizontal' ? 'rounded-s-md rounded-e-none' : 'rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none'\n  const selectRadiusClasses = orientation === 'horizontal' ? 'rounded-s-none rounded-e-md' : 'rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md'\n  const firstItemAboveLabelClasses = orientation === 'horizontal' ? 'me-0' : 'mbe-0'\n  const secondItemAboveLabelClasses = orientation === 'horizontal' ? 'me-0 [&>*:last-child]:-ms-0.5' : 'mbe-0 [&>*:last-child]:-mt-0.5'\n\n  const inputElement = (\n    <Input\n      aria-describedby={messageId}\n      aria-label={inputAccessibleName}\n      aria-labelledby={useAboveLabels ? inputLabelId : undefined}\n      className={cn(groupedFieldBaseClasses, inputRadiusClasses, getStateClasses(state), type === 'number' && numberInputNoSpinner, type === 'number' && 'tabular-nums')}\n      data-testid={`${dataTestId}-input`}\n      disabled={isDisabled}\n      id={useAboveLabels ? inputId : undefined}\n      type={type === 'number' ? 'number' : 'text'}\n      placeholder={inputCaption}\n      style={inputMinWidth ? { minWidth: inputMinWidth } : undefined}\n      min={minAmount ?? 0}\n      max={maxAmount ?? 1000000}\n      {...(inputValue !== undefined && onInputChange !== undefined ? { value: inputValue, onChange: onInputChange } : {})}\n      step={amountStep ?? 1}\n    />\n  )\n\n  const selectTriggerElement = (\n    <SelectTrigger\n      aria-describedby={messageId}\n      aria-label={selectTriggerAriaLabel}\n      aria-labelledby={useAboveLabels ? selectLabelId : undefined}\n      className={cn(\n        'text-input-text data-placeholder:text-input-text-placeholder!',\n        selectRadiusClasses,\n        'px-4 w-full justify-between focus-visible:border-input-border--focus focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus',\n        getStateClasses(state),\n      )}\n      data-testid={`${dataTestId}-select-trigger`}\n      disabled={isDisabled}\n      id={useAboveLabels ? selectTriggerId : undefined}\n      style={selectTriggerMinWidth ? { minWidth: selectTriggerMinWidth } : undefined}\n    >\n      <SelectValue className='min-w-0 block max-w-full truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!' placeholder={selectCaption} />\n    </SelectTrigger>\n  )\n\n  return (\n    <>\n      <ControlGroupItem className={cn(useAboveLabels ? firstItemAboveLabelClasses : undefined, inputItemClassName)}>\n        {useAboveLabels ? (\n          <div className={fieldStackClass}>\n            <Label className='text-text-primary' htmlFor={inputId} id={inputLabelId}>\n              {inputLabelText}\n            </Label>\n            {inputElement}\n          </div>\n        ) : (\n          inputElement\n        )}\n      </ControlGroupItem>\n      <Select {...selectProps} data-testid={`${dataTestId}-select-root`} disabled={isDisabled} {...(isSelectOpenControlled ? { open: selectProps.open } : {})} onOpenChange={handleSelectOpenChange}>\n        <ControlGroupItem className={cn(useAboveLabels ? secondItemAboveLabelClasses : undefined, selectItemClassName)}>\n          {useAboveLabels ? (\n            <div className={fieldStackClass}>\n              <Label className='text-text-primary' htmlFor={selectTriggerId} id={selectLabelId}>\n                {selectLabelText}\n              </Label>\n              {selectTriggerElement}\n            </div>\n          ) : (\n            selectTriggerElement\n          )}\n        </ControlGroupItem>\n        <SelectContent data-testid={`${dataTestId}-select-content`} dropdownWidth={dropdownWidth}>\n          {selectOptions.map((option) => (\n            <SelectItem disabled={option.disabled} key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/ControlGroup.d.ts

@@ -1,25 +1,43 @@
-import { Slot } from './primitives/slot';
-import { FormFieldState } from './utils/formFieldUtils';
-import { ComponentProps } from 'react';
+'use client';
+import { Slot } from "./primitives/slot.js";
+import { FormFieldState } from "./utils/formFieldUtils.js";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ControlGroup/ControlGroup.d.ts
 interface ControlGroupContextValue {
-    messageId?: string;
-    isDisabled: boolean;
-    isInvalid: boolean;
-    isLoading: boolean;
-    orientation: 'horizontal' | 'vertical';
-    state: FormFieldState;
+  messageId?: string;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isLoading: boolean;
+  orientation: 'horizontal' | 'vertical';
+  state: FormFieldState;
 }
-export declare const useControlGroup: () => ControlGroupContextValue;
-export interface ControlGroupProps extends ComponentProps<'div'> {
-    disabled?: boolean;
-    errorMessage?: string | string[] | Record<string, unknown> | null;
-    id?: string;
-    name?: string;
-    orientation?: 'horizontal' | 'vertical';
-    state?: FormFieldState;
-    warningMessage?: string | string[] | Record<string, unknown> | null;
+declare const useControlGroup: () => ControlGroupContextValue;
+interface ControlGroupProps extends ComponentProps<'div'> {
+  disabled?: boolean;
+  errorMessage?: string | string[] | Record<string, unknown> | null;
+  id?: string;
+  name?: string;
+  orientation?: 'horizontal' | 'vertical';
+  state?: FormFieldState;
+  warningMessage?: string | string[] | Record<string, unknown> | null;
 }
-export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, warningMessage, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ControlGroupItem: ({ className, ...props }: ComponentProps<typeof Slot>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const ControlGroup: ({
+  className,
+  disabled,
+  errorMessage,
+  id,
+  name,
+  orientation,
+  state,
+  warningMessage,
+  ...props
+}: ControlGroupProps) => _$react_jsx_runtime0.JSX.Element;
+declare const ControlGroupItem: ({
+  className,
+  ...props
+}: ComponentProps<typeof Slot>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ControlGroup, ControlGroupItem, ControlGroupProps, useControlGroup };
 //# sourceMappingURL=ControlGroup.d.ts.map

package/dist/ControlGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.d.ts","names":[],"sources":["../src/components/ControlGroup/ControlGroup.tsx"],"mappings":";;;;;;;UAKU,wBAAA;EACR,SAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,WAAA;EACA,KAAA,EAAO,cAAA;AAAA;AAAA,cAKI,eAAA,QAAe,wBAAA;AAAA,UAQX,iBAAA,SAA0B,cAAA;EACzC,QAAA;EACA,YAAA,uBAAmC,MAAA;EACnC,EAAA;EACA,IAAA;EACA,WAAA;EACA,KAAA,GAAQ,cAAA;EACR,cAAA,uBAAqC,MAAA;AAAA;AAAA,cAG1B,YAAA;EAAY,SAAA;EAAA,QAAA;EAAA,YAAA;EAAA,EAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,cAAA;EAAA,GAAA;AAAA,GAA8H,iBAAA,KAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cA2B3J,gBAAA;EAAgB,SAAA;EAAA,GAAA;AAAA,GAA6B,cAAA,QAAsB,IAAA,MAAK,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ControlGroup.js

@@ -1,56 +1,70 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { Slot as t } from "./primitives/slot.js";
-import { ErrorMessage as n, WarningMessage as r, getErrorMessageId as i, useFormFieldId as a, useFormFieldState as o } from "./utils/formFieldUtils.js";
-import { createContext as s, useContext as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { Slot } from "./primitives/slot.js";
+import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
+import { getErrorMessageId, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/ControlGroup/ControlGroup.tsx
-var d = s(null), f = () => {
-	let e = c(d);
-	if (e === null) throw Error("useControlGroup must be used within a ControlGroup");
-	return e;
-}, p = ({ className: t, disabled: s, errorMessage: c, id: f, name: p, orientation: m = "horizontal", state: h = "default", warningMessage: g, ..._ }) => {
-	let v = a(f, p), y = i(v), b = `${v}-warning`, { isDisabled: x, isLoading: S, isInvalid: C } = o(s, h), w = h === "error" && c ? y : h === "warning" && g ? b : void 0;
-	return /* @__PURE__ */ u(d.Provider, {
+const ControlGroupContext = createContext(null);
+const useControlGroup = () => {
+	const context = useContext(ControlGroupContext);
+	if (context === null) throw new Error("useControlGroup must be used within a ControlGroup");
+	return context;
+};
+const ControlGroup = ({ className, disabled, errorMessage, id, name, orientation = "horizontal", state = "default", warningMessage, ...props }) => {
+	const groupId = useFormFieldId(id, name);
+	const errorMessageId = getErrorMessageId(groupId);
+	const warningMessageId = `${groupId}-warning`;
+	const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state);
+	const messageId = state === "error" && errorMessage ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0;
+	return /* @__PURE__ */ jsx(ControlGroupContext.Provider, {
 		value: {
-			messageId: w,
-			isDisabled: x,
-			isInvalid: C,
-			isLoading: S,
-			orientation: m,
-			state: h
+			messageId,
+			isDisabled,
+			isInvalid,
+			isLoading,
+			orientation,
+			state
 		},
-		children: [
-			/* @__PURE__ */ l("div", {
-				"data-slot": "control-group",
-				"data-orientation": m,
-				"data-state": h,
-				id: v,
-				role: "group",
-				"aria-describedby": w,
-				className: e("group flex", m === "vertical" && "flex-col", x && "pointer-events-none opacity-50", t),
-				..._
-			}),
-			C && c && /* @__PURE__ */ l(n, {
-				dataTestId: "spectral-control-group-error-message",
-				id: y,
-				message: c
-			}),
-			h === "warning" && g && /* @__PURE__ */ l(r, {
-				dataTestId: "spectral-control-group-warning-message",
-				id: b,
-				message: g
-			})
-		]
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "control-group-field",
+			className: "space-y-1.5 w-full",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "control-group",
+					"data-orientation": orientation,
+					"data-state": state,
+					id: groupId,
+					role: "group",
+					"aria-describedby": messageId,
+					className: cn("group flex w-full", orientation === "vertical" && "flex-col", isDisabled && "pointer-events-none opacity-50", className),
+					...props
+				}),
+				/* @__PURE__ */ jsx(ErrorMessage, {
+					dataTestId: "spectral-control-group-error-message",
+					id: errorMessageId,
+					message: isInvalid ? errorMessage : null
+				}),
+				/* @__PURE__ */ jsx(WarningMessage, {
+					dataTestId: "spectral-control-group-warning-message",
+					id: warningMessageId,
+					message: state === "warning" ? warningMessage : null
+				})
+			]
+		})
 	});
-}, m = ({ className: n, ...r }) => {
-	let { orientation: i } = f();
-	return /* @__PURE__ */ l(t, {
+};
+const ControlGroupItem = ({ className, ...props }) => {
+	const { orientation } = useControlGroup();
+	return /* @__PURE__ */ jsx(Slot, {
 		"data-slot": "control-group-item",
-		className: e("rounded-none focus-within:z-10 hover:z-10", i === "horizontal" && "first:rounded-s-md last:me-0 last:rounded-e-md -me-0.5 h-auto", i === "vertical" && "first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-0.5 w-auto", n),
-		...r
+		className: cn("rounded-none focus-within:z-10 hover:z-10", orientation === "horizontal" && "first:rounded-s-md last:me-0 last:rounded-e-md -me-0.5 h-auto", orientation === "vertical" && "first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-0.5 w-auto", className),
+		...props
 	});
 };
+
 //#endregion
-export { p as ControlGroup, m as ControlGroupItem, f as useControlGroup };
+export { ControlGroup, ControlGroupItem, useControlGroup };
+//# sourceMappingURL=ControlGroup.js.map

package/dist/ControlGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.js","names":[],"sources":["../src/components/ControlGroup/ControlGroup.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { ErrorMessage, getErrorMessageId, useFormFieldId, useFormFieldState, WarningMessage, type FormFieldState } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useContext, type ComponentProps } from 'react'\n\ninterface ControlGroupContextValue {\n  messageId?: string\n  isDisabled: boolean\n  isInvalid: boolean\n  isLoading: boolean\n  orientation: 'horizontal' | 'vertical'\n  state: FormFieldState\n}\n\nconst ControlGroupContext = createContext<ControlGroupContextValue | null>(null)\n\nexport const useControlGroup = () => {\n  const context = useContext(ControlGroupContext)\n  if (context === null) {\n    throw new Error('useControlGroup must be used within a ControlGroup')\n  }\n  return context\n}\n\nexport interface ControlGroupProps extends ComponentProps<'div'> {\n  disabled?: boolean\n  errorMessage?: string | string[] | Record<string, unknown> | null\n  id?: string\n  name?: string\n  orientation?: 'horizontal' | 'vertical'\n  state?: FormFieldState\n  warningMessage?: string | string[] | Record<string, unknown> | null\n}\n\nexport const ControlGroup = ({ className, disabled, errorMessage, id, name, orientation = 'horizontal', state = 'default', warningMessage, ...props }: ControlGroupProps) => {\n  const groupId = useFormFieldId(id, name)\n  const errorMessageId = getErrorMessageId(groupId)\n  const warningMessageId = `${groupId}-warning`\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' && errorMessage ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n\n  return (\n    <ControlGroupContext.Provider value={{ messageId, isDisabled, isInvalid, isLoading, orientation, state }}>\n      <div data-slot='control-group-field' className='space-y-1.5 w-full'>\n        <div\n          data-slot='control-group'\n          data-orientation={orientation}\n          data-state={state}\n          id={groupId}\n          role='group'\n          aria-describedby={messageId}\n          className={cn('group flex w-full', orientation === 'vertical' && 'flex-col', isDisabled && 'pointer-events-none opacity-50', className)}\n          {...props}\n        />\n        <ErrorMessage dataTestId='spectral-control-group-error-message' id={errorMessageId} message={isInvalid ? errorMessage : null} />\n        <WarningMessage dataTestId='spectral-control-group-warning-message' id={warningMessageId} message={state === 'warning' ? warningMessage : null} />\n      </div>\n    </ControlGroupContext.Provider>\n  )\n}\n\nexport const ControlGroupItem = ({ className, ...props }: ComponentProps<typeof Slot>) => {\n  const { orientation } = useControlGroup()\n\n  return (\n    <Slot\n      data-slot='control-group-item'\n      className={cn(\n        'rounded-none focus-within:z-10 hover:z-10',\n        orientation === 'horizontal' && 'first:rounded-s-md last:me-0 last:rounded-e-md -me-0.5 h-auto',\n        orientation === 'vertical' && 'first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-0.5 w-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAcA,MAAM,sBAAsB,cAA+C,KAAK;AAEhF,MAAa,wBAAwB;CACnC,MAAM,UAAU,WAAW,oBAAoB;AAC/C,KAAI,YAAY,KACd,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;AAaT,MAAa,gBAAgB,EAAE,WAAW,UAAU,cAAc,IAAI,MAAM,cAAc,cAAc,QAAQ,WAAW,gBAAgB,GAAG,YAA+B;CAC3K,MAAM,UAAU,eAAe,IAAI,KAAK;CACxC,MAAM,iBAAiB,kBAAkB,QAAQ;CACjD,MAAM,mBAAmB,GAAG,QAAQ;CACpC,MAAM,EAAE,YAAY,WAAW,cAAc,kBAAkB,UAAU,MAAM;CAC/E,MAAM,YAAY,UAAU,WAAW,eAAe,iBAAiB,UAAU,aAAa,iBAAiB,mBAAmB;AAElI,QACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;GAAE;GAAW;GAAY;GAAW;GAAW;GAAa;GAAO;YACtG,qBAAC,OAAD;GAAK,aAAU;GAAsB,WAAU;aAA/C;IACE,oBAAC,OAAD;KACE,aAAU;KACV,oBAAkB;KAClB,cAAY;KACZ,IAAI;KACJ,MAAK;KACL,oBAAkB;KAClB,WAAW,GAAG,qBAAqB,gBAAgB,cAAc,YAAY,cAAc,kCAAkC,UAAU;KACvI,GAAI;KACJ;IACF,oBAAC,cAAD;KAAc,YAAW;KAAuC,IAAI;KAAgB,SAAS,YAAY,eAAe;KAAQ;IAChI,oBAAC,gBAAD;KAAgB,YAAW;KAAyC,IAAI;KAAkB,SAAS,UAAU,YAAY,iBAAiB;KAAQ;IAC9I;;EACuB;;AAInC,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAAyC;CACxF,MAAM,EAAE,gBAAgB,iBAAiB;AAEzC,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,6CACA,gBAAgB,gBAAgB,iEAChC,gBAAgB,cAAc,4GAC9B,UACD;EACD,GAAI;EACJ"}

package/dist/DataCard/Card.d.ts

@@ -1,11 +1,38 @@
-import { ComponentProps } from 'react';
-export type CardProps = ComponentProps<'div'> & {
-    asChild?: boolean;
+'use client';
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DataCard/Card.d.ts
+type CardProps = ComponentProps<'div'> & {
+  asChild?: boolean;
 };
-export declare const CardBase: ({ ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CardHeader: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CardTitle: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CardHeaderEndSlot: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CardContent: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Card: ({ asChild, children, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardBase: ({
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+declare const CardHeader: ({
+  className,
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+declare const CardTitle: ({
+  className,
+  asChild,
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+declare const CardHeaderEndSlot: ({
+  className,
+  asChild,
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+declare const CardContent: ({
+  className,
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+declare const Card: ({
+  asChild,
+  children,
+  className,
+  ...props
+}: CardProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Card, CardBase, CardContent, CardHeader, CardHeaderEndSlot, CardProps, CardTitle };
 //# sourceMappingURL=Card.d.ts.map

package/dist/DataCard/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","names":[],"sources":["../../src/components/DataCard/Card.tsx"],"mappings":";;;;;KAIY,SAAA,GAAY,cAAA;EAA0B,OAAA;AAAA;AAAA,cAIrC,QAAA;EAAA,GAAQ;AAAA,GAAkB,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAInC,UAAA;EAAU,SAAA;EAAA,GAAA;AAAA,GAA6B,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIhD,SAAA;EAAS,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAA8C,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAMhE,iBAAA;EAAiB,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAA8C,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAMxE,WAAA;EAAW,SAAA;EAAA,GAAA;AAAA,GAA6B,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAIjD,IAAA;EAAI,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAwD,SAAA,KAAS,oBAAA,CAAA,GAAA,CAAA,OAAA"}