reshaped 3.8.4 → 3.9.0-canary.0

package/dist/components/Card/Card.d.ts

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
-    attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "translate" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+    attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
         ref?: import("../Actionable/Actionable.types").AttributesRef;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Card/tests/Card.stories.d.ts

@@ -13,7 +13,7 @@ declare const _default: {
         href?: string;
         as?: keyof React.JSX.IntrinsicElements | undefined;
         className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "className" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+        attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "className" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
             ref?: import("../../Actionable/Actionable.types").AttributesRef;
         }) | undefined)) | undefined;
     } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Divider/Divider.js

@@ -3,14 +3,14 @@ import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import Text from "../Text/index.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
-    const { vertical, blank, children, contentPosition = "center", className, attributes } = props;
-    const rootClassNames = classNames(s.root, className, blank && s["--blank"], children ? s[`--content-position-${contentPosition}`] : undefined, ...responsiveClassNames(s, "--vertical", vertical));
+    const { vertical, blank, children, contentPosition = "center", color, offset, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, blank && s["--blank"], color && s[`--color-${color}`], children ? s[`--content-position-${contentPosition}`] : undefined, ...responsiveClassNames(s, "--vertical", vertical));
     // Only support aria-orientation for non-responsive dividers
     let ariaOrientation;
     if (typeof vertical === "boolean" || vertical === undefined) {
         ariaOrientation = vertical ? "vertical" : "horizontal";
     }
-    return (_jsx("div", { ...attributes, role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames, children: children && (_jsx(Text, { color: "neutral-faded", variant: "caption-1", className: s.label, children: children })) }));
+    return (_jsx("div", { ...attributes, role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames, style: { ...attributes?.style, "--rs-divider-offset": offset }, children: children && (_jsx(Text, { color: "neutral-faded", variant: "caption-1", className: s.label, children: children })) }));
 };
 Divider.displayName = "Divider";
 export default Divider;

package/dist/components/Divider/Divider.module.css

