@raydenui/ui 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -4,8 +4,11 @@ var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var chart_js = require('chart.js');
+var reactChartjs2 = require('react-chartjs-2');
+var reactDom = require('react-dom');
 
-// src/components/Button/Button.tsx
+// src/components/Accordion/Accordion.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -5196,17 +5199,17 @@ var zoomOutIcon = {
 var icons = {
   "3d": threeDIcon,
   "AI-stars": AIStarsIcon,
-  "AR": ARIcon,
-  "BTC": BTCIcon,
-  "ETH": ETHIcon,
-  "NFT": NFTIcon,
+  AR: ARIcon,
+  BTC: BTCIcon,
+  ETH: ETHIcon,
+  NFT: NFTIcon,
   "NFT-add": NFTAddIcon,
   "NFT-profile": NFTProfileIcon,
   "NFT-remove": NFTRemoveIcon,
   "QR-code": QRCodeIcon,
   "VR-goggles": VRGogglesIcon,
-  "airplane": airplaneIcon,
-  "airpod": airpodIcon,
+  airplane: airplaneIcon,
+  airpod: airpodIcon,
   "alarm-clock": alarmClockIcon,
   "align-center": alignCenterIcon,
   "align-justify": alignJustifyIcon,
@@ -5223,65 +5226,65 @@ var icons = {
   "arrow-up-left": arrowUpLeftIcon,
   "arrow-up-right": arrowUpRightIcon,
   "arrow-up-split": arrowUpSplitIcon,
-  "at": atIcon,
-  "backward": backwardIcon,
-  "badge": badgeIcon,
-  "bag": bagIcon,
-  "ball": ballIcon,
-  "bank": bankIcon,
+  at: atIcon,
+  backward: backwardIcon,
+  badge: badgeIcon,
+  bag: bagIcon,
+  ball: ballIcon,
+  bank: bankIcon,
   "bar-chart-h": barChartHIcon,
   "bar-chart-v": barChartVIcon,
-  "battery": batteryIcon,
+  battery: batteryIcon,
   "battery-charging": batteryChargingIcon,
   "battery-empty": batteryEmptyIcon,
-  "bed": bedIcon,
+  bed: bedIcon,
   "beizer-curve": beizerCurveIcon,
-  "bell": bellIcon,
+  bell: bellIcon,
   "bell-slash": bellSlashIcon,
-  "bicycle": bicycleIcon,
-  "bin": binIcon,
-  "bluetooth": bluetoothIcon,
-  "bold": boldIcon,
-  "book": bookIcon,
+  bicycle: bicycleIcon,
+  bin: binIcon,
+  bluetooth: bluetoothIcon,
+  bold: boldIcon,
+  book: bookIcon,
   "book-open": bookOpenIcon,
-  "bookmark": bookmarkIcon,
+  bookmark: bookmarkIcon,
   "bookmark-add": bookmarkAddIcon,
-  "bookmarks": bookmarksIcon,
-  "books": booksIcon,
-  "bot": botIcon,
-  "box": boxIcon,
+  bookmarks: bookmarksIcon,
+  books: booksIcon,
+  bot: botIcon,
+  box: boxIcon,
   "box-1": box1Icon,
-  "branch": branchIcon,
-  "brush": brushIcon,
-  "bug": bugIcon,
+  branch: branchIcon,
+  brush: brushIcon,
+  bug: bugIcon,
   "building-1": building1Icon,
   "building-2": building2Icon,
   "building-3": building3Icon,
   "building-4": building4Icon,
   "building-5": building5Icon,
   "building-6": building6Icon,
-  "bulb": bulbIcon,
+  bulb: bulbIcon,
   "bulb-slash": bulbSlashIcon,
-  "bus": busIcon,
-  "calendar": calendarIcon,
+  bus: busIcon,
+  calendar: calendarIcon,
   "calendar-add": calendarAddIcon,
   "calendar-alt": calendarAltIcon,
   "calendar-cross": calendarCrossIcon,
   "calendar-remove": calendarRemoveIcon,
   "calendar-tick": calendarTickIcon,
-  "call": callIcon,
+  call: callIcon,
   "call-add": callAddIcon,
   "call-cross": callCrossIcon,
   "call-incoming": callIncomingIcon,
   "call-outgoing": callOutgoingIcon,
   "call-remove": callRemoveIcon,
   "call-ringing": callRingingIcon,
-  "camera": cameraIcon,
+  camera: cameraIcon,
   "camera-slash": cameraSlashIcon,
   "candles-h": candlesHIcon,
   "candles-v": candlesVIcon,
-  "car": carIcon,
-  "card": cardIcon,
+  car: carIcon,
+  card: cardIcon,
   "card-add": cardAddIcon,
   "card-cross": cardCrossIcon,
   "card-fund": cardFundIcon,
@@ -5290,20 +5293,20 @@ var icons = {
   "card-remove": cardRemoveIcon,
   "card-tick": cardTickIcon,
   "card-withdraw": cardWithdrawIcon,
-  "cart": cartIcon,
+  cart: cartIcon,
   "cart-add": cartAddIcon,
   "cart-check": cartCheckIcon,
   "cart-cross": cartCrossIcon,
   "cart-minus": cartMinusIcon,
-  "chart": chartIcon,
+  chart: chartIcon,
   "chart-down": chartDownIcon,
   "chart-up": chartUpIcon,
-  "chat": chatIcon,
+  chat: chatIcon,
   "chat-alt": chatAltIcon,
-  "chats": chatsIcon,
-  "check": checkIcon,
+  chats: chatsIcon,
+  check: checkIcon,
   "check-circle": checkCircleIcon,
-  "checkbox": checkboxIcon,
+  checkbox: checkboxIcon,
   "checkbox-checked": checkboxCheckedIcon,
   "chevron-down": chevronDownIcon,
   "chevron-h": chevronHIcon,
@@ -5311,9 +5314,9 @@ var icons = {
   "chevron-right": chevronRightIcon,
   "chevron-up": chevronUpIcon,
   "chevron-v": chevronVIcon,
-  "clipboard": clipboardIcon,
-  "clock": clockIcon,
-  "cloud": cloudIcon,
+  clipboard: clipboardIcon,
+  clock: clockIcon,
+  cloud: cloudIcon,
   "cloud-1": cloud1Icon,
   "cloud-download": cloudDownloadIcon,
   "cloud-info": cloudInfoIcon,
@@ -5322,19 +5325,19 @@ var icons = {
   "cloud-slash": cloudSlashIcon,
   "cloud-snowy": cloudSnowyIcon,
   "cloud-upload": cloudUploadIcon,
-  "clouds": cloudsIcon,
-  "code": codeIcon,
+  clouds: cloudsIcon,
+  code: codeIcon,
   "code-2": code2Icon,
   "coin-stack": coinStackIcon,
   "coin-swap": coinSwapIcon,
-  "coins": coinsIcon,
+  coins: coinsIcon,
   "coins-alt": coinsAltIcon,
   "color-picker": colorPickerIcon,
-  "column": columnIcon,
-  "compass": compassIcon,
+  column: columnIcon,
+  compass: compassIcon,
   "conical-flask": conicalFlaskIcon,
-  "copy": copyIcon,
-  "corner": cornerIcon,
+  copy: copyIcon,
+  corner: cornerIcon,
   "corner-down-left": cornerDownLeftIcon,
   "corner-down-right": cornerDownRightIcon,
   "corner-left-down": cornerLeftDownIcon,
@@ -5343,43 +5346,43 @@ var icons = {
   "corner-right-up": cornerRightUpIcon,
   "corner-up-left": cornerUpLeftIcon,
   "corner-up-right": cornerUpRightIcon,
-  "crop": cropIcon,
-  "cup": cupIcon,
-  "cursor": cursorIcon,
-  "data": dataIcon,
-  "devices": devicesIcon,
-  "dislike": dislikeIcon,
-  "division": divisionIcon,
-  "dollar": dollarIcon,
+  crop: cropIcon,
+  cup: cupIcon,
+  cursor: cursorIcon,
+  data: dataIcon,
+  devices: devicesIcon,
+  dislike: dislikeIcon,
+  division: divisionIcon,
+  dollar: dollarIcon,
   "dots-h": dotsHIcon,
   "dots-h-circle": dotsHCircleIcon,
   "dots-v": dotsVIcon,
   "dots-v-circle": dotsVCircleIcon,
-  "download": downloadIcon,
-  "elements": elementsIcon,
-  "emoji": emojiIcon,
+  download: downloadIcon,
+  elements: elementsIcon,
+  emoji: emojiIcon,
   "emoji-add": emojiAddIcon,
-  "euro": euroIcon,
-  "expand": expandIcon,
-  "eye": eyeIcon,
+  euro: euroIcon,
+  expand: expandIcon,
+  eye: eyeIcon,
   "eye-slash": eyeSlashIcon,
   "face-id": faceIdIcon,
-  "feather": featherIcon,
+  feather: featherIcon,
   "feather-AI": featherAIIcon,
   "feather-add": featherAddIcon,
-  "file": fileIcon,
+  file: fileIcon,
   "file-alt": fileAltIcon,
   "file-cloud": fileCloudIcon,
   "file-code": fileCodeIcon,
   "file-download": fileDownloadIcon,
   "file-upload": fileUploadIcon,
-  "filter": filterIcon,
+  filter: filterIcon,
   "filter-alt": filterAltIcon,
-  "fingerprint": fingerprintIcon,
+  fingerprint: fingerprintIcon,
   "first-aid": firstAidIcon,
-  "flag": flagIcon,
-  "flower": flowerIcon,
-  "folder": folderIcon,
+  flag: flagIcon,
+  flower: flowerIcon,
+  folder: folderIcon,
   "folder-add": folderAddIcon,
   "folder-cloud": folderCloudIcon,
   "folder-cross": folderCrossIcon,
@@ -5389,29 +5392,29 @@ var icons = {
   "folder-shield": folderShieldIcon,
   "folder-upload": folderUploadIcon,
   "folder-user": folderUserIcon,
-  "fork": forkIcon,
-  "forward": forwardIcon,
+  fork: forkIcon,
+  forward: forwardIcon,
   "game-pad": gamePadIcon,
   "gear-AI": gearAIIcon,
-  "gem": gemIcon,
-  "gift": giftIcon,
-  "globe": globeIcon,
+  gem: gemIcon,
+  gift: giftIcon,
+  globe: globeIcon,
   "globe-alt": globeAltIcon,
-  "gps": gpsIcon,
-  "grid": gridIcon,
+  gps: gpsIcon,
+  grid: gridIcon,
   "grid-2": grid2Icon,
-  "hashtag": hashtagIcon,
-  "heading": headingIcon,
-  "headphones": headphonesIcon,
-  "headset": headsetIcon,
+  hashtag: hashtagIcon,
+  heading: headingIcon,
+  headphones: headphonesIcon,
+  headset: headsetIcon,
   "health-plus": healthPlusIcon,
-  "heart": heartIcon,
+  heart: heartIcon,
   "heart-beat": heartBeatIcon,
   "heart-beat-wave": heartBeatWaveIcon,
-  "history": historyIcon,
-  "home": homeIcon,
+  history: historyIcon,
+  home: homeIcon,
   "home-alt": homeAltIcon,
-  "image": imageIcon,
+  image: imageIcon,
   "image-add": imageAddIcon,
   "image-check": imageCheckIcon,
   "image-circle": imageCircleIcon,
@@ -5420,167 +5423,167 @@ var icons = {
   "info-circle": infoCircleIcon,
   "info-hexagon": infoHexagonIcon,
   "info-triangle": infoTriangleIcon,
-  "italics": italicsIcon,
-  "key": keyIcon,
-  "keyboard": keyboardIcon,
-  "lamp": lampIcon,
-  "laptop": laptopIcon,
-  "layer": layerIcon,
-  "lifebuoy": lifebuoyIcon,
-  "lightning": lightningIcon,
+  italics: italicsIcon,
+  key: keyIcon,
+  keyboard: keyboardIcon,
+  lamp: lampIcon,
+  laptop: laptopIcon,
+  layer: layerIcon,
+  lifebuoy: lifebuoyIcon,
+  lightning: lightningIcon,
   "lightning-off": lightningOffIcon,
-  "like": likeIcon,
+  like: likeIcon,
   "line-height": lineHeightIcon,
-  "link": linkIcon,
+  link: linkIcon,
   "link-detach": linkDetachIcon,
-  "list": listIcon,
+  list: listIcon,
   "list-add": listAddIcon,
-  "lock": lockIcon,
+  lock: lockIcon,
   "lock-open": lockOpenIcon,
-  "loudspeaker": loudspeakerIcon,
+  loudspeaker: loudspeakerIcon,
   "magic-wand": magicWandIcon,
-  "mail": mailIcon,
+  mail: mailIcon,
   "mail-add": mailAddIcon,
   "mail-check": mailCheckIcon,
   "mail-cross": mailCrossIcon,
   "mail-remove": mailRemoveIcon,
-  "map": mapIcon,
+  map: mapIcon,
   "map-alt": mapAltIcon,
   "map-marker": mapMarkerIcon,
-  "media": mediaIcon,
-  "merge": mergeIcon,
-  "message": messageIcon,
+  media: mediaIcon,
+  merge: mergeIcon,
+  message: messageIcon,
   "message-alt": messageAltIcon,
-  "messages": messagesIcon,
-  "microphone": microphoneIcon,
+  messages: messagesIcon,
+  microphone: microphoneIcon,
   "microphone-slash": microphoneSlashIcon,
-  "minus": minusIcon,
+  minus: minusIcon,
   "minus-circle": minusCircleIcon,
-  "mobile": mobileIcon,
-  "money": moneyIcon,
+  mobile: mobileIcon,
+  money: moneyIcon,
   "money-1": money1Icon,
   "money-2": money2Icon,
-  "moon": moonIcon,
+  moon: moonIcon,
   "moon-cloud": moonCloudIcon,
   "moon-stars": moonStarsIcon,
-  "mouse": mouseIcon,
-  "move": moveIcon,
-  "multiply": multiplyIcon,
+  mouse: mouseIcon,
+  move: moveIcon,
+  multiply: multiplyIcon,
   "multiply-circle": multiplyCircleIcon,
-  "music": musicIcon,
+  music: musicIcon,
   "music-AI": musicAIIcon,
   "music-note": musicNoteIcon,
-  "naira": nairaIcon,
-  "navigation": navigationIcon,
+  naira: nairaIcon,
+  navigation: navigationIcon,
   "navigation-alt": navigationAltIcon,
-  "newspaper": newspaperIcon,
-  "next": nextIcon,
+  newspaper: newspaperIcon,
+  next: nextIcon,
   "paint-brush": paintBrushIcon,
   "paint-bucket": paintBucketIcon,
-  "palette": paletteIcon,
+  palette: paletteIcon,
   "paper-clip": paperClipIcon,
   "paragraph-spacing": paragraphSpacingIcon,
-  "pause": pauseIcon,
-  "pc": pcIcon,
+  pause: pauseIcon,
+  pc: pcIcon,
   "pc-lock": pcLockIcon,
   "pc-speaker": pcSpeakerIcon,
   "pc-user": pcUserIcon,
-  "pencil": pencilIcon,
+  pencil: pencilIcon,
   "pencil-edit": pencilEditIcon,
   "pie-chart": pieChartIcon,
-  "pin": pinIcon,
+  pin: pinIcon,
   "pin-alt": pinAltIcon,
-  "plant": plantIcon,
+  plant: plantIcon,
   "plant-2": plant2Icon,
-  "play": playIcon,
-  "playlist": playlistIcon,
-  "plus": plusIcon,
+  play: playIcon,
+  playlist: playlistIcon,
+  plus: plusIcon,
   "plus-circle": plusCircleIcon,
-  "pounds": poundsIcon,
-  "power": powerIcon,
-  "previous": previousIcon,
-  "printer": printerIcon,
-  "processor": processorIcon,
+  pounds: poundsIcon,
+  power: powerIcon,
+  previous: previousIcon,
+  printer: printerIcon,
+  processor: processorIcon,
   "pull-request": pullRequestIcon,
   "question-circle": questionCircleIcon,
-  "quote": quoteIcon,
+  quote: quoteIcon,
   "radio-button": radioButtonIcon,
   "radio-selected": radioSelectedIcon,
-  "receipt": receiptIcon,
-  "redo": redoIcon,
-  "refresh": refreshIcon,
-  "repeat": repeatIcon,
+  receipt: receiptIcon,
+  redo: redoIcon,
+  refresh: refreshIcon,
+  repeat: repeatIcon,
   "repeat-once": repeatOnceIcon,
   "road-sign": roadSignIcon,
-  "rocket": rocketIcon,
+  rocket: rocketIcon,
   "rocket-alt": rocketAltIcon,
   "rotate-left": rotateLeftIcon,
   "rotate-right": rotateRightIcon,
-  "route": routeIcon,
-  "row": rowIcon,
-  "save": saveIcon,
-  "scan": scanIcon,
-  "scissor": scissorIcon,
-  "screenshot": screenshotIcon,
-  "search": searchIcon,
-  "send": sendIcon,
+  route: routeIcon,
+  row: rowIcon,
+  save: saveIcon,
+  scan: scanIcon,
+  scissor: scissorIcon,
+  screenshot: screenshotIcon,
+  search: searchIcon,
+  send: sendIcon,
   "send-AI": sendAIIcon,
   "send-alt": sendAltIcon,
-  "server": serverIcon,
+  server: serverIcon,
   "server-alt": serverAltIcon,
-  "settings": settingsIcon,
+  settings: settingsIcon,
   "settings-1": settings1Icon,
   "settings-2": settings2Icon,
-  "share": shareIcon,
+  share: shareIcon,
   "share-alt": shareAltIcon,
-  "shield": shieldIcon,
+  shield: shieldIcon,
   "shield-cross": shieldCrossIcon,
   "shield-tick": shieldTickIcon,
-  "ship": shipIcon,
-  "shower": showerIcon,
-  "shrink": shrinkIcon,
+  ship: shipIcon,
+  shower: showerIcon,
+  shrink: shrinkIcon,
   "shrink-alt": shrinkAltIcon,
-  "shuffle": shuffleIcon,
+  shuffle: shuffleIcon,
   "sign-in": signInIcon,
   "sign-out": signOutIcon,
-  "signal": signalIcon,
+  signal: signalIcon,
   "signal-off": signalOffIcon,
-  "sim": simIcon,
-  "snooze": snoozeIcon,
-  "snowflake": snowflakeIcon,
-  "sofa": sofaIcon,
-  "speaker": speakerIcon,
-  "star": starIcon,
-  "stars": starsIcon,
-  "stop": stopIcon,
-  "stopwatch": stopwatchIcon,
-  "store": storeIcon,
-  "strikethrough": strikethroughIcon,
-  "subscript": subscriptIcon,
-  "suitcase": suitcaseIcon,
-  "sun": sunIcon,
+  sim: simIcon,
+  snooze: snoozeIcon,
+  snowflake: snowflakeIcon,
+  sofa: sofaIcon,
+  speaker: speakerIcon,
+  star: starIcon,
+  stars: starsIcon,
+  stop: stopIcon,
+  stopwatch: stopwatchIcon,
+  store: storeIcon,
+  strikethrough: strikethroughIcon,
+  subscript: subscriptIcon,
+  suitcase: suitcaseIcon,
+  sun: sunIcon,
   "sun-cloud": sunCloudIcon,
-  "superscript": superscriptIcon,
-  "support": supportIcon,
+  superscript: superscriptIcon,
+  support: supportIcon,
   "switch-diagonal": switchDiagonalIcon,
   "switch-horizontal": switchHorizontalIcon,
   "switch-vertical": switchVerticalIcon,
-  "tablet": tabletIcon,
-  "target": targetIcon,
-  "taxi": taxiIcon,
-  "terminal": terminalIcon,
-  "text": textIcon,
-  "thermometer": thermometerIcon,
-  "ticket": ticketIcon,
-  "tissue": tissueIcon,
-  "train": trainIcon,
-  "trophy": trophyIcon,
-  "truck": truckIcon,
-  "tv": tvIcon,
-  "underline": underlineIcon,
-  "undo": undoIcon,
-  "upload": uploadIcon,
-  "user": userIcon,
+  tablet: tabletIcon,
+  target: targetIcon,
+  taxi: taxiIcon,
+  terminal: terminalIcon,
+  text: textIcon,
+  thermometer: thermometerIcon,
+  ticket: ticketIcon,
+  tissue: tissueIcon,
+  train: trainIcon,
+  trophy: trophyIcon,
+  truck: truckIcon,
+  tv: tvIcon,
+  underline: underlineIcon,
+  undo: undoIcon,
+  upload: uploadIcon,
+  user: userIcon,
   "user-add": userAddIcon,
   "user-circle": userCircleIcon,
   "user-cross": userCrossIcon,
@@ -5588,16 +5591,16 @@ var icons = {
   "user-heart": userHeartIcon,
   "user-remove": userRemoveIcon,
   "user-tick": userTickIcon,
-  "users": usersIcon,
-  "verified": verifiedIcon,
-  "video": videoIcon,
+  users: usersIcon,
+  verified: verifiedIcon,
+  video: videoIcon,
   "video-slash": videoSlashIcon,
   "voice-note": voiceNoteIcon,
-  "volume": volumeIcon,
+  volume: volumeIcon,
   "volume-low": volumeLowIcon,
   "volume-mute": volumeMuteIcon,
   "volume-slash": volumeSlashIcon,
-  "wallet": walletIcon,
+  wallet: walletIcon,
   "wallet-add": walletAddIcon,
   "wallet-check": walletCheckIcon,
   "wallet-cross": walletCrossIcon,
@@ -5605,9 +5608,9 @@ var icons = {
   "wallet-remove": walletRemoveIcon,
   "wallet-withdraw": walletWithdrawIcon,
   "water-drop": waterDropIcon,
-  "wifi": wifiIcon,
-  "wristwatch": wristwatchIcon,
-  "yen": yenIcon,
+  wifi: wifiIcon,
+  wristwatch: wristwatchIcon,
+  yen: yenIcon,
   "zoom-in": zoomInIcon,
   "zoom-out": zoomOutIcon
 };
@@ -5654,6 +5657,177 @@ function resolveIcon(icon, size = "md") {
   if (isIconName(icon)) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size });
   return icon;
 }
+var AccordionContext = react.createContext(null);
+var AccordionItemContext = react.createContext(null);
+function useAccordionContext() {
+  const ctx = react.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion compound components must be used within <Accordion>");
+  return ctx;
+}
+function useAccordionItemContext() {
+  const ctx = react.useContext(AccordionItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/Content must be used within <AccordionItem>");
+  return ctx;
+}
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+var Accordion = react.forwardRef(
+  ({
+    type = "default",
+    multiple = false,
+    value: controlledValue,
+    defaultValue = [],
+    onValueChange,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+    const openItems = controlledValue ?? uncontrolledValue;
+    const toggle = react.useCallback(
+      (itemValue) => {
+        const next = openItems.includes(itemValue) ? openItems.filter((v) => v !== itemValue) : multiple ? [...openItems, itemValue] : [itemValue];
+        if (!controlledValue) setUncontrolledValue(next);
+        onValueChange?.(next);
+      },
+      [openItems, multiple, controlledValue, onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { type, openItems, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          type === "nested" && "flex flex-col gap-3",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = react.forwardRef(
+  ({ value, disabled = false, className, children, ...rest }, ref) => {
+    const { type, openItems } = useAccordionContext();
+    const isOpen = openItems.includes(value);
+    const generatedId = react.useId();
+    const triggerId = `accordion-trigger-${generatedId}`;
+    const contentId = `accordion-content-${generatedId}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-solid transition-colors",
+          type === "default" ? cn(
+            "border-b",
+            isOpen ? "border-primary-300" : "border-grey-100"
+          ) : cn(
+            "border rounded-[10px]",
+            isOpen ? "border-primary-300" : "border-grey-75"
+          ),
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = react.forwardRef(
+  ({
+    leadingIcon,
+    leadingNumber,
+    leadingLogo,
+    badge,
+    hideChevron = false,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    const { toggle } = useAccordionContext();
+    const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        id: triggerId,
+        type: "button",
+        disabled,
+        "aria-expanded": isOpen,
+        "aria-controls": contentId,
+        onClick: () => toggle(value),
+        className: cn(
+          "flex items-center gap-3 px-4 py-6 w-full text-left transition-colors",
+          !isOpen && !disabled && "hover:bg-grey-50",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...rest,
+        children: [
+          leadingNumber && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center justify-center bg-grey-700 text-white text-base font-medium leading-[1.48] rounded-xl px-2 py-1 min-w-[37px]", children: leadingNumber }),
+          leadingLogo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leadingLogo }),
+          leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-500", children: resolveIcon(leadingIcon, "md") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0 text-lg font-semibold text-grey-900 leading-[1.54]", children }),
+          badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 bg-primary-50 text-primary-400 text-sm font-medium rounded-full px-3 py-2 leading-[1.45]", children: badge }),
+          !hideChevron && /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "shrink-0 size-6 text-grey-500 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = react.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const { isOpen, triggerId, contentId } = useAccordionItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: contentId,
+        role: "region",
+        "aria-labelledby": triggerId,
+        className: cn(
+          "grid transition-[grid-template-rows] duration-200 ease-out",
+          isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("px-4 pb-6 text-base text-grey-500 leading-[1.48]", className),
+            ...rest,
+            children
+          }
+        ) })
+      }
+    );
+  }
+);
+AccordionContent.displayName = "AccordionContent";
 var solidVariants = {
   primary: "bg-primary-500 text-white hover:bg-primary-400 focus-visible:bg-primary-700 disabled:bg-grey-300 disabled:text-white dark:disabled:bg-grey-200",
   secondary: "bg-white dark:bg-grey-50 text-primary-600 border-[1.5px] border-primary-600 hover:bg-primary-50 hover:border-primary-600 focus-visible:bg-primary-50 focus-visible:border-primary-700 focus-visible:border-2 disabled:bg-white dark:disabled:bg-grey-50 disabled:border-2 disabled:border-grey-100 disabled:text-grey-400",
@@ -5701,7 +5875,7 @@ var Button = react.forwardRef(
     ...rest
   }, ref) => {
     const variantClasses = appearance === "outlined" ? outlinedVariants[variant] : solidVariants[variant];
-    const sizeConfig2 = sizeClasses[size];
+    const sizeConfig3 = sizeClasses[size];
     const paddingKey = iconPosition === "icon-only" ? "icon-only" : iconPosition !== "none" ? "icon" : "none";
     const iconSizeClass = size === "sm" ? "size-5" : "size-6";
     const resolvedIcon = resolveIcon(icon, size === "sm" ? "md" : "lg");
@@ -5712,8 +5886,8 @@ var Button = react.forwardRef(
         disabled,
         className: cn(
           "inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline-none cursor-pointer disabled:cursor-not-allowed",
-          sizeConfig2.base,
-          sizeConfig2[paddingKey],
+          sizeConfig3.base,
+          sizeConfig3[paddingKey],
           variantClasses,
           className
         ),
@@ -5757,6 +5931,18 @@ var ButtonGroupItem = react.forwardRef(
   }
 );
 ButtonGroupItem.displayName = "ButtonGroupItem";
+var inputFrameSize = {
+  xs: "px-2.5 py-2 gap-2",
+  sm: "p-3 gap-3",
+  md: "px-4 py-3 gap-3",
+  lg: "px-4 py-3 gap-3"
+};
+var addonHeight = {
+  xs: "",
+  sm: "h-10",
+  md: "h-12",
+  lg: "h-14"
+};
 var Input = react.forwardRef(
   ({
     size = "sm",
@@ -5767,6 +5953,8 @@ var Input = react.forwardRef(
     leadingIcon,
     trailingIcon,
     addonRight,
+    leadingAddon,
+    trailingAddon,
     readOnly,
     disabled,
     className,
@@ -5779,21 +5967,101 @@ var Input = react.forwardRef(
     const inputId = id || generatedId;
     const hasError = !!error;
     const hasSuccess = !!success;
+    const hasAddon = !!leadingAddon || !!trailingAddon;
     const bottomText = hasError ? typeof error === "string" ? error : void 0 : hasSuccess ? typeof success === "string" ? success : void 0 : helperText;
     const descriptionId = bottomText ? `${inputId}-description` : void 0;
-    const borderColor = hasError ? "border-error-200 focus-within:border-error-200" : hasSuccess ? "border-success-200 focus-within:border-success-200" : "border-grey-300 hover:border-primary-100 focus-within:border-primary-200";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 w-full", wrapperClassName), children: [
+    const borderColor = hasError ? "border-error-400 focus-within:border-error-400" : hasSuccess ? "border-success-400 focus-within:border-success-400" : "border-grey-300 hover:border-primary-100 focus-within:border-primary-400";
+    const inputBg = readOnly ? "bg-grey-100" : disabled ? "bg-grey-50" : "bg-white dark:bg-grey-50";
+    if (hasAddon) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 w-full", wrapperClassName), children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-stretch", addonHeight[size]), children: [
+          leadingAddon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-1 px-3 py-2 bg-grey-50 border border-r-0 border-grey-300 rounded-l-lg overflow-hidden shrink-0",
+                "text-sm font-medium text-grey-700"
+              ),
+              children: leadingAddon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-1 items-center border overflow-hidden transition-colors",
+                inputFrameSize[size],
+                inputBg,
+                borderColor,
+                !leadingAddon && !trailingAddon && "rounded-lg",
+                leadingAddon && !trailingAddon && "rounded-r-lg",
+                !leadingAddon && trailingAddon && "rounded-l-lg",
+                leadingAddon && trailingAddon && "",
+                disabled && "cursor-not-allowed"
+              ),
+              children: [
+                leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(leadingIcon, "md") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref,
+                    id: inputId,
+                    readOnly,
+                    disabled,
+                    required,
+                    "aria-invalid": hasError || void 0,
+                    "aria-required": required || void 0,
+                    "aria-describedby": descriptionId,
+                    className: cn(
+                      "flex-1 min-w-0 bg-transparent text-sm text-grey-900 placeholder:text-grey-400 outline-none disabled:cursor-not-allowed",
+                      className
+                    ),
+                    ...rest
+                  }
+                ),
+                addonRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm text-grey-500", children: addonRight }),
+                trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(trailingIcon, "md") })
+              ]
+            }
+          ),
+          trailingAddon && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-1 px-3 py-2 bg-grey-50 border border-l-0 border-grey-300 rounded-r-lg overflow-hidden shrink-0",
+                "text-sm font-medium text-grey-700"
+              ),
+              children: trailingAddon
+            }
+          )
+        ] }),
+        bottomText && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: cn(
+              "text-sm leading-[1.45]",
+              hasError ? "text-error-400" : hasSuccess ? "text-success-400" : "text-grey-500"
+            ),
+            children: bottomText
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 w-full", wrapperClassName), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "flex items-center gap-3 border rounded-md overflow-hidden transition-colors",
-            size === "sm" ? "h-9 px-3 py-2" : "h-14 p-4",
+            "flex items-center border rounded-lg overflow-hidden transition-colors",
+            inputFrameSize[size],
+            addonHeight[size],
             readOnly ? "bg-grey-100 border-grey-300" : disabled ? "bg-grey-50 border-grey-200 cursor-not-allowed" : cn("bg-white dark:bg-grey-50", borderColor)
           ),
           children: [
-            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-5 text-grey-400", children: resolveIcon(leadingIcon, "md") }),
+            leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(leadingIcon, "md") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -5813,7 +6081,7 @@ var Input = react.forwardRef(
               }
             ),
             addonRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm text-grey-500", children: addonRight }),
-            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-5 text-grey-400", children: resolveIcon(trailingIcon, "md") })
+            trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-6 text-grey-400", children: resolveIcon(trailingIcon, "md") })
           ]
         }
       ),
@@ -5823,7 +6091,7 @@ var Input = react.forwardRef(
           id: descriptionId,
           className: cn(
             "text-sm leading-[1.45]",
-            hasError ? "text-error-500" : hasSuccess ? "text-success-600" : "text-grey-500"
+            hasError ? "text-error-400" : hasSuccess ? "text-success-400" : "text-grey-500"
           ),
           children: bottomText
         }
@@ -5840,6 +6108,8 @@ function useTabsContext() {
 }
 function Tabs({
   variant = "line",
+  size = "sm",
+  orientation = "horizontal",
   value,
   defaultValue = "",
   onValueChange,
@@ -5863,17 +6133,20 @@ function Tabs({
       tabsRef.current.delete(tabValue);
     }
   }, []);
+  const isVertical = orientation === "vertical";
+  const arrowNext = isVertical ? "ArrowDown" : "ArrowRight";
+  const arrowPrev = isVertical ? "ArrowUp" : "ArrowLeft";
   const handleKeyDown = (e) => {
     const tabs = Array.from(tabsRef.current.entries()).filter(([, el]) => !el.disabled).map(([val, el]) => ({ value: val, element: el }));
     if (tabs.length === 0) return;
     const currentIndex = tabs.findIndex((t) => t.element === document.activeElement);
     let nextIndex;
     switch (e.key) {
-      case "ArrowRight":
+      case arrowNext:
         e.preventDefault();
         nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
         break;
-      case "ArrowLeft":
+      case arrowPrev:
         e.preventDefault();
         nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
         break;
@@ -5895,31 +6168,93 @@ function Tabs({
     }
   };
   const contextValue = react.useMemo(
-    () => ({ activeValue, onSelect, variant, registerTab }),
-    [activeValue, onSelect, variant, registerTab]
+    () => ({ activeValue, onSelect, variant, size, orientation, registerTab }),
+    [activeValue, onSelect, variant, size, orientation, registerTab]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         "inline-flex",
-        variant === "line" ? "border-b border-grey-200" : "gap-1",
+        isVertical ? "flex-col" : "",
+        variant === "line" && !isVertical && "border-b border-grey-200",
+        variant === "line" && isVertical && "border-r border-grey-200",
+        variant === "pill" && (isVertical ? "gap-1" : "gap-1"),
+        variant === "segmented" && "border border-grey-100 rounded-lg p-0.5 gap-0.5 overflow-hidden",
         className
       ),
       role: "tablist",
+      "aria-orientation": orientation,
       onKeyDown: handleKeyDown,
       children
     }
   ) });
 }
+var textSize = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+var iconSize = { sm: "size-4", md: "size-5", lg: "size-6" };
+var iconResolveSize = { sm: "sm", md: "md", lg: "md" };
+var badgeText = { sm: "text-xs", md: "text-xs", lg: "text-sm" };
+var linePadding = {
+  sm: "px-2 pt-1 pb-1.5",
+  md: "px-3 pt-1.5 pb-2",
+  lg: "px-4 pt-2 pb-2.5"
+};
+var pillPadding = {
+  sm: "px-2 py-1",
+  md: "px-3 py-1.5",
+  lg: "px-4 py-2"
+};
+var segmentedPadding = {
+  sm: "px-2 py-1",
+  md: "px-3 py-1.5",
+  lg: "px-4 py-2"
+};
 function Tab({ value, icon, badge, disabled = false, children, className }) {
-  const { activeValue, onSelect, variant, registerTab } = useTabsContext();
+  const { activeValue, onSelect, variant, size, orientation, registerTab } = useTabsContext();
   const isActive = activeValue === value;
   const buttonRef = react.useRef(null);
+  const isVertical = orientation === "vertical";
   react.useEffect(() => {
     registerTab(value, buttonRef.current);
     return () => registerTab(value, null);
   }, [value, registerTab]);
+  const resolvedIcon = icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", iconSize[size]), children: resolveIcon(icon, iconResolveSize[size]) }) : null;
+  const badgeEl = badge !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center px-1.5 rounded-full font-medium tracking-tight",
+        badgeText[size],
+        variant === "segmented" && isActive ? "bg-primary-500 text-white" : isActive ? "bg-primary-50 text-primary-500" : disabled ? "bg-grey-200 text-grey-400" : "bg-grey-100 text-grey-500"
+      ),
+      children: badge
+    }
+  ) : null;
+  if (variant === "segmented") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        role: "tab",
+        "aria-selected": isActive,
+        tabIndex: isActive ? 0 : -1,
+        disabled,
+        onClick: () => !disabled && onSelect(value),
+        className: cn(
+          "inline-flex items-center gap-1.5 rounded-md overflow-hidden transition-colors cursor-pointer",
+          segmentedPadding[size],
+          textSize[size],
+          isActive ? "bg-primary-50 text-grey-900" : disabled ? "text-grey-300 cursor-not-allowed" : "text-grey-500 hover:bg-grey-50",
+          className
+        ),
+        children: [
+          resolvedIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children }),
+          badgeEl
+        ]
+      }
+    );
+  }
   if (variant === "pill") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -5931,78 +6266,821 @@ function Tab({ value, icon, badge, disabled = false, children, className }) {
         disabled,
         onClick: () => !disabled && onSelect(value),
         className: cn(
-          "inline-flex items-center gap-2 h-9 px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer",
-          isActive ? "bg-primary-50 text-primary-400" : disabled ? "border border-grey-300 text-grey-300 cursor-not-allowed" : "border border-grey-300 text-grey-700 hover:bg-grey-50",
+          "inline-flex items-center gap-1.5 rounded-full transition-colors cursor-pointer",
+          pillPadding[size],
+          textSize[size],
+          isActive ? "bg-primary-50 text-primary-400" : disabled ? "text-grey-300 cursor-not-allowed" : "text-grey-500 hover:bg-grey-50",
           className
         ),
         children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-4", children: resolveIcon(icon, "sm") }),
-          children,
-          badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          resolvedIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children }),
+          badgeEl
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: buttonRef,
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      onClick: () => !disabled && onSelect(value),
+      className: cn(
+        "relative inline-flex cursor-pointer",
+        isVertical ? "flex-row" : "flex-col items-center",
+        disabled && "cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5", linePadding[size]), children: [
+          resolvedIcon,
+          /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: cn(
-                "inline-flex items-center justify-center px-2 rounded-full text-xs font-medium tracking-tight",
-                isActive ? "bg-primary-400 text-white" : disabled ? "bg-grey-200 text-grey-50" : "bg-grey-100 text-grey-700"
+                "font-normal leading-[1.45] whitespace-nowrap transition-colors",
+                textSize[size],
+                isActive ? "text-grey-900" : disabled ? "text-grey-300" : "text-grey-500"
               ),
-              children: badge
+              children
+            }
+          ),
+          badgeEl
+        ] }),
+        isVertical ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "w-0.5 self-stretch transition-colors",
+              isActive ? "bg-primary-400" : "bg-grey-100"
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "h-0.5 w-full transition-colors",
+              isActive ? "bg-primary-400" : "bg-grey-100"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Chart/theme.ts
+var chartColors = {
+  primary: [
+    "#F56630",
+    // primary-400
+    "#FA9874",
+    // primary-200
+    "#FCB59A",
+    // primary-100
+    "#FCD2C2",
+    // primary-75
+    "#FFECE5"
+    // primary-50
+  ],
+  semantic: [
+    "#F56630",
+    // primary-400 (orange)
+    "#0F973D",
+    // success-400 (green)
+    "#1671D9",
+    // secondary-400 (blue)
+    "#F3A218",
+    // warning-400 (amber)
+    "#D42620",
+    // error-400 (red)
+    "#0BA5EC"
+    // info-400 (cyan)
+  ],
+  extended: [
+    "#F56630",
+    "#0F973D",
+    "#1671D9",
+    "#F3A218",
+    "#D42620",
+    "#0BA5EC",
+    "#475CCC",
+    // indigo
+    "#8D8484",
+    // office-brown
+    "#F77A4A",
+    // primary-300
+    "#40B869"
+    // success-300
+  ],
+  grey: {
+    50: "#F9FAFB",
+    100: "#F0F2F5",
+    200: "#E4E7EC",
+    300: "#D0D5DD",
+    400: "#98A2B3",
+    500: "#667185",
+    700: "#344054",
+    900: "#101928"
+  }
+};
+var chartFont = {
+  family: "'Inter', ui-sans-serif, system-ui, sans-serif",
+  size: 12,
+  weight: "normal"
+};
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function createGradientFill(ctx, color, height) {
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, hexToRgba(color, 0.2));
+  gradient.addColorStop(1, hexToRgba(color, 0.01));
+  return gradient;
+}
+chart_js.Chart.register(
+  chart_js.CategoryScale,
+  chart_js.LinearScale,
+  chart_js.PointElement,
+  chart_js.LineElement,
+  chart_js.BarElement,
+  chart_js.ArcElement,
+  chart_js.RadialLinearScale,
+  chart_js.Filler,
+  chart_js.Tooltip,
+  chart_js.Legend
+);
+function getDefaultOptions(type) {
+  const base = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: "bottom",
+        labels: {
+          font: { ...chartFont, size: 12 },
+          color: chartColors.grey[500],
+          padding: 16,
+          usePointStyle: true,
+          pointStyle: "circle",
+          boxWidth: 8,
+          boxHeight: 8
+        }
+      },
+      tooltip: {
+        backgroundColor: chartColors.grey[900],
+        titleFont: { ...chartFont, weight: "bold", size: 13 },
+        bodyFont: { ...chartFont, size: 12 },
+        cornerRadius: 8,
+        padding: 12,
+        boxPadding: 6,
+        usePointStyle: true
+      }
+    }
+  };
+  if (type === "line" || type === "bar" || type === "scatter" || type === "bubble") {
+    base.scales = {
+      x: {
+        grid: { color: chartColors.grey[100], drawTicks: false },
+        ticks: { font: chartFont, color: chartColors.grey[400], padding: 8 },
+        border: { display: false }
+      },
+      y: {
+        grid: { color: chartColors.grey[100], drawTicks: false },
+        ticks: { font: chartFont, color: chartColors.grey[400], padding: 8 },
+        border: { display: false }
+      }
+    };
+  }
+  if (type === "line") {
+    base.elements = {
+      line: { tension: 0.4, borderWidth: 2 },
+      point: { radius: 0, hoverRadius: 5, hitRadius: 20 }
+    };
+  }
+  if (type === "bar") {
+    base.elements = {
+      bar: { borderRadius: 4 }
+    };
+  }
+  if (type === "radar") {
+    base.scales = {
+      r: {
+        grid: { color: chartColors.grey[200] },
+        angleLines: { color: chartColors.grey[200] },
+        pointLabels: { font: { ...chartFont, size: 11 }, color: chartColors.grey[500] },
+        ticks: { display: false }
+      }
+    };
+  }
+  if (type === "polar-area") {
+    base.scales = {
+      r: {
+        grid: { color: chartColors.grey[200] },
+        ticks: { display: false }
+      }
+    };
+  }
+  return base;
+}
+function deepMerge(target, source) {
+  const output = { ...target };
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] && typeof target[key] === "object") {
+      output[key] = deepMerge(target[key], source[key]);
+    } else {
+      output[key] = source[key];
+    }
+  }
+  return output;
+}
+var chartComponentMap = {
+  line: reactChartjs2.Line,
+  bar: reactChartjs2.Bar,
+  pie: reactChartjs2.Pie,
+  doughnut: reactChartjs2.Doughnut,
+  radar: reactChartjs2.Radar,
+  scatter: reactChartjs2.Scatter,
+  bubble: reactChartjs2.Bubble,
+  "polar-area": reactChartjs2.PolarArea
+};
+var RaydenChart = react.forwardRef(
+  ({ type, data, options, height = 300, width, className, ...rest }, ref) => {
+    const mergedOptions = react.useMemo(
+      () => deepMerge(getDefaultOptions(type), options ?? {}),
+      [type, options]
+    );
+    const ChartComponent = chartComponentMap[type];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("relative", className),
+        style: { height, width },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { data, options: mergedOptions })
+      }
+    );
+  }
+);
+RaydenChart.displayName = "RaydenChart";
+function MinusIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
+}
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+var buttonSize = {
+  sm: "size-8 rounded-[10px]",
+  md: "size-10 rounded-xl",
+  lg: "size-12 rounded-xl"
+};
+var iconSize2 = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6"
+};
+var containerShape = {
+  rounded: { sm: "rounded-[10px]", md: "rounded-xl", lg: "rounded-xl" },
+  block: { sm: "", md: "", lg: "" },
+  pill: { sm: "rounded-full", md: "rounded-[28px]", lg: "rounded-[28px]" }
+};
+var valueText = {
+  sm: "text-sm w-7",
+  md: "text-sm w-7",
+  lg: "text-base w-7"
+};
+var Counter = react.forwardRef(
+  ({
+    value: controlledValue,
+    onChange,
+    defaultValue = 0,
+    size = "sm",
+    shape = "rounded",
+    min = 0,
+    max = Infinity,
+    step = 1,
+    disabled = false,
+    className,
+    ...rest
+  }, ref) => {
+    const [uncontrolled, setUncontrolled] = react.useState(defaultValue);
+    const val = controlledValue ?? uncontrolled;
+    const update = react.useCallback(
+      (next) => {
+        const clamped = Math.min(max, Math.max(min, next));
+        if (controlledValue === void 0) setUncontrolled(clamped);
+        onChange?.(clamped);
+      },
+      [controlledValue, onChange, min, max]
+    );
+    const canDecrement = val > min;
+    const canIncrement = val < max;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center border border-grey-300 overflow-hidden",
+          containerShape[shape][size],
+          disabled && "opacity-50",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || !canDecrement,
+              onClick: () => update(val - step),
+              className: cn(
+                "flex items-center justify-center p-2.5 text-grey-900 cursor-pointer transition-colors hover:bg-grey-100",
+                buttonSize[size],
+                (disabled || !canDecrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"
+              ),
+              "aria-label": "Decrease",
+              children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, { className: iconSize2[size] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "font-medium text-grey-900 text-center leading-[1.45]",
+                valueText[size]
+              ),
+              children: val
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || !canIncrement,
+              onClick: () => update(val + step),
+              className: cn(
+                "flex items-center justify-center p-2.5 text-grey-900 cursor-pointer transition-colors hover:bg-grey-100",
+                buttonSize[size],
+                (disabled || !canIncrement) && "text-grey-300 cursor-not-allowed hover:bg-transparent"
+              ),
+              "aria-label": "Increase",
+              children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { className: iconSize2[size] })
             }
           )
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref: buttonRef,
-      role: "tab",
-      "aria-selected": isActive,
-      tabIndex: isActive ? 0 : -1,
-      disabled,
-      onClick: () => !disabled && onSelect(value),
-      className: cn(
-        "relative inline-flex flex-col items-center cursor-pointer",
-        disabled && "cursor-not-allowed",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 pt-4 pb-[15px]", children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 size-5", children: resolveIcon(icon, "md") }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "text-sm font-medium transition-colors",
-                isActive ? "text-primary-400" : disabled ? "text-grey-300" : "text-grey-700 hover:text-grey-700"
-              ),
-              children
-            }
-          ),
-          badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "inline-flex items-center justify-center px-2 rounded-full text-xs font-medium tracking-tight",
-                isActive ? "bg-primary-400 text-white" : disabled ? "bg-grey-200 text-grey-50" : "bg-grey-100 text-grey-700"
-              ),
-              children: badge
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "h-px w-full transition-colors",
-              isActive ? "bg-primary-400" : disabled ? "bg-grey-200" : "bg-grey-200 group-hover:bg-grey-500"
-            )
-          }
-        )
-      ]
-    }
-  );
-}
+);
+Counter.displayName = "Counter";
+var ncSize = {
+  sm: { container: "p-1 rounded-[4px]", text: "text-xs size-4" },
+  md: { container: "p-1 rounded-md size-7", text: "text-sm" },
+  lg: { container: "p-2 rounded-md size-9", text: "text-base" }
+};
+var ncColor = {
+  orange: { bg: "bg-primary-400", text: "text-white" },
+  red: { bg: "bg-error-400", text: "text-white" },
+  grey: { bg: "bg-grey-300", text: "text-white" },
+  white: { bg: "bg-white dark:bg-grey-50", text: "text-grey-600" }
+};
+var NumberCounter = react.forwardRef(
+  ({ value, size = "sm", color = "orange", className, ...rest }, ref) => {
+    const s = ncSize[size];
+    const c = ncColor[color];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center justify-center",
+          s.container,
+          c.bg,
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold text-center leading-[1.45] tracking-tight", s.text, c.text), children: value })
+      }
+    );
+  }
+);
+NumberCounter.displayName = "NumberCounter";
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_LABELS = ["M", "T", "W", "T", "F", "S", "S"];
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+  const day = new Date(year, month, 1).getDay();
+  return day === 0 ? 6 : day - 1;
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isToday(date) {
+  return isSameDay(date, /* @__PURE__ */ new Date());
+}
+function isBetween(date, start, end) {
+  if (!start || !end) return false;
+  const t = date.getTime();
+  const s = Math.min(start.getTime(), end.getTime());
+  const e = Math.max(start.getTime(), end.getTime());
+  return t > s && t < e;
+}
+function isDateDisabled(date, minDate, maxDate) {
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+}
+function ChevronLeft({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L5 7l4 4" }) });
+}
+function ChevronRight({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 3l4 4-4 4" }) });
+}
+function ChevronDown2({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) });
+}
+function DayCell({ day, state, onClick }) {
+  const isInteractive = state !== "disabled";
+  const cellClasses = cn(
+    "flex items-center justify-center w-10 h-10 text-sm font-medium relative select-none",
+    state === "selected" && "bg-primary-400 text-white rounded-[10px]",
+    state === "start-range" && "bg-primary-400 text-white rounded-l-[10px]",
+    state === "end-range" && "bg-primary-400 text-white rounded-r-[10px]",
+    state === "mid-range" && "bg-primary-50 text-primary-400",
+    state === "disabled" && "text-grey-300",
+    state === "default" && "text-grey-900 hover:bg-grey-75 rounded-[10px]",
+    state === "today" && "text-grey-900 hover:bg-grey-75 rounded-[10px]",
+    isInteractive && "cursor-pointer"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: cellClasses,
+      onClick: isInteractive ? onClick : void 0,
+      disabled: !isInteractive,
+      tabIndex: isInteractive ? 0 : -1,
+      children: [
+        day,
+        state === "today" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-[5px] left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary-400" })
+      ]
+    }
+  );
+}
+function MonthGrid({
+  year,
+  month,
+  selectedDate,
+  rangeStart,
+  rangeEnd,
+  isRange,
+  minDate,
+  maxDate,
+  onDayClick
+}) {
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfWeek(year, month);
+  const prevMonthDays = getDaysInMonth(year, month - 1);
+  const cells = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const d = prevMonthDays - i;
+    cells.push({ day: d, state: "disabled", date: new Date(year, month - 1, d) });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    const date = new Date(year, month, d);
+    let state = "default";
+    if (isDateDisabled(date, minDate, maxDate)) {
+      state = "disabled";
+    } else if (isRange && rangeStart && rangeEnd) {
+      const start = rangeStart.getTime() <= rangeEnd.getTime() ? rangeStart : rangeEnd;
+      const end = rangeStart.getTime() <= rangeEnd.getTime() ? rangeEnd : rangeStart;
+      if (isSameDay(date, start)) state = "start-range";
+      else if (isSameDay(date, end)) state = "end-range";
+      else if (isBetween(date, start, end)) state = "mid-range";
+    } else if (isRange && rangeStart && !rangeEnd && isSameDay(date, rangeStart)) {
+      state = "selected";
+    } else if (!isRange && isSameDay(date, selectedDate)) {
+      state = "selected";
+    }
+    if (state === "default" && isToday(date)) {
+      state = "today";
+    }
+    cells.push({ day: d, state, date });
+  }
+  const remaining = 42 - cells.length;
+  for (let d = 1; d <= remaining; d++) {
+    cells.push({ day: d, state: "disabled", date: new Date(year, month + 1, d) });
+  }
+  const rows = [];
+  for (let i = 0; i < cells.length; i += 7) {
+    rows.push(cells.slice(i, i + 7));
+  }
+  if (rows.length === 6 && rows[5].every((c) => c.state === "disabled")) {
+    rows.pop();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", children: DAY_LABELS.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-center w-10 h-10 text-sm font-medium text-grey-400",
+        children: label
+      },
+      i
+    )) }),
+    rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 items-center", children: row.map((cell, ci) => /* @__PURE__ */ jsxRuntime.jsx(
+      DayCell,
+      {
+        day: cell.day,
+        state: cell.state,
+        onClick: () => onDayClick(cell.date)
+      },
+      ci
+    )) }, ri))
+  ] });
+}
+function YearGrid({ baseYear, selectedYear, onYearClick }) {
+  const years = [];
+  for (let i = 0; i < 20; i++) {
+    years.push(baseYear + i);
+  }
+  const rows = [];
+  for (let i = 0; i < years.length; i += 4) {
+    rows.push(years.slice(i, i + 4));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 h-10 items-center w-full", children: row.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex-1 flex items-center justify-center py-2.5 px-4 rounded-[10px] text-sm font-medium cursor-pointer select-none",
+        year === selectedYear ? "bg-primary-400 text-white" : "text-grey-900 hover:bg-grey-75"
+      ),
+      onClick: () => onYearClick(year),
+      children: year
+    },
+    year
+  )) }, ri)) });
+}
+function NavButton({
+  direction,
+  onClick,
+  hidden
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex items-center justify-center p-2 rounded-lg bg-grey-75 hover:bg-grey-200 transition-colors cursor-pointer",
+        hidden && "opacity-0 pointer-events-none"
+      ),
+      children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { className: "size-3.5 text-grey-700" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "size-3.5 text-grey-700" })
+    }
+  );
+}
+var DatePicker = react.forwardRef(
+  ({
+    mode = "single",
+    value,
+    rangeValue,
+    onChange,
+    onRangeChange,
+    showFooter = false,
+    onDone,
+    onClear,
+    minDate,
+    maxDate,
+    className,
+    ...rest
+  }, ref) => {
+    const now = /* @__PURE__ */ new Date();
+    const initialDate = value ?? rangeValue?.[0] ?? now;
+    const [viewMonth, setViewMonth] = react.useState(initialDate.getMonth());
+    const [viewYear, setViewYear] = react.useState(initialDate.getFullYear());
+    const [yearBase, setYearBase] = react.useState(Math.floor(initialDate.getFullYear() / 20) * 20);
+    const [rangeStart, setRangeStart] = react.useState(rangeValue?.[0] ?? null);
+    const [rangeEnd, setRangeEnd] = react.useState(rangeValue?.[1] ?? null);
+    const goToPrevMonth = react.useCallback(() => {
+      setViewMonth((m) => {
+        if (m === 0) {
+          setViewYear((y) => y - 1);
+          return 11;
+        }
+        return m - 1;
+      });
+    }, []);
+    const goToNextMonth = react.useCallback(() => {
+      setViewMonth((m) => {
+        if (m === 11) {
+          setViewYear((y) => y + 1);
+          return 0;
+        }
+        return m + 1;
+      });
+    }, []);
+    const handleDayClick = react.useCallback(
+      (date) => {
+        if (mode === "single") {
+          onChange?.(date);
+        } else if (mode === "range") {
+          if (!rangeStart || rangeStart && rangeEnd) {
+            setRangeStart(date);
+            setRangeEnd(null);
+            onRangeChange?.([date, null]);
+          } else {
+            setRangeEnd(date);
+            onRangeChange?.([rangeStart, date]);
+          }
+        }
+      },
+      [mode, onChange, onRangeChange, rangeStart, rangeEnd]
+    );
+    const handleYearClick = react.useCallback(
+      (year) => {
+        const newDate = new Date(year, value?.getMonth() ?? 0, 1);
+        onChange?.(newDate);
+        setViewYear(year);
+      },
+      [onChange, value]
+    );
+    const handleClear = react.useCallback(() => {
+      if (mode === "range") {
+        setRangeStart(null);
+        setRangeEnd(null);
+        onRangeChange?.([null, null]);
+      } else {
+        onChange?.(null);
+      }
+      onClear?.();
+    }, [mode, onChange, onRangeChange, onClear]);
+    const secondMonth = react.useMemo(() => {
+      const m = viewMonth + 1;
+      return { month: m > 11 ? 0 : m, year: m > 11 ? viewYear + 1 : viewYear };
+    }, [viewMonth, viewYear]);
+    const monthYearLabel = `${MONTH_NAMES[viewMonth]} ${viewYear}`;
+    const secondMonthLabel = `${MONTH_NAMES[secondMonth.month]} ${secondMonth.year}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "bg-white dark:bg-grey-50 border border-grey-75 rounded-2xl p-5 shadow-soft-xs",
+          "flex flex-col gap-6",
+          mode !== "range" && "w-[340px]",
+          className
+        ),
+        ...rest,
+        children: [
+          mode === "single" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", onClick: goToPrevMonth }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex items-center gap-2 text-sm font-medium text-grey-700 cursor-default",
+                  children: [
+                    monthYearLabel,
+                    /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-6 text-grey-500" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", onClick: goToNextMonth })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MonthGrid,
+              {
+                year: viewYear,
+                month: viewMonth,
+                selectedDate: value,
+                minDate,
+                maxDate,
+                onDayClick: handleDayClick
+              }
+            )
+          ] }) }),
+          mode === "range" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-10 w-[280px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", onClick: goToPrevMonth }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-700", children: monthYearLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-6 text-grey-500" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", hidden: true })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MonthGrid,
+                {
+                  year: viewYear,
+                  month: viewMonth,
+                  rangeStart,
+                  rangeEnd,
+                  isRange: true,
+                  minDate,
+                  maxDate,
+                  onDayClick: handleDayClick
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-[280px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", hidden: true }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-700", children: secondMonthLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-6 text-grey-500" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", onClick: goToNextMonth })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MonthGrid,
+                {
+                  year: secondMonth.year,
+                  month: secondMonth.month,
+                  rangeStart,
+                  rangeEnd,
+                  isRange: true,
+                  minDate,
+                  maxDate,
+                  onDayClick: handleDayClick
+                }
+              )
+            ] })
+          ] }),
+          mode === "year" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 items-center w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-grey-700", children: [
+                yearBase,
+                "\u2013",
+                yearBase + 19
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-6 text-grey-500" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              YearGrid,
+              {
+                baseYear: yearBase,
+                selectedYear: value?.getFullYear(),
+                onYearClick: handleYearClick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 mt-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "left", onClick: () => setYearBase((b) => b - 20) }),
+              /* @__PURE__ */ jsxRuntime.jsx(NavButton, { direction: "right", onClick: () => setYearBase((b) => b + 20) })
+            ] })
+          ] }),
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-grey-100 pt-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "text-sm font-semibold text-grey-400 hover:text-grey-600 px-2 cursor-pointer",
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDone,
+                className: "bg-primary-400 text-white text-sm font-semibold px-5 py-2.5 rounded-lg hover:bg-primary-500 cursor-pointer",
+                children: "Done"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
 var Chip = react.forwardRef(
   ({
     variant = "input",
@@ -6061,29 +7139,39 @@ var Chip = react.forwardRef(
   }
 );
 Chip.displayName = "Chip";
+var SEGMENT_COUNT = 10;
+var trackHeight = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
 var clampValue = (value) => Math.min(100, Math.max(0, value));
 function ProgressBar({
   value = 0,
   size = "lg",
+  type = "basic",
   label,
   metadata,
   showPercentage = true,
+  percentagePosition = "bottom",
   className,
   ...rest
 }) {
   const clamped = clampValue(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...rest, children: [
-    (label || showPercentage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-900", children: label }),
-      showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-grey-900", children: [
+  const filledSegments = Math.round(clamped / 100 * SEGMENT_COUNT);
+  const metadataItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [
+    (label || showPercentage && percentagePosition === "top") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
+      showPercentage && percentagePosition === "top" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-grey-500 leading-[1.45]", children: [
         Math.round(clamped),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    type === "basic" ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn("w-full rounded-full bg-grey-100", size === "lg" ? "h-3" : "h-2"),
+        className: cn("w-full rounded-full bg-grey-200", trackHeight[size]),
         role: "progressbar",
         "aria-valuenow": clamped,
         "aria-valuemin": 0,
@@ -6093,14 +7181,42 @@ function ProgressBar({
           {
             className: cn(
               "rounded-full bg-primary-400 transition-all duration-300",
-              size === "lg" ? "h-3" : "h-2"
+              trackHeight[size]
             ),
             style: { width: `${clamped}%` }
           }
         )
       }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("flex gap-0.5 w-full", trackHeight[size]),
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: Array.from({ length: SEGMENT_COUNT }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 rounded-full transition-colors duration-300",
+              i < filledSegments ? "bg-primary-400" : "bg-grey-100"
+            )
+          },
+          i
+        ))
+      }
     ),
-    metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-grey-500", children: metadata }) })
+    (metadataItems.length > 0 || showPercentage && percentagePosition === "bottom") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      metadataItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-1", children: metadataItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "contents", children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400 leading-[1.45]", children: "\u2022" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })
+      ] }, i)) }),
+      showPercentage && percentagePosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [
+        Math.round(clamped),
+        "%"
+      ] })
+    ] })
   ] });
 }
 var sizeConfig = {
@@ -6110,10 +7226,13 @@ var sizeConfig = {
   lg: { dimension: 90, strokeWidth: 7, fontSize: 16 },
   xl: { dimension: 120, strokeWidth: 8, fontSize: 18 }
 };
+var SEGMENT_COUNT2 = 10;
+var SEGMENT_GAP_DEGREES = 6;
 var clampValue2 = (value) => Math.min(100, Math.max(0, value));
 function ProgressCircle({
   value = 0,
   size = "md",
+  variant = "default",
   showText = true,
   className,
   ...rest
@@ -6122,6 +7241,57 @@ function ProgressCircle({
   const config = sizeConfig[size];
   const radius = (config.dimension - config.strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
+  if (variant === "segmented") {
+    const filledSegments = Math.round(clamped / 100 * SEGMENT_COUNT2);
+    const totalGapDegrees = SEGMENT_COUNT2 * SEGMENT_GAP_DEGREES;
+    const segmentDegrees = (360 - totalGapDegrees) / SEGMENT_COUNT2;
+    const segmentLength = segmentDegrees / 360 * circumference;
+    const gapLength = SEGMENT_GAP_DEGREES / 360 * circumference;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("relative inline-flex items-center justify-center", className),
+        style: { width: config.dimension, height: config.dimension },
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: config.dimension, height: config.dimension, className: "-rotate-90", children: Array.from({ length: SEGMENT_COUNT2 }, (_, i) => {
+            const segmentOffset = i * ((segmentLength + gapLength) / circumference) * circumference;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: config.dimension / 2,
+                cy: config.dimension / 2,
+                r: radius,
+                fill: "none",
+                stroke: i < filledSegments ? "#F56630" : "#F0F2F5",
+                strokeWidth: config.strokeWidth,
+                strokeLinecap: "round",
+                strokeDasharray: `${segmentLength} ${circumference - segmentLength}`,
+                strokeDashoffset: -segmentOffset,
+                className: "transition-colors duration-300"
+              },
+              i
+            );
+          }) }),
+          showText && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "absolute font-semibold text-grey-900",
+              style: { fontSize: config.fontSize },
+              children: [
+                Math.round(clamped),
+                "%"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
   const offset = circumference - clamped / 100 * circumference;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6162,14 +7332,130 @@ function ProgressCircle({
             }
           )
         ] }),
-        showText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute font-semibold text-black", style: { fontSize: config.fontSize }, children: [
-          Math.round(clamped),
-          "%"
-        ] })
+        showText && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "absolute font-semibold text-grey-900",
+            style: { fontSize: config.fontSize },
+            children: [
+              Math.round(clamped),
+              "%"
+            ]
+          }
+        )
       ]
     }
   );
 }
