@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,278 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region src/components/Select/Select.tsx
+/**
+* Enum for Select content positioning strategies
+*
+* @enum SelectContentPosition
+*/
+let SelectContentPosition = /* @__PURE__ */ function(SelectContentPosition$1) {
+	/** Position relative to the trigger with automatic placement */
+	SelectContentPosition$1["POPPER"] = "popper";
+	/** Align content with the selected item */
+	SelectContentPosition$1["ITEM_ALIGNED"] = "item-aligned";
+	return SelectContentPosition$1;
+}({});
+const SelectRoot = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+/**
+* Select trigger button component that displays the current selection and opens the dropdown
+*
+* Features comprehensive styling with validation states, focus management, and accessibility support.
+* Uses design tokens for consistent theming across the application.
+*
+* @param validationStyleEnabled - Enables automatic success/error styling based on form validation state
+* @param className - Additional CSS classes for custom styling
+* @param children - Content to display inside the trigger (typically SelectValue)
+*
+* @example
+* ```tsx
+* <Select.Trigger validationStyleEnabled>
+*   <Select.Value placeholder="Choose option..." />
+* </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),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50" })
+	})]
+});
+/**
+* Scroll up button for select content with long lists
+*
+* Automatically appears when content is scrollable upward, providing intuitive navigation
+* for users with large option lists.
+*
+* @param className - Additional CSS classes for custom styling
+*/
+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, {})
+});
+/**
+* Scroll down button for select content with long lists
+*
+* Automatically appears when content is scrollable downward, providing clear visual
+* indication of additional options below the current view.
+*
+* @param className - Additional CSS classes for custom styling
+*/
+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, {})
+});
+/**
+* Select dropdown content container with positioning and animation
+*
+* Provides the dropdown interface containing all selectable options. Features smooth
+* animations, flexible positioning strategies, and responsive design for optimal UX.
+*
+* @param position - Positioning strategy for the dropdown content
+* @param className - Additional CSS classes for custom styling
+* @param children - Select items, labels, and separators
+*
+* @example
+* ```tsx
+* <Select.Content position={SelectContentPosition.POPPER}>
+*   <Select.Item value="option1">Option 1</Select.Item>
+*   <Select.Item value="option2">Option 2</Select.Item>
+* </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),
+	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)]"),
+			children
+		}),
+		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+	]
+}) });
+/**
+* Label component for grouping select options
+*
+* Provides semantic grouping and visual organization of related options within
+* the select dropdown. Enhances accessibility and user experience.
+*
+* @param className - Additional CSS classes for custom styling
+*
+* @example
+* ```tsx
+* <Select.Content>
+*   <Select.Label>Fruits</Select.Label>
+*   <Select.Item value="apple">Apple</Select.Item>
+*   <Select.Item value="banana">Banana</Select.Item>
+*   <Select.Separator />
+*   <Select.Label>Vegetables</Select.Label>
+*   <Select.Item value="carrot">Carrot</Select.Item>
+* </Select.Content>
+* ```
+*/
+const SelectLabel = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+	className: cn("px-1 py-0.5 font-semibold text-sm", className),
+	...props
+});
+/**
+* Individual selectable item within the dropdown
+*
+* Represents a single option that users can select. Features hover states,
+* selection indicators, and keyboard navigation support for accessible interaction.
+*
+* @param className - Additional CSS classes for custom styling
+* @param children - The display text/content for the option
+*
+* @example
+* ```tsx
+* <Select.Item value="dark-mode">
+*   🌙 Dark Mode
+* </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),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute right-2 flex size-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+	}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+});
+/**
+* Visual separator for grouping options in the dropdown
+*
+* Creates clear visual division between groups of related options,
+* improving readability and organization in complex select menus.
+*
+* @param className - Additional CSS classes for custom styling
+*
+* @example
+* ```tsx
+* <Select.Content>
+*   <Select.Item value="recent">Recent Files</Select.Item>
+*   <Select.Separator />
+*   <Select.Item value="all">All Files</Select.Item>
+* </Select.Content>
+* ```
+*/
+const SelectSeparator = ({ className,...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+	className: cn("-mx-1 my-1 h-px bg-red-300", className),
+	...props
+});
+/**
+* Select - A comprehensive dropdown selection component
+*
+* A fully-featured select component built on Radix UI primitives with extensive customization,
+* accessibility features, and design system integration. Supports single selection with
+* keyboard navigation, validation states, and flexible content positioning.
+*
+* ## Key Features
+* - **Accessibility First**: Full keyboard navigation, screen reader support, and ARIA attributes
+* - **Flexible Positioning**: Multiple positioning strategies for optimal dropdown placement
+* - **Validation Integration**: Built-in support for form validation with visual feedback
+* - **Design System**: Consistent theming with design tokens and style variants
+* - **Responsive Design**: Works seamlessly across desktop and mobile devices
+* - **Rich Content**: Support for icons, separators, labels, and complex option layouts
+*
+* ## Use Cases
+* - Form field selections (theme, language, category)
+* - Settings and configuration options
+* - Filter and sort controls
+* - User preference selections
+* - Any single-choice dropdown interface
+*
+* ## Accessibility
+* - **Keyboard Navigation**: Arrow keys, Enter, Escape, and Home/End support
+* - **Screen Readers**: Proper ARIA labels and state announcements
+* - **Focus Management**: Intuitive focus flow and visual indicators
+* - **High Contrast**: Supports system high contrast modes
+*
+* ## Architecture
+* The Select component follows a compound component pattern with the following structure:
+* - `Select` (root): Manages state and provides context
+* - `Select.Trigger`: Button that displays current value and opens dropdown
+* - `Select.Value`: Displays the selected value with placeholder support
+* - `Select.Content`: Container for the dropdown options
+* - `Select.Item`: Individual selectable options
+* - `Select.Label`: Group labels for organizing options
+* - `Select.Separator`: Visual dividers between option groups
+*
+* @example
+* Basic usage with simple options:
+* ```tsx
+* <Select defaultValue="system">
+*   <Select.Trigger>
+*     <Select.Value placeholder="Choose theme..." />
+*   </Select.Trigger>
+*   <Select.Content>
+*     <Select.Item value="light">☀️ Light</Select.Item>
+*     <Select.Item value="dark">🌙 Dark</Select.Item>
+*     <Select.Item value="system">⚙️ System</Select.Item>
+*   </Select.Content>
+* </Select>
+* ```
+*
+* @example
+* Advanced usage with groups and labels:
+* ```tsx
+* <Select>
+*   <Select.Trigger validationStyleEnabled>
+*     <Select.Value placeholder="Select category..." />
+*   </Select.Trigger>
+*   <Select.Content>
+*     <Select.Label>Web Technologies</Select.Label>
+*     <Select.Item value="react">React</Select.Item>
+*     <Select.Item value="vue">Vue</Select.Item>
+*     <Select.Separator />
+*     <Select.Label>Mobile</Select.Label>
+*     <Select.Item value="react-native">React Native</Select.Item>
+*     <Select.Item value="flutter">Flutter</Select.Item>
+*   </Select.Content>
+* </Select>
+* ```
+*
+* @example
+* Form integration with validation:
+* ```tsx
+* <form>
+*   <Select required name="country">
+*     <Select.Trigger validationStyleEnabled aria-invalid={hasError}>
+*       <Select.Value placeholder="Select country..." />
+*     </Select.Trigger>
+*     <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>
+*       <Select.Item value="us">United States</Select.Item>
+*       <Select.Item value="ca">Canada</Select.Item>
+*       <Select.Item value="uk">United Kingdom</Select.Item>
+*     </Select.Content>
+*   </Select>
+* </form>
+* ```
+*/
+const Select = SelectRoot;
+Select.Group = SelectGroup;
+Select.Value = SelectValue;
+Select.Trigger = SelectTrigger;
+Select.ScrollUpButton = SelectScrollUpButton;
+Select.ScrollDownButton = SelectScrollDownButton;
+Select.Content = SelectContent;
+Select.Label = SelectLabel;
+Select.Item = SelectItem;
+Select.Separator = SelectSeparator;
+
+//#endregion
+export { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator };
+//# sourceMappingURL=Select.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+import { MultiSelect } from "./Multiselect.mjs";
+import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select.mjs";
+
+export { MultiSelect, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator };

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/DiscordLogo.tsx
+const DiscordLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "800px",
+	height: "auto",
+	viewBox: "0 0 71 80",
+	fill: "none",
+	role: "img",
+	"aria-label": "Discord logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M60.1045 13.8978C55.5792 11.8214 50.7265 10.2916 45.6527 9.41542C45.5603 9.39851 45.468 9.44077 45.4204 9.52529C44.7963 10.6353 44.105 12.0834 43.6209 13.2216C38.1637 12.4046 32.7345 12.4046 27.3892 13.2216C26.905 12.0581 26.1886 10.6353 25.5617 9.52529C25.5141 9.44359 25.4218 9.40133 25.3294 9.41542C20.2584 10.2888 15.4057 11.8186 10.8776 13.8978C10.8384 13.9147 10.8048 13.9429 10.7825 13.9795C1.57795 27.7309 -0.943561 41.1443 0.293408 54.3914C0.299005 54.4562 0.335386 54.5182 0.385761 54.5576C6.45866 59.0174 12.3413 61.7249 18.1147 63.5195C18.2071 63.5477 18.305 63.5139 18.3638 63.4378C19.7295 61.5728 20.9469 59.6063 21.9907 57.5383C22.0523 57.4172 21.9935 57.2735 21.8676 57.2256C19.9366 56.4931 18.0979 55.6 16.3292 54.5858C16.1893 54.5041 16.1781 54.304 16.3068 54.2082C16.679 53.9293 17.0513 53.6391 17.4067 53.3461C17.471 53.2926 17.5606 53.2813 17.6362 53.3151C29.2558 58.6202 41.8354 58.6202 53.3179 53.3151C53.3935 53.2785 53.4831 53.2898 53.5502 53.3433C53.9057 53.6363 54.2779 53.9293 54.6529 54.2082C54.7816 54.304 54.7732 54.5041 54.6333 54.5858C52.8646 55.6197 51.0259 56.4931 49.0921 57.2228C48.9662 57.2707 48.9102 57.4172 48.9718 57.5383C50.038 59.6034 51.2554 61.5699 52.5959 63.435C52.6519 63.5139 52.7526 63.5477 52.845 63.5195C58.6464 61.7249 64.529 59.0174 70.6019 54.5576C70.6551 54.5182 70.6887 54.459 70.6943 54.3942C72.1747 39.0791 68.2147 25.7757 60.1968 13.9823C60.1772 13.9429 60.1437 13.9147 60.1045 13.8978ZM23.7259 46.3253C20.2276 46.3253 17.3451 43.1136 17.3451 39.1693C17.3451 35.225 20.1717 32.0133 23.7259 32.0133C27.308 32.0133 30.1626 35.2532 30.1066 39.1693C30.1066 43.1136 27.28 46.3253 23.7259 46.3253ZM47.3178 46.3253C43.8196 46.3253 40.9371 43.1136 40.9371 39.1693C40.9371 35.225 43.7636 32.0133 47.3178 32.0133C50.9 32.0133 53.7545 35.2532 53.6986 39.1693C53.6986 43.1136 50.9 46.3253 47.3178 46.3253Z",
+		fill: "currentColor"
+	})
+});
+
+//#endregion
+export { DiscordLogo };
+//# sourceMappingURL=DiscordLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscordLogo.mjs","names":["DiscordLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/DiscordLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const DiscordLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"800px\"\n    height=\"auto\"\n    viewBox=\"0 0 71 80\"\n    fill=\"none\"\n    role=\"img\"\n    aria-label=\"Discord logo\"\n    {...props}\n  >\n    <path\n      d=\"M60.1045 13.8978C55.5792 11.8214 50.7265 10.2916 45.6527 9.41542C45.5603 9.39851 45.468 9.44077 45.4204 9.52529C44.7963 10.6353 44.105 12.0834 43.6209 13.2216C38.1637 12.4046 32.7345 12.4046 27.3892 13.2216C26.905 12.0581 26.1886 10.6353 25.5617 9.52529C25.5141 9.44359 25.4218 9.40133 25.3294 9.41542C20.2584 10.2888 15.4057 11.8186 10.8776 13.8978C10.8384 13.9147 10.8048 13.9429 10.7825 13.9795C1.57795 27.7309 -0.943561 41.1443 0.293408 54.3914C0.299005 54.4562 0.335386 54.5182 0.385761 54.5576C6.45866 59.0174 12.3413 61.7249 18.1147 63.5195C18.2071 63.5477 18.305 63.5139 18.3638 63.4378C19.7295 61.5728 20.9469 59.6063 21.9907 57.5383C22.0523 57.4172 21.9935 57.2735 21.8676 57.2256C19.9366 56.4931 18.0979 55.6 16.3292 54.5858C16.1893 54.5041 16.1781 54.304 16.3068 54.2082C16.679 53.9293 17.0513 53.6391 17.4067 53.3461C17.471 53.2926 17.5606 53.2813 17.6362 53.3151C29.2558 58.6202 41.8354 58.6202 53.3179 53.3151C53.3935 53.2785 53.4831 53.2898 53.5502 53.3433C53.9057 53.6363 54.2779 53.9293 54.6529 54.2082C54.7816 54.304 54.7732 54.5041 54.6333 54.5858C52.8646 55.6197 51.0259 56.4931 49.0921 57.2228C48.9662 57.2707 48.9102 57.4172 48.9718 57.5383C50.038 59.6034 51.2554 61.5699 52.5959 63.435C52.6519 63.5139 52.7526 63.5477 52.845 63.5195C58.6464 61.7249 64.529 59.0174 70.6019 54.5576C70.6551 54.5182 70.6887 54.459 70.6943 54.3942C72.1747 39.0791 68.2147 25.7757 60.1968 13.9823C60.1772 13.9429 60.1437 13.9147 60.1045 13.8978ZM23.7259 46.3253C20.2276 46.3253 17.3451 43.1136 17.3451 39.1693C17.3451 35.225 20.1717 32.0133 23.7259 32.0133C27.308 32.0133 30.1626 35.2532 30.1066 39.1693C30.1066 43.1136 27.28 46.3253 23.7259 46.3253ZM47.3178 46.3253C43.8196 46.3253 40.9371 43.1136 40.9371 39.1693C40.9371 35.225 43.7636 32.0133 47.3178 32.0133C50.9 32.0133 53.7545 35.2532 53.6986 39.1693C53.6986 43.1136 50.9 46.3253 47.3178 46.3253Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,eAA4C,UACvD,oBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC;EACC,GAAE;EACF,MAAK;GACL;EACE"}

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/FacebookLogo.tsx
+const FacebookLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 50 50",
+	width: "50px",
+	height: "50px",
+	fill: "currentColor",
+	role: "img",
+	"aria-label": "Facebook logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z" })
+});
+
+//#endregion
+export { FacebookLogo };
+//# sourceMappingURL=FacebookLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacebookLogo.mjs","names":["FacebookLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/FacebookLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const FacebookLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 50 50\"\n    width=\"50px\"\n    height=\"50px\"\n    fill=\"currentColor\"\n    role=\"img\"\n    aria-label=\"Facebook logo\"\n    {...props}\n  >\n    <path d=\"M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,gBAA6C,UACxD,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,OAAM;CACN,QAAO;CACP,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,gTAAgT;EACpT"}

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

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/InstagramLogo.tsx
+const InstagramLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	width: "800px",
+	height: "800px",
+	viewBox: "0 0 20 20",
+	xmlns: "http://www.w3.org/2000/svg",
+	role: "img",
+	"aria-label": "Instagram logo",
+	...props,
+	children: /* @__PURE__ */ jsx("g", {
+		stroke: "none",
+		strokeWidth: "1",
+		fill: "none",
+		fillRule: "evenodd",
+		children: /* @__PURE__ */ jsx("g", {
+			transform: "translate(-340.000000, -7439.000000)",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("g", {
+				transform: "translate(56.000000, 160.000000)",
+				children: /* @__PURE__ */ jsx("path", { d: "M289.869652,7279.12273 C288.241769,7279.19618 286.830805,7279.5942 285.691486,7280.72871 C284.548187,7281.86918 284.155147,7283.28558 284.081514,7284.89653 C284.035742,7285.90201 283.768077,7293.49818 284.544207,7295.49028 C285.067597,7296.83422 286.098457,7297.86749 287.454694,7298.39256 C288.087538,7298.63872 288.809936,7298.80547 289.869652,7298.85411 C298.730467,7299.25511 302.015089,7299.03674 303.400182,7295.49028 C303.645956,7294.859 303.815113,7294.1374 303.86188,7293.08031 C304.26686,7284.19677 303.796207,7282.27117 302.251908,7280.72871 C301.027016,7279.50685 299.5862,7278.67508 289.869652,7279.12273 M289.951245,7297.06748 C288.981083,7297.0238 288.454707,7296.86201 288.103459,7296.72603 C287.219865,7296.3826 286.556174,7295.72155 286.214876,7294.84312 C285.623823,7293.32944 285.819846,7286.14023 285.872583,7284.97693 C285.924325,7283.83745 286.155174,7282.79624 286.959165,7281.99226 C287.954203,7280.99968 289.239792,7280.51332 297.993144,7280.90837 C299.135448,7280.95998 300.179243,7281.19026 300.985224,7281.99226 C301.980262,7282.98483 302.473801,7284.28014 302.071806,7292.99991 C302.028024,7293.96767 301.865833,7294.49274 301.729513,7294.84312 C300.829003,7297.15085 298.757333,7297.47145 289.951245,7297.06748 M298.089663,7283.68956 C298.089663,7284.34665 298.623998,7284.88065 299.283709,7284.88065 C299.943419,7284.88065 300.47875,7284.34665 300.47875,7283.68956 C300.47875,7283.03248 299.943419,7282.49847 299.283709,7282.49847 C298.623998,7282.49847 298.089663,7283.03248 298.089663,7283.68956 M288.862673,7288.98792 C288.862673,7291.80286 291.150266,7294.08479 293.972194,7294.08479 C296.794123,7294.08479 299.081716,7291.80286 299.081716,7288.98792 C299.081716,7286.17298 296.794123,7283.89205 293.972194,7283.89205 C291.150266,7283.89205 288.862673,7286.17298 288.862673,7288.98792 M290.655732,7288.98792 C290.655732,7287.16159 292.140329,7285.67967 293.972194,7285.67967 C295.80406,7285.67967 297.288657,7287.16159 297.288657,7288.98792 C297.288657,7290.81525 295.80406,7292.29716 293.972194,7292.29716 C292.140329,7292.29716 290.655732,7290.81525 290.655732,7288.98792" })
+			})
+		})
+	})
+});
+
+//#endregion
+export { InstagramLogo };
+//# sourceMappingURL=InstagramLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstagramLogo.mjs","names":["InstagramLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/InstagramLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const InstagramLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 20 20\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Instagram logo\"\n    {...props}\n  >\n    <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(-340.000000, -7439.000000)\" fill=\"currentColor\">\n        <g transform=\"translate(56.000000, 160.000000)\">\n          <path d=\"M289.869652,7279.12273 C288.241769,7279.19618 286.830805,7279.5942 285.691486,7280.72871 C284.548187,7281.86918 284.155147,7283.28558 284.081514,7284.89653 C284.035742,7285.90201 283.768077,7293.49818 284.544207,7295.49028 C285.067597,7296.83422 286.098457,7297.86749 287.454694,7298.39256 C288.087538,7298.63872 288.809936,7298.80547 289.869652,7298.85411 C298.730467,7299.25511 302.015089,7299.03674 303.400182,7295.49028 C303.645956,7294.859 303.815113,7294.1374 303.86188,7293.08031 C304.26686,7284.19677 303.796207,7282.27117 302.251908,7280.72871 C301.027016,7279.50685 299.5862,7278.67508 289.869652,7279.12273 M289.951245,7297.06748 C288.981083,7297.0238 288.454707,7296.86201 288.103459,7296.72603 C287.219865,7296.3826 286.556174,7295.72155 286.214876,7294.84312 C285.623823,7293.32944 285.819846,7286.14023 285.872583,7284.97693 C285.924325,7283.83745 286.155174,7282.79624 286.959165,7281.99226 C287.954203,7280.99968 289.239792,7280.51332 297.993144,7280.90837 C299.135448,7280.95998 300.179243,7281.19026 300.985224,7281.99226 C301.980262,7282.98483 302.473801,7284.28014 302.071806,7292.99991 C302.028024,7293.96767 301.865833,7294.49274 301.729513,7294.84312 C300.829003,7297.15085 298.757333,7297.47145 289.951245,7297.06748 M298.089663,7283.68956 C298.089663,7284.34665 298.623998,7284.88065 299.283709,7284.88065 C299.943419,7284.88065 300.47875,7284.34665 300.47875,7283.68956 C300.47875,7283.03248 299.943419,7282.49847 299.283709,7282.49847 C298.623998,7282.49847 298.089663,7283.03248 298.089663,7283.68956 M288.862673,7288.98792 C288.862673,7291.80286 291.150266,7294.08479 293.972194,7294.08479 C296.794123,7294.08479 299.081716,7291.80286 299.081716,7288.98792 C299.081716,7286.17298 296.794123,7283.89205 293.972194,7283.89205 C291.150266,7283.89205 288.862673,7286.17298 288.862673,7288.98792 M290.655732,7288.98792 C290.655732,7287.16159 292.140329,7285.67967 293.972194,7285.67967 C295.80406,7285.67967 297.288657,7287.16159 297.288657,7288.98792 C297.288657,7290.81525 295.80406,7292.29716 293.972194,7292.29716 C292.140329,7292.29716 290.655732,7290.81525 290.655732,7288.98792\"></path>\n        </g>\n      </g>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,iBAA8C,UACzD,oBAAC;CACC,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC;EAAE,QAAO;EAAO,aAAY;EAAI,MAAK;EAAO,UAAS;YACpD,oBAAC;GAAE,WAAU;GAAuC,MAAK;aACvD,oBAAC;IAAE,WAAU;cACX,oBAAC,UAAK,GAAE,kkEAAukE;KAC7kE;IACF;GACF;EACA"}

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/LinkedInLogo.tsx
+const LinkedInLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	width: "800px",
+	height: "800px",
+	viewBox: "0 0 20 20",
+	xmlns: "http://www.w3.org/2000/svg",
+	role: "img",
+	"aria-label": "LinkedIn logo",
+	...props,
+	children: /* @__PURE__ */ jsx("g", {
+		stroke: "none",
+		strokeWidth: "1",
+		fill: "none",
+		fillRule: "evenodd",
+		children: /* @__PURE__ */ jsx("g", {
+			transform: "translate(-180.000000, -7479.000000)",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("g", {
+				transform: "translate(56.000000, 160.000000)",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M144,7339 L140,7339 L140,7332.001 C140,7330.081 139.153,7329.01 137.634,7329.01 C135.981,7329.01 135,7330.126 135,7332.001 L135,7339 L131,7339 L131,7326 L135,7326 L135,7327.462 C135,7327.462 136.255,7325.26 139.083,7325.26 C141.912,7325.26 144,7326.986 144,7330.558 L144,7339 L144,7339 Z M126.442,7323.921 C125.093,7323.921 124,7322.819 124,7321.46 C124,7320.102 125.093,7319 126.442,7319 C127.79,7319 128.883,7320.102 128.883,7321.46 C128.884,7322.819 127.79,7323.921 126.442,7323.921 L126.442,7323.921 Z M124,7339 L129,7339 L129,7326 L124,7326 L124,7339 Z",
+					id: "linkedin-[#161]"
+				})
+			})
+		})
+	})
+});
+
+//#endregion
+export { LinkedInLogo };
+//# sourceMappingURL=LinkedInLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedInLogo.mjs","names":["LinkedInLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/LinkedInLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const LinkedInLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 20 20\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"LinkedIn logo\"\n    {...props}\n  >\n    <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n      <g transform=\"translate(-180.000000, -7479.000000)\" fill=\"currentColor\">\n        <g transform=\"translate(56.000000, 160.000000)\">\n          <path\n            d=\"M144,7339 L140,7339 L140,7332.001 C140,7330.081 139.153,7329.01 137.634,7329.01 C135.981,7329.01 135,7330.126 135,7332.001 L135,7339 L131,7339 L131,7326 L135,7326 L135,7327.462 C135,7327.462 136.255,7325.26 139.083,7325.26 C141.912,7325.26 144,7326.986 144,7330.558 L144,7339 L144,7339 Z M126.442,7323.921 C125.093,7323.921 124,7322.819 124,7321.46 C124,7320.102 125.093,7319 126.442,7319 C127.79,7319 128.883,7320.102 128.883,7321.46 C128.884,7322.819 127.79,7323.921 126.442,7323.921 L126.442,7323.921 Z M124,7339 L129,7339 L129,7326 L124,7326 L124,7339 Z\"\n            id=\"linkedin-[#161]\"\n          />\n        </g>\n      </g>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,gBAA6C,UACxD,oBAAC;CACC,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC;EAAE,QAAO;EAAO,aAAY;EAAI,MAAK;EAAO,UAAS;YACpD,oBAAC;GAAE,WAAU;GAAuC,MAAK;aACvD,oBAAC;IAAE,WAAU;cACX,oBAAC;KACC,GAAE;KACF,IAAG;MACH;KACA;IACF;GACF;EACA"}

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/ProductHuntLogo.tsx
+const ProductHuntLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	width: "800px",
+	height: "800px",
+	viewBox: "0 0 32 32",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M20.394 13.675c0 1.281-1.044 2.325-2.325 2.325h-4.394v-4.65h4.394c1.281 0 2.325 1.044 2.325 2.325zM31.5 16c0 8.563-6.938 15.5-15.5 15.5s-15.5-6.938-15.5-15.5c0-8.563 6.938-15.5 15.5-15.5s15.5 6.938 15.5 15.5zM23.494 13.675c0-2.994-2.431-5.425-5.425-5.425h-7.494v15.5h3.1v-4.65h4.394c2.994 0 5.425-2.431 5.425-5.425z" })
+});
+
+//#endregion
+export { ProductHuntLogo };
+//# sourceMappingURL=ProductHuntLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductHuntLogo.mjs","names":["ProductHuntLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/ProductHuntLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const ProductHuntLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 32 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path d=\"M20.394 13.675c0 1.281-1.044 2.325-2.325 2.325h-4.394v-4.65h4.394c1.281 0 2.325 1.044 2.325 2.325zM31.5 16c0 8.563-6.938 15.5-15.5 15.5s-15.5-6.938-15.5-15.5c0-8.563 6.938-15.5 15.5-15.5s15.5 6.938 15.5 15.5zM23.494 13.675c0-2.994-2.431-5.425-5.425-5.425h-7.494v15.5h3.1v-4.65h4.394c2.994 0 5.425-2.431 5.425-5.425z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,mBAAgD,UAC3D,oBAAC;CACC,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,GAAI;WAEJ,oBAAC,UAAK,GAAE,gUAAgU;EACpU"}

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/TiktokLogo.tsx
+const TiktokLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	width: "800px",
+	height: "800px",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	role: "img",
+	"aria-label": "Tiktok logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z" })
+});
+
+//#endregion
+export { TiktokLogo };
+//# sourceMappingURL=TiktokLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TiktokLogo.mjs","names":["TiktokLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/TiktokLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const TiktokLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Tiktok logo\"\n    {...props}\n  >\n    <path d=\"M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,cAA2C,UACtD,oBAAC;CACC,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,qRAAqR;EACzR"}

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/XLogo.tsx
+const XLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 300 271",
+	width: "300",
+	height: "271",
+	fill: "currentColor",
+	role: "img",
+	"aria-label": "X logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z" })
+});
+
+//#endregion
+export { XLogo };
+//# sourceMappingURL=XLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XLogo.mjs","names":["XLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/XLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const XLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 300 271\"\n    width=\"300\"\n    height=\"271\"\n    fill=\"currentColor\"\n    role=\"img\"\n    aria-label=\"X logo\"\n    {...props}\n  >\n    <path d=\"m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z\" />\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,SAAsC,UACjD,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,OAAM;CACN,QAAO;CACP,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,2HAA2H;EAC/H"}

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/YoutubeLogo.tsx
+const YoutubeLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	width: "800px",
+	height: "800px",
+	viewBox: "0 0 32 32",
+	xmlns: "http://www.w3.org/2000/svg",
+	role: "img",
+	"aria-label": "Youtube logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z" })
+});
+
+//#endregion
+export { YoutubeLogo };
+//# sourceMappingURL=YoutubeLogo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"YoutubeLogo.mjs","names":["YoutubeLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/YoutubeLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const YoutubeLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    fill=\"currentColor\"\n    width=\"800px\"\n    height=\"800px\"\n    viewBox=\"0 0 32 32\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    role=\"img\"\n    aria-label=\"Youtube logo\"\n    {...props}\n  >\n    <path d=\"M12.932 20.459v-8.917l7.839 4.459zM30.368 8.735c-0.354-1.301-1.354-2.307-2.625-2.663l-0.027-0.006c-3.193-0.406-6.886-0.638-10.634-0.638-0.381 0-0.761 0.002-1.14 0.007l0.058-0.001c-0.322-0.004-0.701-0.007-1.082-0.007-3.748 0-7.443 0.232-11.070 0.681l0.434-0.044c-1.297 0.363-2.297 1.368-2.644 2.643l-0.006 0.026c-0.4 2.109-0.628 4.536-0.628 7.016 0 0.088 0 0.176 0.001 0.263l-0-0.014c-0 0.074-0.001 0.162-0.001 0.25 0 2.48 0.229 4.906 0.666 7.259l-0.038-0.244c0.354 1.301 1.354 2.307 2.625 2.663l0.027 0.006c3.193 0.406 6.886 0.638 10.634 0.638 0.38 0 0.76-0.002 1.14-0.007l-0.058 0.001c0.322 0.004 0.702 0.007 1.082 0.007 3.749 0 7.443-0.232 11.070-0.681l-0.434 0.044c1.298-0.362 2.298-1.368 2.646-2.643l0.006-0.026c0.399-2.109 0.627-4.536 0.627-7.015 0-0.088-0-0.176-0.001-0.263l0 0.013c0-0.074 0.001-0.162 0.001-0.25 0-2.48-0.229-4.906-0.666-7.259l0.038 0.244z\"></path>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,eAA4C,UACvD,oBAAC;CACC,MAAK;CACL,OAAM;CACN,QAAO;CACP,SAAQ;CACR,OAAM;CACN,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,UAAK,GAAE,m2BAAw2B;EAC52B"}

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