@@ -1 +1 @@
-.root{--rs-divider-color:var(--rs-color-border-neutral-faded);align-items:center;display:flex;gap:var(--rs-unit-x2);vertical-align:top;width:100%}.root:after,.root:before{background:var(--rs-divider-color);flex-grow:1;height:1px}.root:before{content:""}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-flex;flex-direction:column;height:100%;width:auto}.--vertical:after,.--vertical:before{height:auto;width:1px}.--vertical:before{content:""}.--vertical:after{content:none}.--vertical.--blank{margin-top:0;margin-inline-start:-1px}.--vertical .label{display:none}.--content-position-center:after,.--content-position-center:before{content:""}.--content-position-start:before{content:none}.--content-position-start:after{content:""}@media (--rs-viewport-m ){.--vertical-true--m{display:inline-flex;flex-direction:column;height:100%;width:auto}.--vertical-true--m:after,.--vertical-true--m:before{height:auto;width:1px}.--vertical-true--m:before{content:""}.--vertical-true--m:after{content:none}.--vertical-true--m.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--m .label{display:none}.--vertical-false--m{display:flex;flex-direction:row;height:auto;width:100%}.--vertical-false--m:after,.--vertical-false--m:before{height:1px;width:auto}.--vertical-false--m.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-l ){.--vertical-true--l{display:inline-flex;flex-direction:column;height:100%;width:auto}.--vertical-true--l:after,.--vertical-true--l:before{height:auto;width:1px}.--vertical-true--l:before{content:""}.--vertical-true--l:after{content:none}.--vertical-true--l.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--l .label{display:none}.--vertical-false--l{display:flex;flex-direction:row;height:auto;width:100%}.--vertical-false--l:after,.--vertical-false--l:before{height:1px;width:auto}.--vertical-false--l.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-xl ){.--vertical-true--xl{display:inline-flex;flex-direction:column;height:100%;width:auto}.--vertical-true--xl:after,.--vertical-true--xl:before{height:auto;width:1px}.--vertical-true--xl:before{content:""}.--vertical-true--xl:after{content:none}.--vertical-true--xl.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--xl .label{display:none}.--vertical-false--xl{display:flex;flex-direction:row;height:auto;width:100%}.--vertical-false--xl:after,.--vertical-false--xl:before{height:1px;width:auto}.--vertical-false--xl.--blank{margin-top:-1px;margin-inline-start:0}}
+.root{--rs-divider-color:var(--rs-color-border-neutral-faded);--rs-divider-offset:0px;align-items:center;display:flex;gap:var(--rs-unit-x2);padding-block:0;padding-inline:var(--rs-divider-offset);vertical-align:top;width:100%}.root:after,.root:before{background:var(--rs-divider-color);flex-grow:1;height:1px}.root:before{content:""}.--color-neutral{--rs-divider-color:var(--rs-color-border-neutral)}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-flex;flex-direction:column;min-height:100%;padding-block:var(--rs-divider-offset);padding-inline:0;width:auto}.--vertical:after,.--vertical:before{height:auto;width:1px}.--vertical:before{content:""}.--vertical:after{content:none}.--vertical.--blank{margin-top:0;margin-inline-start:-1px}.--vertical .label{display:none}.--content-position-center:after,.--content-position-center:before{content:""}.--content-position-start:before{content:none}.--content-position-start:after{content:""}@media (--rs-viewport-m ){.--vertical-true--m{display:inline-flex;flex-direction:column;min-height:100%;padding-block:var(--rs-divider-offset);padding-inline:0;width:auto}.--vertical-true--m:after,.--vertical-true--m:before{height:auto;width:1px}.--vertical-true--m:before{content:""}.--vertical-true--m:after{content:none}.--vertical-true--m.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--m .label{display:none}.--vertical-false--m{display:flex;flex-direction:row;height:auto;padding-block:0;padding-inline:var(--rs-divider-offset);width:100%}.--vertical-false--m:after,.--vertical-false--m:before{height:1px;width:auto}.--vertical-false--m.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-l ){.--vertical-true--l{display:inline-flex;flex-direction:column;min-height:100%;padding-block:var(--rs-divider-offset);padding-inline:0;width:auto}.--vertical-true--l:after,.--vertical-true--l:before{height:auto;width:1px}.--vertical-true--l:before{content:""}.--vertical-true--l:after{content:none}.--vertical-true--l.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--l .label{display:none}.--vertical-false--l{display:flex;flex-direction:row;height:auto;padding-block:0;padding-inline:var(--rs-divider-offset);width:100%}.--vertical-false--l:after,.--vertical-false--l:before{height:1px;width:auto}.--vertical-false--l.--blank{margin-top:-1px;margin-inline-start:0}}@media (--rs-viewport-xl ){.--vertical-true--xl{display:inline-flex;flex-direction:column;min-height:100%;padding-block:var(--rs-divider-offset);padding-inline:0;width:auto}.--vertical-true--xl:after,.--vertical-true--xl:before{height:auto;width:1px}.--vertical-true--xl:before{content:""}.--vertical-true--xl:after{content:none}.--vertical-true--xl.--blank{margin-top:0;margin-inline-start:-1px}.--vertical-true--xl .label{display:none}.--vertical-false--xl{display:flex;flex-direction:row;height:auto;padding-block:0;padding-inline:var(--rs-divider-offset);width:100%}.--vertical-false--xl:after,.--vertical-false--xl:before{height:1px;width:auto}.--vertical-false--xl.--blank{margin-top:-1px;margin-inline-start:0}}

package/dist/components/Divider/Divider.types.d.ts