+var statusColors = {
+  information: {
+    bold: { bg: "bg-[#4a9fed]", divider: "bg-[#f0f7ff]" },
+    subtle: { bg: "bg-[#f0f7ff]", text: "text-grey-900", descText: "text-grey-600", divider: "bg-[#0063ad]" }
+  },
+  success: {
+    bold: { bg: "bg-success-400", divider: "bg-success-50" },
+    subtle: { bg: "bg-success-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-success-400" }
+  },
+  error: {
+    bold: { bg: "bg-error-400", divider: "bg-error-50" },
+    subtle: { bg: "bg-error-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-error-400" }
+  },
+  warning: {
+    bold: { bg: "bg-warning-400", divider: "bg-warning-50" },
+    subtle: { bg: "bg-warning-50", text: "text-grey-900", descText: "text-grey-600", divider: "bg-warning-700" }
+  },
+  feature: {
+    bold: { bg: "bg-grey-900", divider: "bg-grey-100" },
+    subtle: { bg: "bg-grey-50", text: "text-black", descText: "text-black", divider: "bg-grey-300" }
+  },
+  opportunity: {
+    bold: { bg: "bg-[#475ccc]", divider: "bg-[#b1bae9]" },
+    subtle: { bg: "bg-[#f7f8fd]", text: "text-grey-900", descText: "text-grey-600", divider: "bg-[#b1bae9]" }
+  }
+};
+function InfoIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4M12 8h.01" })
+  ] });
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) });
+}
+var Banner = react.forwardRef(
+  ({
+    status = "information",
+    emphasis = "subtle",
+    size = "lg",
+    title,
+    description,
+    icon,
+    buttonLabel,
+    onButtonClick,
+    dismissible = true,
+    onDismiss,
+    className,
+    ...rest
+  }, ref) => {
+    const colors = statusColors[status];
+    const isBold = emphasis === "bold";
+    const colorSet = isBold ? colors.bold : colors.subtle;
+    const textColor = isBold ? "text-white" : colorSet.text;
+    const descColor = isBold ? "text-white" : colorSet.descText;
+    const buttonColor = isBold ? "text-white" : "text-grey-600";
+    const iconSize4 = size === "sm" ? "size-4" : "size-6";
+    const textSize2 = size === "sm" ? "text-xs" : "text-sm";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "flex items-center justify-between overflow-hidden rounded-[4px] w-full",
+          colorSet.bg,
+          size === "sm" ? "h-10 px-3 py-2" : "h-12 px-8 py-3",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-1 items-center", size === "sm" ? "gap-2" : "gap-3"), children: [
+            icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", iconSize4, textColor), children: resolveIcon(icon, size === "sm" ? "sm" : "md") }) : /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: cn("shrink-0", iconSize4, textColor) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold leading-[1.45] whitespace-nowrap", textSize2, textColor), children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("leading-[1.45] whitespace-nowrap", textSize2, descColor), children: description }),
+            buttonLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onButtonClick,
+                className: cn(
+                  "shrink-0 font-semibold leading-[1.45] whitespace-nowrap cursor-pointer",
+                  textSize2,
+                  buttonColor,
+                  isBold && "text-white underline"
+                ),
+                children: buttonLabel
+              }
+            )
+          ] }),
+          dismissible && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 self-stretch shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-px self-stretch", colorSet.divider) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDismiss,
+                "aria-label": "Dismiss banner",
+                className: cn("shrink-0 cursor-pointer", iconSize4, textColor),
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "size-full" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
 var colorStyles = {
   orange: {
     filled: "bg-primary-400 text-white",
@@ -6223,21 +7509,21 @@ function Badge({
   ...rest
 }) {
   const colorClass = colorStyles[color][type];
-  const sizeConfig2 = sizeStyles[size];
+  const sizeConfig3 = sizeStyles[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: cn(
         "inline-flex items-center rounded-xl font-medium whitespace-nowrap",
-        sizeConfig2.container,
+        sizeConfig3.container,
         colorClass,
         className
       ),
       ...rest,
       children: [
-        leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", sizeConfig2.icon), children: resolveIcon(leadingIcon, "xs") }),
+        leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", sizeConfig3.icon), children: resolveIcon(leadingIcon, "xs") }),
         children,
-        trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", sizeConfig2.icon), children: resolveIcon(trailingIcon, "xs") })
+        trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0", sizeConfig3.icon), children: resolveIcon(trailingIcon, "xs") })
       ]
     }
   );
@@ -6472,7 +7758,7 @@ function Arrow({ position, theme }) {
     }
   ) });
 }
