@x-plat/design-system 0.13.0 → 0.14.0

package/dist/index.d.cts

@@ -27,7 +27,7 @@ export { Input, PasswordInput } from './components/Input/index.cjs';
 export { Link } from './components/Link/index.cjs';
 export { LinkButton } from './components/LinkButton/index.cjs';
 export { Modal } from './components/Modal/index.cjs';
-export { NotificationBadge as Badge, NotificationBadge } from './components/NotificationBadge/index.cjs';
+export { Badge, Badge as NotificationBadge } from './components/NotificationBadge/index.cjs';
 export { Pagination } from './components/Pagination/index.cjs';
 export { PopOver } from './components/PopOver/index.cjs';
 export { Progress } from './components/Progress/index.cjs';
@@ -45,17 +45,18 @@ export { Tag } from './components/Tag/index.cjs';
 export { TextArea } from './components/TextArea/index.cjs';
 export { TimePicker } from './components/TimePicker/index.cjs';
 export { ToastProvider, useToast } from './components/Toast/index.cjs';
+export { ToggleChip } from './components/ToggleChip/index.cjs';
 export { Tooltip } from './components/Tooltip/index.cjs';
 export { Video, VideoProps } from './components/Video/index.cjs';
 export { FullGrid } from './layout/Grid/FullGrid/index.cjs';
 export { FullScreen } from './layout/Grid/FullScreen/index.cjs';
 export { GridItem } from './layout/Grid/Item/index.cjs';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from './breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from './breakpoints-CKkNxA-y.cjs';
 export { Header } from './layout/Header/index.cjs';
 export { Layout } from './layout/Layout/index.cjs';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.cjs';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
-export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, DefaultCall as CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.cjs';
+export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, CallIcon as DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.cjs';
 import 'react';
 import './attributes-DJIWir_0.cjs';
 import './validation-Dqo1zqhT.cjs';

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export { Input, PasswordInput } from './components/Input/index.js';
 export { Link } from './components/Link/index.js';
 export { LinkButton } from './components/LinkButton/index.js';
 export { Modal } from './components/Modal/index.js';
-export { NotificationBadge as Badge, NotificationBadge } from './components/NotificationBadge/index.js';
+export { Badge, Badge as NotificationBadge } from './components/NotificationBadge/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PopOver } from './components/PopOver/index.js';
 export { Progress } from './components/Progress/index.js';
@@ -45,17 +45,18 @@ export { Tag } from './components/Tag/index.js';
 export { TextArea } from './components/TextArea/index.js';
 export { TimePicker } from './components/TimePicker/index.js';
 export { ToastProvider, useToast } from './components/Toast/index.js';
+export { ToggleChip } from './components/ToggleChip/index.js';
 export { Tooltip } from './components/Tooltip/index.js';
 export { Video, VideoProps } from './components/Video/index.js';
 export { FullGrid } from './layout/Grid/FullGrid/index.js';
 export { FullScreen } from './layout/Grid/FullScreen/index.js';
 export { GridItem } from './layout/Grid/Item/index.js';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from './breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from './breakpoints-CKkNxA-y.js';
 export { Header } from './layout/Header/index.js';
 export { Layout } from './layout/Layout/index.js';
 export { SideBar, SideBarContext, useSideBarContext } from './layout/SideBar/index.js';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
-export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, DefaultCall as CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.js';
+export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CalenderIcon, CallActiveIcon, CallForwardedIcon, CallIcon, CallIncomingIcon, CallMissedIcon, CallOffIcon, CallOutgoingIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseEyeIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColorProps, ColorToken, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, CallIcon as DefaultCall, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ErrorIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GierIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkIcon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, OpenEyeIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProfileIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SemanticColorToken, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SuccessIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from './tokens/index.js';
 import 'react';
 import './attributes-DJIWir_0.js';
 import './validation-Dqo1zqhT.js';

package/dist/index.js