@@ -5,6 +5,12 @@ export type Props = {
     blank?: boolean;
     /** Change component to render vertically */
     vertical?: G.Responsive<boolean>;
+    /** Offset the divider from the container bounds */
+    offset?: string;
+    /** Color of the divider
+     * @default "neutral-faded"
+     */
+    color?: "neutral-faded" | "neutral";
     /** Position for rendering children */
     contentPosition?: "start" | "center" | "end";
     /** Node for inserting text labels or custom components as a part of divider */

package/dist/components/Divider/tests/Divider.stories.d.ts

@@ -10,7 +10,9 @@ declare const _default: {
 };
 export default _default;
 export declare const rendering: StoryObj;
+export declare const color: StoryObj;
 export declare const vertical: StoryObj;
+export declare const offset: StoryObj;
 export declare const label: {
     name: string;
     render: () => import("react").JSX.Element;

package/dist/components/Divider/tests/Divider.stories.js

@@ -28,6 +28,17 @@ export const rendering = {
         expect(el).toHaveAttribute("aria-orientation", "horizontal");
     },
 };
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="neutral-faded">
+				<Divider color="neutral-faded"/>
+			</Example.Item>
+			<Example.Item title="neutral">
+				<Divider color="neutral"/>
+			</Example.Item>
+		</Example>),
+};
 export const vertical = {
     name: "vertical",
     render: () => (<Example>
@@ -57,6 +68,21 @@ export const vertical = {
         expect(elResponsive).not.toHaveAttribute("aria-orientation");
     },
 };
+export const offset = {
+    name: "offset",
+    render: () => (<Example>
+			<Example.Item title="offset: 10px">
+				<View width="100px" backgroundColor="neutral" paddingBlock={4}>
+					<Divider offset="40px"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="offset: 10px, vertical">
+				<View height="100px" backgroundColor="neutral" paddingInline={4} width="33px">
+					<Divider vertical offset="40px"/>
+				</View>
+			</Example.Item>
+		</Example>),
+};
 export const label = {
     name: "children, contentPosition",
     render: () => {

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -3,7 +3,7 @@ import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

package/dist/components/Flyout/Flyout.types.d.ts

@@ -142,6 +142,8 @@ type BaseProps = {
      * @default document.body
      */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Element used to calculate the position of the content against */
+    positionRef?: React.RefObject<HTMLElement | null>;
     /** Element to focus when the content is opened */
     initialFocusRef?: React.RefObject<HTMLElement | null>;
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -57,7 +57,7 @@ const FlyoutControlled = (props) => {
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
     // eslint-disable-next-line react-hooks/refs
     const flyout = useFlyout({
-        triggerElRef,
+        triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
         // eslint-disable-next-line react-hooks/refs
         triggerBounds: originCoordinates ?? triggerBoundsRef.current,
@@ -162,11 +162,12 @@ const FlyoutControlled = (props) => {
         }
     }, [isRendered, handleOpen, handleClose]);
     const handleTriggerMouseDown = React.useCallback(() => {
-        const rect = triggerElRef.current?.getBoundingClientRect();
+        const triggerEl = positionRef?.current ?? triggerElRef.current;
+        const rect = triggerEl?.getBoundingClientRect();
         if (!rect)
             return;
         triggerBoundsRef.current = rect;
-    }, [triggerElRef]);
+    }, [triggerElRef, positionRef]);
     const handleContentMouseDown = () => {
         lockedBlurEffects.current = true;
         hoverTriggeredWithTouchEventRef.current = true;

package/dist/components/Flyout/tests/Flyout.stories.d.ts

@@ -67,6 +67,7 @@ export declare const disabled: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
 }>;
 export declare const containerRef: StoryObj;
+export declare const positionRef: StoryObj;
 export declare const initialFocusRef: StoryObj;
 export declare const instanceRef: StoryObj<{
     handleOpen: ReturnType<typeof fn>;

package/dist/components/Flyout/tests/Flyout.stories.js

@@ -429,6 +429,36 @@ export const containerRef = {
         expect(containerEl).toContainElement(contentEl);
     },
 };
+export const positionRef = {
+    name: "positionRef",
+    render: () => {
+        const ref = React.useRef(null);
+        return (<View gap={10}>
+				<View.Item>
+					<Flyout position="bottom" positionRef={ref} width="trigger" active>
+						<Flyout.Trigger>
+							{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+						</Flyout.Trigger>
+						<Flyout.Content attributes={{
+                style: {
+                    background: "var(--rs-color-background-elevation-overlay)",
+                    padding: "var(--rs-unit-x4)",
+                    borderRadius: "var(--rs-radius-medium)",
+                    border: "1px solid var(--rs-color-border-neutral-faded)",
+                    boxSizing: "border-box",
+                },
+            }}>
+							Content
+						</Flyout.Content>
+					</Flyout>
+				</View.Item>
+
+				<Button onClick={() => { }} ref={ref}>
+					Trigger 2
+				</Button>
+			</View>);
+    },
+};
 export const initialFocusRef = {
     name: "initialFocusRef",
     render: () => {

package/dist/components/Popover/Popover.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */

package/dist/components/Select/Select.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);display:flex;overflow:hidden;position:relative;z-index:0}.root,.root:after{border-radius:var(--rs-select-radius)}.root:after{box-shadow:0 0 0 1px var(--rs-color-border-neutral) inset;content:"";inset:0;pointer-events:none;position:absolute}[data-rs-keyboard] .root:focus-within:after{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;text-overflow:ellipsis;width:100%;z-index:1}.input::-ms-expand{display:none}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-faded:after{box-shadow:none}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent}.root.--variant-headless:after{box-shadow:none}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent}.root.--variant-headless.--status-error:after,.root.--variant-headless.--status-error:focus-within:after,.root.--variant-headless:focus-within:after{box-shadow:none}.root.--status-error:after{box-shadow:0 0 0 2px var(--rs-color-border-critical) inset}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled:after{box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}
+.root{background:var(--rs-color-background-elevation-base);display:flex;overflow:hidden;position:relative;z-index:0}.root,.root:after{border-radius:var(--rs-select-radius)}.root:after{box-shadow:0 0 0 1px var(--rs-color-border-neutral) inset;content:"";inset:0;pointer-events:none;position:absolute}[data-rs-keyboard] .root:focus-within:after{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;text-overflow:ellipsis;width:100%;z-index:1}.input::-ms-expand{display:none}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.group{--rs-select-group-padding:calc(var(--rs-unit-x1) - 1px);margin-inline:calc((var(--rs-select-group-padding) * -1));padding-inline:var(--rs-select-group-padding)}.group:not(:first-child){border-top:1px solid var(--rs-color-border-neutral-faded);margin-top:var(--rs-select-group-padding);padding-top:var(--rs-select-group-padding)}.group:not(:first-child) .group-label{padding-top:var(--rs-unit-x3)}.group-label{padding:var(--rs-unit-x2) var(--rs-unit-x3) var(--rs-unit-x1)}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-faded:after{box-shadow:none}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-ghost,.root.--variant-headless{background:transparent}.root.--variant-ghost:after,.root.--variant-headless:after{box-shadow:none}.root.--variant-ghost.--status-error,.root.--variant-ghost.--status-error:focus-within,.root.--variant-ghost:focus-within,.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent}.root.--variant-headless.--status-error:after,.root.--variant-headless.--status-error:focus-within:after,.root.--variant-headless:focus-within:after{box-shadow:none}.root.--status-error:after{box-shadow:0 0 0 2px var(--rs-color-border-critical) inset}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled:after{box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x4)}}

