@spear-ai/spectral 1.3.42 → 1.3.44

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent, ComponentProps, FocusEvent } from 'react';
+export type TextareaState = 'default' | 'error' | 'disabled' | 'loading';
+export type TextareaProps = ComponentProps<'textarea'> & {
+    className?: string;
+    state?: TextareaState;
+    errorMessage?: string;
+    name: string;
+    id?: string;
+    label: string;
+    value?: string;
+    maxLength?: number;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+};
+export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAA6B,MAAM,OAAO,CAAA;AAEzG,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAA;AAIxE,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACtD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACzD,CAAA;AAyBD,eAAO,MAAM,QAAQ,4HAsHpB,CAAA"}

package/dist/components/Textarea/TextareaUtils.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, ClipboardEvent, FocusEvent } from 'react';
+export type UseTextareaOptions = {
+    maxLength: number;
+    value: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+};
+export type UseTextareaReturn = {
+    handleFocus: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    handleBlur: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
+};
+/**
+ * Custom hook for textarea functionality with character limits and event handling
+ */
+export declare const useTextarea: ({ maxLength, value, onChange, onFocus, onBlur }: UseTextareaOptions) => UseTextareaReturn;
+//# sourceMappingURL=TextareaUtils.d.ts.map

package/dist/components/Textarea/TextareaUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/TextareaUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAe,MAAM,OAAO,CAAA;AAE3F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACxD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACtD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACzD,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACxD,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IAC3D,WAAW,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;CAC9D,CAAA;AAqED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,iDAAiD,kBAAkB,KAAG,iBAmCjG,CAAA"}

package/dist/components/Toggle/Toggle.d.ts

@@ -1,11 +1,11 @@
 import { ToggleBase } from './ToggleBase';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 export type ToggleProps = ComponentProps<typeof ToggleBase> & VariantProps<typeof toggleVariants>;
 export declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     layout?: "default" | "expanded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Toggle: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import('../../../node_modules/react').RefAttributes<HTMLButtonElement>>;
+export declare const Toggle: import('react').ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle/ToggleBase.d.ts

@@ -1,14 +1,15 @@
-import { ButtonHTMLAttributes } from '../../../node_modules/react';
-export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+import { AsChildProp } from '../../primitives/slot';
+import { ButtonHTMLAttributes } from 'react';
+export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & AsChildProp & {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
     disabled?: boolean;
 };
-export declare const ToggleBase: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export declare const ToggleBase: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & AsChildProp & {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
     disabled?: boolean;
-} & import('../../../node_modules/react').RefAttributes<HTMLButtonElement>>;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ToggleBase.d.ts.map