-var Tooltip = react.forwardRef(
+var Tooltip2 = react.forwardRef(
   ({
     theme = "light",
     position = "top-left",
@@ -6559,7 +7845,7 @@ var Tooltip = react.forwardRef(
     );
   }
 );
-Tooltip.displayName = "Tooltip";
+Tooltip2.displayName = "Tooltip";
 function range(start, end) {
   const arr = [];
   for (let i = start; i <= end; i++) arr.push(i);
@@ -6587,8 +7873,8 @@ function getPageNumbers(currentPage, totalPages, siblingCount) {
   const middleRange = range(leftSiblingIndex, rightSiblingIndex);
   return [1, "...", ...middleRange, "...", totalPages];
 }
-var ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", size: "md" });
-var ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "md" });
+var ChevronLeft2 = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", size: "md" });
+var ChevronRight2 = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "md" });
 function Pagination({
   currentPage,
   totalPages,
@@ -6609,7 +7895,7 @@ function Pagination({
         className: "inline-flex items-center gap-2 rounded-lg border border-grey-300 bg-white dark:bg-grey-50 px-3 py-2 text-sm font-semibold text-grey-700 cursor-pointer hover:bg-grey-50 disabled:opacity-50 disabled:cursor-not-allowed",
         "aria-label": "Previous page",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft2, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Previous" })
         ]
       }
@@ -6647,7 +7933,7 @@ function Pagination({
         "aria-label": "Next page",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Next" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
         ]
       }
     )
@@ -6784,35 +8070,72 @@ var Toggle = react.forwardRef(
   }
 );
 Toggle.displayName = "Toggle";