package/dist/components/Select/Select.types.d.ts

@@ -5,6 +5,12 @@ import type { ActionableProps } from "../Actionable";
 import type { MenuItemProps } from "../MenuItem";
 import { DropdownMenuProps } from "../DropdownMenu";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
+type RenderSingleValue = (args: {
+    value: string;
+}) => React.ReactNode;
+type RenderMultipleValues = (args: {
+    value: string[];
+}) => React.ReactNode;
 type NativeOption = {
     /** Option text label */
     label: string;
@@ -16,8 +22,8 @@ type NativeOption = {
 export type OptionProps = Pick<MenuItemProps, "attributes" | "children" | "className" | "disabled" | "endSlot" | "startSlot" | "icon" | "onClick"> & {
     value: string;
 };
-export type OptionGroupProps = {
-    label: string;
+export type GroupProps = {
+    label?: string;
     children: React.ReactNode;
 };
 type BaseFragment = {
@@ -27,7 +33,7 @@ type BaseFragment = {
     /** Component size */
     size?: Size;
     /** Component render variant */
-    variant?: "outline" | "faded" | "headless";
+    variant?: "outline" | "faded" | "ghost" | "headless";
     /** Disable the select user interaction and form submission */
     disabled?: boolean;
     /** Placeholder text when there is no value selected */
@@ -56,7 +62,7 @@ export type CustomFragment = {
     onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
     /** Additional attributes for the trigger element */
     inputAttributes?: ActionableProps["attributes"];
-} & Pick<DropdownMenuProps, "position" | "width" | "fallbackPositions">;
+} & Pick<DropdownMenuProps, "position" | "width" | "fallbackPositions" | "positionRef">;
 export type NativeFragment = {
     /** Options for the select */
     /** @deprecated Use <option /> children instead */
@@ -71,39 +77,39 @@ export type NativeFragment = {
 export type NativeControlledFragment = {
     value: string;
     defaultValue?: never;
-    /** Callback when the input value changes */
+    renderValue?: never;
     onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
 };
 export type NativeUncontrolledFragment = {
     value?: never;
     defaultValue?: string;
-    /** Callback when the input value changes */
+    renderValue?: never;
     onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
 };
 export type CustomControlledFragment = {
     multiple?: false;
     value: string;
     defaultValue?: never;
-    /** Callback when the input value changes */
+    renderValue?: RenderSingleValue;
     onChange?: G.ChangeHandler<string>;
 } | {
     multiple: true;
     value: string[];
     defaultValue?: never[];
-    /** Callback when the input value changes */
+    renderValue?: RenderMultipleValues;
     onChange?: G.ChangeHandler<string[]>;
 };
 export type CustomUncontrolledFragment = {
     multiple?: false;
     value?: never;
     defaultValue?: string;
-    /** Callback when the input value changes */
+    renderValue?: RenderSingleValue;
     onChange?: G.ChangeHandler<string>;
 } | {
     multiple: true;
     value?: never[];
     defaultValue?: string[];
-    /** Callback when the input value changes */
+    renderValue?: RenderMultipleValues;
     onChange?: G.ChangeHandler<string[]>;
 };
 export type NativeControlledProps = BaseFragment & NativeFragment & NativeControlledFragment;
@@ -119,5 +125,4 @@ export type TriggerProps = Pick<CustomControlledProps, "disabled" | "onClick" |
 export type RootProps = Omit<Props, "children"> & {
     children: (props: Omit<Props, "children">) => React.ReactNode;
 };
-export type SelectContextProps = CustomControlledProps;
 export {};

package/dist/components/Select/SelectCustomControlled.js

@@ -8,9 +8,10 @@ import { responsivePropDependency } from "../../utilities/props.js";
 import SelectRoot from "./SelectRoot.js";
 import SelectTrigger from "./SelectTrigger.js";
 import SelectOption from "./SelectOption.js";
-import SelectOptionGroup from "./SelectOptionGroup.js";
+import SelectGroup from "./SelectGroup.js";
+import View from "../View/index.js";
 const SelectCustomControlled = (props) => {
-    const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, } = props;
+    const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, positionRef, renderValue: passedRenderValue, } = props;
     const initialFocusRef = React.useRef(null);
     const searchStringRef = React.useRef("");
     const searchTimeoutRef = React.useRef(null);
@@ -47,22 +48,24 @@ const SelectCustomControlled = (props) => {
                             props.onChange?.({ value: option.value, name });
                         }
                     },
-                    startSlot: option?.startSlot || (hasValue && _jsx(Icon, { svg: selected ? CheckmarkIcon : null })),
+                    startSlot: option?.startSlot !== undefined
+                        ? option.startSlot
+                        : hasValue && _jsx(Icon, { svg: selected ? CheckmarkIcon : null }),
                     attributes: {
                         ...component.props.attributes,
                         ref: selected ? initialFocusRef : undefined,
                     },
                 });
             }
-            if (child.type === SelectOptionGroup) {
+            if (child.type === SelectGroup) {
                 const component = child;
-                const optionGroup = component.props;
+                const group = component.props;
                 return React.cloneElement(component, {
-                    key: optionGroup.label,
-                    children: traverseOptionList(optionGroup.children),
+                    key: group.label ?? index,
+                    children: traverseOptionList(group.children),
                 });
             }
-            return null;
+            return child;
         });
     };
     // eslint-disable-next-line react-hooks/refs
