@telepix-lab/telepix-ui 0.7.0 → 0.7.2

package/dist/cjs/client.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var locale = require('react-day-picker/locale');
 var reactDayPicker = require('react-day-picker');
 require('react-day-picker/style.css');
 
@@ -26,6 +27,153 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded$F = ["color"];
+var BoxIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M12.5 2H2.5C2.22386 2 2 2.22386 2 2.5V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V2.5C13 2.22386 12.7761 2 12.5 2ZM2.5 1C1.67157 1 1 1.67157 1 2.5V12.5C1 13.3284 1.67157 14 2.5 14H12.5C13.3284 14 14 13.3284 14 12.5V2.5C14 1.67157 13.3284 1 12.5 1H2.5Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$N = ["color"];
+var CaretDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$_ = ["color"];
+var CircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M0.877075 7.49991C0.877075 3.84222 3.84222 0.877075 7.49991 0.877075C11.1576 0.877075 14.1227 3.84222 14.1227 7.49991C14.1227 11.1576 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1576 0.877075 7.49991ZM7.49991 1.82708C4.36689 1.82708 1.82708 4.36689 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49991C13.1727 4.36689 10.6329 1.82708 7.49991 1.82708Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$$ = ["color"];
+var CircleBackslashIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M7.49991 0.877075C3.84222 0.877075 0.877075 3.84222 0.877075 7.49991C0.877075 11.1576 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1576 14.1227 7.49991C14.1227 3.84222 11.1576 0.877075 7.49991 0.877075ZM3.85768 3.15057C4.84311 2.32448 6.11342 1.82708 7.49991 1.82708C10.6329 1.82708 13.1727 4.36689 13.1727 7.49991C13.1727 8.88638 12.6753 10.1567 11.8492 11.1421L3.85768 3.15057ZM3.15057 3.85768C2.32448 4.84311 1.82708 6.11342 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C8.88638 13.1727 10.1567 12.6753 11.1421 11.8492L3.15057 3.85768Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$33 = ["color"];
+var MagnifyingGlassIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$33);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$3C = ["color"];
+var RadiobuttonIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3C);
+
+  return React.createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), React.createElement("path", {
+    d: "M7.49985 0.877045C3.84216 0.877045 0.877014 3.84219 0.877014 7.49988C0.877014 11.1575 3.84216 14.1227 7.49985 14.1227C11.1575 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1575 0.877045 7.49985 0.877045ZM1.82701 7.49988C1.82701 4.36686 4.36683 1.82704 7.49985 1.82704C10.6328 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6328 13.1727 7.49985 13.1727C4.36683 13.1727 1.82701 10.6329 1.82701 7.49988ZM7.49999 9.49999C8.60456 9.49999 9.49999 8.60456 9.49999 7.49999C9.49999 6.39542 8.60456 5.49999 7.49999 5.49999C6.39542 5.49999 5.49999 6.39542 5.49999 7.49999C5.49999 8.60456 6.39542 9.49999 7.49999 9.49999Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 // packages/react/compose-refs/src/compose-refs.tsx
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -8620,156 +8768,6 @@ var Portal = TooltipPortal;
 var Content2 = TooltipContent$1;
 var Arrow2 = TooltipArrow$1;
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var _excluded$F = ["color"];
-var BoxIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M12.5 2H2.5C2.22386 2 2 2.22386 2 2.5V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V2.5C13 2.22386 12.7761 2 12.5 2ZM2.5 1C1.67157 1 1 1.67157 1 2.5V12.5C1 13.3284 1.67157 14 2.5 14H12.5C13.3284 14 14 13.3284 14 12.5V2.5C14 1.67157 13.3284 1 12.5 1H2.5Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-var _excluded$N = ["color"];
-var CaretDownIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-var _excluded$_ = ["color"];
-var CircleIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M0.877075 7.49991C0.877075 3.84222 3.84222 0.877075 7.49991 0.877075C11.1576 0.877075 14.1227 3.84222 14.1227 7.49991C14.1227 11.1576 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1576 0.877075 7.49991ZM7.49991 1.82708C4.36689 1.82708 1.82708 4.36689 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49991C13.1727 4.36689 10.6329 1.82708 7.49991 1.82708Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-var _excluded$$ = ["color"];
-var CircleBackslashIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M7.49991 0.877075C3.84222 0.877075 0.877075 3.84222 0.877075 7.49991C0.877075 11.1576 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1576 14.1227 7.49991C14.1227 3.84222 11.1576 0.877075 7.49991 0.877075ZM3.85768 3.15057C4.84311 2.32448 6.11342 1.82708 7.49991 1.82708C10.6329 1.82708 13.1727 4.36689 13.1727 7.49991C13.1727 8.88638 12.6753 10.1567 11.8492 11.1421L3.85768 3.15057ZM3.15057 3.85768C2.32448 4.84311 1.82708 6.11342 1.82708 7.49991C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C8.88638 13.1727 10.1567 12.6753 11.1421 11.8492L3.15057 3.85768Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-var _excluded$33 = ["color"];
-var MagnifyingGlassIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$33);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-var _excluded$3C = ["color"];
-var RadiobuttonIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3C);
-
-  return React.createElement("svg", Object.assign({
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    ref: forwardedRef
-  }), React.createElement("path", {
-    d: "M7.49985 0.877045C3.84216 0.877045 0.877014 3.84219 0.877014 7.49988C0.877014 11.1575 3.84216 14.1227 7.49985 14.1227C11.1575 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1575 0.877045 7.49985 0.877045ZM1.82701 7.49988C1.82701 4.36686 4.36683 1.82704 7.49985 1.82704C10.6328 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6328 13.1727 7.49985 13.1727C4.36683 13.1727 1.82701 10.6329 1.82701 7.49988ZM7.49999 9.49999C8.60456 9.49999 9.49999 8.60456 9.49999 7.49999C9.49999 6.39542 8.60456 5.49999 7.49999 5.49999C6.39542 5.49999 5.49999 6.39542 5.49999 7.49999C5.49999 8.60456 6.39542 9.49999 7.49999 9.49999Z",
-    fill: color,
-    fillRule: "evenodd",
-    clipRule: "evenodd"
-  }));
-});
-
-const RADIO_GROUP_ORIENTAIONS = {
-    HORIZONTAL: "horizontal"};
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const CLASS_PART_SEPARATOR = '-';
@@ -12072,28 +12070,28 @@ function cn(...inputs) {
 const StateColorContainer = ({ groupName = "state", isInverted, className, }) => {
     const fillClassMap = {
         wrapper: {
-            normal: "group-hover/wrapper:bg-fill-hovered bg-fill-default group-active/wrapper:bg-fill-pressed group-aria-selected/wrapper:bg-fill-selected",
-            invert: "group-hover/wrapper:bg-fill-invert-hovered group-active/wrapper:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/wrapper:bg-fill-invert-selected",
+            normal: "group-hover/wrapper:bg-fill-hovered bg-fill-default group-active/wrapper:bg-fill-pressed group-data-[focused=true]/wrapper:bg-fill-selected",
+            invert: "group-hover/wrapper:bg-fill-invert-hovered group-active/wrapper:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/wrapper:bg-fill-invert-selected",
         },
         item: {
-            normal: "group-hover/item:bg-fill-hovered bg-fill-default group-active/item:bg-fill-pressed group-aria-selected/item:bg-fill-selected",
-            invert: "group-hover/item:bg-fill-invert-hovered group-active/item:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/item:bg-fill-invert-selected",
+            normal: "group-hover/item:bg-fill-hovered bg-fill-default group-active/item:bg-fill-pressed group-data-[focused=true]/item:bg-fill-selected",
+            invert: "group-hover/item:bg-fill-invert-hovered group-active/item:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/item:bg-fill-invert-selected",
         },
         option: {
-            normal: "group-hover/option:bg-fill-hovered bg-fill-default group-active/option:bg-fill-pressed group-aria-selected/option:bg-fill-selected",
-            invert: "group-hover/option:bg-fill-invert-hovered group-active/option:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/option:bg-fill-invert-selected",
+            normal: "group-hover/option:bg-fill-hovered bg-fill-default group-active/option:bg-fill-pressed group-data-[focused=true]/option:bg-fill-selected",
+            invert: "group-hover/option:bg-fill-invert-hovered group-active/option:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/option:bg-fill-invert-selected",
         },
         tab: {
-            normal: "group-hover/tab:bg-fill-hovered bg-fill-default group-active/tab:bg-fill-pressed group-aria-selected/tab:bg-fill-selected",
-            invert: "group-hover/tab:bg-fill-invert-hovered group-active/tab:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/tab:bg-fill-invert-selected",
+            normal: "group-hover/tab:bg-fill-hovered bg-fill-default group-active/tab:bg-fill-pressed group-data-[focused=true]/tab:bg-fill-selected",
+            invert: "group-hover/tab:bg-fill-invert-hovered group-active/tab:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/tab:bg-fill-invert-selected",
         },
         chip: {
-            normal: "group-hover/chip:bg-fill-hovered bg-fill-default group-active/chip:bg-fill-pressed group-aria-selected/chip:bg-fill-selected",
-            invert: "group-hover/chip:bg-fill-invert-hovered group-active/chip:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/chip:bg-fill-invert-selected",
+            normal: "group-hover/chip:bg-fill-hovered bg-fill-default group-active/chip:bg-fill-pressed group-data-[focused=true]/chip:bg-fill-selected",
+            invert: "group-hover/chip:bg-fill-invert-hovered group-active/chip:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/chip:bg-fill-invert-selected",
         },
         state: {
-            normal: "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-aria-selected/state:bg-fill-selected",
-            invert: "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/state:bg-fill-invert-selected",
+            normal: "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-data-[focused=true]/state:bg-fill-selected",
+            invert: "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-data-[focused=true]/state:bg-fill-invert-selected",
         },
     };
     const group = groupName || "state";
@@ -12102,6 +12100,9 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
     return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0 rounded-[inherit]", actionClass, className) }));
 };
 
+const RADIO_GROUP_ORIENTAIONS = {
+    HORIZONTAL: "horizontal"};
+
 const RadioGroupContext = React.createContext({ value: "", disabled: false });
 /**
  * 라디오 버튼 그룹을 생성하는 컴포넌트입니다.<br/>
@@ -12127,9 +12128,42 @@ const RadioGroup = React.forwardRef(({ className, orientation = "vertical", ...r
 const RadioItem = React.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
     const { id, value, disabled, className, ...restProps } = rest;
     const randomId = id ?? React.useId();
+    const internalRef = React.useRef(null);
     const isSelected = React.useContext(RadioGroupContext).value === value;
     const isDisabled = React.useContext(RadioGroupContext).disabled || disabled || false;
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 cursor-pointer bg-transparent border-none py-1 pr-2 group/state relative", wrapperClassName), children: [jsxRuntime.jsx(Item2, { ...restProps, id: randomId, ref: ref, value: value, disabled: isDisabled, className: cn("bg-transparent border-none p-1.5 flex items-center outline-none justify-center cursor-pointer", className), children: isDisabled ? (jsxRuntime.jsx(CircleBackslashIcon, { className: "text-comp-disabled" })) : isSelected ? (jsxRuntime.jsx(RadiobuttonIcon, { className: "text-comp-mono-default" })) : (jsxRuntime.jsx(CircleIcon, { className: "text-comp-mono-default" })) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", isDisabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: randomId, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(isDisabled &&
+    // ref를 callback ref로 병합
+    const setRef = React.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // 모든 radio item이 Tab 키로 focus를 받을 수 있도록 tabIndex={0} 설정
+    // Radix UI가 내부적으로 tabindex를 관리할 수 있으므로 MutationObserver로 변경 감지
+    React.useEffect(() => {
+        const el = internalRef.current;
+        if (!el || isDisabled)
+            return;
+        // 포커스 가능하도록 강제
+        el.tabIndex = 0;
+        // Radix가 roving focus로 tabindex를 변경하는 상황 되돌리기
+        const observer = new MutationObserver((mutations) => {
+            for (const m of mutations) {
+                if (m.attributeName === "tabindex" && el.tabIndex !== 0) {
+                    el.tabIndex = 0;
+                }
+            }
+        });
+        observer.observe(el, {
+            attributes: true,
+            attributeFilter: ["tabindex"],
+        });
+        return () => observer.disconnect();
+    }, [isDisabled]);
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 cursor-pointer bg-transparent border-none py-1 pr-2 group/state relative", wrapperClassName), children: [jsxRuntime.jsx(Item2, { ...restProps, id: randomId, ref: setRef, value: value, disabled: isDisabled, tabIndex: isDisabled ? -1 : 0, className: cn("bg-transparent border-none p-1.5 flex items-center outline-none justify-center cursor-pointer focus-visible:outline focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-border-focused rounded-full", className), children: isDisabled ? (jsxRuntime.jsx(CircleBackslashIcon, { className: "text-comp-disabled" })) : isSelected ? (jsxRuntime.jsx(RadiobuttonIcon, { className: "text-comp-mono-default" })) : (jsxRuntime.jsx(CircleIcon, { className: "text-comp-mono-default" })) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", isDisabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: randomId, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(isDisabled &&
                     "bg-fill-disabled group-hover/state:bg-fill-disabled group-active/state:bg-fill-disabled") })] }));
 });
 RadioGroup.displayName = "RadioGroup";
@@ -12354,7 +12388,13 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
         const newValue = !currentChecked;
         onCheckedChange(newValue);
     };
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", !disabled && "cursor-pointer", wrapperClassName), onClick: handleWrapperClick, children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(disabled
+    const getAriaChecked = (defaultChecked, checked, isChecked) => {
+        const value = defaultChecked ? checked : isChecked;
+        if (value === "indeterminate")
+            return "mixed";
+        return value;
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", !disabled && "cursor-pointer", wrapperClassName), onClick: handleWrapperClick, children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, "aria-checked": getAriaChecked(!!defaultChecked, checked, isChecked), className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-border-focused focus-visible:outline-solid rounded-sm", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(disabled
                     ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
                     : "") })] }));
 });
@@ -12438,6 +12478,33 @@ const DialogBody = ({ className, ...rest }) => {
     return jsxRuntime.jsx(CardContent, { className: className, children: rest.children });
 };
 
+/**
+ * 전역 포커스 가시성 제어 훅
+ *
+ * - 마우스 클릭 시: body.using-mouse 추가 → outline 제거
+ * - Tab 키로 이동 시: using-mouse 제거 → outline 정상 표시
+ *
+ * Telepix-UI의 focus-visible outline 정책을 보완하기 위해 사용.
+ */
+function useFocusVisibleMode() {
+    React.useEffect(() => {
+        const handleMouseDown = () => {
+            document.body.classList.add("using-mouse");
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === "Tab") {
+                document.body.classList.remove("using-mouse");
+            }
+        };
+        window.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+}
+
 const SELECT_TRIGGER_VARIANTS = {
     OUTLINE: "outline",
     GHOST: "ghost",
@@ -12462,19 +12529,20 @@ const SELECT_TRIGGER_SIZES = {
  * <Select>
  *   <SelectTrigger placeholder="Select an option" />
  *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *     <SelectItem value="option3">Option 3</SelectItem>
+ *     <SelectItem value="option1" textValue="Option 1"></SelectItem>
+ *     <SelectItem value="option2" textValue="Option 2"></SelectItem>
+ *     <SelectItem value="option3" textValue="Option 3"></SelectItem>
  *   </SelectContent>
  * </Select>
  */
 const Select = (props) => jsxRuntime.jsx(Root2, { ...props });
 const SelectTrigger = ({ placeholder, textValue, variant = "outline", size = "regular", icon, ...rest }) => {
     const { className, ...otherProps } = rest;
-    return (jsxRuntime.jsxs(Trigger$1, { className: cn("relative group/state flex items-center justify-between w-full bg-page-l-null outline-none cursor-pointer text-comp-mono-default data-[placeholder]:not-disabled:text-comp-mono-subtle-default data-disabled:text-comp-disabled rounded-md", variant === SELECT_TRIGGER_VARIANTS.OUTLINE &&
-            "border border-border-bound [&:not(:is([data-placeholder]))]:border-border-focused data-disabled:border-transparent py-0 px-2", variant === SELECT_TRIGGER_VARIANTS.GHOST &&
-            "border border-transparent py-0 px-2 [&:not(:is([data-placeholder]))]:border-border-focused data-disabled:border-transparent", variant === SELECT_TRIGGER_VARIANTS.FILLED &&
-            "border border-transparent py-0 px-2 bg-page-l3 [&:not(:is([data-placeholder]))]:border-border-focused [&:not(:is([data-placeholder]))]:bg-page-l2 data-disabled:border-transparent data-disabled:bg-page-l-null", size === SELECT_TRIGGER_SIZES.COMPACT &&
+    useFocusVisibleMode();
+    return (jsxRuntime.jsxs(Trigger$1, { className: cn("select-trigger-focus-visible relative group/state flex items-center justify-between w-full bg-page-l-null outline-none cursor-pointer text-comp-mono-default data-[placeholder]:not-disabled:text-comp-mono-subtle-default data-disabled:text-comp-disabled rounded-md focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-border-focused focus-visible:outline-solid", variant === SELECT_TRIGGER_VARIANTS.OUTLINE &&
+            "border border-border-bound data-[state='open']:border-border-focused data-disabled:border-transparent py-0 px-2", variant === SELECT_TRIGGER_VARIANTS.GHOST &&
+            "border border-transparent py-0 px-2 data-[state='open']:border-border-focused data-disabled:border-transparent", variant === SELECT_TRIGGER_VARIANTS.FILLED &&
+            "border border-transparent py-0 px-2 bg-page-l3 data-[state='open']:border-border-focused data-[state='open']:bg-page-l2 data-disabled:border-transparent data-disabled:bg-page-l-null", size === SELECT_TRIGGER_SIZES.COMPACT &&
             "py-1.5 px-1 text-label font-medium leading-label-compact gap-1", size === SELECT_TRIGGER_SIZES.REGULAR &&
             "py-1.5 px-2 text-body font-medium leading-body-compact gap-2", size === SELECT_TRIGGER_SIZES.LARGE &&
             "py-3 px-4 text-base leading-base-compact font-medium gap-3", className), ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder, asChild: !!textValue, children: textValue && jsxRuntime.jsx("span", { children: textValue }) }), jsxRuntime.jsx(Icon$1, { className: "flex items-center justify-center text-comp-mono-default group-disabled/state:text-comp-disabled", children: jsxRuntime.jsx(CaretDownIcon, {}) }), jsxRuntime.jsx(StateColorContainer, { className: "group-data-disabled/state:bg-fill-default" })] }));
@@ -12492,8 +12560,19 @@ const SelectSeparator = (props) => {
 };
 const SelectItem = ({ indicator, ...rest }) => {
     const { className, textValue, ...otherProps } = rest;
-    return (jsxRuntime.jsxs(Item, { className: cn(`relative group/state flex items-center justify-between gap-2 py-1.5 px-2 cursor-pointer text-comp-mono-default text-body font-medium leading-body-compact outline-none rounded-sm 
-        [&:is([data-disabled])]:text-comp-disabled [&:is([data-disabled])]:cursor-not-allowed
+    return (jsxRuntime.jsxs(Item, { className: cn(`select-item-focus-visible relative group/state flex items-center justify-between gap-2 py-1.5 px-2 rounded-sm cursor-pointer text-body font-medium text-comp-mono-default outline-none
+        [&:is([data-disabled])]:cursor-not-allowed 
+        [&:is([data-disabled])]:text-comp-disabled
+        focus:outline-none
+        focus-visible:outline-none 
+        focus-visible:[&::after]:content-[''] 
+        focus-visible:[&::after]:absolute 
+        focus-visible:[&::after]:inset-0 
+        focus-visible:[&::after]:rounded-[inherit] 
+        focus-visible:[&::after]:border 
+        focus-visible:[&::after]:border-border-focused 
+        focus-visible:[&::after]:pointer-events-none 
+        focus-visible:[&::after]:z-10
         `, className), ...otherProps, children: [jsxRuntime.jsx(ItemText, { children: textValue ?? otherProps.value }), indicator && (jsxRuntime.jsx(ItemIndicator, { className: "w-4 flex items-center justify-center", children: indicator })), jsxRuntime.jsx(StateColorContainer, { className: "group-data-disabled/state:bg-fill-default" })] }));
 };
 Select.displayName = "Select";
@@ -12533,7 +12612,7 @@ const VerticalMenus = React.forwardRef(({ disabled, value, onValueChange, classN
 });
 const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
     const context = React.useContext(VerticalMenusContext);
-    const isSelected = context.value === value;
+    const isFocused = context.value === value;
     const isDisabled = context.disabled || disabled || false;
     const onClick = (e) => {
         if (isDisabled)
@@ -12543,9 +12622,9 @@ const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant =
         context.setSelectedMenu?.(value);
         rest.onClick?.(e);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("group/state relative w-full flex items-center rounded-md text-body leading-body-compact font-medium bg-transparent border-none cursor-pointer data-[selected=true]:font-semibold data-disabled:text-comp-disabled text-comp-mono-default", size === VERTICAL_MENU_SIZES.SMALL && "gap-3 p-1", size === VERTICAL_MENU_SIZES.REGULAR && "gap-[18px] p-2.5", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
-            `bg-page-l-null data-[selected=true]:bg-page-accent-l0 data-[selected=true]:text-comp-accent-default`, rest.className), ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, "aria-selected": isSelected, onClick: onClick, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, { className: cn("group-disabled/state:bg-fill-default", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
-                    "group-aria-selected:bg-fill-default") })] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("group/state relative w-full flex items-center rounded-md text-body leading-body-compact font-medium bg-transparent border-none cursor-pointer data-[focused=true]:font-semibold data-disabled:text-comp-disabled text-comp-mono-default", size === VERTICAL_MENU_SIZES.SMALL && "gap-3 p-1", size === VERTICAL_MENU_SIZES.REGULAR && "gap-[18px] p-2.5", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
+            `bg-page-l-null data-[focused=true]:bg-page-accent-l0 data-[focused=true]:text-comp-accent-default`, rest.className), ...rest, disabled: isDisabled, value: value, "data-focused": isFocused, onClick: onClick, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, { className: cn("group-disabled/state:bg-fill-default", variant === VERTICAL_MENU_VARIANTS.ACCENT &&
+                    "group-data-[focused=true]/state:bg-fill-default") })] }));
 });
 VerticalMenu.displayName = "VerticalMenu";
 
@@ -12570,18 +12649,18 @@ const HorizontalTabs = React.forwardRef(({ disabled, value, onValueChange, class
             value: selectedTab,
             disabled: disabled ?? false,
             setSelectedTab,
-        }, children: jsxRuntime.jsx("div", { ref: ref, className: cn("flex items-center justify-start w-full", className), ...rest, children: rest.children }) }));
+        }, children: jsxRuntime.jsx("div", { ref: ref, role: "tablist", "aria-orientation": "horizontal", className: cn("flex items-center justify-start w-full", className), ...rest, children: rest.children }) }));
 });
 const HorizontalTab = React.forwardRef(({ value, label, className, icon, size = "regular", ...rest }, ref) => {
     const { value: selectedTab, setSelectedTab, disabled, } = React.useContext(HorizontalTabContext);
-    const isSelected = selectedTab === value;
+    const isFocused = selectedTab === value;
     const isDisabled = disabled || rest.disabled;
     const handleClick = () => {
         if (isDisabled)
             return;
         setSelectedTab(value);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("relative group/state p-0 flex flex-col items-center justify-center flex-nowrap text-comp-mono-subtle-default text-body font-medium leading-body-compact bg-transparent border-none cursor-pointer disabled:cursor-not-allowed", isSelected && "font-bold", className), onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, "aria-selected": isSelected, ...rest, children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-2", size === HORIZONTAL_TAB_SIZES.SMALL && "py-1 px-2", size === HORIZONTAL_TAB_SIZES.REGULAR && "py-2.5 px-2"), children: [icon && (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-5", size === HORIZONTAL_TAB_SIZES.SMALL && "size-4"), children: icon })), label] }), jsxRuntime.jsx("div", { className: cn("bg-comp-mono-subtle-default mt-[3px] h-[1px] w-full", isSelected && "h-0.5 mt-0.5"), "data-selected": isSelected }), jsxRuntime.jsx(StateColorContainer, { className: "group-aria-selected/state:bg-fill-default" })] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, role: "tab", type: "button", className: cn("relative group/state p-0 flex flex-col items-center justify-center flex-nowrap text-comp-mono-subtle-default text-body font-medium leading-body-compact bg-transparent border-none cursor-pointer disabled:cursor-not-allowed  focus-visible:outline focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-border-focused", isFocused && "font-bold", className), onClick: handleClick, disabled: isDisabled, "data-focused": isFocused, "aria-controls": `tabpanel-${value}`, id: `tab-${value}`, tabIndex: isFocused ? 0 : -1, ...rest, children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-2", size === HORIZONTAL_TAB_SIZES.SMALL && "py-1 px-2", size === HORIZONTAL_TAB_SIZES.REGULAR && "py-2.5 px-2"), children: [icon && (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-5", size === HORIZONTAL_TAB_SIZES.SMALL && "size-4"), children: icon })), label] }), jsxRuntime.jsx("div", { className: cn("bg-comp-mono-subtle-default mt-[3px] h-[1px] w-full", isFocused && "h-0.5 mt-0.5"), "data-focused": isFocused }), jsxRuntime.jsx(StateColorContainer, { className: "group-data-[focused=true]/state:bg-fill-default" })] }));
 });
 
 const ModeTabContext = React.createContext({
@@ -12604,14 +12683,14 @@ const ModeTabs = React.forwardRef(({ disabled, value, onValueChange, className,
 });
 const ModeTab = React.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
     const { value: selectedTab, disabled, setSelectedTab, } = React.useContext(ModeTabContext);
-    const isSelected = selectedTab === value;
+    const isFocused = selectedTab === value;
     const isDisabled = disabled || rest.disabled;
     const handleClick = () => {
         if (isDisabled)
             return;
         setSelectedTab(value);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("relative group/state shadow-basic px-2 py-1 flex items-center justify-center gap-2.5 flex-1 text-comp-mono-subtle-default aria-selected:text-comp-mono-default text-body leading-body-compact font-medium cursor-pointer bg-transparent border-none rounded-sm hover:text-comp-mono-subtle-hovered active:text-comp-mono-subtle-pressed", isSelected && "bg-page-l0", isDisabled && "text-comp-disabled cursor-not-allowed", className), "data-selected": isSelected, "aria-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, {})] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("relative group/state shadow-basic px-2 py-1 flex items-center justify-center gap-2.5 flex-1 text-comp-mono-subtle-default data-[focused=true]:text-comp-mono-default text-body leading-body-compact font-medium cursor-pointer bg-transparent border-none rounded-sm hover:text-comp-mono-subtle-hovered active:text-comp-mono-subtle-pressed", isFocused && "bg-page-l0", isDisabled && "text-comp-disabled cursor-not-allowed", className), "data-focused": isFocused, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-5", children: icon })), label, jsxRuntime.jsx(StateColorContainer, {})] }));
 });
 
 const TOOLTIP_SHORT_VARIANTS = {
@@ -12651,34 +12730,13 @@ const TooltipHeader = React.forwardRef((props, ref) => {
 });
 const TooltipDescription = React.forwardRef((props, ref) => {
     const { className, ...otherProps } = props;
-    return (jsxRuntime.jsx("div", { className: cn("text-body leading-body font-normal text-comp-mono-subtle-default", className), ...otherProps, ref: ref, children: props.children }));
+    return (jsxRuntime.jsx("div", { className: cn("text-body leading-body font-normal text-inherit", className), ...otherProps, ref: ref, children: props.children }));
 });
 const TooltipFooter = React.forwardRef((props, ref) => {
     const { className, ...otherProps } = props;
     return (jsxRuntime.jsx("div", { className: cn("flex items-center justify-between pt-4", className), ...otherProps, ref: ref, children: props.children }));
 });
 
-const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, useSelectedStyle = false, ...props }, ref) => {
-    const [isSelected, setIsSelected] = React.useState(false);
-    const handleClick = (event) => {
-        if (useSelectedStyle)
-            setIsSelected((prev) => !prev);
-        onClick?.(event);
-    };
-    const handleDeleteClick = (event) => {
-        event.stopPropagation();
-        onDeleteClick?.(value, event);
-    };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent relative group/state", variant === "filled" &&
-            `bg-page-l4 text-comp-mono-subtle-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, variant === "accent" &&
-            `bg-page-accent-l0 text-comp-accent-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, size === "regular" &&
-            "text-body font-medium leading-body-compact px-2 py-1 gap-2", size === "small" &&
-            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, "aria-selected": isSelected, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-comp-mono-default group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) })), jsxRuntime.jsx(StateColorContainer, { className: cn(useSelectedStyle
-                    ? ""
-                    : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
-});
-Tag.displayName = "Tag";
-
 const TEXT_VARIANTS = {
     BOLD3XLARGEBOLD: "bold3XLargeBold",
     BOLD2XLARGEBOLDCOMPACT: "bold2XLargeBoldCompact",
@@ -12927,25 +12985,53 @@ const Input = React.forwardRef(({ size = "regular", variant = "outlined", leftIc
             ref.current = node;
         innerRef.current = node;
     };
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg border bg-Page-l-null border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", variant === INPUT_VARIANTS.OUTLINED &&
+    const generatedId = React.useId();
+    const inputId = locale.id ?? `input-${generatedId}`;
+    useFocusVisibleMode();
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg border bg-Page-l-null border-border-bound has-[input:disabled]:border-transparent has-input-focus-visible", variant === INPUT_VARIANTS.OUTLINED &&
                     "border border-border-bound focus-within:border-border-focused", variant === INPUT_VARIANTS.FILLED &&
-                    "bg-page-l3 border-transparent focus-within:border-transparent", size === INPUT_SIZES.SMALL &&
+                    "bg-page-l3 border-transparent focus-within:border-border-focused", size === INPUT_SIZES.SMALL &&
                     "py-1.5 px-2 text-label leading-label-compact font-medium gap-1", size === INPUT_SIZES.REGULAR &&
                     "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
                     "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", isError &&
-                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), onClick: () => {
+                    "border-comp-chroma-error focus-within:border-comp-chroma-error focus-within:outline-comp-chroma-error", wrapperClassName), onClick: () => {
                     innerRef.current?.focus();
-                }, children: [jsxRuntime.jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: mergedRef, className: cn("border-none outline-none p-0 flex-1 bg-transparent min-w-0 text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
+                }, children: [jsxRuntime.jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { id: inputId.toString(), ref: mergedRef, "aria-invalid": isError, "aria-describedby": isError && errorMessage
+                            ? `${rest.id || "input"}-error`
+                            : undefined, className: cn("border-none outline-none p-0 flex-1 bg-transparent min-w-0 text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled focus-visible:outline-none", useHoverStyle &&
                             "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.SMALL &&
                             "text-label leading-label-compact font-medium", size === INPUT_SIZES.REGULAR &&
                             "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
                             "text-base leading-base-compact font-medium", isError &&
                             "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.type === "number" &&
                             !useIndicator &&
-                            "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-chroma-error mt-2", children: errorMessage }))] }));
+                            "[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsxRuntime.jsx(Text, { id: `${inputId}-error`, variant: "medLabelMedCompact", className: "text-comp-chroma-error mt-2", role: "alert", "aria-live": "polite", children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
+const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, useSelectedStyle = false, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const handleClick = (event) => {
+        if (useSelectedStyle)
+            setIsFocused((prev) => !prev);
+        onClick?.(event);
+    };
+    const handleDeleteClick = (event) => {
+        event.stopPropagation();
+        onDeleteClick?.(value, event);
+    };
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent relative group/state", variant === "filled" &&
+            `bg-page-l4 text-comp-mono-subtle-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, variant === "accent" &&
+            `bg-page-accent-l0 text-comp-accent-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, size === "regular" &&
+            "text-body font-medium leading-body-compact px-2 py-1 gap-2", size === "small" &&
+            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-focused": isFocused, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: cn("flex-1 truncate text-inherit text-size-inherit font-inherit", size === "small" &&
+                    "leading-[calc(var(--spacing-label-compact)+3px)]", size === "regular" &&
+                    "leading-[calc(var(--spacing-body-compact)+3px)]"), children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-inherit group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) })), jsxRuntime.jsx(StateColorContainer, { className: cn(useSelectedStyle
+                    ? ""
+                    : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
+});
+Tag.displayName = "Tag";
+
 const MULTIPLE_SELECT_SIZES = {
     REGULAR: "regular",
     LARGE: "large",
@@ -12982,7 +13068,7 @@ const MultipleSelect = React.forwardRef(({ open, onOpenChange, disabled, value,
 });
 const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ...rest }, ref) => {
     const { className, onClick, ...otherProps } = rest;
-    const { disabled, values, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
+    const { disabled, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
     const handleTriggerClick = (e) => {
         e.stopPropagation();
         if (disabled)
@@ -12991,7 +13077,7 @@ const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ..
         setIsOpen(value);
         onClick?.(e);
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("relative group/state flex items-center justify-between rounded-lg cursor-pointer border border-border-bound bg-page-l-null text-comp-mono-default aria-selected:border-border-focused", disabled && "border-transparent cursor-not-allowed", size === MULTIPLE_SELECT_SIZES.REGULAR && "py-1.5 px-3 gap-2", size === MULTIPLE_SELECT_SIZES.LARGE && "py-3 pr-4 pl-3 gap-3", className), "data-disabled": disabled, "data-selected": isOpen, "aria-selected": isOpen, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 text-comp-mono-default", children: jsxRuntime.jsx(ChevronDown, { size: 16 }) }), jsxRuntime.jsx(StateColorContainer, { className: "group-aria-selected/state:bg-fill-default" })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("relative group/state flex items-center justify-between rounded-lg cursor-pointer border border-border-bound bg-page-l-null text-comp-mono-default data-[focused=true]:border-border-focused", disabled && "border-transparent cursor-not-allowed", size === MULTIPLE_SELECT_SIZES.REGULAR && "py-1.5 px-3 gap-2", size === MULTIPLE_SELECT_SIZES.LARGE && "py-3 pr-4 pl-3 gap-3", className), "data-disabled": disabled, "data-focused": isOpen, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 text-comp-mono-default", children: jsxRuntime.jsx(ChevronDown, { size: 16 }) }), jsxRuntime.jsx(StateColorContainer, { className: "group-data-[focused=true]/state:bg-fill-default" })] }));
 });
 const MultipleSelectValue = React.forwardRef(({ placeholder, className, ...rest }, ref) => {
     const { values, disabled, setSelectedValues } = React.useContext(MultipleSelectContext);
@@ -13049,18 +13135,18 @@ const MultipleSelectContent = React.forwardRef(({ useSearch, options: optionsPro
 });
 const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...rest }, ref) => {
     const { values, setSelectedValues } = React.useContext(MultipleSelectContext);
-    const isSelected = values.some((val) => val.value === option.value);
+    const isFocused = values.some((val) => val.value === option.value);
     const handleClick = (e) => {
         e.stopPropagation();
         if (option.disabled)
             return;
-        const newValues = isSelected
+        const newValues = isFocused
             ? values.filter((val) => val.value !== option.value)
             : [...values, option];
         setSelectedValues(newValues);
     };
-    return (jsxRuntime.jsxs("li", { ref: ref, "data-selected": isSelected, "aria-selected": isSelected, "data-disabled": option.disabled, className: cn("group/state relative py-2 px-3 cursor-pointer flex items-center justify-between gap-2 text-body text-comp-mono-default leading-body-compact font-medium rounded-sm", isSelected && "bg-fill-mono-selected text-comp-mono-default", option.disabled &&
-            "bg-fill-disabled text-comp-disabled cursor-not-allowed", className), onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: "flex-1 overflow-ellipsis overflow-x-hidden whitespace-nowrap text-inherit text-size-inherit leading-inherit font-inherit", children: option.label }), indicator && isSelected && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4", children: indicator })), jsxRuntime.jsx(StateColorContainer, {})] }));
+    return (jsxRuntime.jsxs("li", { ref: ref, "data-focused": isFocused, "data-disabled": option.disabled, className: cn("group/state relative py-2 px-3 cursor-pointer flex items-center justify-between gap-2 text-body text-comp-mono-default leading-body-compact font-medium rounded-sm", isFocused && "bg-fill-mono-selected text-comp-mono-default", option.disabled &&
+            "bg-fill-disabled text-comp-disabled cursor-not-allowed", className), onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: "flex-1 truncate text-inherit text-size-inherit leading-[calc(var(--spacing-body-compact)+3px)] h-max font-inherit", children: option.label }), indicator && isFocused && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4", children: indicator })), jsxRuntime.jsx(StateColorContainer, {})] }));
 });
 
 const Table = React.forwardRef(({ className, ...rest }, ref) => {
@@ -13072,8 +13158,8 @@ const TableHeader = React.forwardRef(({ className, ...rest }, ref) => {
 const TableBody = React.forwardRef(({ ...rest }, ref) => {
     return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
 });
-const TableRow = React.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: cn("border-b border-border-divider hover:bg-fill-hovered", isSelected && "bg-fill-selected", !shouldLastBorderRender && "last:border-b-0", className), ...rest }));
+const TableRow = React.forwardRef(({ isFocused, shouldLastBorderRender = true, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("tr", { ref: ref, "data-focused": isFocused, "data-last-border": shouldLastBorderRender, className: cn("border-b border-border-divider hover:bg-fill-hovered", isFocused && "bg-fill-selected", !shouldLastBorderRender && "last:border-b-0", className), ...rest }));
 });
 const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
     return (jsxRuntime.jsx("th", { ref: ref, className: cn("text-body leading-body font-medium py-5 pr-0 pl-9 last:pr-9 align-middle text-comp-mono-subtle-default text-left", className), ...rest, children: jsxRuntime.jsx("div", { className: "overflow-hidden overflow-ellipsis whitespace-nowrap", children: children }) }));
@@ -13101,15 +13187,40 @@ const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = f
     };
     return (jsxRuntime.jsxs(Table, { className: classNames?.table, ref: refs?.tableRef, children: [jsxRuntime.jsx(TableHeader, { className: classNames?.header, ref: refs?.headerRef, children: config.map((col) => (jsxRuntime.jsx(TableHead, { style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, className: classNames?.head, ref: refs?.headRef, children: col.renderHeader
                         ? col.renderHeader(col.header, col.headerKey)
-                        : col.header }, col.header))) }), jsxRuntime.jsx(TableBody, { className: classNames?.body, ref: refs?.bodyRef, children: rowData.length > 0 ? (rowData.map((item, index) => (jsxRuntime.jsx(TableRow, { id: item.randomId, onClick: () => handleRowClick(item, item.randomId), isSelected: selectedRow === item.randomId, shouldLastBorderRender: shouldLastBorderRender, className: classNames?.row, ref: refs?.rowRef, children: config.map((col, colIndex) => (jsxRuntime.jsx(TableCell, { className: classNames?.cell, ref: refs?.cellRef, showTooltip: col.showTooltip, style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, children: col.renderFn(item) || "-" }, colIndex))) }, index)))) : emptyMessage ? (jsxRuntime.jsx(TableRow, { ref: refs?.rowRef, className: classNames?.row, children: jsxRuntime.jsx(TableCell, { colSpan: config.length, className: classNames?.cell, ref: refs?.cellRef, children: emptyMessage }) })) : null })] }));
+                        : col.header }, col.header))) }), jsxRuntime.jsx(TableBody, { className: classNames?.body, ref: refs?.bodyRef, children: rowData.length > 0 ? (rowData.map((item, index) => (jsxRuntime.jsx(TableRow, { id: item.randomId, onClick: () => handleRowClick(item, item.randomId), isFocused: selectedRow === item.randomId, shouldLastBorderRender: shouldLastBorderRender, className: classNames?.row, ref: refs?.rowRef, children: config.map((col, colIndex) => (jsxRuntime.jsx(TableCell, { className: classNames?.cell, ref: refs?.cellRef, showTooltip: col.showTooltip, style: { minWidth: col.minWidth, maxWidth: col.maxWidth }, children: col.renderFn(item) || "-" }, colIndex))) }, index)))) : emptyMessage ? (jsxRuntime.jsx(TableRow, { ref: refs?.rowRef, className: classNames?.row, children: jsxRuntime.jsx(TableCell, { colSpan: config.length, className: classNames?.cell, ref: refs?.cellRef, children: emptyMessage }) })) : null })] }));
 };
 
 const InteractiveListItemContext = React.createContext({
     disabled: false,
 });
-const InteractiveListItem = React.forwardRef(({ isSelected, disabled, showHoverActions = true, children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsxs("div", { ref: ref, "aria-selected": isSelected, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: cn("relative group/wrapper flex items-center gap-1 p-1.5 rounded-sm cursor-pointer text-comp-mono-default bg-page-l-null order border-transparent", isSelected && "bg-fill-mono-selected border-border-selected", disabled &&
-                "cursor-not-allowed text-comp-disabled bg-fill-disabled", className), ...rest, children: [children, jsxRuntime.jsx(StateColorContainer, { groupName: "wrapper" })] }) }));
+const isInteractiveElement = (target) => {
+    return (target instanceof HTMLElement &&
+        ["BUTTON", "INPUT", "TEXTAREA", "SELECT", "A"].includes(target.tagName));
+};
+const InteractiveListItem = React.forwardRef(({ disabled, isSelected, showHoverActions = true, children, className, onClick, onKeyDown, ...rest }, ref) => {
+    const handleClick = (e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+    };
+    const handleKeyboardClick = (e) => {
+        if (disabled)
+            return;
+        onKeyDown?.(e);
+        const target = e.target;
+        if (isInteractiveElement(target))
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.({
+                ...e,
+                type: "click",
+            });
+        }
+    };
+    return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsxs("div", { ref: ref, role: onClick ? "button" : "listitem", tabIndex: onClick && !disabled ? 0 : undefined, "aria-disabled": disabled, "data-disabled": disabled, "data-selected": isSelected, "data-hover-actions": showHoverActions, className: cn("relative group/wrapper flex items-center gap-1 p-1.5 rounded-sm text-comp-mono-default bg-page-l-null border border-transparent", "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-comp-disabled data-[disabled=true]:bg-fill-disabled", onClick &&
+                !disabled &&
+                "cursor-pointer focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-border-focused focus-visible:outline-solid", isSelected && "bg-fill-selected border-border-selected", className), onClick: handleClick, onKeyDown: onClick && !disabled ? handleKeyboardClick : onKeyDown, ...rest, children: [children, jsxRuntime.jsx(StateColorContainer, { groupName: "wrapper" })] }) }));
 });
 const InteractiveListItemIcon = React.forwardRef(({ children, className, ...props }, ref) => {
     return (jsxRuntime.jsx("span", { className: cn("flex items-center justify-center size-6 p-1", className), ...props, ref: ref, children: children }));
@@ -13148,9 +13259,13 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             ...classNames,
         }, components: {
             Dropdown: (props) => {
-                const { options, className, classNames, components, ...rest } = props;
-                const selectedOption = options?.find(({ value }) => value === rest.value);
-                return (jsxRuntime.jsxs("div", { className: cn("group/state flex px-2 py-1 rounded-lg relative cursor-pointer", props["aria-label"]?.includes("Month") ? "w-28" : "w-20"), children: [jsxRuntime.jsx("select", { ...rest, className: cn("text-body leading-body-compact font-medium text-comp-mono-default focus:outline-none z-[1] opacity-0 appearance-none absolute inset-0 w-full", className), name: props["aria-label"], children: options?.map((option) => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }), jsxRuntime.jsxs(Text, { variant: "medBodyMedCompact", className: "flex gap-0.5 items-center justify-end w-full text-comp-mono-default leading-3.5 cursor-pointer", "aria-hidden": true, children: [jsxRuntime.jsx("span", { className: "inline-block px-1 py-1.5 flex-1 text-right", children: selectedOption?.label }), jsxRuntime.jsx(ChevronDown, { size: 16 })] }), jsxRuntime.jsx(StateColorContainer, {})] }));
+                const { options, className, ...rest } = props;
+                return (jsxRuntime.jsxs(Select, { value: rest.value?.toString(), onValueChange: (value) => {
+                        const changeEvent = {
+                            target: { value },
+                        };
+                        rest.onChange?.(changeEvent);
+                    }, children: [jsxRuntime.jsx(SelectTrigger, { variant: "filled", size: "compact", className: cn("px-2 py-1 h-9 gap-1.5 text-body leading-body-compact justify-end", props["aria-label"]?.includes("Month") ? "w-28" : "w-20", className) }), jsxRuntime.jsx(SelectContent, { className: "max-h-96", children: options?.map((option) => (jsxRuntime.jsx(SelectItem, { value: option.value.toString(), textValue: option.label, "aria-selected": option.value === rest.value, className: "aria-[selected=true]:bg-fill-selected" }, option.value))) })] }));
             },
             Chevron: (args) => (jsxRuntime.jsx(ChevronLeft, { ...args, size: 20, "data-orientation": args.orientation, className: "text-comp-mono-default [&:is([data-orientation='right'])]:rotate-180 [&:is([data-orientation='up'])]:rotate-90 [&:is([data-orientation='down'])]:-rotate-90" })),
         }, ...props }));
@@ -13196,25 +13311,25 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
         if (variant === BUTTON_VARIANTS.TEXT_DIM) {
             return [
                 "h-auto py-0.5 px-0 text-body leading-body-compact gap-1.5",
-                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default aria-selected:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
+                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default data-[focused=true]:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
             ];
         }
         const sizeClassName = {
             small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
             regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
-            large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
+            large: "h-12 py-0 px-3 text-base leading-base-compact gap-2",
         }[size];
         const variantClassName = {
             accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
-            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected",
-            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent data-[focused=true]:border-border-selected",
+            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent data-[focused=true]:border-border-selected data-[focused=true]:bg-page-accent-l0 data-[focused=true]:text-comp-accent-default",
             ghost: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled",
             thumbnail_ghost: "bg-page-l-null disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
-            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
-            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
+            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled data-[focused=true]:bg-page-accent-l0 data-[focused=true]:text-comp-accent-default",
+            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled data-[focused=true]:text-comp-mono-default",
+            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent data-[focused=true]:border-border-accent-selected",
             ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
-            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled data-[focused=true]:text-comp-mono-default",
             text_dim: "", // 위에서 처리되므로 여기서는 빈 문자열
         }[variant];
         return [sizeClassName, variantClassName];
@@ -13233,22 +13348,22 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "size-5";
         return "size-6"; // 기본값은 regular 크기
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName })), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, "aria-busy": isLoading, "aria-disabled": disabled ?? isLoading, "aria-pressed": rest["aria-pressed"], className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none border cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-border-focused", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: cn("-inset-px", stateContainerClassName) })), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
-                    "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
+                    "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1 truncate", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
 /**
  * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
  * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
- * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 focused 시 accent 색상으로 강조됩니다.<br/>
  * <br/>
  * ### 사용 예시
  * ```tsx
  * <ButtonTextDim>자세히 보기</ButtonTextDim>
- * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * <ButtonTextDim data-focused="true">포커스됨</ButtonTextDim>
  * ```
  */
 const ButtonTextDim = React.forwardRef((props, ref) => {
@@ -13412,8 +13527,8 @@ const DatePicker = ({ size = "regular", placeholder = DEFAULT_PLACEHOLDER, forma
         }
         return placeholder ?? "";
     };
-    return (jsxRuntime.jsxs(Root2$2, { open: displayOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", "aria-selected": displayOpen, "aria-label": `Date picker, ${getDateToFormatString(displayValue) || placeholder}`, disabled: disabled, stateContainerClassName: displayOpen
-                        ? "group-aria-selected/state:bg-fill-default"
+    return (jsxRuntime.jsxs(Root2$2, { open: displayOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", "data-focused": displayOpen, "aria-label": `Date picker, ${getDateToFormatString(displayValue) || placeholder}`, disabled: disabled, stateContainerClassName: displayOpen
+                        ? "group-data-[focused=true]/state:bg-fill-default"
                         : undefined, children: getDateToFormatString(displayValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === CALENDAR_MODES.SINGLE ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) : mode === CALENDAR_MODES.MULTIPLE ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(displayValue) ? displayValue : [], onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) })] }));
 };
 
@@ -13448,7 +13563,7 @@ const ContextMenuItemIndicator = (props) => {
 
 const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
     const isHighlighted = index === highlightedIndex;
-    return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: cn("rounded-sm p-2 text-comp-mono-default text-body leading-body-compact font-medium list-none hover:bg-fill-hovered", isHighlighted && "bg-fill-selected", className), onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
+    return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: cn("rounded-sm p-2 text-comp-mono-default text-body leading-body-compact font-medium list-none hover:bg-fill-hovered", isHighlighted && "bg-fill-selected", className), onClick: (e) => onClick(item, e), role: "option", "data-focused": isHighlighted, children: displayValue(item)
             .split(new RegExp(`(${inputValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi"))
             .map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsxRuntime.jsx("span", { className: "font-bold text-comp-chroma-error", children: part }, i)) : (jsxRuntime.jsx("span", { children: part }, i))) }));
 };
@@ -13601,6 +13716,67 @@ const Switch = (props) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsxRuntime.jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsxRuntime.jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsxRuntime.jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
 };
 
+/**
+ * RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
+ * @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
+ * @returns Hex 문자열 (예: "#ff0000" 또는 "#ff000080") 또는 유효하지 않은 경우 null.
+ */
+const rgbaToHex = (rgb) => {
+    const match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([^)]+))?\)$/);
+    if (!match)
+        return null;
+    const r = parseInt(match[1], 10);
+    const g = parseInt(match[2], 10);
+    const b = parseInt(match[3], 10);
+    const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+    const clamp = (val) => Math.round(Math.max(0, Math.min(255, val)));
+    const toHex = (n) => clamp(n).toString(16).padStart(2, "0");
+    const getHexAlpha = (alpha) => {
+        if (alpha === undefined || alpha === 1)
+            return "";
+        const alphaVal = Math.round(Math.max(0, Math.min(1, alpha)) * 255);
+        return alphaVal.toString(16).padStart(2, "0");
+    };
+    const hexA = getHexAlpha(a);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
+};
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+const getColorHex = (variable) => {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const varQuery = variable.startsWith("--") ? variable : `--${variable}`;
+    // 값을 해결하기 위한 헬퍼 함수
+    const resolveValue = (val) => {
+        if (!val)
+            return null;
+        if (val.startsWith("#"))
+            return val;
+        if (val.startsWith("rgb"))
+            return rgbaToHex(val);
+        if (val.startsWith("var(")) {
+            const match = val.match(/var\(([^)]+)\)/);
+            if (match && match[1]) {
+                return getColorHex(match[1]);
+            }
+        }
+        return null;
+    };
+    const style = getComputedStyle(document.documentElement);
+    const computedValue = style.getPropertyValue(varQuery).trim();
+    if (computedValue) {
+        const resolved = resolveValue(computedValue);
+        if (resolved)
+            return resolved;
+    }
+    return null;
+};
+
 exports.Autocomplete = Autocomplete;
 exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
@@ -13677,3 +13853,4 @@ exports.VERTICAL_MENU_SIZES = VERTICAL_MENU_SIZES;
 exports.VERTICAL_MENU_VARIANTS = VERTICAL_MENU_VARIANTS;
 exports.VerticalMenu = VerticalMenu;
 exports.VerticalMenus = VerticalMenus;
+exports.getColorHex = getColorHex;