-function Breadcrumb({ items, separator = "/", className, ...rest }) {
+function ChevronRight3({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 5l5 5-5 5" }) });
+}
+function DoubleChevronRight({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5l5 5-5 5M10.5 5l5 5-5 5" }) });
+}
+function SeparatorElement({ type }) {
+  switch (type) {
+    case "chevron":
+      return /* @__PURE__ */ jsxRuntime.jsx(ChevronRight3, { className: "size-5 text-grey-300" });
+    case "double-chevron":
+      return /* @__PURE__ */ jsxRuntime.jsx(DoubleChevronRight, { className: "size-5 text-grey-300" });
+    case "slash":
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-300 w-4 text-center", children: "/" });
+  }
+}
+function Breadcrumb({
+  items,
+  separator = "chevron",
+  hasBorders = false,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
       "aria-label": "Breadcrumb",
-      className: cn("border-y border-grey-200 px-4 py-2.5", className),
+      className: cn(
+        "py-2.5",
+        hasBorders && "border-y border-grey-100",
+        className
+      ),
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-2 text-sm", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2", children: [
-        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-grey-400", "aria-hidden": true, children: separator }),
-        item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 shrink-0", children: resolveIcon(item.icon, "sm") }),
-        item.href && !item.disabled && !item.active ? /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: item.href,
-            className: cn("text-grey-500 hover:text-primary-300 transition-colors"),
-            children: item.label
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              item.active && "text-primary-500 font-medium",
-              item.disabled && "text-grey-400 cursor-not-allowed",
-              !item.active && !item.disabled && "text-grey-500"
-            ),
-            "aria-current": item.active ? "page" : void 0,
-            children: item.label
-          }
-        )
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-4 text-sm font-medium", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-4", children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(SeparatorElement, { type: separator }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "size-5 shrink-0",
+                item.active ? "text-primary-400" : item.disabled ? "text-grey-300" : "text-grey-500 group-hover:text-grey-700"
+              ),
+              children: resolveIcon(item.icon, "sm")
+            }
+          ),
+          item.href && !item.disabled && !item.active ? /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: item.href,
+              className: "text-grey-500 hover:text-grey-700 hover:underline transition-colors",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                item.active && "text-primary-400",
+                item.disabled && "text-grey-300 cursor-not-allowed",
+                !item.active && !item.disabled && "text-grey-500"
+              ),
+              "aria-current": item.active ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ] })
       ] }, i)) })
     }
   );