@@ -84,8 +87,22 @@ const SelectCustomControlled = (props) => {
             searchStringRef.current = "";
         }, 1000);
     };
+    const renderValue = () => {
+        if (passedRenderValue) {
+            // Returning the same call for correct type inference
+            if (multiple)
+                return passedRenderValue({ value });
+            return passedRenderValue({ value });
+        }
+        if (selectedOptions.length === 1)
+            return selectedOptions[0].children;
+        if (selectedOptions.length > 1) {
+            return (_jsx(View, { direction: "row", gap: 4, children: selectedOptions.map((option) => (_jsx(View.Item, { children: option.children }, option.value))) }));
+        }
+        return null;
+    };
     return (_jsx(SelectRoot, { ...props, children: (props) => {
-            return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: true, fallbackMinHeight: "150px", borderRadius: responsivePropDependency(size, (size) => size === "large" || size === "xlarge" ? "medium" : "small"), initialFocusRef: initialFocusRef, children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
+            return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: true, fallbackMinHeight: "220px", borderRadius: responsivePropDependency(size, (size) => size === "large" || size === "xlarge" ? "medium" : "small"), initialFocusRef: initialFocusRef, positionRef: positionRef, children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
                             const triggerProps = {
                                 ...props,
                                 inputAttributes: {
@@ -93,7 +110,7 @@ const SelectCustomControlled = (props) => {
                                     ...attributes,
                                 },
                             };
-                            return (_jsx(SelectTrigger, { ...triggerProps, value: value, children: selectedOptions?.map((option) => option.children).join(", ") }));
+                            return (_jsx(SelectTrigger, { ...triggerProps, value: value, children: renderValue() }));
                         } }), _jsx(DropdownMenu.Content, { attributes: {
                             ref: dropdownRef,
                             onKeyDown: handleKeyDown,

package/dist/components/Select/SelectGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectGroup: React.FC<T.GroupProps>;
+export default SelectGroup;

package/dist/components/Select/SelectGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import s from "./Select.module.css";
+const SelectGroup = (props) => {
+    const { label, children } = props;
+    return (_jsxs(View, { attributes: { role: "group" }, gap: 1, className: s.group, children: [label && (_jsx("div", { className: s["group-label"], children: _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: label }) })), _jsx(View.Item, { children: children })] }));
+};
+SelectGroup.displayName = "Select.Group";
+export default SelectGroup;

package/dist/components/Select/SelectTrigger.js

@@ -11,6 +11,6 @@ const SelectTrigger = (props) => {
                     onFocus: onFocus || inputAttributes?.onFocus,
                     onBlur: onBlur || inputAttributes?.onBlur,
                     ...inputAttributes,
-                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: typeof value === "string" ? value : JSON.stringify(value), name: name, id: id })] }));
+                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? (_jsx(Text, { maxLines: typeof children === "string" ? 1 : undefined, children: children })) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: typeof value === "string" ? value : JSON.stringify(value), name: name, id: id })] }));
 };
 export default SelectTrigger;