package/dist/components/Toggle/ToggleBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleBase.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,oBAAoB,EAAuC,MAAM,OAAO,CAAA;AAE/G,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,UAAU;cANX,OAAO;qBACA,OAAO;sBACN,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;eACjC,OAAO;qDA+DlB,CAAA"}
+{"version":3,"file":"ToggleBase.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAE9D,OAAO,EAA2B,KAAK,oBAAoB,EAAuC,MAAM,OAAO,CAAA;AAE/G,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjF,WAAW,GAAG;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,eAAO,MAAM,UAAU;cANT,OAAO;qBACA,OAAO;sBACN,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;eACjC,OAAO;qDAkEpB,CAAA"}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,12 +1,12 @@
 import { ToggleGroupBase } from './ToggleGroupBase';
 import { toggleVariants } from '../Toggle/Toggle';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 export type ToggleGroupProps = ComponentProps<typeof ToggleGroupBase> & VariantProps<typeof toggleVariants>;
 export declare const ToggleGroup: ({ className, variant, size, layout, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToggleGroupItem: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<Omit<import('../../../node_modules/react').ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & import('./ToggleGroupBase').ItemRenderProps & import('../../../node_modules/react').RefAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+export declare const ToggleGroupItem: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & import('./ToggleGroupBase').ItemRenderProps & import('react').RefAttributes<HTMLButtonElement> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     layout?: "default" | "expanded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('../../../node_modules/react').RefAttributes<HTMLButtonElement>>;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ToggleGroup.d.ts.map

package/dist/components/ToggleGroup/ToggleGroupBase.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from '../../../node_modules/react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type CommonGroupProps = {
     orientation?: Orientation;
@@ -25,6 +25,6 @@ export type ItemRenderProps = {
 };
 export declare const ToggleGroupBase: (props: ToggleGroupProps & Record<`data-${string}`, any>) => import("react/jsx-runtime").JSX.Element;
 export type ToggleGroupItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'onPressedChange' | 'pressed' | 'defaultPressed'> & ItemRenderProps;
-export declare const ToggleGroupItemBase: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & ItemRenderProps & import('../../../node_modules/react').RefAttributes<HTMLButtonElement>>;
+export declare const ToggleGroupItemBase: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "pressed" | "defaultPressed" | "onPressedChange"> & ItemRenderProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=ToggleGroupBase.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from '../../../node_modules/react';
+import { ComponentProps } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export declare const TooltipProvider: ({ delayDuration, ...props }: ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
 export declare const Tooltip: ({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/TooltipBase.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from '../../../node_modules/react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'center' | 'end';
 export type TooltipProviderProps = {
@@ -7,7 +7,7 @@ export type TooltipProviderProps = {
     skipDelayDuration?: number;
     disableHoverableContent?: boolean;
 };
-export declare const TooltipProviderBase: import('../../../node_modules/react').ForwardRefExoticComponent<TooltipProviderProps & import('../../../node_modules/react').RefAttributes<HTMLElement>>;
+export declare const TooltipProviderBase: import('react').ForwardRefExoticComponent<TooltipProviderProps & import('react').RefAttributes<HTMLElement>>;
 export type TooltipRootProps = {
     align?: Align;
     alignOffset?: number;
@@ -24,28 +24,28 @@ export declare const TooltipRootBase: ({ children, open: openProp, defaultOpen,
 export type TooltipTriggerProps = ComponentPropsWithoutRef<'button'> & {
     asChild?: boolean;
 };
-export declare const TooltipTriggerBase: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<import('../../../node_modules/react').DetailedHTMLProps<import('../../../node_modules/react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+export declare const TooltipTriggerBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean;
-} & import('../../../node_modules/react').RefAttributes<HTMLElement>>;
+} & import('react').RefAttributes<HTMLElement>>;
 export type TooltipContentProps = ComponentPropsWithoutRef<'div'> & {
     forceMount?: boolean;
     container?: Element | DocumentFragment | null | undefined;
     arrowPadding?: number;
     variant?: 'default' | 'outline';
 };
-export declare const TooltipContentBase: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<import('../../../node_modules/react').DetailedHTMLProps<import('../../../node_modules/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const TooltipContentBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     forceMount?: boolean;
     container?: Element | DocumentFragment | null | undefined;
     arrowPadding?: number;
     variant?: "default" | "outline";
-} & import('../../../node_modules/react').RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export type TooltipArrowProps = ComponentPropsWithoutRef<'div'> & {
     width?: number;
     height?: number;
 };
-export declare const TooltipArrowBase: import('../../../node_modules/react').ForwardRefExoticComponent<Omit<import('../../../node_modules/react').DetailedHTMLProps<import('../../../node_modules/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const TooltipArrowBase: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     width?: number;
     height?: number;
-} & import('../../../node_modules/react').RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=TooltipBase.d.ts.map

package/dist/features/HorizonColorGrid/HorizonColorGrid.d.ts

@@ -1,3 +1,3 @@
-import { ReactElement } from '../../../node_modules/react';
+import { ReactElement } from 'react';
 export declare const HorizonColorGrid: () => ReactElement;
 //# sourceMappingURL=HorizonColorGrid.d.ts.map

package/dist/features/LabelingToolbar/LabelingToolbar.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../node_modules/react';
+import { ReactNode } from 'react';
 export interface LabelingToolbarProps {
     title?: string;
     description?: string;

package/dist/features/LabelingTools.js

@@ -3,19 +3,30 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { Badge as a } from "../Badge.js";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import "../Icons/ClockIcon.js";
+import "../Icons/CloseCircleIcon.js";
+import "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
-import { DeleteIcon as n } from "../Icons/DeleteIcon.js";
+import { DeleteIcon as m } from "../Icons/DeleteIcon.js";
 import "../Icons/DurationIcon.js";
-import { EraserIcon as c } from "../Icons/EraserIcon.js";
+import { EraserIcon as n } from "../Icons/EraserIcon.js";
+import "../Icons/ErrorIcon.js";
+import "../Icons/EyeClosedIcon.js";
+import "../Icons/EyeClosedIcon2.js";
+import "../Icons/EyeOpenIcon.js";
 import "../Icons/GoToFirstIcon.js";
 import "../Icons/GoToLastIcon.js";
 import "../Icons/HarmonicCursorsIcon.js";
 import "../Icons/InfoIcon.js";
-import { LabelIcon as m } from "../Icons/LabelIcon.js";
+import { LabelIcon as c } from "../Icons/LabelIcon.js";
 import { LassoIcon as g } from "../Icons/LassoIcon.js";
 import { LineToolIcon as p } from "../Icons/LineToolIcon.js";
 import "../Icons/LiveViewIcon.js";
+import "../Icons/LoaderIcon.js";
 import "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import { MetadataIcon as b } from "../Icons/MetadataIcon.js";
@@ -36,7 +47,7 @@ import "../Icons/ZoomYIcon.js";
 import { Toggle as d } from "../Toggle.js";
 import { ToggleGroup as s, ToggleGroupItem as l } from "../ToggleGroup.js";
 import { Tooltip as i, TooltipTrigger as o, TooltipContent as t } from "../Tooltip.js";
-const ie = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4", children: [
+const pe = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4", children: [
   /* @__PURE__ */ e("div", { className: "flex", children: /* @__PURE__ */ r(s, { type: "single", variant: "outline", children: [
     /* @__PURE__ */ r(i, { children: [
       /* @__PURE__ */ e(o, { children: /* @__PURE__ */ r(l, { value: "crosshairs", children: [
@@ -82,7 +93,7 @@ const ie = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4"
           value: "lasso",
           className: "data-[state=on]:bg-toggle-bg data-[state=on]:border-toggle-border",
           children: [
-            /* @__PURE__ */ e(m, { size: 22 }),
+            /* @__PURE__ */ e(c, { size: 22 }),
             /* @__PURE__ */ e(a, { className: "group-data-[state=on]:bg-badge-primary-bg active:bg-badge-primary-bg--active ml-1", children: "⌘T" })
           ]
         }
@@ -112,7 +123,7 @@ const ie = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4"
           value: "delete",
           className: "data-[state=on]:bg-toggle-bg data-[state=on]:border-toggle-border",
           children: [
-            /* @__PURE__ */ e(n, { size: 22 }),
+            /* @__PURE__ */ e(m, { size: 22 }),
             /* @__PURE__ */ e(a, { className: "group-data-[state=on]:bg-badge-primary-bg active:bg-badge-primary-bg--active ml-1", children: "⌫" })
           ]
         }
@@ -126,7 +137,7 @@ const ie = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4"
           value: "clear",
           className: "data-[state=on]:bg-toggle-bg data-[state=on]:border-toggle-border",
           children: [
-            /* @__PURE__ */ e(c, { size: 22 }),
+            /* @__PURE__ */ e(n, { size: 22 }),
             /* @__PURE__ */ e(a, { className: "group-data-[state=on]:bg-badge-primary-bg active:bg-badge-primary-bg--active ml-1", children: "⌘⇧A" })
           ]
         }
@@ -146,5 +157,5 @@ const ie = () => /* @__PURE__ */ r("div", { className: "align-center flex gap-4"
   ] })
 ] });
 export {
-  ie as LabelingTools
+  pe as LabelingTools
 };

package/dist/features/SensorMetadata.js

@@ -3,22 +3,33 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { Drawer as r } from "../Drawer.js";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import { ClockIcon as i } from "../Icons/ClockIcon.js";
+import "../Icons/CloseCircleIcon.js";
+import "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
 import "../Icons/DeleteIcon.js";
-import { DurationIcon as a } from "../Icons/DurationIcon.js";
+import { DurationIcon as m } from "../Icons/DurationIcon.js";
 import "../Icons/EraserIcon.js";
+import "../Icons/ErrorIcon.js";
+import "../Icons/EyeClosedIcon.js";
+import "../Icons/EyeClosedIcon2.js";
+import "../Icons/EyeOpenIcon.js";
 import "../Icons/GoToFirstIcon.js";
 import "../Icons/GoToLastIcon.js";
 import "../Icons/HarmonicCursorsIcon.js";
-import { InfoIcon as s } from "../Icons/InfoIcon.js";
+import { InfoIcon as a } from "../Icons/InfoIcon.js";
 import "../Icons/LabelIcon.js";
 import "../Icons/LassoIcon.js";
 import "../Icons/LineToolIcon.js";
 import "../Icons/LiveViewIcon.js";
-import { LocationIcon as c } from "../Icons/LocationIcon.js";
+import "../Icons/LoaderIcon.js";
+import { LocationIcon as s } from "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
-import { MetadataIcon as m } from "../Icons/MetadataIcon.js";
+import { MetadataIcon as c } from "../Icons/MetadataIcon.js";
 import "../Icons/OntologyIcon.js";
 import "../Icons/PanelIcon.js";
 import "../Icons/PlayIcon.js";
@@ -33,17 +44,17 @@ import "../Icons/WarningIcon.js";
 import "../Icons/ZoomAllIcon.js";
 import "../Icons/ZoomXIcon.js";
 import "../Icons/ZoomYIcon.js";
-const G = () => /* @__PURE__ */ e(r, { description: "Recording Details", title: "Sensor Metadata", trigger: /* @__PURE__ */ e(m, {}), children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
+const $ = () => /* @__PURE__ */ e(r, { description: "Recording Details", title: "Sensor Metadata", trigger: /* @__PURE__ */ e(c, {}), children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
   /* @__PURE__ */ t("div", { className: "bg-card-bg-secondary rounded-md px-4 py-5", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2 !text-sm font-semibold uppercase", children: [
-      /* @__PURE__ */ e(s, { size: 16 }),
+      /* @__PURE__ */ e(a, { size: 16 }),
       "sensor type"
     ] }),
     /* @__PURE__ */ e("div", { className: "!text-text-accent-primary mt-4 flex text-center !text-xl", children: "Omnidirectional Hydrophone Array" })
   ] }),
   /* @__PURE__ */ t("div", { className: "bg-card-bg-secondary rounded-md px-4 py-5", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2 !text-sm font-semibold uppercase", children: [
-      /* @__PURE__ */ e(c, { size: 16 }),
+      /* @__PURE__ */ e(s, { size: 16 }),
       "location"
     ] }),
     /* @__PURE__ */ e("div", { className: "!text-text-accent-primary mt-4 flex justify-center !text-xl", children: "42.3601° N, 71.0589° W" }),
@@ -58,7 +69,7 @@ const G = () => /* @__PURE__ */ e(r, { description: "Recording Details", title:
       /* @__PURE__ */ e("div", { className: "!text-sm font-medium uppercase", children: "water depth" })
     ] }) }),
     /* @__PURE__ */ e("div", { className: "bg-card-bg-secondary w-1/2 rounded-md px-4 py-5", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-1 font-semibold", children: [
-      /* @__PURE__ */ e("div", { className: "!text-text-success !text-lg font-semibold", children: "Active" }),
+      /* @__PURE__ */ e("div", { className: "!text-success-400 !text-lg font-semibold", children: "Active" }),
       /* @__PURE__ */ e("div", { className: "!text-sm font-medium uppercase", children: "status" })
     ] }) })
   ] }),
@@ -78,7 +89,7 @@ const G = () => /* @__PURE__ */ e(r, { description: "Recording Details", title:
   ] }),
   /* @__PURE__ */ t("div", { className: "bg-card-bg-secondary rounded-md px-4 py-5", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2 !text-sm font-semibold uppercase", children: [
-      /* @__PURE__ */ e(a, { size: 16 }),
+      /* @__PURE__ */ e(m, { size: 16 }),
       "active duration"
     ] }),
     /* @__PURE__ */ t("div", { className: "sb-unstyled mt-4 flex flex-col justify-between", children: [
@@ -88,5 +99,5 @@ const G = () => /* @__PURE__ */ e(r, { description: "Recording Details", title:
   ] })
 ] }) });
 export {
-  G as SensorMetadata
+  $ as SensorMetadata
 };