@@ -0,0 +1,70 @@
+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 { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SocialNetworks/index.tsx
+const socialNetworks = [
+	{
+		href: "https://discord.gg/7uxamYVeCk",
+		component: /* @__PURE__ */ jsx(DiscordLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "Discord"
+	},
+	{
+		href: "https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer",
+		component: /* @__PURE__ */ jsx(ProductHuntLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "Product Hunt"
+	},
+	{
+		href: "https://x.com/Intlayer183096",
+		component: /* @__PURE__ */ jsx(XLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "X"
+	},
+	{
+		href: "https://www.youtube.com/@intlayer",
+		component: /* @__PURE__ */ jsx(YoutubeLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "YouTube"
+	},
+	{
+		href: "https://www.linkedin.com/company/intlayerorg",
+		component: /* @__PURE__ */ jsx(LinkedInLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "LinkedIn"
+	},
+	{
+		href: "https://www.tiktok.com/@intlayer",
+		component: /* @__PURE__ */ jsx(TiktokLogo, { className: "h-auto max-h-full max-w-full" }),
+		label: "TikTok"
+	},
+	{
+		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", {
+	href,
+	"aria-label": label,
+	className: "max-h-4 max-w-4",
+	...iconProps,
+	children: component
+}, href);
+const SocialNetworks = ({ renderItem,...iconProps }) => socialNetworks.map(renderItem ?? ((props) => /* @__PURE__ */ createElement(DefaultRenderItem, {
+	...props,
+	...iconProps,
+	key: props.label
+})));
+
+//#endregion
+export { DiscordLogo, FacebookLogo, InstagramLogo, LinkedInLogo, ProductHuntLogo, SocialNetworks, TiktokLogo, XLogo, YoutubeLogo };
+//# sourceMappingURL=index.mjs.map