package/dist/components/Select/index.d.ts

@@ -1,11 +1,12 @@
 import Select from "./Select";
 import SelectCustom from "./SelectCustom";
 import SelectOption from "./SelectOption";
-import SelectOptionGroup from "./SelectOptionGroup";
+import SelectGroup from "./SelectGroup";
 declare const SelectRoot: typeof Select & {
     Custom: typeof SelectCustom;
     Option: typeof SelectOption;
-    OptionGroup: typeof SelectOptionGroup;
+    Group: typeof SelectGroup;
+    OptionGroup: typeof SelectGroup;
 };
 export default SelectRoot;
 export type { Props as SelectProps } from "./Select.types";

package/dist/components/Select/index.js

@@ -1,9 +1,10 @@
 import Select from "./Select.js";
 import SelectCustom from "./SelectCustom.js";
 import SelectOption from "./SelectOption.js";
-import SelectOptionGroup from "./SelectOptionGroup.js";
+import SelectGroup from "./SelectGroup.js";
 const SelectRoot = Select;
 SelectRoot.Custom = SelectCustom;
 SelectRoot.Option = SelectOption;
-SelectRoot.OptionGroup = SelectOptionGroup;
+SelectRoot.Group = SelectGroup;
+SelectRoot.OptionGroup = SelectGroup;
 export default SelectRoot;

package/dist/components/Select/tests/Select.stories.d.ts

@@ -6,7 +6,8 @@ declare const _default: {
     component: React.FC<import("../Select.types").NativeProps> & {
         Custom: React.FC<import("../Select.types").CustomProps>;
         Option: React.FC<import("../Select.types").OptionProps>;
-        OptionGroup: React.FC<import("../Select.types").OptionGroupProps>;
+        Group: React.FC<import("../Select.types").GroupProps>;
+        OptionGroup: React.FC<import("../Select.types").GroupProps>;
     };
     parameters: {
         iframe: {
@@ -40,8 +41,13 @@ export declare const multiple: StoryObj<{
 export declare const variant: StoryObj;
 export declare const size: StoryObj;
 export declare const startSlot: StoryObj;
+export declare const renderValue: {
+    name: string;
+    render: () => React.JSX.Element;
+};
 export declare const error: StoryObj;
 export declare const disabled: StoryObj;
 export declare const className: StoryObj;
 export declare const fallback: StoryObj;
 export declare const formControl: StoryObj;
+export declare const testComposition: StoryObj;