@mirohq/design-system-select 0.3.0-forms.5 → 0.3.0-forms.7

package/dist/types.d.ts

@@ -1,16 +1,17 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentPropsWithRef } from 'react';
-import { Booleanish } from '@mirohq/design-system-types';
+import react__default, { ComponentPropsWithRef, ReactNode } from 'react';
+import * as _radix_ui_react_select from '@radix-ui/react-select';
+import { Value as Value$1, SelectProps as SelectProps$2 } from '@radix-ui/react-select';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
-import * as _radix_ui_react_select from '@radix-ui/react-select';
-import { Value as Value$1 } from '@radix-ui/react-select';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import { HoverEvents } from '@react-types/shared';
 import { CSSProperties } from '@stitches/react';
+import { FormElementProps } from '@mirohq/design-system-base-form';
 
-declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectGroupProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledSelectContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -498,14 +499,10 @@ declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectGroupProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledGroupProps = StrictComponentProps<typeof StyledGroup>;
-
-interface GroupProps extends StyledGroupProps {
-}
-declare const Group: react__default.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+declare type StyledSelectContentProps = ComponentPropsWithRef<typeof StyledSelectContent>;
 
-declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectItemProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledGroup: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectGroupProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -993,29 +990,14 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectItemProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectGroupProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledGroupProps = StrictComponentProps<typeof StyledGroup>;
 