@@ -6833,7 +8156,7 @@ var initialsFontSize = {
   xl: "text-[18px] leading-[1.45]",
   "2xl": "text-[20px] leading-[1.2] tracking-[-0.4px]"
 };
-var iconSize = {
+var iconSize3 = {
   xs: "xs",
   sm: "sm",
   md: "md",
@@ -6908,7 +8231,7 @@ var Avatar = react.forwardRef(
         ...rest,
         children: [
           type === "image" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-[1.5px] border-white overflow-hidden", children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "size-full object-cover rounded-full" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full bg-grey-200 rounded-full" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-primary-50" }),
-          type === "icon" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-grey-900", children: icon ? resolveIcon(icon, iconSize[size]) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "user", size: iconSize[size] }) }),
+          type === "icon" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-grey-900", children: icon ? resolveIcon(icon, iconSize3[size]) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "user", size: iconSize3[size] }) }),
           type === "initials" && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -6916,40 +8239,212 @@ var Avatar = react.forwardRef(
                 "absolute inset-0 flex items-center justify-center font-semibold text-grey-900",
                 initialsFontSize[size]
               ),
-              children: initials
+              children: initials
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var groupAvatarSize = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var groupOverlap = {
+  sm: "-ml-1.5",
+  md: "-ml-1.5",
+  lg: "-ml-[11px]"
+};
+var AvatarGroup = react.forwardRef(
+  ({ size = "md", max, className, children, ...rest }, ref) => {
+    const childArray = react.Children.toArray(children).filter(react.isValidElement);
+    const avatarSize = groupAvatarSize[size];
+    const overlap = groupOverlap[size];
+    const visible = max ? childArray.slice(0, max) : childArray;
+    const overflowCount = max ? childArray.length - max : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center", className), ...rest, children: [
+      visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(i > 0 && overlap, "relative"), children: react.isValidElement(child) ? react.cloneElement(child, { size: avatarSize, status: "none" }) : child }, i)),
+      overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(overlap, "relative"), children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { type: "initials", size: avatarSize, initials: `+${overflowCount}` }) })
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+function CloseIcon2({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L3 9M3 3l6 6" }) });
+}
+function BoxIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.67 4.67L8 7.33l5.33-2.66M8 14V7.33" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.33 10.67V5.33a1.33 1.33 0 00-.66-1.15L8.67 2a1.33 1.33 0 00-1.34 0L3.33 4.18A1.33 1.33 0 002.67 5.33v5.34a1.33 1.33 0 00.66 1.15L7.33 14a1.33 1.33 0 001.34 0l4-2.18a1.33 1.33 0 00.66-1.15z" })
+  ] });
+}
+var sizeClasses2 = {
+  sm: "w-[400px]",
+  md: "w-[500px]",
+  lg: "w-[640px]"
+};
+var Modal = react.forwardRef(
+  ({
+    open,
+    onClose,
+    size = "sm",
+    title,
+    description,
+    icon,
+    showClose = true,
+    primaryLabel = "Save",
+    onPrimaryClick,
+    secondaryLabel,
+    onSecondaryClick,
+    footerOrientation = "horizontal",
+    closeOnOverlay = true,
+    closeOnEscape = true,
+    blur = true,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const overlayRef = react.useRef(null);
+    react.useEffect(() => {
+      if (!open || !closeOnEscape) return;
+      const handler = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [open, closeOnEscape, onClose]);
+    react.useEffect(() => {
+      if (!open) return;
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }, [open]);
+    const handleOverlayClick = react.useCallback(
+      (e) => {
+        if (closeOnOverlay && e.target === overlayRef.current) onClose();
+      },
+      [closeOnOverlay, onClose]
+    );
+    if (!open) return null;
+    const isVertical = footerOrientation === "vertical";
+    const modal = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        className: cn(
+          "fixed inset-0 z-50 flex items-center justify-center",
+          blur && "backdrop-blur-md"
+        ),
+        onClick: handleOverlayClick,
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/60" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? "modal-title" : void 0,
+              "aria-describedby": description ? "modal-desc" : void 0,
+              className: cn(
+                "relative flex flex-col bg-white dark:bg-grey-50 rounded-xl shadow-soft-xl overflow-hidden",
+                sizeClasses2[size],
+                className
+              ),
+              ...rest,
+              children: [
+                (title || showClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 pt-5 pb-2 px-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 gap-4 items-start min-w-0", children: [
+                    icon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4", children: icon }) }) : title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: /* @__PURE__ */ jsxRuntime.jsx(BoxIcon, { className: "size-4 text-primary-400" }) }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                      title && /* @__PURE__ */ jsxRuntime.jsx(
+                        "h2",
+                        {
+                          id: "modal-title",
+                          className: "text-xl font-semibold text-grey-700 leading-[1.2] tracking-[-0.4px]",
+                          children: title
+                        }
+                      ),
+                      description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "modal-desc", className: "text-sm text-grey-500 leading-[1.45]", children: description })
+                    ] })
+                  ] }),
+                  showClose && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      "aria-label": "Close modal",
+                      className: "shrink-0 flex items-center justify-center p-1.5 bg-grey-75 rounded-xl hover:bg-grey-200 transition-colors cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon2, { className: "size-3" })
+                    }
+                  )
+                ] }),
+                children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-4 py-4 overflow-y-auto", children }),
+                (primaryLabel || secondaryLabel) && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "py-5",
+                      isVertical ? "flex flex-col gap-5 items-center px-4" : "flex items-center justify-end gap-3 px-4"
+                    ),
+                    children: isVertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onPrimaryClick,
+                          className: "w-full bg-primary-400 text-white text-sm font-semibold p-2 rounded-xl hover:bg-primary-500 transition-colors cursor-pointer",
+                          children: primaryLabel
+                        }
+                      ),
+                      secondaryLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onSecondaryClick ?? onClose,
+                          className: "w-full border-[1.5px] border-primary-400 text-primary-400 text-sm font-semibold p-2 rounded-xl hover:bg-primary-50 transition-colors cursor-pointer",
+                          children: secondaryLabel
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      secondaryLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onSecondaryClick ?? onClose,
+                          className: "flex-1 border-[1.5px] border-primary-400 text-primary-400 text-sm font-semibold p-2 rounded-xl hover:bg-primary-50 transition-colors cursor-pointer",
+                          children: secondaryLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onPrimaryClick,
+                          className: "flex-1 bg-primary-400 text-white text-sm font-semibold p-2 rounded-xl hover:bg-primary-500 transition-colors cursor-pointer",
+                          children: primaryLabel
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size })
+          )
         ]
       }
     );
