@intlayer/design-system 7.0.8 → 7.0.9-canary.2

package/dist/esm/components/Popover/static.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"static.mjs","names":["PopoverStatic: PopoverType"],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned) or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n *   identifier=\"context-menu\"\n *   displayArrow={false}\n *   xAlign={PopoverXAlign.END}\n * >\n *   <ul className=\"py-2\">\n *     <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n *     <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n *   </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail = forwardRef<HTMLDivElement, DetailProps>(\n  (\n    {\n      children,\n      isHidden = undefined,\n      isOverable = true,\n      isFocusable = false,\n      xAlign = PopoverXAlign.START,\n      yAlign = PopoverYAlign.BELOW,\n      identifier,\n      className,\n      displayArrow = true,\n      ...props\n    },\n    ref\n  ) => (\n    <Container\n      ref={ref}\n      transparency=\"sm\"\n      role=\"group\"\n      aria-hidden={isHidden}\n      aria-labelledby={`unrollable-panel-button-${identifier}`}\n      id={`unrollable-panel-${identifier}`}\n      className={cn(\n        'absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral',\n\n        /* Positioning */\n        xAlign === 'start' && 'left-0',\n        xAlign === 'end' && 'right-0',\n        yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n        yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n        /* Arrow indicator */\n        displayArrow &&\n          'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n        /* Horizontal positioning */\n        displayArrow && xAlign === 'start' && 'before:left-2',\n        displayArrow && xAlign === 'end' && 'before:right-2',\n\n        /* Arrow pointing up (when popover is below trigger) */\n        displayArrow &&\n          yAlign === 'bellow' &&\n          'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n        /* Arrow pointing down (when popover is above trigger) */\n        displayArrow &&\n          yAlign === 'above' &&\n          'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n        /* Visibility management */\n        'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n        isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n        isOverable &&\n          'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n        isFocusable &&\n          'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Container>\n  )\n);\n\nDetail.displayName = 'Popover.Detail';\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;;AA4BA,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,0DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFF,MAAaA,iBAA8B,EACzC,UACA,WACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAM,SAAS,YAEX,EACE,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,YACA,WACA,eAAe,KACf,GAAG,SAEL,QAEA,oBAAC;CACM;CACL,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,+DAGA,WAAW,WAAW,UACtB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;EACS,CAEf;AAED,OAAO,cAAc;AAErB,cAAc,SAAS"}
+{"version":3,"file":"static.mjs","names":["PopoverStatic: PopoverType"],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned) or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n *   identifier=\"context-menu\"\n *   displayArrow={false}\n *   xAlign={PopoverXAlign.END}\n * >\n *   <ul className=\"py-2\">\n *     <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n *     <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n *   </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail = forwardRef<HTMLDivElement, DetailProps>(\n  (\n    {\n      children,\n      isHidden = undefined,\n      isOverable = true,\n      isFocusable = false,\n      xAlign = PopoverXAlign.START,\n      yAlign = PopoverYAlign.BELOW,\n      identifier,\n      className,\n      displayArrow = true,\n      ...props\n    },\n    ref\n  ) => (\n    <Container\n      ref={ref}\n      transparency=\"sm\"\n      role=\"group\"\n      aria-hidden={isHidden}\n      aria-labelledby={`unrollable-panel-button-${identifier}`}\n      id={`unrollable-panel-${identifier}`}\n      className={cn(\n        'absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral',\n\n        /* Positioning */\n        xAlign === 'start' && 'left-0',\n        xAlign === 'end' && 'right-0',\n        yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n        yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n        /* Arrow indicator */\n        displayArrow &&\n          'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n        /* Horizontal positioning */\n        displayArrow && xAlign === 'start' && 'before:left-2',\n        displayArrow && xAlign === 'end' && 'before:right-2',\n\n        /* Arrow pointing up (when popover is below trigger) */\n        displayArrow &&\n          yAlign === 'bellow' &&\n          'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n        /* Arrow pointing down (when popover is above trigger) */\n        displayArrow &&\n          yAlign === 'above' &&\n          'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n        /* Visibility management */\n        'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n        isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n        isOverable &&\n          'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n        isFocusable &&\n          'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Container>\n  )\n);\n\nDetail.displayName = 'Popover.Detail';\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;;AA4BA,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,0DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFF,MAAaA,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAM,SAAS,YAEX,EACE,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,YACA,WACA,eAAe,MACf,GAAG,SAEL,QAEA,oBAAC;CACM;CACL,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,+DAGA,WAAW,WAAW,UACtB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;EACS,CAEf;AAED,OAAO,cAAc;AAErB,cAAc,SAAS"}

package/dist/esm/components/PressableSpan/PressableSpan.mjs