package/dist/features/SettingsPopover/SettingsPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPopover.d.ts","sourceRoot":"","sources":["../../../src/features/SettingsPopover/SettingsPopover.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,eAAe,+CA6J3B,CAAA"}
+{"version":3,"file":"SettingsPopover.d.ts","sourceRoot":"","sources":["../../../src/features/SettingsPopover/SettingsPopover.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,eAAe,+CA8J3B,CAAA"}

package/dist/features/SettingsPopover.js

@@ -3,19 +3,30 @@ import "../styles/main.css";
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "../Icons/AnnotationsIcon.js";
 import "../Icons/CalendarIcon.js";
+import "../Icons/CheckCircleIcon.js";
+import "../Icons/CheckSquareIcon.js";
+import "../Icons/ChevronDownIcon.js";
+import "../Icons/ChevronUpIcon.js";
 import "../Icons/ClockIcon.js";
+import "../Icons/CloseCircleIcon.js";
+import "../Icons/CloseIcon.js";
 import "../Icons/DashboardIcon.js";
 import "../Icons/DeleteIcon.js";
 import "../Icons/DurationIcon.js";
 import "../Icons/EraserIcon.js";
-import { GoToFirstIcon as T } from "../Icons/GoToFirstIcon.js";
-import { GoToLastIcon as x } from "../Icons/GoToLastIcon.js";
+import "../Icons/ErrorIcon.js";
+import "../Icons/EyeClosedIcon.js";
+import "../Icons/EyeClosedIcon2.js";
+import "../Icons/EyeOpenIcon.js";
+import { GoToFirstIcon as x } from "../Icons/GoToFirstIcon.js";
+import { GoToLastIcon as T } from "../Icons/GoToLastIcon.js";
 import { HarmonicCursorsIcon as z } from "../Icons/HarmonicCursorsIcon.js";
 import "../Icons/InfoIcon.js";
 import "../Icons/LabelIcon.js";
 import "../Icons/LassoIcon.js";
 import "../Icons/LineToolIcon.js";
 import { LiveViewIcon as O } from "../Icons/LiveViewIcon.js";
+import "../Icons/LoaderIcon.js";
 import "../Icons/LocationIcon.js";
 import "../Icons/LogoutIcon.js";
 import "../Icons/MetadataIcon.js";
@@ -37,20 +48,21 @@ import { Popover as R, PopoverTrigger as S, PopoverContent as A } from "../Popov
 import { RadioButtonGroup as h, RadioButtonGroupItem as i } from "../RadioButtonGroup.js";
 import { RadioGroup as Z, RadioGroupItem as l } from "../RadioGroup.js";
 import { Switch as P } from "../Switch.js";
-import { Toggle as s } from "../Toggle.js";
-import { Tooltip as a, TooltipTrigger as m, TooltipContent as n } from "../Tooltip.js";
+import { Toggle as m } from "../Toggle.js";
+import { Tooltip as s, TooltipTrigger as a, TooltipContent as n } from "../Tooltip.js";
 import { useState as o } from "react";
-const Te = () => {
-  const [f, b] = o("green-black"), [v, p] = o(""), [g, c] = o(!1), [u, w] = o(!1), [y, N] = o("");
-  return /* @__PURE__ */ r(R, { open: g, onOpenChange: c, children: [
-    /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(s, { pressed: !1, children: /* @__PURE__ */ e(V, {}) }) }),
+const Ae = () => {
+  const [f, b] = o("green-black"), [u, p] = o(""), [v, c] = o(!1), [g, w] = o(!1), [y, N] = o("");
+  return /* @__PURE__ */ r(R, { open: v, onOpenChange: c, children: [
+    /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(m, { pressed: !1, children: /* @__PURE__ */ e(V, {}) }) }),
     /* @__PURE__ */ r(A, { side: "bottom", align: "end", width: 420, children: [
       /* @__PURE__ */ r("div", { className: "mb-6 w-full", children: [
         /* @__PURE__ */ e("p", { className: "text-md text-md mb-3 font-semibold", children: "Zoom Options" }),
         /* @__PURE__ */ r(
           h,
           {
-            value: v,
+            value: u,
+            expanded: !0,
             isKeptActive: !0,
             onValueChange: (t) => {
               p(t), t && c(!1);
@@ -72,7 +84,7 @@ const Te = () => {
           }
         ),
         /* @__PURE__ */ r(
-          s,
+          m,
           {
             pressed: !1,
             "aria-label": "Reset zoom",
@@ -94,7 +106,7 @@ const Te = () => {
           /* @__PURE__ */ e(
             P,
             {
-              checked: u,
+              checked: g,
               onChange: (t) => {
                 w(t);
               },
@@ -104,7 +116,7 @@ const Te = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "mt-4 flex w-full items-center justify-center gap-2", children: /* @__PURE__ */ r(s, { className: "w-full", children: [
+        /* @__PURE__ */ e("div", { className: "mt-4 flex w-full items-center justify-center gap-2", children: /* @__PURE__ */ r(m, { className: "w-full", children: [
           /* @__PURE__ */ e(z, { size: 16 }),
           "Harmonic Cursors"
         ] }) })
@@ -122,20 +134,20 @@ const Te = () => {
             },
             variant: "unstyled",
             children: [
-              /* @__PURE__ */ e(l, { value: "green-black", "aria-label": "green & black theme", children: /* @__PURE__ */ r(a, { children: [
-                /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("img", { src: "/themes/green-black-theme.webp", alt: "green & black theme", className: "h-8 w-8" }) }),
+              /* @__PURE__ */ e(l, { value: "green-black", "aria-label": "green & black theme", children: /* @__PURE__ */ r(s, { children: [
+                /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/green-black-theme.webp", alt: "green & black theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Green & Black Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "grayscale", "aria-label": "grayscale theme", children: /* @__PURE__ */ r(a, { children: [
-                /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("img", { src: "/themes/grayscale-theme.webp", alt: "grayscale theme", className: "h-8 w-8" }) }),
+              /* @__PURE__ */ e(l, { value: "grayscale", "aria-label": "grayscale theme", children: /* @__PURE__ */ r(s, { children: [
+                /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/grayscale-theme.webp", alt: "grayscale theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Grayscale Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "reverse-grayscale", "aria-label": "reverse grayscale theme", children: /* @__PURE__ */ r(a, { children: [
-                /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("img", { src: "/themes/reverse-grayscale-theme.webp", alt: "reverse grayscale theme", className: "h-8 w-8" }) }),
+              /* @__PURE__ */ e(l, { value: "reverse-grayscale", "aria-label": "reverse grayscale theme", children: /* @__PURE__ */ r(s, { children: [
+                /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/reverse-grayscale-theme.webp", alt: "reverse grayscale theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Reverse Grayscale Theme" }) })
               ] }) }),
-              /* @__PURE__ */ e(l, { value: "viridis", "aria-label": "viridis theme", children: /* @__PURE__ */ r(a, { children: [
-                /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("img", { src: "/themes/viridis-theme.webp", alt: "viridis theme", className: "h-8 w-8" }) }),
+              /* @__PURE__ */ e(l, { value: "viridis", "aria-label": "viridis theme", children: /* @__PURE__ */ r(s, { children: [
+                /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e("img", { src: "/themes/viridis-theme.webp", alt: "viridis theme", className: "h-8 w-8" }) }),
                 /* @__PURE__ */ e(n, { side: "bottom", sideOffset: 8, children: /* @__PURE__ */ e("p", { children: "Viridis Theme" }) })
               ] }) })
             ]
@@ -144,7 +156,7 @@ const Te = () => {
       ] }),
       /* @__PURE__ */ r("div", { className: "border-border-secondary mb-2 w-full border-t pt-4", children: [
         /* @__PURE__ */ e("p", { className: "text-md text-md mb-3 font-semibold", children: "View Options" }),
-        /* @__PURE__ */ r(s, { className: "mb-4 w-full", children: [
+        /* @__PURE__ */ r(m, { className: "mb-4 w-full", children: [
           /* @__PURE__ */ e(O, { size: 18 }),
           "Realtime Stream"
         ] }),
@@ -159,11 +171,11 @@ const Te = () => {
             },
             children: [
               /* @__PURE__ */ r(i, { value: "oldest-data", "aria-label": "oldest data", children: [
-                /* @__PURE__ */ e(T, { size: 16 }),
+                /* @__PURE__ */ e(x, { size: 16 }),
                 "Oldest Data"
               ] }),
               /* @__PURE__ */ r(i, { value: "newest-data", "aria-label": "newest data", children: [
-                /* @__PURE__ */ e(x, { size: 16 }),
+                /* @__PURE__ */ e(T, { size: 16 }),
                 "Newest Data"
               ] })
             ]
@@ -174,5 +186,5 @@ const Te = () => {
   ] });
 };
 export {
-  Te as SettingsPopover
+  Ae as SettingsPopover
 };

package/dist/hooks/useAccordionAutoScroll.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, RefObject } from '../../node_modules/react';
+import { MouseEvent, RefObject } from 'react';
 /**
  * Hook that handles auto-scrolling for accordions with return-to-position functionality
  *

package/dist/hooks/useOutsideClick.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from '../../node_modules/react';
+import { RefObject } from 'react';
 /**
  * Hook that handles clicks outside of the specified element
  * @param callback Function to call when a click outside the element is detected

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+export { Alert, type AlertProps } from './components/Alert/Alert';
 export { Badge } from './components/Badge/Badge';
 export { Button, type ButtonProps } from './components/Button/Button';
 export { Drawer, type DrawerProps } from './components/Drawer/Drawer';
+export { Input, type InputProps } from './components/Input/Input';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover/Popover';
 export { RadioButtonGroup, RadioButtonGroupItem } from './components/RadioButtonGroup/RadioButtonGroup';
 export { RadioGroup, RadioGroupItem } from './components/RadioGroup/RadioGroup';
@@ -13,7 +15,7 @@ export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './component
 export { Tooltip, TooltipContent, TooltipTrigger } from './components/Tooltip/Tooltip';
 export * from './components/Icons';
 export { default as IconBase, SvgIdContext } from './components/Icons/IconBase';
-export { useOutsideClick } from './hooks/useOutsideClick';
 export { useTheme } from './hooks/useTheme';
+export * from './utils/formFieldUtils';
 export { cn } from './utils/twUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAA;AACvG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAC1G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGtF,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAA;AACvG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AAC1G,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGtF,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/E,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/loader-circle-CvdzOiQ_.js

@@ -0,0 +1,11 @@
+import { c } from "./createLucideIcon-CI1yJrZf.js";
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const e = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], a = c("loader-circle", e);
+export {
+  a as L
+};

package/dist/primitives/label.d.ts

@@ -1,5 +1,5 @@
 import { AsChildProp } from './slot';
-import { LabelHTMLAttributes } from '../../node_modules/react';
+import { LabelHTMLAttributes } from 'react';
 export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & AsChildProp;
-export declare const Label: import('../../node_modules/react').ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & AsChildProp & import('../../node_modules/react').RefAttributes<HTMLLabelElement>>;
+export declare const Label: import('react').ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & AsChildProp & import('react').RefAttributes<HTMLLabelElement>>;
 //# sourceMappingURL=label.d.ts.map

package/dist/primitives/slot.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, ReactNode } from '../../node_modules/react';
+import { HTMLAttributes, ReactNode } from 'react';
 export declare function Slottable(props: {
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const Slot: import('../../node_modules/react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const Slot: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: ReactNode;
-} & import('../../node_modules/react').RefAttributes<HTMLElement>>;
+} & import('react').RefAttributes<HTMLElement>>;
 export type AsChildProp = {
     asChild?: boolean;
 };