+    return reactDom.createPortal(modal, document.body);
   }
 );
-Avatar.displayName = "Avatar";
-var groupAvatarSize = {
-  sm: "xs",
-  md: "sm",
-  lg: "md"
-};
-var groupOverlap = {
-  sm: "-ml-1.5",
-  md: "-ml-1.5",
-  lg: "-ml-[11px]"
-};
-var AvatarGroup = react.forwardRef(
-  ({ size = "md", max, className, children, ...rest }, ref) => {
-    const childArray = react.Children.toArray(children).filter(react.isValidElement);
-    const avatarSize = groupAvatarSize[size];
-    const overlap = groupOverlap[size];
-    const visible = max ? childArray.slice(0, max) : childArray;
-    const overflowCount = max ? childArray.length - max : 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center", className), ...rest, children: [
-      visible.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(i > 0 && overlap, "relative"), children: react.isValidElement(child) ? react.cloneElement(child, { size: avatarSize, status: "none" }) : child }, i)),
-      overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(overlap, "relative"), children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { type: "initials", size: avatarSize, initials: `+${overflowCount}` }) })
-    ] });
-  }
-);
-AvatarGroup.displayName = "AvatarGroup";
+Modal.displayName = "Modal";
 var trendStyles = {
   up: "bg-primary-50 text-primary-700",
   down: "bg-error-50 text-error-700"
@@ -11625,6 +13120,564 @@ var DropdownMenuSeparator = react.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", className: cn("my-1 h-px bg-grey-100", className), ...rest })
 );
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var sizeMap2 = {
+  xs: 20,
+  sm: 24,
+  md: 32,
+  lg: 40,
+  xl: 48,
+  "2xl": 56,
+  "3xl": 64
+};
+function ThinSpinner({ size, color }) {
+  const r = size / 2 - 2;
+  const c = size / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })
+  ] });
+}
+function BoldSpinner({ size, color }) {
+  const sw = Math.max(2.5, size * 0.1);
+  const r = size / 2 - sw;
+  const c = size / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })
+  ] });
+}
+function DuoToneSpinner({ size, color }) {
+  const sw = Math.max(2, size * 0.08);
+  const r = size / 2 - sw;
+  const c = size / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.15, className: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI} ${r * Math.PI}`, strokeLinecap: "round", className: color })
+  ] });
+}
+function BufferingThinSpinner({ size, color }) {
+  const r = size / 2 - 2;
+  const c = size / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })
+  ] });
+}
+function BufferingBoldSpinner({ size, color }) {
+  const sw = Math.max(2.5, size * 0.1);
+  const r = size / 2 - sw;
+  const c = size / 2;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })
+  ] });
+}
+function DotSpinner({ size, color }) {
+  const dotSize = Math.max(3, size * 0.15);
+  const c = size / 2;
+  const r = size / 2 - dotSize;
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
+    const angle = i * 45 * Math.PI / 180;
+    const x = c + r * Math.cos(angle);
+    const y = c + r * Math.sin(angle);
+    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: dotSize / 2, fill: "currentColor", opacity: 0.15 + i / 8 * 0.85, className: color }, i);
+  }) });
+}
+function JugglingSpinner({ size, color }) {
+  const dotSize = Math.max(3, size * 0.18);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [0, 1, 2].map((i) => {
+    const cx = size / 2 + (i - 1) * (size * 0.35);
+    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy: size / 2, r: dotSize / 2, fill: "currentColor", className: cn(color, "animate-[juggle_1.4s_ease-in-out_infinite]"), style: { animationDelay: `${i * 0.16}s` } }, i);
+  }) });
+}
+var Spinner = react.forwardRef(
+  ({
+    type = "thin",
+    size = "md",
+    colorStyle = "brand",
+    label,
+    labelPosition = "after",
+    className,
+    ...rest
+  }, ref) => {
+    const px = sizeMap2[size];
+    const color = colorStyle === "brand" ? "text-primary-400" : "text-white";
+    const labelColor = colorStyle === "brand" ? "text-grey-900" : "text-white";
+    const spinnerEl = (() => {
+      switch (type) {
+        case "thin":
+          return /* @__PURE__ */ jsxRuntime.jsx(ThinSpinner, { size: px, color });
+        case "bold":
+          return /* @__PURE__ */ jsxRuntime.jsx(BoldSpinner, { size: px, color });
+        case "duo-tone":
+          return /* @__PURE__ */ jsxRuntime.jsx(DuoToneSpinner, { size: px, color });
+        case "buffering-thin":
+          return /* @__PURE__ */ jsxRuntime.jsx(BufferingThinSpinner, { size: px, color });
+        case "buffering-bold":
+          return /* @__PURE__ */ jsxRuntime.jsx(BufferingBoldSpinner, { size: px, color });
+        case "dot":
+          return /* @__PURE__ */ jsxRuntime.jsx(DotSpinner, { size: px, color });
+        case "juggling":
+          return /* @__PURE__ */ jsxRuntime.jsx(JugglingSpinner, { size: px, color });
+      }
+    })();
+    const isVertical = labelPosition === "above" || labelPosition === "below";
+    const isReversed = labelPosition === "before" || labelPosition === "above";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-label": label || "Loading",
+        className: cn(
+          "inline-flex items-center gap-2",
+          isVertical && "flex-col",
+          isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"),
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", style: { width: px, height: px }, children: spinnerEl }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm leading-[1.45] whitespace-nowrap", labelColor), children: label })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
+}
+function StepCircle({
+  status,
+  indicator,
+  stepNumber,
+  icon
+}) {
+  const isCompleted = status === "completed";
+  const isActive = status === "active";
+  const isDisabled = status === "disabled";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "shrink-0 flex items-center justify-center rounded-full size-6 border transition-colors",
+        isCompleted && "bg-primary-400 border-primary-400 text-white",
+        isActive && "bg-primary-50 border-primary-400 text-primary-400",
+        !isCompleted && !isActive && !isDisabled && "bg-white dark:bg-grey-50 border-grey-300",
+        isDisabled && "bg-grey-100 border-grey-200 text-grey-300"
+      ),
+      children: isCompleted ? icon ?? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "size-3.5" }) : indicator === "dot" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "size-2 rounded-full border",
+            isActive ? "bg-primary-400 border-primary-400" : isDisabled ? "bg-grey-300 border-grey-300" : "bg-grey-400 border-grey-300"
+          )
+        }
+      ) : indicator === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", isActive ? "text-primary-400" : isDisabled ? "text-grey-300" : "text-grey-500"), children: stepNumber }) : icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "size-2 rounded-full",
+            isActive ? "bg-primary-400" : isDisabled ? "bg-grey-300" : "bg-grey-400"
+          )
+        }
+      )
+    }
+  );
+}
+function Connector({
+  orientation,
+  completed
+}) {
+  return orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 h-0.5 rounded-full", completed ? "bg-primary-400" : "bg-grey-300") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-0.5 flex-1 min-h-[20px] ml-[11px] rounded-full", completed ? "bg-primary-400" : "bg-grey-300") });
+}
+function resolveStatuses(steps, activeStep) {
+  if (activeStep !== void 0) {
+    return steps.map((s, i) => {
+      if (s.status === "disabled") return "disabled";
+      if (i < activeStep) return "completed";
+      if (i === activeStep) return "active";
+      return "incomplete";
+    });
+  }
+  return steps.map((s) => s.status ?? "incomplete");
+}
+var Stepper = react.forwardRef(
+  ({
+    steps,
+    activeStep,
+    orientation = "horizontal",
+    indicator = "dot",
+    className,
+    ...rest
+  }, ref) => {
+    const statuses = resolveStatuses(steps, activeStep);
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: steps.map((step, i) => {
+        const status = statuses[i];
+        const isLast = i === steps.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { status, indicator, stepNumber: i + 1, icon: step.icon }),
+            !isLast && /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "vertical", completed: status === "completed" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col pb-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm font-medium leading-[1.45]",
+                  status === "active" ? "text-grey-900" : status === "disabled" ? "text-grey-300" : "text-grey-600"
+                ),
+                children: step.title
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-500 leading-[1.45]", children: step.description })
+          ] })
+        ] }, i);
+      }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-start w-full", className), ...rest, children: steps.map((step, i) => {
+      const status = statuses[i];
+      const isLast = i === steps.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "horizontal", completed: i > 0 && statuses[i - 1] === "completed" }),
+          /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { status, indicator, stepNumber: i + 1, icon: step.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(Connector, { orientation: "horizontal", completed: !isLast && status === "completed" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 text-center w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs font-medium leading-[1.45] tracking-tight",
+                status === "active" ? "text-grey-700" : status === "disabled" ? "text-grey-300" : "text-grey-600"
+              ),
+              children: step.title
+            }
+          ),
+          step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-500 leading-[1.45] truncate", children: step.description })
+        ] })
+      ] }, i);
+    }) });
+  }
+);
+Stepper.displayName = "Stepper";
+var LinearStepper = react.forwardRef(
+  ({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    const pct = Math.min(100, Math.max(0, currentStep / totalSteps * 100));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [
+      showLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold leading-[1.45]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-grey-900", children: currentStep }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-grey-400", children: [
+          " / ",
+          totalSteps,
+          " complete"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-2 bg-primary-400 rounded-[10px] transition-all duration-300",
+          style: { width: `${pct}%` }
+        }
+      ) })
+    ] });
+  }
+);
+LinearStepper.displayName = "LinearStepper";
+var SegmentedStepper = react.forwardRef(
+  ({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [
+      showLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold leading-[1.45]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-grey-900", children: currentStep }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-grey-400", children: [
+          " / ",
+          totalSteps,
+          " complete"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 h-2 w-full", children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex-1 rounded-[14px] border border-grey-50 transition-colors",
+            i < currentStep ? "bg-primary-400" : "bg-grey-50"
+          )
+        },
+        i
+      )) }) })
+    ] });
+  }
+);
+SegmentedStepper.displayName = "SegmentedStepper";
+var sizeConfig2 = {
+  sm: { track: "h-1", handle: "size-3.5", handleSize: 14, border: "border-[2.333px]" },
+  md: { track: "h-2", handle: "size-4", handleSize: 16, border: "border-[2.667px]" },
+  lg: { track: "h-3", handle: "size-5", handleSize: 20, border: "border-[3.333px]" }
+};
+function clamp(val, min, max) {
+  return Math.min(max, Math.max(min, val));
+}
+function getPercent(val, min, max) {
+  return (val - min) / (max - min) * 100;
+}
+function getValueFromPosition(clientX, rect, min, max, step) {
+  const pct = clamp((clientX - rect.left) / rect.width, 0, 1);
+  const raw = min + pct * (max - min);
+  const stepped = Math.round(raw / step) * step;
+  return clamp(stepped, min, max);
+}
+var Slider = react.forwardRef(
+  ({
+    value: controlledValue,
+    onChange,
+    size = "lg",
+    label,
+    metadata,
+    showPercentage = true,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    className,
+    ...rest
+  }, ref) => {
+    const [uncontrolled, setUncontrolled] = react.useState(0);
+    const val = controlledValue ?? uncontrolled;
+    const trackRef = react.useRef(null);
+    const config = sizeConfig2[size];
+    const pct = getPercent(val, min, max);
+    const metaItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+    const updateValue = react.useCallback(
+      (clientX) => {
+        if (disabled || !trackRef.current) return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(clientX, rect, min, max, step);
+        if (controlledValue === void 0) setUncontrolled(v);
+        onChange?.(v);
+      },
+      [disabled, min, max, step, controlledValue, onChange]
+    );
+    const handlePointerDown = react.useCallback(
+      (e) => {
+        if (disabled) return;
+        e.preventDefault();
+        e.target.setPointerCapture(e.pointerId);
+        updateValue(e.clientX);
+      },
+      [disabled, updateValue]
+    );
+    const handlePointerMove = react.useCallback(
+      (e) => {
+        if (disabled || !e.buttons) return;
+        updateValue(e.clientX);
+      },
+      [disabled, updateValue]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 w-full", disabled && "opacity-50", className),
+        ...rest,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: trackRef,
+              className: cn(
+                "relative w-full rounded-full bg-grey-200 cursor-pointer",
+                config.track,
+                disabled && "cursor-not-allowed"
+              ),
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              role: "slider",
+              "aria-valuenow": val,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              tabIndex: disabled ? -1 : 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("absolute left-0 top-0 rounded-full bg-primary-400", config.track),
+                    style: { width: `${pct}%` }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute top-1/2 -translate-y-1/2 rounded-full bg-primary-500 border-white border-solid shadow-sm",
+                      config.handle,
+                      config.border
+                    ),
+                    style: { left: `${pct}%`, transform: `translate(-50%, -50%)` }
+                  }
+                )
+              ]
+            }
+          ),
+          (metaItems.length > 0 || showPercentage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            metaItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-1", children: metaItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "contents", children: [
+              i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-grey-400", children: "\u2022" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })
+            ] }, i)) }),
+            showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [
+              Math.round(pct),
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var RangeSlider = react.forwardRef(
+  ({
+    value: controlledValue,
+    onChange,
+    size = "lg",
+    label,
+    showLabels = true,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    className,
+    ...rest
+  }, ref) => {
+    const [uncontrolled, setUncontrolled] = react.useState([25, 75]);
+    const val = controlledValue ?? uncontrolled;
+    const trackRef = react.useRef(null);
+    const dragging = react.useRef(null);
+    const config = sizeConfig2[size];
+    const lowPct = getPercent(val[0], min, max);
+    const highPct = getPercent(val[1], min, max);
+    const update = react.useCallback(
+      (newVal) => {
+        if (controlledValue === void 0) setUncontrolled(newVal);
+        onChange?.(newVal);
+      },
+      [controlledValue, onChange]
+    );
+    const handlePointerDown = react.useCallback(
+      (e) => {
+        if (disabled || !trackRef.current) return;
+        e.preventDefault();
+        e.target.setPointerCapture(e.pointerId);
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        const distLow = Math.abs(v - val[0]);
+        const distHigh = Math.abs(v - val[1]);
+        dragging.current = distLow <= distHigh ? "low" : "high";
+        if (dragging.current === "low") {
+          update([clamp(v, min, val[1]), val[1]]);
+        } else {
+          update([val[0], clamp(v, val[0], max)]);
+        }
+      },
+      [disabled, min, max, step, val, update]
+    );
+    const handlePointerMove = react.useCallback(
+      (e) => {
+        if (disabled || !e.buttons || !trackRef.current || !dragging.current) return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        if (dragging.current === "low") {
+          update([clamp(v, min, val[1]), val[1]]);
+        } else {
+          update([val[0], clamp(v, val[0], max)]);
+        }
+      },
+      [disabled, min, max, step, val, update]
+    );
+    const handlePointerUp = react.useCallback(() => {
+      dragging.current = null;
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 w-full", disabled && "opacity-50", className),
+        ...rest,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: trackRef,
+              className: cn(
+                "relative w-full rounded-full bg-grey-200 cursor-pointer",
+                config.track,
+                disabled && "cursor-not-allowed"
+              ),
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              role: "slider",
+              "aria-valuenow": val[0],
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              tabIndex: disabled ? -1 : 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("absolute top-0 rounded-full bg-primary-400", config.track),
+                    style: { left: `${lowPct}%`, width: `${highPct - lowPct}%` }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute top-1/2 rounded-full bg-primary-500 border-white border-solid shadow-sm z-10",
+                      config.handle,
+                      config.border
+                    ),
+                    style: { left: `${lowPct}%`, transform: `translate(-50%, -50%)` }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute top-1/2 rounded-full bg-primary-500 border-white border-solid shadow-sm z-10",
+                      config.handle,
+                      config.border
+                    ),
+                    style: { left: `${highPct}%`, transform: `translate(-50%, -50%)` }
+                  }
+                )
+              ]
+            }
+          ),
+          showLabels && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: [
+              Math.round(getPercent(val[0], min, max)),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [
+              Math.round(getPercent(val[1], min, max)),
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+RangeSlider.displayName = "RangeSlider";
 var SelectContext = react.createContext(null);
 function useSelectContext() {
   const ctx = react.useContext(SelectContext);
@@ -12282,18 +14335,25 @@ function useRaydenRadio({
   };
 }
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
 exports.ActivityContent = ActivityContent;
 exports.ActivityItem = ActivityItem;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
+exports.Banner = Banner;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupItem = ButtonGroupItem;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.Counter = Counter;
+exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -12308,11 +14368,17 @@ exports.FileUploadDropZone = FileUploadDropZone;
 exports.FileUploadItem = FileUploadItem;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.LinearStepper = LinearStepper;
 exports.MetricsCard = MetricsCard;
+exports.Modal = Modal;
+exports.NumberCounter = NumberCounter;
 exports.Pagination = Pagination;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;
 exports.Radio = Radio;
+exports.RangeSlider = RangeSlider;
+exports.RaydenChart = RaydenChart;
+exports.SegmentedStepper = SegmentedStepper;
 exports.Select = Select;
 exports.SelectOption = SelectOption;
 exports.SidebarMenu = SidebarMenu;
@@ -12320,6 +14386,9 @@ exports.SidebarMenuItem = SidebarMenuItem;
 exports.SidebarMenuSection = SidebarMenuSection;
 exports.SidebarMenuSub = SidebarMenuSub;
 exports.SidebarMenuSubItem = SidebarMenuSubItem;
+exports.Slider = Slider;
+exports.Spinner = Spinner;
+exports.Stepper = Stepper;
 exports.Tab = Tab;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -12330,8 +14399,12 @@ exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.ThemeProvider = ThemeProvider;
 exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
+exports.Tooltip = Tooltip2;
+exports.chartColors = chartColors;
+exports.chartFont = chartFont;
 exports.cn = cn;
+exports.createGradientFill = createGradientFill;
+exports.hexToRgba = hexToRgba;
 exports.illustrationNames = illustrationNames;
 exports.useRaydenCheckbox = useRaydenCheckbox;
 exports.useRaydenInput = useRaydenInput;