@@ -66,7 +66,7 @@ const DEFAULT_PRESS_DETECT_DURATION = 400;
 * </PressableSpan>
 * ```
 */
-const PressableSpan = ({ children, onPress: onSelect, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp,...props }) => {
+const PressableSpan = ({ children, onPress: onSelect, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp, ...props }) => {
 	const elementRef = useRef(null);
 	const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
 	const pressTimerRef = useRef(null);

package/dist/esm/components/PressableSpan/PressableSpan.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.mjs","names":["PressableSpan: FC<PressableSpanProps>","handleOnClick: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/**\n * Props for the PressableSpan component\n */\ntype PressableSpanProps = {\n  /**\n   * Callback function triggered when a long press is detected\n   * @example\n   * ```tsx\n   * <PressableSpan onPress={() => console.log('Long pressed!')}>\n   *   Press and hold me\n   * </PressableSpan>\n   * ```\n   */\n  onPress: () => void;\n\n  /**\n   * Optional callback function triggered when clicking outside the component while it's in selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan\n   *   onPress={() => setIsEditing(true)}\n   *   onClickOutside={() => setIsEditing(false)}\n   * >\n   *   Click outside to deselect\n   * </PressableSpan>\n   * ```\n   */\n  onClickOutside?: () => void;\n\n  /**\n   * Duration in milliseconds for long press detection\n   * @default 400\n   * @example\n   * ```tsx\n   * <PressableSpan pressDuration={800} onPress={() => {}}>\n   *   Longer press required\n   * </PressableSpan>\n   * ```\n   */\n  pressDuration?: number;\n\n  /**\n   * External control for the selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n   *   Externally controlled\n   * </PressableSpan>\n   * ```\n   */\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * PressableSpan - An interactive span element that responds to long press gestures\n *\n * A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n *\n * ## Key Features\n * - **Long Press Detection**: Configurable press duration for different interaction patterns\n * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states\n * - **Click Outside Detection**: Automatically deselects when clicking outside the component\n * - **Touch Support**: Works seamlessly on both desktop and mobile devices\n * - **Accessible**: Keyboard navigation support and proper ARIA attributes\n *\n * ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n *\n * ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n *\n * @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n *   Press and hold to edit this text\n * </PressableSpan>\n * ```\n *\n * @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n *   pressDuration={600}\n *   onPress={() => setIsEditing(true)}\n *   onClickOutside={() => setIsEditing(false)}\n *   isSelecting={isEditing}\n * >\n *   Custom behavior configuration\n * </PressableSpan>\n * ```\n *\n * @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n *   onPress={() => startEditingContent(contentId)}\n *   onClickOutside={() => saveAndExitEditing()}\n *   className=\"prose-text\"\n * >\n *   {editableContent}\n * </PressableSpan>\n * ```\n */\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (\n        elementRef.current &&\n        !elementRef.current.contains(event.target as Node)\n      ) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  /**\n   * Handle keyboard interactions\n   * - Enter/Space: Trigger long press action immediately\n   * - Escape: Cancel selection/editing state\n   */\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        handleOnLongPress();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setIsSelectingState(false);\n        onUnselect?.();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n        isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n      aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n      onKeyDown={handleKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={elementRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHtC,MAAaA,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,gBACb,GAAG,YACC;CACJ,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,gBAAgB;CACzE,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,0BAA0B;AAC9B,sBAAoB,KAAK;AACzB,YAAU;;CAGZ,MAAM,wBAAwB;AAC5B,gBAAc,UAAU,iBAAiB;AACvC,sBAAmB;KAClB,cAAc;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,cAAc,SAAS;AACzB,gBAAa,cAAc,QAAQ;AACnC,iBAAc,UAAU;;;CAI5B,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,mBAAiB;;CAGnB,MAAM,sBAAsB;AAC1B,mBAAiB;;CAInB,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,EAClD;AACA,uBAAoB,MAAM;AAC1B,iBAAc;;IAGlB,CAAC,WAAW,CACb;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,mBAAmB;AAE1D,eAAa;AAEX,YAAS,oBAAoB,aAAa,mBAAmB;;IAG9D,CAAC,mBAAmB,CAAC;CAExB,MAAMC,iBAAoD,MAAM;AAC9D,MAAI,kBAAkB;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAM,qBAAqB;AAEzB,sBAAoB,MAAM;;;;;;;CAQ5B,MAAM,iBAAiB,MAA4C;AACjE,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,uBAAmB;AACnB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,wBAAoB,MAAM;AAC1B,kBAAc;AACd;GACF,QACE;;;CAIN,MAAM,uBAAuB,mBAAmB;AAEhD,QACE,oBAAC;EACC,WAAW,GACT,6IACA,uBAAuB,oBAAoB,wBAC5C;EACD,MAAK;EACL,UAAU;EACV,gBAAc,uBAAuB,SAAS;EAC9C,cAAY,GAAG,uBAAuB,aAAa,aAAa;EAChE,WAAW;EACX,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,KAAK;EACL,GAAI;EAEH;GACI"}
+{"version":3,"file":"PressableSpan.mjs","names":["PressableSpan: FC<PressableSpanProps>","handleOnClick: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/**\n * Props for the PressableSpan component\n */\ntype PressableSpanProps = {\n  /**\n   * Callback function triggered when a long press is detected\n   * @example\n   * ```tsx\n   * <PressableSpan onPress={() => console.log('Long pressed!')}>\n   *   Press and hold me\n   * </PressableSpan>\n   * ```\n   */\n  onPress: () => void;\n\n  /**\n   * Optional callback function triggered when clicking outside the component while it's in selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan\n   *   onPress={() => setIsEditing(true)}\n   *   onClickOutside={() => setIsEditing(false)}\n   * >\n   *   Click outside to deselect\n   * </PressableSpan>\n   * ```\n   */\n  onClickOutside?: () => void;\n\n  /**\n   * Duration in milliseconds for long press detection\n   * @default 400\n   * @example\n   * ```tsx\n   * <PressableSpan pressDuration={800} onPress={() => {}}>\n   *   Longer press required\n   * </PressableSpan>\n   * ```\n   */\n  pressDuration?: number;\n\n  /**\n   * External control for the selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n   *   Externally controlled\n   * </PressableSpan>\n   * ```\n   */\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * PressableSpan - An interactive span element that responds to long press gestures\n *\n * A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n *\n * ## Key Features\n * - **Long Press Detection**: Configurable press duration for different interaction patterns\n * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states\n * - **Click Outside Detection**: Automatically deselects when clicking outside the component\n * - **Touch Support**: Works seamlessly on both desktop and mobile devices\n * - **Accessible**: Keyboard navigation support and proper ARIA attributes\n *\n * ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n *\n * ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n *\n * @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n *   Press and hold to edit this text\n * </PressableSpan>\n * ```\n *\n * @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n *   pressDuration={600}\n *   onPress={() => setIsEditing(true)}\n *   onClickOutside={() => setIsEditing(false)}\n *   isSelecting={isEditing}\n * >\n *   Custom behavior configuration\n * </PressableSpan>\n * ```\n *\n * @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n *   onPress={() => startEditingContent(contentId)}\n *   onClickOutside={() => saveAndExitEditing()}\n *   className=\"prose-text\"\n * >\n *   {editableContent}\n * </PressableSpan>\n * ```\n */\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (\n        elementRef.current &&\n        !elementRef.current.contains(event.target as Node)\n      ) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  /**\n   * Handle keyboard interactions\n   * - Enter/Space: Trigger long press action immediately\n   * - Escape: Cancel selection/editing state\n   */\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        handleOnLongPress();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setIsSelectingState(false);\n        onUnselect?.();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n        isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n      aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n      onKeyDown={handleKeyDown}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={elementRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHtC,MAAaA,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,iBACb,GAAG,YACC;CACJ,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,gBAAgB;CACzE,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,0BAA0B;AAC9B,sBAAoB,KAAK;AACzB,YAAU;;CAGZ,MAAM,wBAAwB;AAC5B,gBAAc,UAAU,iBAAiB;AACvC,sBAAmB;KAClB,cAAc;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,cAAc,SAAS;AACzB,gBAAa,cAAc,QAAQ;AACnC,iBAAc,UAAU;;;CAI5B,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,mBAAiB;;CAGnB,MAAM,sBAAsB;AAC1B,mBAAiB;;CAInB,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,EAClD;AACA,uBAAoB,MAAM;AAC1B,iBAAc;;IAGlB,CAAC,WAAW,CACb;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,mBAAmB;AAE1D,eAAa;AAEX,YAAS,oBAAoB,aAAa,mBAAmB;;IAG9D,CAAC,mBAAmB,CAAC;CAExB,MAAMC,iBAAoD,MAAM;AAC9D,MAAI,kBAAkB;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAM,qBAAqB;AAEzB,sBAAoB,MAAM;;;;;;;CAQ5B,MAAM,iBAAiB,MAA4C;AACjE,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,uBAAmB;AACnB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,wBAAoB,MAAM;AAC1B,kBAAc;AACd;GACF,QACE;;;CAIN,MAAM,uBAAuB,mBAAmB;AAEhD,QACE,oBAAC;EACC,WAAW,GACT,6IACA,uBAAuB,oBAAoB,wBAC5C;EACD,MAAK;EACL,UAAU;EACV,gBAAc,uBAAuB,SAAS;EAC9C,cAAY,GAAG,uBAAuB,aAAa,aAAa;EAChE,WAAW;EACX,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,KAAK;EACL,GAAI;EAEH;GACI"}

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useDevice } from "../../hooks/useDevice.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";

package/dist/esm/components/Select/Multiselect.mjs