@@ -11409,9 +11409,33 @@ var ToastProvider = ({
 };
 ToastProvider.displayName = "ToastProvider";
 
+// src/components/ToggleChip/ToggleChip.tsx
+import { jsx as jsx353 } from "react/jsx-runtime";
+var ToggleChip = (props) => {
+  const { children, selected = false, onClick, disabled = false, size = "md" } = props;
+  return /* @__PURE__ */ jsx353(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "lib-xplat-chip",
+        "lib-xplat-toggle-chip",
+        size,
+        selected ? "selected" : "unselected"
+      ),
+      "aria-pressed": selected,
+      disabled,
+      onClick,
+      children
+    }
+  );
+};
+ToggleChip.displayName = "ToggleChip";
+var ToggleChip_default = ToggleChip;
+
 // src/components/Tooltip/Tooltip.tsx
 import React42 from "react";
-import { Fragment as Fragment6, jsx as jsx353, jsxs as jsxs224 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
 var OFFSET = 12;
 var GAP = 8;
 var SHOW_DELAY = 300;
@@ -11516,7 +11540,7 @@ var Tooltip = (props) => {
     window.clearTimeout(delayTimer.current);
     cancelAnimationFrame(rafRef.current);
   }, []);
-  if (!title && !description) return /* @__PURE__ */ jsx353(Fragment6, { children });
+  if (!title && !description) return /* @__PURE__ */ jsx354(Fragment6, { children });
   return /* @__PURE__ */ jsxs224(
     "div",
     {
@@ -11530,7 +11554,7 @@ var Tooltip = (props) => {
       onBlur: close,
       children: [
         children,
-        visible && /* @__PURE__ */ jsx353(Portal_default, { children: /* @__PURE__ */ jsxs224(
+        visible && /* @__PURE__ */ jsx354(Portal_default, { children: /* @__PURE__ */ jsxs224(
           "div",
           {
             ref: tooltipRef,
@@ -11538,8 +11562,8 @@ var Tooltip = (props) => {
             className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
-              title && /* @__PURE__ */ jsx353("div", { className: "tooltip-title", children: title }),
-              description && /* @__PURE__ */ jsx353("div", { className: "tooltip-desc", children: description })
+              title && /* @__PURE__ */ jsx354("div", { className: "tooltip-title", children: title }),
+              description && /* @__PURE__ */ jsx354("div", { className: "tooltip-desc", children: description })
             ]
           }
         ) })
@@ -11552,10 +11576,10 @@ var Tooltip_default = Tooltip;
 
 // src/components/Video/Video.tsx
 import React43 from "react";
-import { jsx as jsx354, jsxs as jsxs225 } from "react/jsx-runtime";
+import { jsx as jsx355, jsxs as jsxs225 } from "react/jsx-runtime";
 var PipIcon = () => /* @__PURE__ */ jsxs225("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsx354("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-  /* @__PURE__ */ jsx354("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+  /* @__PURE__ */ jsx355("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsx355("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
 ] });
 var formatTime = (sec) => {
   if (!Number.isFinite(sec) || sec < 0) return "0:00";
@@ -11736,7 +11760,7 @@ var Video = React43.forwardRef((props, ref) => {
       ref: containerRef,
       className: clsx_default("lib-xplat-video", showControls && "has-controls"),
       children: [
-        /* @__PURE__ */ jsx354(
+        /* @__PURE__ */ jsx355(
           "video",
           {
             ref: setRefs,
@@ -11757,7 +11781,7 @@ var Video = React43.forwardRef((props, ref) => {
             children
           }
         ),
-        showCenterPlay && /* @__PURE__ */ jsx354(
+        showCenterPlay && /* @__PURE__ */ jsx355(
           "button",
           {
             type: "button",
@@ -11769,11 +11793,11 @@ var Video = React43.forwardRef((props, ref) => {
             onClick: togglePlay,
             "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx354("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx354(PlayCircleIcon_default, {}) })
+            children: /* @__PURE__ */ jsx355("span", { className: "center-play-icon", children: /* @__PURE__ */ jsx355(PlayCircleIcon_default, {}) })
           }
         ),
         showControls && /* @__PURE__ */ jsxs225("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx354(
+          /* @__PURE__ */ jsx355(
             "input",
             {
               type: "range",
@@ -11791,28 +11815,28 @@ var Video = React43.forwardRef((props, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs225("div", { className: "controls-row", children: [
-            /* @__PURE__ */ jsx354(
+            /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: togglePlay,
                 "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-                children: isPlaying ? /* @__PURE__ */ jsx354(PauseIcon_default, {}) : /* @__PURE__ */ jsx354(PlayIcon_default, {})
+                children: isPlaying ? /* @__PURE__ */ jsx355(PauseIcon_default, {}) : /* @__PURE__ */ jsx355(PlayIcon_default, {})
               }
             ),
             /* @__PURE__ */ jsxs225("div", { className: "volume-group", children: [
-              /* @__PURE__ */ jsx354(
+              /* @__PURE__ */ jsx355(
                 "button",
                 {
                   type: "button",
                   className: "control-btn",
                   onClick: toggleMute,
                   "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
-                  children: /* @__PURE__ */ jsx354(VolumeGlyph, {})
+                  children: /* @__PURE__ */ jsx355(VolumeGlyph, {})
                 }
               ),
-              /* @__PURE__ */ jsx354(
+              /* @__PURE__ */ jsx355(
                 "input",
                 {
                   type: "range",
@@ -11832,7 +11856,7 @@ var Video = React43.forwardRef((props, ref) => {
               " / ",
               formatTime(duration)
             ] }),
-            /* @__PURE__ */ jsx354("div", { className: "controls-spacer" }),
+            /* @__PURE__ */ jsx355("div", { className: "controls-spacer" }),
             playbackRates && playbackRates.length > 0 && /* @__PURE__ */ jsxs225("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
               /* @__PURE__ */ jsxs225(
                 "button",
@@ -11848,7 +11872,7 @@ var Video = React43.forwardRef((props, ref) => {
                   ]
                 }
               ),
-              rateMenuOpen && /* @__PURE__ */ jsx354("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx354("li", { children: /* @__PURE__ */ jsxs225(
+              rateMenuOpen && /* @__PURE__ */ jsx355("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ jsx355("li", { children: /* @__PURE__ */ jsxs225(
                 "button",
                 {
                   type: "button",
@@ -11862,7 +11886,7 @@ var Video = React43.forwardRef((props, ref) => {
                 }
               ) }, r2)) })
             ] }),
-            showCaptions && /* @__PURE__ */ jsx354(
+            showCaptions && /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
@@ -11870,37 +11894,37 @@ var Video = React43.forwardRef((props, ref) => {
                 onClick: toggleCaptions,
                 "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
                 "aria-pressed": captionsOn,
-                children: /* @__PURE__ */ jsx354(TypeIcon_default, {})
+                children: /* @__PURE__ */ jsx355(TypeIcon_default, {})
               }
             ),
-            showPip && pipSupported && /* @__PURE__ */ jsx354(
+            showPip && pipSupported && /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: clsx_default("control-btn", isPip && "is-active"),
                 onClick: togglePip,
                 "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
-                children: /* @__PURE__ */ jsx354(PipIcon, {})
+                children: /* @__PURE__ */ jsx355(PipIcon, {})
               }
             ),
-            showDownload && /* @__PURE__ */ jsx354(
+            showDownload && /* @__PURE__ */ jsx355(
               "a",
               {
                 className: "control-btn",
                 href: src,
                 download: downloadFileName ?? true,
                 "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
-                children: /* @__PURE__ */ jsx354(DownloadIcon_default, {})
+                children: /* @__PURE__ */ jsx355(DownloadIcon_default, {})
               }
             ),
-            /* @__PURE__ */ jsx354(
+            /* @__PURE__ */ jsx355(
               "button",
               {
                 type: "button",
                 className: "control-btn",
                 onClick: toggleFullscreen,
                 "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
-                children: isFullscreen ? /* @__PURE__ */ jsx354(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx354(MaximizeIcon_default, {})
+                children: isFullscreen ? /* @__PURE__ */ jsx355(MinimizeIcon_default, {}) : /* @__PURE__ */ jsx355(MaximizeIcon_default, {})
               }
             )
           ] })
@@ -11913,7 +11937,7 @@ Video.displayName = "Video";
 var Video_default = Video;
 
 // src/layout/Grid/FullGrid/FullGrid.tsx
-import { jsx as jsx355 } from "react/jsx-runtime";
+import { jsx as jsx356 } from "react/jsx-runtime";
 var GAP_MAP = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11926,13 +11950,13 @@ var GAP_MAP = {
 var FullGrid = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP[gap] } : void 0;
-  return /* @__PURE__ */ jsx355("div", { className: "lib-xplat-full-grid", style, children });
+  return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-full-grid", style, children });
 };
 FullGrid.displayName = "FullGrid";
 var FullGrid_default = FullGrid;
 
 // src/layout/Grid/FullScreen/FullScreen.tsx
-import { jsx as jsx356 } from "react/jsx-runtime";
+import { jsx as jsx357 } from "react/jsx-runtime";
 var GAP_MAP2 = {
   none: "var(--spacing-space-none)",
   xs: "var(--spacing-space-1)",
@@ -11945,13 +11969,13 @@ var GAP_MAP2 = {
 var FullScreen = (props) => {
   const { children, gap } = props;
   const style = gap != null ? { gap: GAP_MAP2[gap] } : void 0;
-  return /* @__PURE__ */ jsx356("div", { className: "lib-xplat-full-screen", style, children });
+  return /* @__PURE__ */ jsx357("div", { className: "lib-xplat-full-screen", style, children });
 };
 FullScreen.displayName = "FullScreen";
 var FullScreen_default = FullScreen;
 
 // src/layout/Grid/Item/Item.tsx
-import { jsx as jsx357 } from "react/jsx-runtime";
+import { jsx as jsx358 } from "react/jsx-runtime";
 var calculateSpans = (column) => {
   const spans = {};
   let inherited = column.default;
@@ -11968,35 +11992,35 @@ var GridItem = ({ column, children, className }) => {
   Object.entries(spans).forEach(([key, value]) => {
     style[`--column-${key}`] = value;
   });
-  return /* @__PURE__ */ jsx357("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
+  return /* @__PURE__ */ jsx358("div", { className: clsx_default("lib-xplat-grid-item", className), style, children });
 };
 GridItem.displayName = "GridItem";
 var Item_default = GridItem;
 
 // src/layout/Header/Header.tsx
-import { jsx as jsx358, jsxs as jsxs226 } from "react/jsx-runtime";
+import { jsx as jsx359, jsxs as jsxs226 } from "react/jsx-runtime";
 var Header = ({
   logo,
   centerContent,
   rightContent
 }) => {
   return /* @__PURE__ */ jsxs226("div", { className: "lib-xplat-layout-header", children: [
-    /* @__PURE__ */ jsx358("div", { children: logo }),
-    /* @__PURE__ */ jsx358("div", { children: centerContent }),
-    /* @__PURE__ */ jsx358("div", { children: rightContent })
+    /* @__PURE__ */ jsx359("div", { children: logo }),
+    /* @__PURE__ */ jsx359("div", { children: centerContent }),
+    /* @__PURE__ */ jsx359("div", { children: rightContent })
   ] });
 };
 Header.displayName = "Header";
 var Header_default = Header;
 
 // src/layout/Layout/Layout.tsx
-import { Fragment as Fragment7, jsx as jsx359, jsxs as jsxs227 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx360, jsxs as jsxs227 } from "react/jsx-runtime";
 var Layout = (props) => {
   const { header, sideBar, children } = props;
-  return /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content-wrapper", children: [
-    sideBar && /* @__PURE__ */ jsx359(Fragment7, { children: sideBar }),
+  return /* @__PURE__ */ jsx360("div", { className: "lib-xplat-layout", children: /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content-wrapper", children: [
+    sideBar && /* @__PURE__ */ jsx360(Fragment7, { children: sideBar }),
     /* @__PURE__ */ jsxs227("div", { className: "lib-xplat-layout-content", children: [
-      header && /* @__PURE__ */ jsx359("div", { className: "lib-xplat-layout-conent-header", children: header }),
+      header && /* @__PURE__ */ jsx360("div", { className: "lib-xplat-layout-conent-header", children: header }),
       children
     ] })
   ] }) });
@@ -12018,18 +12042,18 @@ var useSideBarContext = () => {
 var SideBarContext_default = SideBarContext;
 
 // src/layout/SideBar/SideBar.tsx
-import { jsx as jsx360 } from "react/jsx-runtime";
+import { jsx as jsx361 } from "react/jsx-runtime";
 var SideBar = (props) => {
   const { children, className } = props;
   const [isOpen, setIsOpen] = React45.useState(true);
   const handleSwitchSideBar = () => {
     setIsOpen((prev) => !prev);
   };
-  return /* @__PURE__ */ jsx360(
+  return /* @__PURE__ */ jsx361(
     SideBarContext_default.Provider,
     {
       value: { isSidebarOpen: isOpen, handleSwitchSideBar },
-      children: /* @__PURE__ */ jsx360(
+      children: /* @__PURE__ */ jsx361(
         "div",
         {
           className: clsx_default(
@@ -12363,6 +12387,7 @@ export {
   ThumbsUpIcon_default as ThumbsUpIcon,
   TimePicker_default as TimePicker,
   ToastProvider,
+  ToggleChip_default as ToggleChip,
   ToggleLeftIcon_default as ToggleLeftIcon,
   ToggleRightIcon_default as ToggleRightIcon,
   ToolIcon_default as ToolIcon,

package/dist/layout/Grid/Item/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { b as GridColumnConfig } from '../../../breakpoints-DsXkJgdl.cjs';
+import { G as GridColumnConfig } from '../../../breakpoints-CKkNxA-y.cjs';
 
 /**
  * Grid column span — 브레이크포인트별 컬럼 수.

package/dist/layout/Grid/Item/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { b as GridColumnConfig } from '../../../breakpoints-DsXkJgdl.js';
+import { G as GridColumnConfig } from '../../../breakpoints-CKkNxA-y.js';
 
 /**
  * Grid column span — 브레이크포인트별 컬럼 수.

package/dist/layout/Grid/index.d.cts

@@ -1,5 +1,5 @@
 export { FullGrid } from './FullGrid/index.cjs';
 export { FullScreen } from './FullScreen/index.cjs';
 export { GridItem } from './Item/index.cjs';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../../breakpoints-CKkNxA-y.cjs';
 import 'react';

package/dist/layout/Grid/index.d.ts

@@ -1,5 +1,5 @@
 export { FullGrid } from './FullGrid/index.js';
 export { FullScreen } from './FullScreen/index.js';
 export { GridItem } from './Item/index.js';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../../breakpoints-CKkNxA-y.js';
 import 'react';

package/dist/layout/index.d.cts

@@ -1,7 +1,7 @@
 export { FullGrid } from './Grid/FullGrid/index.cjs';
 export { FullScreen } from './Grid/FullScreen/index.cjs';
 export { GridItem } from './Grid/Item/index.cjs';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../breakpoints-CKkNxA-y.cjs';
 export { Header } from './Header/index.cjs';
 export { Layout } from './Layout/index.cjs';
 export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.cjs';

package/dist/layout/index.d.ts

@@ -1,7 +1,7 @@
 export { FullGrid } from './Grid/FullGrid/index.js';
 export { FullScreen } from './Grid/FullScreen/index.js';
 export { GridItem } from './Grid/Item/index.js';
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor } from '../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor } from '../breakpoints-CKkNxA-y.js';
 export { Header } from './Header/index.js';
 export { Layout } from './Layout/index.js';
 export { SideBar, SideBarContext, useSideBarContext } from './SideBar/index.js';

package/dist/tokens/index.d.cts

@@ -1,4 +1,4 @@
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-CKkNxA-y.cjs';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 

package/dist/tokens/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
+export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, G as GridColumnConfig, b as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-CKkNxA-y.js';
 export { TokenVar, cssVar, semantic } from '@x-plat/tokens-core';
 import React from 'react';
 

package/guidelines/Guidelines.md

@@ -55,7 +55,7 @@ React 기반 디자인 시스템 라이브러리이다. Figma Make Kit과 1:1
    - [피드백](./components/feedback.md) - Alert, Toast, NotificationBadge
    - [오버레이](./components/overlay.md) - Modal, Drawer, PopOver, Tooltip
    - [폼 컨트롤](./components/form.md) - CheckBox, Radio, Switch
-   - [Chip & Tag](./components/chip-tag.md)
+   - [Chip & ToggleChip & Tag](./components/chip-tag.md)
    - [내비게이션](./components/navigation.md) - Tab, CardTab, Breadcrumb, Pagination, Steps
    - [DatePicker](./components/datepicker.md) - Calendar, DatePicker 4종
    - [Accordion](./components/accordion.md)

package/guidelines/MIGRATION.md

@@ -6,6 +6,33 @@
 - 최신본 URL: `https://unpkg.com/@x-plat/design-system/guidelines/MIGRATION.md`
 - 자기 버전부터 아래로 읽어 내려가면 된다.
 
+## 먼저: 지금 내가 위험한가
+
+**`0.x` 에서 캐럿(`^`)은 마이너를 고정한다.** 메이저가 0 이면 npm 은 마이너 번호를
+메이저처럼 다룬다.
+
+```
+^0.12.0  ≡  >=0.12.0 <0.13.0      ← 0.13.0 은 안 온다
+^0.5.42  ≡  >=0.5.42 <0.6.0       ← 0.6.0 은 안 온다
+```
+
+그래서 **`install` 을 다시 돌려도 아래 변경들은 오지 않는다.** 전부
+`package.json` 의 명시 버전을 직접 올리는 순간에 한꺼번에 온다.
+
+이 말은 두 가지를 뜻한다.
+
+1. **당장 안 올릴 거면 이 문서를 읽지 않아도 된다.** 지금 화면은 안 깨진다.
+2. **올릴 때는 건너뛴 구간의 절을 전부 읽어야 한다.** 한 마이너씩 올라가는 게
+   아니라 여러 마이너를 한 번에 건너뛰게 되기 때문이다.
+
+특히 오래 머물러 있던 저장소는 **성격이 다른 변경 둘을 한꺼번에 맞는다.**
+`0.5.x` 에서 최신으로 올리면 [0.6.0 CSS 변수 개명](#05x--060--css-변수-이름-전면-교체)과
+[0.13.0 `label` 의미 변경](#0120--0130--fileupload--imageselector-의-label-뜻이-바뀜)을
+같이 겪는다. **둘 다 타입이나 빌드가 잡아 주지 않고 화면만 바뀐다.** 이관 후
+눈으로 확인할 것.
+
+---
+
 ## 이 문서를 믿어도 되는 범위
 
 각 항목은 **커밋 해시**를 달아 뒀다. 커밋 제목만 보고 판단하지 말 것 —

package/guidelines/components/chip-tag.md

@@ -1,4 +1,4 @@
-# Chip & Tag
+# Chip & ToggleChip & Tag
 
 ## Chip
 
@@ -41,9 +41,82 @@
 
 ---
 
+## ToggleChip
+
+**눌러서 고르는** 칩이다. 켜짐/꺼짐을 다룬다 — `Tag` 의 클릭은 삭제이고, 이쪽은
+삭제가 아니다.
+
+```tsx
+<ToggleChip selected={picked.has("ko")} onClick={() => toggle("ko")}>
+  한국어
+</ToggleChip>
+```
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| children | `ReactNode` | — | 내용 |
+| selected | `boolean` | `false` | 켜진 상태. `aria-pressed` 도 함께 바뀐다 |
+| onClick | `() => void` | — | 누를 때 |
+| disabled | `boolean` | `false` | 흐리게 하고 못 누르게 한다 |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | `Chip` 과 같은 눈금 |
+
+**여러 개 고르기와 한 개 고르기 양쪽에 쓴다.** 몇 개까지 켤 수 있는지, 마지막
+하나를 뗄 수 있는지 같은 규칙은 쓰는 쪽 사정이라 여기서 정하지 않는다. 묶어
+주는 껍데기도 없다 — 낱개로 늘어놓고 상태만 쥐고 있으면 된다.
+
+```tsx
+// 여러 개 고르기
+const [picked, setPicked] = useState<Set<string>>(new Set());
+const toggle = (v: string) =>
+  setPicked((prev) => {
+    const next = new Set(prev);
+    next.has(v) ? next.delete(v) : next.add(v);
+    return next;
+  });
+
+{OPTIONS.map((o) => (
+  <ToggleChip key={o.value} selected={picked.has(o.value)} onClick={() => toggle(o.value)}>
+    {o.label}
+  </ToggleChip>
+))}
+
+// 한 개 고르기 (거르개)
+{FILTERS.map((f) => (
+  <ToggleChip key={f} selected={filter === f} onClick={() => setFilter(f)}>
+    {f}
+  </ToggleChip>
+))}
+```
+
+`Chip` 과 **같은 알약 모양·같은 크기 눈금**을 쓴다. 두 CSS 가 따로 있는 게
+아니라 `ToggleChip` 이 `.lib-xplat-chip` 을 그대로 입고 상호작용분만 얹으므로
+둘이 따로 놀 수 없다. 거르개 칩 아래에 표시용 `Chip` 이 깔리는 화면에서
+겉돌지 않는다.
+
+색은 `Chip` 의 상태 색(primary·success…)을 받지 않는다. **고른 것과 안 고른 것**
+두 가지뿐이라 상태 색 어휘가 끼어들 자리가 없다. 고른 것은 옅은 브랜드 바탕에
+브랜드 테두리다 — 여러 개를 한꺼번에 켜는 쓰임이 더 많은데 진한 채움이 여럿이면
+화면이 시끄럽고 곁의 버튼과 구분이 안 된다.
+
+---
+
 ## 의사결정
 
 | 상황 | 사용할 것 |
 |------|----------|
-| 상태/분류 라벨 (삭제 불필요) | Chip |
+| 상태/분류 라벨 (누를 일 없음) | Chip |
+| 눌러서 고르기 (켜짐/꺼짐) | **ToggleChip** |
 | 사용자가 제거할 수 있는 태그 | Tag |
+| 개수·점 표시 | NotificationBadge |
+
+셋이 비슷하게 생겼으므로 **무엇이 일어나는가**로 고른다.
+
+| | 누르면 | 렌더 |
+|---|---|---|
+| `Chip` | 아무 일도 없다 | `<div>` |
+| `ToggleChip` | 켜지거나 꺼진다 | `<button aria-pressed>` |
+| `Tag` | (X 를 누르면) 사라진다 | `<span>` + 닫기 `<button>` |
+
+> 고르는 칩을 `Chip` 을 `<button>` 으로 감싸서 만들지 말 것. 커서·초점 테두리·
+> `aria-pressed` 가 빠지고, 실제로 그렇게 만든 화면들에서 **아무도 누를 수 있는
+> 줄 몰랐다.** `ToggleChip` 이 그 셋을 기본으로 갖는다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",