-interface ItemProps extends StyledItemProps {
-    /**
-     * The value given as data when submitted with a name.
-     */
-    value: string;
-    /**
-     * When true, prevents the user from interacting with the item.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional text used for typeahead purposes. By default the typeahead
-     * behavior will use the Select's item text. Use this when the content is
-     * complex, or you have non-textual content inside.
-     */
-    textValue?: string;
+interface GroupProps extends StyledGroupProps {
 }
-declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const Group: react__default.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledPortal: react.ForwardRefExoticComponent<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.FC<_radix_ui_react_select.SelectPortalProps>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectItemProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -1503,19 +1485,29 @@ declare const StyledPortal: react.ForwardRefExoticComponent<Omit<_mirohq_design_
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps & react.RefAttributes<never>> & _mirohq_design_system_stitches.StitchesInternals<react.FC<_radix_ui_react_select.SelectPortalProps>, {}, {}>;
-declare type StyledPortalProps = StrictComponentProps<typeof StyledPortal>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectItemProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
 
-interface PortalProps extends StyledPortalProps {
+interface ItemProps extends StyledItemProps {
     /**
-     * Specify a container element to portal the content into.
-     * @default document.body
+     * The value given as data when submitted with a name.
      */
-    container?: HTMLElement | null;
+    value: string;
+    /**
+     * When true, prevents the user from interacting with the item.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead
+     * behavior will use the Select's item text. Use this when the content is
+     * complex, or you have non-textual content inside.
+     */
+    textValue?: string;
 }
-declare const Portal: react__default.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & react__default.RefAttributes<never>>;
+declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledPortal: react.ForwardRefExoticComponent<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.FC<_radix_ui_react_select.SelectPortalProps>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -2003,41 +1995,19 @@ declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, "size"> & _stitches_react_types_styled_component.TransformProps<{
-    size?: "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {
-    size?: "large" | "x-large" | undefined;
-}, {}>;
-declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
-
-interface TriggerProps extends StyledTriggerProps, HoverEvents {
-    /**
-     * The content.
-     */
-    children: react__default.ReactNode;
-    /**
-     * The size of the trigger.
-     * @default 'large'
-     */
-    size?: StyledTriggerProps['size'];
-}
-declare const Trigger: react__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps & react.RefAttributes<never>> & _mirohq_design_system_stitches.StitchesInternals<react.FC<_radix_ui_react_select.SelectPortalProps>, {}, {}>;
+declare type StyledPortalProps = StrictComponentProps<typeof StyledPortal>;
 
-declare type StyledValueProps = StrictComponentProps<typeof Value$1>;
-interface ValueProps extends StyledValueProps {
-    /**
-     * The content that will be rendered inside the Select.Value when no value or
-     * defaultValue is set.
-     */
-    placeholder?: react__default.ReactNode;
+interface PortalProps extends StyledPortalProps {
     /**
-     * The controlled content that will be rendered inside the Select.Value.
+     * Specify a container element to portal the content into.
+     * @default document.body
      */
-    children?: react__default.ReactNode;
+    container?: HTMLElement | null;
 }
-declare const Value: react__default.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
+declare const Portal: react__default.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & react__default.RefAttributes<never>>;
 
-declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledTrigger: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -2525,142 +2495,41 @@ declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledContentProps = StrictComponentProps<typeof StyledContent>;
-
-declare type PointerDownOutsideEvent = CustomEvent<{
-    originalEvent: PointerEvent;
-}>;
-declare type Boundary = Element | null | Array<Element | null>;
-declare type Side = 'top' | 'right' | 'bottom' | 'left';
-declare type Align = 'start' | 'center' | 'end';
-declare type Padding = Partial<Record<Side, number>>;
-declare type Overflow = 'auto' | 'visible';
-declare type Size = 'medium' | 'large';
-declare type Sticky = 'partial' | 'always';
-declare type Direction = 'ltr' | 'rtl';
-
-type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
-type types_Boundary = Boundary;
-type types_Side = Side;
-type types_Align = Align;
-type types_Padding = Padding;
-type types_Overflow = Overflow;
-type types_Size = Size;
-type types_Sticky = Sticky;
-type types_Direction = Direction;
-declare namespace types {
-  export {
-    types_PointerDownOutsideEvent as PointerDownOutsideEvent,
-    types_Boundary as Boundary,
-    types_Side as Side,
-    types_Align as Align,
-    types_Padding as Padding,
-    types_Overflow as Overflow,
-    types_Size as Size,
-    types_Sticky as Sticky,
-    types_Direction as Direction,
-  };
-}
+}>>>, "size"> & _stitches_react_types_styled_component.TransformProps<{
+    size?: "large" | "x-large" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>>, {
+    size?: "large" | "x-large" | undefined;
+}, {}>;
+declare type StyledTriggerProps = StrictComponentProps<typeof StyledTrigger>;
 
-interface ContentProps extends StyledContentProps {
-    /**
-     * Event handler called when focus moves to the trigger after closing. It can
-     * be prevented by calling event.preventDefault.
-     */
-    onCloseAutoFocus?: (event: Event) => void;
-    /**
-     * Event handler called when focus moves to the trigger after closing. It can
-     * be prevented by calling event.preventDefault.
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Event handler called when a pointer event occurs outside the bounds of the
-     * component. It can be prevented by calling event.preventDefault.
-     */
-    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
-    /**
-     * The preferred side of the anchor to render against when open. Will be
-     * reversed when collisions occur and avoidCollisions is enabled. Only
-     * available when position is set to popper.
-     * @default 'bottom'
-     */
-    side?: Side;
-    /**
-     * The distance in pixels from the anchor. Only available when position is set
-     * to popper.
-     * @default CONTENT_OFFSET
-     */
-    sideOffset?: number;
-    /**
-     * The preferred alignment against the anchor. May change when collisions
-     * occur. Only available when position is set to popper.
-     * @default 'center'
-     */
-    align?: Align;
-    /**
-     * An offset in pixels from the "start" or "end" alignment options. Only
-     * available when position is set to popper.
-     * @default 0
-     */
-    alignOffset?: number;
-    /**
-     * When true, overrides the side andalign preferences to prevent collisions
-     * with boundary edges. Only available when position is set to popper.
-     * @default true
-     */
-    avoidCollisions?: boolean;
-    /**
-     * The element used as the collision boundary. By default this is the
-     * viewport, though you can provide additional element(s) to be included in
-     * this check. Only available when position is set to popper.
-     * @default viewport
-     */
-    collisionBoundary?: Boundary;
-    /**
-     * The distance in pixels from the boundary edges where collision detection
-     * should occur. Accepts a number (same for all sides), or a partial padding
-     * object, for example: { top: 20, left: 20 }. Only available when position is
-     * set to popper.
-     * @default 0
-     */
-    collisionPadding?: number | Partial<Record<Side, number>>;
-    /**
-     * The sticky behavior on the align axis. "partial" will keep the content in the
-     * boundary as long as the trigger is at least partially in the boundary whilst
-     * "always" will keep the content in the boundary regardless. Only available
-     * when position is set to popper.
-     * @default 'partial'
-     */
-    sticky?: Sticky;
+interface TriggerProps extends StyledTriggerProps, HoverEvents {
     /**
-     * Whether to hide the content when the trigger becomes fully occluded. Only
-     * available when position is set to popper.
-     * @default true
+     * The content.
      */
-    hideWhenDetached?: boolean;
+    children: react__default.ReactNode;
     /**
-     * The max height for the content.
+     * The size of the trigger.
+     * @default 'large'
      */
-    maxHeight?: CSSProperties['maxHeight'];
+    size?: StyledTriggerProps['size'];
+}
+declare const Trigger: react__default.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+
+declare type StyledValueProps = StrictComponentProps<typeof Value$1>;
+interface ValueProps extends StyledValueProps {
     /**
-     * Setting overflow as "visible" means that the content can extend beyond the
-     * its collision boundary without any clipping or scrolling being
-     * applied.
-     * When set to "auto," a scrollbar is added if the content exceeds its
-     * boundaries. If no maxHeight is defined, it will be automatically adjusted
-     * to fit the remaining space between the trigger and the boundary edge.
-     * @default 'visible'
+     * The content that will be rendered inside the Select.Value when no value or
+     * defaultValue is set.
      */
-    overflow?: Overflow;
+    placeholder?: react__default.ReactNode;
     /**
-     * Select's content.
+     * The controlled content that will be rendered inside the Select.Value.
      */
-    children?: ReactNode;
+    children?: react__default.ReactNode;
 }
-declare const Content: react__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const Value: react__default.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
 
-declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectLabelProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledContent: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -3148,14 +3017,142 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectLabelProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledLabelProps = StrictComponentProps<typeof StyledLabel>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectContentProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledContentProps = StrictComponentProps<typeof StyledContent>;
 
-interface LabelProps extends StyledLabelProps {
+declare type PointerDownOutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent;
+}>;
+declare type Boundary = Element | null | Array<Element | null>;
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+declare type Align = 'start' | 'center' | 'end';
+declare type Padding = Partial<Record<Side, number>>;
+declare type Overflow = 'auto' | 'visible';
+declare type Size = 'medium' | 'large';
+declare type Sticky = 'partial' | 'always';
+declare type Direction = 'ltr' | 'rtl';
+
+type types_PointerDownOutsideEvent = PointerDownOutsideEvent;
+type types_Boundary = Boundary;
+type types_Side = Side;
+type types_Align = Align;
+type types_Padding = Padding;
+type types_Overflow = Overflow;
+type types_Size = Size;
+type types_Sticky = Sticky;
+type types_Direction = Direction;
+declare namespace types {
+  export {
+    types_PointerDownOutsideEvent as PointerDownOutsideEvent,
+    types_Boundary as Boundary,
+    types_Side as Side,
+    types_Align as Align,
+    types_Padding as Padding,
+    types_Overflow as Overflow,
+    types_Size as Size,
+    types_Sticky as Sticky,
+    types_Direction as Direction,
+  };
 }
-declare const Label: react__default.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+interface ContentProps extends StyledContentProps {
+    /**
+     * Event handler called when focus moves to the trigger after closing. It can
+     * be prevented by calling event.preventDefault.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Event handler called when focus moves to the trigger after closing. It can
+     * be prevented by calling event.preventDefault.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the
+     * component. It can be prevented by calling event.preventDefault.
+     */
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    /**
+     * The preferred side of the anchor to render against when open. Will be
+     * reversed when collisions occur and avoidCollisions is enabled. Only
+     * available when position is set to popper.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * The distance in pixels from the anchor. Only available when position is set
+     * to popper.
+     * @default CONTENT_OFFSET
+     */
+    sideOffset?: number;
+    /**
+     * The preferred alignment against the anchor. May change when collisions
+     * occur. Only available when position is set to popper.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * An offset in pixels from the "start" or "end" alignment options. Only
+     * available when position is set to popper.
+     * @default 0
+     */
+    alignOffset?: number;
+    /**
+     * When true, overrides the side andalign preferences to prevent collisions
+     * with boundary edges. Only available when position is set to popper.
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * The element used as the collision boundary. By default this is the
+     * viewport, though you can provide additional element(s) to be included in
+     * this check. Only available when position is set to popper.
+     * @default viewport
+     */
+    collisionBoundary?: Boundary;
+    /**
+     * The distance in pixels from the boundary edges where collision detection
+     * should occur. Accepts a number (same for all sides), or a partial padding
+     * object, for example: { top: 20, left: 20 }. Only available when position is
+     * set to popper.
+     * @default 0
+     */
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    /**
+     * The sticky behavior on the align axis. "partial" will keep the content in the
+     * boundary as long as the trigger is at least partially in the boundary whilst
+     * "always" will keep the content in the boundary regardless. Only available
+     * when position is set to popper.
+     * @default 'partial'
+     */
+    sticky?: Sticky;
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded. Only
+     * available when position is set to popper.
+     * @default true
+     */
+    hideWhenDetached?: boolean;
+    /**
+     * The max height for the content.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Setting overflow as "visible" means that the content can extend beyond the
+     * its collision boundary without any clipping or scrolling being
+     * applied.
+     * When set to "auto," a scrollbar is added if the content exceeds its
+     * boundaries. If no maxHeight is defined, it will be automatically adjusted
+     * to fit the remaining space between the trigger and the boundary edge.
+     * @default 'visible'
+     */
+    overflow?: Overflow;
+    /**
+     * Select's content.
+     */
+    children?: ReactNode;
+}
+declare const Content: react__default.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectLabelProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -3643,14 +3640,14 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
-declare type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectLabelProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledLabelProps = StrictComponentProps<typeof StyledLabel>;
 
-interface SeparatorProps extends StyledSeparatorProps {
+interface LabelProps extends StyledLabelProps {
 }
-declare const Separator: react__default.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+declare const Label: react__default.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledSelect: react.ForwardRefExoticComponent<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.FC<_radix_ui_react_select.SelectProps>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -4138,10 +4135,23 @@ declare const StyledSelect: react.ForwardRefExoticComponent<Omit<_mirohq_design_
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps & react.RefAttributes<never>> & _mirohq_design_system_stitches.StitchesInternals<react.FC<_radix_ui_react_select.SelectProps>, {}, {}>;
-declare type StyledSelectProps = ComponentPropsWithRef<typeof StyledSelect>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_select.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
+
+interface SeparatorProps extends StyledSeparatorProps {
+}
+declare const Separator: react__default.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+interface SelectProps$1 extends FormElementProps {
+    direction?: Direction;
+    open?: boolean;
+    defaultOpen?: boolean;
+    value?: string;
+    defaultValue?: string;
+}
+declare type SelectProviderProps = SelectProps$1;
 
-interface SelectProps extends Omit<StyledSelectProps, 'onOpenChange' | 'dir'> {
+interface SelectProps extends SelectProviderProps, Omit<SelectProps$2, 'onOpenChange'>, Omit<StyledSelectContentProps, 'dir'> {
     /**
      * The value of the select when initially rendered. Use when you do not need
      * to control the state of the select.
@@ -4187,25 +4197,6 @@ interface SelectProps extends Omit<StyledSelectProps, 'onOpenChange' | 'dir'> {
      * name/value pair.
      */
     name?: string;
-    /**
-     * When "true", prevents the user from interacting with select.
-     */
-    disabled?: boolean;
-    /**
-     * When "true", prevents the user from opening with select, while allowing
-     * focus and hover.
-     */
-    'aria-disabled'?: Booleanish;
-    /**
-     * When "true", indicates that the user must select a value before the owning
-     * form can be submitted.
-     */
-    required?: boolean;
-    /**
-     * When "true", this indicates that the input component is valid, and a
-     * green state is displayed, allowing the form to be submitted.
-     */
-    valid?: boolean;
 }
 declare const Select: react__default.ForwardRefExoticComponent<SelectProps> & Partials;
 interface Partials {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-select",
-  "version": "0.3.0-forms.5",
+  "version": "0.3.0-forms.7",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -29,14 +29,14 @@
     "@radix-ui/react-select": "^2.0.0",
     "@react-aria/interactions": "^3.13.0",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-icons": "^0.36.1-forms.2",
-    "@mirohq/design-system-stitches": "^2.6.0",
-    "@mirohq/design-system-primitive": "^1.1.2-forms.0",
-    "@mirohq/design-system-base-form": "^0.1.0-forms.1",
+    "@mirohq/design-system-base-form": "^0.1.0-forms.2",
+    "@mirohq/design-system-icons": "^0.36.2-forms.3",
+    "@mirohq/design-system-primitive": "^1.1.2-forms.1",
     "@mirohq/design-system-scroll-area": "^0.2.0",
+    "@mirohq/design-system-stitches": "^2.6.0",
     "@mirohq/design-system-styles": "^1.1.19",
     "@mirohq/design-system-types": "^0.6.2",
-    "@mirohq/design-system-utils": "^0.15.0-forms.1"
+    "@mirohq/design-system-utils": "^0.15.0-forms.2"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",