@@ -128,7 +128,7 @@ const useMultiSelect = () => {
 * </form>
 * ```
 */
-const MultiSelectRoot = ({ values: valuesProp, defaultValues, onValueChange, loop = false, className, children, dir,...props }) => {
+const MultiSelectRoot = ({ values: valuesProp, defaultValues, onValueChange, loop = false, className, children, dir, ...props }) => {
 	const [value, setValue] = useState(defaultValues ?? []);
 	const [inputValue, setInputValue] = useState("");
 	const [open, setOpen] = useState(false);
@@ -239,14 +239,14 @@ const MultiSelectRoot = ({ values: valuesProp, defaultValues, onValueChange, loo
 		})
 	});
 };
-const MultiSelectTrigger = ({ className, getBadgeValue = (value$1) => value$1, validationStyleEnabled = false, children,...props }) => {
+const MultiSelectTrigger = ({ className, getBadgeValue = (value$1) => value$1, validationStyleEnabled = false, children, ...props }) => {
 	const { value, onValueChange, activeIndex } = useMultiSelect();
 	const mousePreventDefault = useCallback((e) => {
 		e.preventDefault();
 		e.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex w-full flex-col gap-3 rounded-lg p-1 py-2", "flex w-full items-center justify-between whitespace-nowrap border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all", "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]", "aria-[invalid=true]:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
+		className: cn("flex w-full flex-col gap-3", "cursor-pointer select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-within:outline-none", "focus-within:ring-3", "focus-within:ring-neutral-200", "dark:focus-within:ring-neutral-500", "focus-within:ring-offset-white", "dark:focus-within:ring-offset-neutral-500", "[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
 		...props,
 		children: [value.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex w-full flex-wrap gap-1",
@@ -274,7 +274,7 @@ const MultiSelectTrigger = ({ className, getBadgeValue = (value$1) => value$1, v
 		}), children]
 	});
 };
-const MultiSelectInput = ({ className,...props }) => {
+const MultiSelectInput = ({ className, ...props }) => {
 	const { setOpen, inputValue, setInputValue, activeIndex, setActiveIndex, handleSelect, ref: inputRef } = useMultiSelect();
 	return /* @__PURE__ */ jsx(Command.Input, {
 		...props,
@@ -297,13 +297,13 @@ const MultiSelectContent = ({ children }) => {
 	});
 };
 const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxs(Command.List, {
-	className: cn("absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border border-muted bg-input-background p-2 shadow-md transition-colors", className),
+	className: cn("absolute top-0 z-10 flex w-full flex-col gap-2", "rounded-xl p-2 shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "transition-colors", className),
 	children: [children, /* @__PURE__ */ jsx(Command.Empty, { children: /* @__PURE__ */ jsx("span", {
 		className: "text-muted-foreground",
 		children: "No results found"
 	}) })]
 });
-const MultiSelectItem = ({ className, value, children,...props }) => {
+const MultiSelectItem = ({ className, value, children, ...props }) => {
 	const { value: Options, onValueChange, setInputValue } = useMultiSelect();
 	const mousePreventDefault = useCallback((e) => {
 		e.preventDefault();
@@ -316,7 +316,7 @@ const MultiSelectItem = ({ className, value, children,...props }) => {
 			onValueChange(value);
 			setInputValue("");
 		},
-		className: cn("flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors", "hover:bg-neutral/10", className, isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50"),
+		className: cn("flex cursor-pointer justify-between", "rounded-lg px-2 py-1", "transition-colors", "hover:bg-neutral/10", isIncluded && "opacity-50", props.disabled && "cursor-not-allowed opacity-50", className),
 		onMouseDown: mousePreventDefault,
 		children: [children, isIncluded && /* @__PURE__ */ jsx(Check, { className: "size-4" })]
 	});

package/dist/esm/components/Select/Multiselect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.mjs","names":["MultiSelectRoot: FC<MultiSelectProps>","MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n>","value","mousePreventDefault: MouseEventHandler<HTMLButtonElement>","RemoveIcon","MultiSelectInput: FC<ComponentProps<typeof Command.Input>>","MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>>","MultiSelectList: typeof Command.List","MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n>","mousePreventDefault: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge, BadgeColor } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/**\n * Context properties for MultiSelect component state management\n *\n * @interface MultiSelectContextProps\n */\ntype MultiSelectContextProps = {\n  /** Array of currently selected values */\n  value: string[];\n  /** Handler for value changes */\n  onValueChange: (value: string) => void;\n  /** Whether the dropdown is currently open */\n  open: boolean;\n  /** Function to set the open state */\n  setOpen: (value: boolean) => void;\n  /** Current input field value for filtering */\n  inputValue: string;\n  /** Function to set the input value */\n  setInputValue: Dispatch<SetStateAction<string>>;\n  /** Index of currently focused option for keyboard navigation */\n  activeIndex: number;\n  /** Function to set the active index */\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  /** Ref to the input element */\n  ref: RefObject<HTMLInputElement | null>;\n  /** Handler for option selection */\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\n/**\n * Custom hook to access MultiSelect context\n *\n * Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n *\n * @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n *\n * @example\n * ```tsx\n * function CustomMultiSelectItem() {\n *   const { value, onValueChange, open } = useMultiSelect();\n *   // Use context properties...\n * }\n * ```\n */\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * Props interface for the main MultiSelect component\n *\n * @interface MultiSelectProps\n */\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  /**\n   * Array of selected values (controlled mode)\n   * @example\n   * ```tsx\n   * const [selected, setSelected] = useState(['react', 'vue']);\n   * <MultiSelect values={selected} onValueChange={setSelected} />\n   * ```\n   */\n  values?: string[];\n\n  /**\n   * Default selected values for uncontrolled mode\n   * @example\n   * ```tsx\n   * <MultiSelect defaultValues={['react']} />\n   * ```\n   */\n  defaultValues?: string[];\n\n  /**\n   * Callback fired when selection changes\n   * @param value - New array of selected values\n   * @example\n   * ```tsx\n   * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n   * ```\n   */\n  onValueChange?: (value: string[]) => void;\n\n  /**\n   * Whether keyboard navigation should loop through options\n   * @default false\n   * @example\n   * ```tsx\n   * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n   * ```\n   */\n  loop?: boolean;\n};\n\n/**\n * MultiSelect - A comprehensive multi-selection dropdown component\n *\n * An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n *\n * ## Key Features\n * - **Multi-Selection**: Select multiple options with visual badge representation\n * - **Searchable**: Built-in filtering to quickly find options in large lists\n * - **Keyboard Navigation**: Full arrow key navigation with optional looping\n * - **Accessibility**: Screen reader support, ARIA attributes, and focus management\n * - **Flexible State**: Both controlled and uncontrolled usage patterns\n * - **Rich UI**: Customizable badges, icons, and content layout\n *\n * ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n *\n * ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove\n * - **Screen Readers**: Proper ARIA labels and live region announcements\n * - **Focus Management**: Clear focus indicators and logical tab flow\n * - **Search**: Real-time filtering with screen reader announcements\n *\n * @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n *\n * <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select frameworks...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value=\"react\">React</MultiSelect.Item>\n *       <MultiSelect.Item value=\"vue\">Vue</MultiSelect.Item>\n *       <MultiSelect.Item value=\"svelte\">Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Choose technologies...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value=\"react\">⚛️ React</MultiSelect.Item>\n *       <MultiSelect.Item value=\"vue\">💚 Vue</MultiSelect.Item>\n *       <MultiSelect.Item value=\"angular\">🔴 Angular</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <MultiSelect\n *     values={selectedSkills}\n *     onValueChange={setSelectedSkills}\n *     required\n *   >\n *     <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n *       <MultiSelect.Input placeholder=\"Select your skills...\" />\n *     </MultiSelect.Trigger>\n *     <MultiSelect.Content>\n *       <MultiSelect.List>\n *         <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n *       </MultiSelect.List>\n *     </MultiSelect.Content>\n *   </MultiSelect>\n * </form>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n        'flex w-full items-center justify-between whitespace-nowrap border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-2 ring-muted-foreground'\n              )}\n              color={BadgeColor.TEXT}\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-hidden',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      'absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border border-muted bg-input-background p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"mappings":"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"}
+{"version":3,"file":"Multiselect.mjs","names":["MultiSelectRoot: FC<MultiSelectProps>","MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n>","value","mousePreventDefault: MouseEventHandler<HTMLButtonElement>","RemoveIcon","MultiSelectInput: FC<ComponentProps<typeof Command.Input>>","MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>>","MultiSelectList: typeof Command.List","MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n>","mousePreventDefault: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type Dispatch,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type LegacyRef,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge, BadgeColor } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/**\n * Context properties for MultiSelect component state management\n *\n * @interface MultiSelectContextProps\n */\ntype MultiSelectContextProps = {\n  /** Array of currently selected values */\n  value: string[];\n  /** Handler for value changes */\n  onValueChange: (value: string) => void;\n  /** Whether the dropdown is currently open */\n  open: boolean;\n  /** Function to set the open state */\n  setOpen: (value: boolean) => void;\n  /** Current input field value for filtering */\n  inputValue: string;\n  /** Function to set the input value */\n  setInputValue: Dispatch<SetStateAction<string>>;\n  /** Index of currently focused option for keyboard navigation */\n  activeIndex: number;\n  /** Function to set the active index */\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  /** Ref to the input element */\n  ref: RefObject<HTMLInputElement | null>;\n  /** Handler for option selection */\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\n/**\n * Custom hook to access MultiSelect context\n *\n * Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n *\n * @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n *\n * @example\n * ```tsx\n * function CustomMultiSelectItem() {\n *   const { value, onValueChange, open } = useMultiSelect();\n *   // Use context properties...\n * }\n * ```\n */\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * Props interface for the main MultiSelect component\n *\n * @interface MultiSelectProps\n */\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  /**\n   * Array of selected values (controlled mode)\n   * @example\n   * ```tsx\n   * const [selected, setSelected] = useState(['react', 'vue']);\n   * <MultiSelect values={selected} onValueChange={setSelected} />\n   * ```\n   */\n  values?: string[];\n\n  /**\n   * Default selected values for uncontrolled mode\n   * @example\n   * ```tsx\n   * <MultiSelect defaultValues={['react']} />\n   * ```\n   */\n  defaultValues?: string[];\n\n  /**\n   * Callback fired when selection changes\n   * @param value - New array of selected values\n   * @example\n   * ```tsx\n   * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n   * ```\n   */\n  onValueChange?: (value: string[]) => void;\n\n  /**\n   * Whether keyboard navigation should loop through options\n   * @default false\n   * @example\n   * ```tsx\n   * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n   * ```\n   */\n  loop?: boolean;\n};\n\n/**\n * MultiSelect - A comprehensive multi-selection dropdown component\n *\n * An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n *\n * ## Key Features\n * - **Multi-Selection**: Select multiple options with visual badge representation\n * - **Searchable**: Built-in filtering to quickly find options in large lists\n * - **Keyboard Navigation**: Full arrow key navigation with optional looping\n * - **Accessibility**: Screen reader support, ARIA attributes, and focus management\n * - **Flexible State**: Both controlled and uncontrolled usage patterns\n * - **Rich UI**: Customizable badges, icons, and content layout\n *\n * ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n *\n * ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove\n * - **Screen Readers**: Proper ARIA labels and live region announcements\n * - **Focus Management**: Clear focus indicators and logical tab flow\n * - **Search**: Real-time filtering with screen reader announcements\n *\n * @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n *\n * <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select frameworks...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value=\"react\">React</MultiSelect.Item>\n *       <MultiSelect.Item value=\"vue\">Vue</MultiSelect.Item>\n *       <MultiSelect.Item value=\"svelte\">Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Choose technologies...\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value=\"react\">⚛️ React</MultiSelect.Item>\n *       <MultiSelect.Item value=\"vue\">💚 Vue</MultiSelect.Item>\n *       <MultiSelect.Item value=\"angular\">🔴 Angular</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <MultiSelect\n *     values={selectedSkills}\n *     onValueChange={setSelectedSkills}\n *     required\n *   >\n *     <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n *       <MultiSelect.Input placeholder=\"Select your skills...\" />\n *     </MultiSelect.Trigger>\n *     <MultiSelect.Content>\n *       <MultiSelect.List>\n *         <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n *         <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n *       </MultiSelect.List>\n *     </MultiSelect.Content>\n *   </MultiSelect>\n * </form>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext>\n  );\n};\n\nconst MultiSelectTrigger: FC<\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n> = ({\n  className,\n  getBadgeValue = (value) => value,\n  validationStyleEnabled = false,\n  children,\n  ...props\n}) => {\n  const { value, onValueChange, activeIndex } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cn(\n        // Base layout\n        'flex w-full flex-col gap-3',\n        'cursor-pointer select-text text-base shadow-none outline-none md:text-sm',\n\n        // Corner shape\n        'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n        // Spacing\n        'px-2 py-3 md:py-2',\n\n        // Background and text\n        'bg-neutral-50 dark:bg-neutral-950',\n        'text-text',\n\n        // Focus ring\n        'ring-0',\n        'focus-within:outline-none',\n        'focus-within:ring-3',\n        'focus-within:ring-neutral-200',\n        'dark:focus-within:ring-neutral-500',\n\n        'focus-within:ring-offset-white',\n        'dark:focus-within:ring-offset-neutral-500',\n\n        // Remove box-shadow\n        '[box-shadow:none]',\n\n        // States\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-error',\n\n        // Validation styles\n        validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-2 ring-muted-foreground'\n              )}\n              color={BadgeColor.TEXT}\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-hidden',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n  children,\n}) => {\n  const { open } = useMultiSelect();\n  return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n  <Command.List\n    className={cn(\n      // Base layout\n      'absolute top-0 z-10 flex w-full flex-col gap-2',\n      'rounded-xl p-2 shadow-md',\n\n      // Background and text\n      'bg-white dark:bg-neutral-950',\n      'text-text',\n\n      // Border\n      'border border-neutral-200 dark:border-neutral-800',\n\n      // Transitions\n      'transition-colors',\n\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\nconst MultiSelectItem: FC<\n  { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        // Base layout\n        'flex cursor-pointer justify-between',\n        'rounded-lg px-2 py-1',\n\n        // Hover and transitions\n        'transition-colors',\n        'hover:bg-neutral/10',\n\n        // States\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50',\n\n        className\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"mappings":"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"}

package/dist/esm/components/Select/Select.mjs

@@ -39,8 +39,8 @@ const SelectValue = SelectPrimitive.Value;
 * </Select.Trigger>
 * ```
 */
-const SelectTrigger = ({ validationStyleEnabled = false, className, children,...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
-	className: cn("flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all", "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]", "aria-[invalid=true]:border-error", validationStyleEnabled && "valid:border-success invalid:border-error", className),
+const SelectTrigger = ({ validationStyleEnabled = false, className, children, ...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+	className: cn("flex w-full cursor-pointer items-center justify-between whitespace-nowrap", "select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-visible:outline-none", "focus-visible:ring-3", "focus-visible:ring-neutral-200", "dark:focus-visible:ring-neutral-500", "focus-visible:ring-offset-white", "dark:focus-visible:ring-offset-neutral-500", "[box-shadow:none] focus:[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", "[&>span]:line-clamp-1", validationStyleEnabled && "valid:border-success invalid:border-error", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
@@ -55,7 +55,7 @@ const SelectTrigger = ({ validationStyleEnabled = false, className, children,...
 *
 * @param className - Additional CSS classes for custom styling
 */
-const SelectScrollUpButton = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+const SelectScrollUpButton = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
 	className: cn("flex cursor-default items-center justify-center py-1", className),
 	...props,
 	children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
@@ -68,7 +68,7 @@ const SelectScrollUpButton = ({ className,...props }) => /* @__PURE__ */ jsx(Sel
 *
 * @param className - Additional CSS classes for custom styling
 */
-const SelectScrollDownButton = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
 	className: cn("flex cursor-default items-center justify-center py-1", className),
 	...props,
 	children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
@@ -91,14 +91,14 @@ const SelectScrollDownButton = ({ className,...props }) => /* @__PURE__ */ jsx(S
 * </Select.Content>
 * ```
 */
-const SelectContent = ({ className, children, position = SelectContentPosition.POPPER,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
-	className: cn("w-full select-text resize-none rounded-xl border-2 bg-input-background p-1 text-input-text text-sm shadow-none outline-0 transition-all", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className),
+const SelectContent = ({ className, children, position = SelectContentPosition.POPPER, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+	className: cn("relative z-50 max-h-96 min-w-32 overflow-hidden", "rounded-xl shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className),
 	position,
 	...props,
 	children: [
 		/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
 		/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
-			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+			className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
 			children
 		}),
 		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
@@ -124,7 +124,7 @@ const SelectContent = ({ className, children, position = SelectContentPosition.P
 * </Select.Content>
 * ```
 */
-const SelectLabel = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+const SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
 	className: cn("px-1 py-0.5 font-semibold text-sm", className),
 	...props
 });
@@ -144,8 +144,8 @@ const SelectLabel = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimit
 * </Select.Item>
 * ```
 */
-const SelectItem = ({ className, children,...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
-	className: cn("relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+const SelectItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+	className: cn("relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2 flex size-3.5 items-center justify-center",
@@ -169,8 +169,8 @@ const SelectItem = ({ className, children,...props }) => /* @__PURE__ */ jsxs(Se
 * </Select.Content>
 * ```
 */
-const SelectSeparator = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
-	className: cn("-mx-1 my-1 h-px bg-red-300", className),
+const SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+	className: cn("-mx-1 my-1 h-px", "bg-neutral-200 dark:bg-neutral-800", className),
 	...props
 });
 /**

package/dist/esm/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["SelectTrigger: FC<\n  ComponentProps<typeof SelectPrimitive.Trigger> & {\n    /**\n     * Enables success/error border styling based on HTML5 validation state\n     * @default false\n     * @example\n     * ```tsx\n     * <Select.Trigger validationStyleEnabled>\n     *   <Select.Value placeholder=\"Required field\" />\n     * </Select.Trigger>\n     * ```\n     */\n    validationStyleEnabled?: boolean;\n  }\n>","SelectScrollUpButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n>","SelectScrollDownButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n>","SelectContent: FC<\n  ComponentProps<typeof SelectPrimitive.Content>\n>","SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>>","SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>>","SelectSeparator: FC<\n  ComponentProps<typeof SelectPrimitive.Separator>\n>"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronsUpDown,\n  ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Enum for Select content positioning strategies\n *\n * @enum SelectContentPosition\n */\nexport enum SelectContentPosition {\n  /** Position relative to the trigger with automatic placement */\n  POPPER = 'popper',\n  /** Align content with the selected item */\n  ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/**\n * Select trigger button component that displays the current selection and opens the dropdown\n *\n * Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n *\n * @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n *\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n *   <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n */\nconst SelectTrigger: FC<\n  ComponentProps<typeof SelectPrimitive.Trigger> & {\n    /**\n     * Enables success/error border styling based on HTML5 validation state\n     * @default false\n     * @example\n     * ```tsx\n     * <Select.Trigger validationStyleEnabled>\n     *   <Select.Value placeholder=\"Required field\" />\n     * </Select.Trigger>\n     * ```\n     */\n    validationStyleEnabled?: boolean;\n  }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n  <SelectPrimitive.Trigger\n    className={cn(\n      'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      'w-full select-text resize-none rounded-xl border-2 bg-input-background px-2 py-1 text-input-text text-sm shadow-none outline-0 transition-all',\n      'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n      'aria-[invalid=true]:border-error',\n      validationStyleEnabled && 'valid:border-success invalid:border-error',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronsUpDown className=\"size-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n);\n\n/**\n * Scroll up button for select content with long lists\n *\n * Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n *\n * @param className - Additional CSS classes for custom styling\n */\nconst SelectScrollUpButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.ScrollUpButton\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n);\n\n/**\n * Scroll down button for select content with long lists\n *\n * Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n *\n * @param className - Additional CSS classes for custom styling\n */\nconst SelectScrollDownButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.ScrollDownButton\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n);\n\n/**\n * Select dropdown content container with positioning and animation\n *\n * Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n *\n * @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n *\n * @example\n * ```tsx\n * <Select.Content position={SelectContentPosition.POPPER}>\n *   <Select.Item value=\"option1\">Option 1</Select.Item>\n *   <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectContent: FC<\n  ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n  className,\n  children,\n  position = SelectContentPosition.POPPER,\n  ...props\n}) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      className={cn(\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background p-1 text-input-text text-sm shadow-none outline-0 transition-all',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',\n        position === 'popper' &&\n          'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1',\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n);\n\n/**\n * Label component for grouping select options\n *\n * Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n *\n * @param className - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * <Select.Content>\n *   <Select.Label>Fruits</Select.Label>\n *   <Select.Item value=\"apple\">Apple</Select.Item>\n *   <Select.Item value=\"banana\">Banana</Select.Item>\n *   <Select.Separator />\n *   <Select.Label>Vegetables</Select.Label>\n *   <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n  className,\n  ...props\n}) => (\n  <SelectPrimitive.Label\n    className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n    {...props}\n  />\n);\n\n/**\n * Individual selectable item within the dropdown\n *\n * Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n *\n * @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n *\n * @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n *   🌙 Dark Mode\n * </Select.Item>\n * ```\n */\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <SelectPrimitive.Item\n    className={cn(\n      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n);\n\n/**\n * Visual separator for grouping options in the dropdown\n *\n * Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n *\n * @param className - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * <Select.Content>\n *   <Select.Item value=\"recent\">Recent Files</Select.Item>\n *   <Select.Separator />\n *   <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectSeparator: FC<\n  ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.Separator\n    className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n    {...props}\n  />\n);\n\n/**\n * Type definition for the compound Select component with all subcomponents\n */\ntype SelectType = typeof SelectRoot & {\n  /** Group container for organizing related options */\n  Group: typeof SelectGroup;\n  /** Value display component for the trigger */\n  Value: typeof SelectValue;\n  /** Trigger button that opens the dropdown */\n  Trigger: typeof SelectTrigger;\n  /** Scroll up button for long lists */\n  ScrollUpButton: typeof SelectScrollUpButton;\n  /** Scroll down button for long lists */\n  ScrollDownButton: typeof SelectScrollDownButton;\n  /** Dropdown content container */\n  Content: typeof SelectContent;\n  /** Label component for option groups */\n  Label: typeof SelectLabel;\n  /** Individual selectable item */\n  Item: typeof SelectItem;\n  /** Visual separator between option groups */\n  Separator: typeof SelectSeparator;\n};\n\n/**\n * Select - A comprehensive dropdown selection component\n *\n * A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n *\n * ## Key Features\n * - **Accessibility First**: Full keyboard navigation, screen reader support, and ARIA attributes\n * - **Flexible Positioning**: Multiple positioning strategies for optimal dropdown placement\n * - **Validation Integration**: Built-in support for form validation with visual feedback\n * - **Design System**: Consistent theming with design tokens and style variants\n * - **Responsive Design**: Works seamlessly across desktop and mobile devices\n * - **Rich Content**: Support for icons, separators, labels, and complex option layouts\n *\n * ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter, Escape, and Home/End support\n * - **Screen Readers**: Proper ARIA labels and state announcements\n * - **Focus Management**: Intuitive focus flow and visual indicators\n * - **High Contrast**: Supports system high contrast modes\n *\n * ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n *\n * @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Choose theme...\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"light\">☀️ Light</Select.Item>\n *     <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n *     <Select.Item value=\"system\">⚙️ System</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n *\n * @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n *   <Select.Trigger validationStyleEnabled>\n *     <Select.Value placeholder=\"Select category...\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Label>Web Technologies</Select.Label>\n *     <Select.Item value=\"react\">React</Select.Item>\n *     <Select.Item value=\"vue\">Vue</Select.Item>\n *     <Select.Separator />\n *     <Select.Label>Mobile</Select.Label>\n *     <Select.Item value=\"react-native\">React Native</Select.Item>\n *     <Select.Item value=\"flutter\">Flutter</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <Select required name=\"country\">\n *     <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n *       <Select.Value placeholder=\"Select country...\" />\n *     </Select.Trigger>\n *     <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>\n *       <Select.Item value=\"us\">United States</Select.Item>\n *       <Select.Item value=\"ca\">Canada</Select.Item>\n *       <Select.Item value=\"uk\">United Kingdom</Select.Item>\n *     </Select.Content>\n *   </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,IAAY,0EAAL;;AAEL;;AAEA;;;AAGF,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAMA,iBAcD,EAAE,yBAAyB,OAAO,WAAW,SAAU,GAAG,YAC7D,qBAAC,gBAAgB;CACf,WAAW,GACT,gSACA,iJACA,+HACA,oCACA,0BAA0B,6CAC1B,UACD;CACD,GAAI;YAEH,UACD,oBAAC,gBAAgB;EAAK;YACpB,oBAAC,kBAAe,WAAU,sBAAsB;GAC3B;EACC;;;;;;;;;AAW5B,MAAMC,wBAED,EAAE,UAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,kBAAgB;EACc;;;;;;;;;AAWnC,MAAMC,0BAED,EAAE,UAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,oBAAkB;EACc;;;;;;;;;;;;;;;;;;;AAqBrC,MAAaC,iBAER,EACH,WACA,UACA,WAAW,sBAAsB,OACjC,GAAG,YAEH,oBAAC,gBAAgB,oBACf,qBAAC,gBAAgB;CACf,WAAW,GACT,2IACA,yZACA,aAAa,YACX,mIACF,UACD;CACS;CACV,GAAI;;EAEJ,oBAAC,yBAAuB;EACxB,oBAAC,gBAAgB;GACf,WAAW,GACT,OACA,aAAa,YACX,0FACH;GAEA;IACwB;EAC3B,oBAAC,2BAAyB;;EACF,GACH;;;;;;;;;;;;;;;;;;;;;AAuB3B,MAAaC,eAAiE,EAC5E,UACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;EACJ;;;;;;;;;;;;;;;;;AAmBJ,MAAMC,cAA+D,EACnE,WACA,SACA,GAAG,YAEH,qBAAC,gBAAgB;CACf,WAAW,GACT,sMACA,UACD;CACD,GAAI;YAEJ,oBAAC;EAAK,WAAU;YACd,oBAAC,gBAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;GAC3B,EACP,oBAAC,gBAAgB,YAAU,WAAoC;EAC1C;;;;;;;;;;;;;;;;;;AAoBzB,MAAaC,mBAER,EAAE,UAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,8BAA8B,UAAU;CACtD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHJ,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}
+{"version":3,"file":"Select.mjs","names":["SelectTrigger: FC<\n  ComponentProps<typeof SelectPrimitive.Trigger> & {\n    /**\n     * Enables success/error border styling based on HTML5 validation state\n     * @default false\n     * @example\n     * ```tsx\n     * <Select.Trigger validationStyleEnabled>\n     *   <Select.Value placeholder=\"Required field\" />\n     * </Select.Trigger>\n     * ```\n     */\n    validationStyleEnabled?: boolean;\n  }\n>","SelectScrollUpButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n>","SelectScrollDownButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n>","SelectContent: FC<\n  ComponentProps<typeof SelectPrimitive.Content>\n>","SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>>","SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>>","SelectSeparator: FC<\n  ComponentProps<typeof SelectPrimitive.Separator>\n>"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronsUpDown,\n  ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Enum for Select content positioning strategies\n *\n * @enum SelectContentPosition\n */\nexport enum SelectContentPosition {\n  /** Position relative to the trigger with automatic placement */\n  POPPER = 'popper',\n  /** Align content with the selected item */\n  ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/**\n * Select trigger button component that displays the current selection and opens the dropdown\n *\n * Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n *\n * @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n *\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n *   <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n */\nconst SelectTrigger: FC<\n  ComponentProps<typeof SelectPrimitive.Trigger> & {\n    /**\n     * Enables success/error border styling based on HTML5 validation state\n     * @default false\n     * @example\n     * ```tsx\n     * <Select.Trigger validationStyleEnabled>\n     *   <Select.Value placeholder=\"Required field\" />\n     * </Select.Trigger>\n     * ```\n     */\n    validationStyleEnabled?: boolean;\n  }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n  <SelectPrimitive.Trigger\n    className={cn(\n      // Base layout and typography\n      'flex w-full cursor-pointer items-center justify-between whitespace-nowrap',\n      'select-text text-base shadow-none outline-none md:text-sm',\n\n      // Corner shape\n      'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n      // Spacing\n      'px-2 py-3 md:py-2',\n\n      // Background and text\n      'bg-neutral-50 dark:bg-neutral-950',\n      'text-text',\n\n      // Focus ring\n      'ring-0',\n      'focus-visible:outline-none',\n      'focus-visible:ring-3',\n      'focus-visible:ring-neutral-200',\n      'dark:focus-visible:ring-neutral-500',\n\n      'focus-visible:ring-offset-white',\n      'dark:focus-visible:ring-offset-neutral-500',\n\n      // Remove box-shadow\n      '[box-shadow:none] focus:[box-shadow:none]',\n\n      // States\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      'aria-invalid:border-error',\n      '[&>span]:line-clamp-1',\n\n      // Validation styles\n      validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronsUpDown className=\"size-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n);\n\n/**\n * Scroll up button for select content with long lists\n *\n * Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n *\n * @param className - Additional CSS classes for custom styling\n */\nconst SelectScrollUpButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.ScrollUpButton\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n);\n\n/**\n * Scroll down button for select content with long lists\n *\n * Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n *\n * @param className - Additional CSS classes for custom styling\n */\nconst SelectScrollDownButton: FC<\n  ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.ScrollDownButton\n    className={cn(\n      'flex cursor-default items-center justify-center py-1',\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n);\n\n/**\n * Select dropdown content container with positioning and animation\n *\n * Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n *\n * @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n *\n * @example\n * ```tsx\n * <Select.Content position={SelectContentPosition.POPPER}>\n *   <Select.Item value=\"option1\">Option 1</Select.Item>\n *   <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectContent: FC<\n  ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n  className,\n  children,\n  position = SelectContentPosition.POPPER,\n  ...props\n}) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      className={cn(\n        // Base styles\n        'relative z-50 max-h-96 min-w-32 overflow-hidden',\n        'rounded-xl shadow-md',\n\n        // Background and text\n        'bg-white dark:bg-neutral-950',\n        'text-text',\n\n        // Border\n        'border border-neutral-200 dark:border-neutral-800',\n\n        // Animations\n        'data-[state=closed]:animate-out data-[state=open]:animate-in',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n\n        // Positioning adjustments\n        position === 'popper' &&\n          'data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1',\n\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-1',\n          position === 'popper' &&\n            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n);\n\n/**\n * Label component for grouping select options\n *\n * Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n *\n * @param className - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * <Select.Content>\n *   <Select.Label>Fruits</Select.Label>\n *   <Select.Item value=\"apple\">Apple</Select.Item>\n *   <Select.Item value=\"banana\">Banana</Select.Item>\n *   <Select.Separator />\n *   <Select.Label>Vegetables</Select.Label>\n *   <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n  className,\n  ...props\n}) => (\n  <SelectPrimitive.Label\n    className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n    {...props}\n  />\n);\n\n/**\n * Individual selectable item within the dropdown\n *\n * Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n *\n * @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n *\n * @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n *   🌙 Dark Mode\n * </Select.Item>\n * ```\n */\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <SelectPrimitive.Item\n    className={cn(\n      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n);\n\n/**\n * Visual separator for grouping options in the dropdown\n *\n * Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n *\n * @param className - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * <Select.Content>\n *   <Select.Item value=\"recent\">Recent Files</Select.Item>\n *   <Select.Separator />\n *   <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n */\nexport const SelectSeparator: FC<\n  ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n  <SelectPrimitive.Separator\n    className={cn(\n      '-mx-1 my-1 h-px',\n      'bg-neutral-200 dark:bg-neutral-800',\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Type definition for the compound Select component with all subcomponents\n */\ntype SelectType = typeof SelectRoot & {\n  /** Group container for organizing related options */\n  Group: typeof SelectGroup;\n  /** Value display component for the trigger */\n  Value: typeof SelectValue;\n  /** Trigger button that opens the dropdown */\n  Trigger: typeof SelectTrigger;\n  /** Scroll up button for long lists */\n  ScrollUpButton: typeof SelectScrollUpButton;\n  /** Scroll down button for long lists */\n  ScrollDownButton: typeof SelectScrollDownButton;\n  /** Dropdown content container */\n  Content: typeof SelectContent;\n  /** Label component for option groups */\n  Label: typeof SelectLabel;\n  /** Individual selectable item */\n  Item: typeof SelectItem;\n  /** Visual separator between option groups */\n  Separator: typeof SelectSeparator;\n};\n\n/**\n * Select - A comprehensive dropdown selection component\n *\n * A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n *\n * ## Key Features\n * - **Accessibility First**: Full keyboard navigation, screen reader support, and ARIA attributes\n * - **Flexible Positioning**: Multiple positioning strategies for optimal dropdown placement\n * - **Validation Integration**: Built-in support for form validation with visual feedback\n * - **Design System**: Consistent theming with design tokens and style variants\n * - **Responsive Design**: Works seamlessly across desktop and mobile devices\n * - **Rich Content**: Support for icons, separators, labels, and complex option layouts\n *\n * ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n *\n * ## Accessibility\n * - **Keyboard Navigation**: Arrow keys, Enter, Escape, and Home/End support\n * - **Screen Readers**: Proper ARIA labels and state announcements\n * - **Focus Management**: Intuitive focus flow and visual indicators\n * - **High Contrast**: Supports system high contrast modes\n *\n * ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n *\n * @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Choose theme...\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"light\">☀️ Light</Select.Item>\n *     <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n *     <Select.Item value=\"system\">⚙️ System</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n *\n * @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n *   <Select.Trigger validationStyleEnabled>\n *     <Select.Value placeholder=\"Select category...\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Label>Web Technologies</Select.Label>\n *     <Select.Item value=\"react\">React</Select.Item>\n *     <Select.Item value=\"vue\">Vue</Select.Item>\n *     <Select.Separator />\n *     <Select.Label>Mobile</Select.Label>\n *     <Select.Item value=\"react-native\">React Native</Select.Item>\n *     <Select.Item value=\"flutter\">Flutter</Select.Item>\n *   </Select.Content>\n * </Select>\n * ```\n *\n * @example\n * Form integration with validation:\n * ```tsx\n * <form>\n *   <Select required name=\"country\">\n *     <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n *       <Select.Value placeholder=\"Select country...\" />\n *     </Select.Trigger>\n *     <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>\n *       <Select.Item value=\"us\">United States</Select.Item>\n *       <Select.Item value=\"ca\">Canada</Select.Item>\n *       <Select.Item value=\"uk\">United Kingdom</Select.Item>\n *     </Select.Content>\n *   </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,IAAY,0EAAL;;AAEL;;AAEA;;;AAGF,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAMA,iBAcD,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,YAC7D,qBAAC,gBAAgB;CACf,WAAW,GAET,6EACA,6DAGA,mFAGA,qBAGA,qCACA,aAGA,UACA,8BACA,wBACA,kCACA,uCAEA,mCACA,8CAGA,6CAGA,mDACA,6BACA,yBAGA,0BAA0B,6CAE1B,UACD;CACD,GAAI;YAEH,UACD,oBAAC,gBAAgB;EAAK;YACpB,oBAAC,kBAAe,WAAU,sBAAsB;GAC3B;EACC;;;;;;;;;AAW5B,MAAMC,wBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,kBAAgB;EACc;;;;;;;;;AAWnC,MAAMC,0BAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,wDACA,UACD;CACD,GAAI;WAEJ,oBAAC,oBAAkB;EACc;;;;;;;;;;;;;;;;;;;AAqBrC,MAAaC,iBAER,EACH,WACA,UACA,WAAW,sBAAsB,QACjC,GAAG,YAEH,oBAAC,gBAAgB,oBACf,qBAAC,gBAAgB;CACf,WAAW,GAET,mDACA,wBAGA,gCACA,aAGA,qDAGA,gEACA,8DACA,gEACA,0CACA,0CACA,0CACA,0CAGA,aAAa,YACX,mIAEF,UACD;CACS;CACV,GAAI;;EAEJ,oBAAC,yBAAuB;EACxB,oBAAC,gBAAgB;GACf,WAAW,GACT,OACA,aAAa,YACX,gFACH;GAEA;IACwB;EAC3B,oBAAC,2BAAyB;;EACF,GACH;;;;;;;;;;;;;;;;;;;;;AAuB3B,MAAaC,eAAiE,EAC5E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,qCAAqC,UAAU;CAC7D,GAAI;EACJ;;;;;;;;;;;;;;;;;AAmBJ,MAAMC,cAA+D,EACnE,WACA,UACA,GAAG,YAEH,qBAAC,gBAAgB;CACf,WAAW,GACT,kMACA,UACD;CACD,GAAI;YAEJ,oBAAC;EAAK,WAAU;YACd,oBAAC,gBAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;GAC3B,EACP,oBAAC,gBAAgB,YAAU,WAAoC;EAC1C;;;;;;;;;;;;;;;;;;AAoBzB,MAAaC,mBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GACT,mBACA,sCACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHJ,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}

package/dist/esm/components/SocialNetworks/index.mjs

@@ -1,11 +1,11 @@
 import { DiscordLogo } from "./DiscordLogo.mjs";
-import { FacebookLogo } from "./FacebookLogo.mjs";
 import { InstagramLogo } from "./InstagramLogo.mjs";
 import { LinkedInLogo } from "./LinkedInLogo.mjs";
 import { ProductHuntLogo } from "./ProductHuntLogo.mjs";
 import { TiktokLogo } from "./TiktokLogo.mjs";
 import { XLogo } from "./XLogo.mjs";
 import { YoutubeLogo } from "./YoutubeLogo.mjs";
+import { FacebookLogo } from "./FacebookLogo.mjs";
 import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -45,21 +45,16 @@ const socialNetworks = [
 		href: "https://www.instagram.com/intlayer/",
 		component: /* @__PURE__ */ jsx(InstagramLogo, { className: "h-auto max-h-full max-w-full" }),
 		label: "Instagram"
-	},
-	{
-		href: "https://www.facebook.com/intlayer",
-		component: /* @__PURE__ */ jsx(FacebookLogo, { className: "h-auto max-h-full max-w-full" }),
-		label: "Facebook"
 	}
 ];
-const DefaultRenderItem = ({ href, component, label,...iconProps }) => /* @__PURE__ */ jsx("a", {
+const DefaultRenderItem = ({ href, component, label, ...iconProps }) => /* @__PURE__ */ jsx("a", {
 	href,
 	"aria-label": label,
 	className: "max-h-4 max-w-4 shrink-0",
 	...iconProps,
 	children: component
 }, href);
-const SocialNetworks = ({ renderItem,...iconProps }) => socialNetworks.map(renderItem ?? ((props) => /* @__PURE__ */ createElement(DefaultRenderItem, {
+const SocialNetworks = ({ renderItem, ...iconProps }) => socialNetworks.map(renderItem ?? ((props) => /* @__PURE__ */ createElement(DefaultRenderItem, {
 	...props,
 	...iconProps,
 	key: props.label

package/dist/esm/components/SocialNetworks/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DefaultRenderItem: FC<DefaultRenderItemProps>"],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n  AnchorHTMLAttributes,\n  DetailedHTMLProps,\n  FC,\n  ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { FacebookLogo } from './FacebookLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n  {\n    href: 'https://discord.gg/7uxamYVeCk',\n    component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Discord',\n  },\n  {\n    href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n    component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Product Hunt',\n  },\n  {\n    href: 'https://x.com/Intlayer183096',\n    component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'X',\n  },\n  {\n    href: 'https://www.youtube.com/@intlayer',\n    component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'YouTube',\n  },\n  {\n    href: 'https://www.linkedin.com/company/intlayerorg',\n    component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'LinkedIn',\n  },\n  {\n    href: 'https://www.tiktok.com/@intlayer',\n    component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'TikTok',\n  },\n  {\n    href: 'https://www.instagram.com/intlayer/',\n    component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Instagram',\n  },\n  {\n    href: 'https://www.facebook.com/intlayer',\n    component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Facebook',\n  },\n];\n\ntype SocialNetworksProps = {\n  renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> & {\n  component: ReactNode;\n  label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n  href,\n  component,\n  label,\n  ...iconProps\n}) => (\n  <a\n    key={href}\n    href={href}\n    aria-label={label}\n    className=\"max-h-4 max-w-4 shrink-0\"\n    {...iconProps}\n  >\n    {component}\n  </a>\n);\n\nexport const SocialNetworks = ({\n  renderItem,\n  ...iconProps\n}: SocialNetworksProps) =>\n  socialNetworks.map(\n    renderItem ??\n      ((props) => (\n        <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n      ))\n  );\n\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,mBAAgB,WAAU,iCAAiC;EACvE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,SAAM,WAAU,iCAAiC;EAC7D,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,cAAW,WAAU,iCAAiC;EAClE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,iBAAc,WAAU,iCAAiC;EACrE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACF;AAiBD,MAAMA,qBAAiD,EACrD,MACA,WACA,MACA,GAAG,gBAEH,oBAAC;CAEO;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;GANI,KAOH;AAGN,MAAa,kBAAkB,EAC7B,WACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC;CAAkB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;EAAS,EAEtE"}
+{"version":3,"file":"index.mjs","names":["DefaultRenderItem: FC<DefaultRenderItemProps>"],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n  AnchorHTMLAttributes,\n  DetailedHTMLProps,\n  FC,\n  ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { FacebookLogo } from './FacebookLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n  {\n    href: 'https://discord.gg/7uxamYVeCk',\n    component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Discord',\n  },\n  {\n    href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n    component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Product Hunt',\n  },\n  {\n    href: 'https://x.com/Intlayer183096',\n    component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'X',\n  },\n  {\n    href: 'https://www.youtube.com/@intlayer',\n    component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'YouTube',\n  },\n  {\n    href: 'https://www.linkedin.com/company/intlayerorg',\n    component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'LinkedIn',\n  },\n  {\n    href: 'https://www.tiktok.com/@intlayer',\n    component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'TikTok',\n  },\n  {\n    href: 'https://www.instagram.com/intlayer/',\n    component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n    label: 'Instagram',\n  },\n  // {\n  //   href: 'https://www.facebook.com/intlayer',\n  //   component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n  //   label: 'Facebook',\n  // },\n];\n\ntype SocialNetworksProps = {\n  renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> & {\n  component: ReactNode;\n  label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n  href,\n  component,\n  label,\n  ...iconProps\n}) => (\n  <a\n    key={href}\n    href={href}\n    aria-label={label}\n    className=\"max-h-4 max-w-4 shrink-0\"\n    {...iconProps}\n  >\n    {component}\n  </a>\n);\n\nexport const SocialNetworks = ({\n  renderItem,\n  ...iconProps\n}: SocialNetworksProps) =>\n  socialNetworks.map(\n    renderItem ??\n      ((props) => (\n        <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n      ))\n  );\n\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,mBAAgB,WAAU,iCAAiC;EACvE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,SAAM,WAAU,iCAAiC;EAC7D,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,cAAW,WAAU,iCAAiC;EAClE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,iBAAc,WAAU,iCAAiC;EACrE,OAAO;EACR;CAMF;AAiBD,MAAMA,qBAAiD,EACrD,MACA,WACA,OACA,GAAG,gBAEH,oBAAC;CAEO;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;GANI,KAOH;AAGN,MAAa,kBAAkB,EAC7B,YACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC;CAAkB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;EAAS,EAEtE"}