@x-plat/design-system 0.2.3 → 0.2.4

package/dist/components/Table/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps } from '../../colors-BNxEsOY3.js';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps } from '../../colors-cxE7RsuF.js';
 
 interface TableProps {
     className?: string;

package/dist/components/Table/index.js

@@ -177,6 +177,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -189,7 +190,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

package/dist/components/Tag/index.cjs

@@ -949,9 +949,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

package/dist/components/Tag/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps } from '../../colors-BNxEsOY3.cjs';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps } from '../../colors-cxE7RsuF.cjs';
 import React from 'react';
 
 type TagSize = "sm" | "md" | "lg";

package/dist/components/Tag/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps } from '../../colors-BNxEsOY3.js';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps } from '../../colors-cxE7RsuF.js';
 import React from 'react';
 
 type TagSize = "sm" | "md" | "lg";

package/dist/components/Tag/index.js

@@ -923,9 +923,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

package/dist/components/Tooltip/index.cjs

@@ -66,11 +66,12 @@ var Tooltip = (props) => {
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = import_react.default.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

package/dist/components/Tooltip/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps, e as ColorDepth } from '../../colors-BNxEsOY3.cjs';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps, e as ColorDepth } from '../../colors-cxE7RsuF.cjs';
 import React from 'react';
 
 type TooltipColor = Exclude<ColorName<ColorNamespace>, "black" | "white">;

package/dist/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps, e as ColorDepth } from '../../colors-BNxEsOY3.js';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps, e as ColorDepth } from '../../colors-cxE7RsuF.js';
 import React from 'react';
 
 type TooltipColor = Exclude<ColorName<ColorNamespace>, "black" | "white">;

package/dist/components/Tooltip/index.js

@@ -30,11 +30,12 @@ var Tooltip = (props) => {
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = React.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

package/dist/components/index.cjs

@@ -1469,9 +1469,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1494,9 +1495,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1536,11 +1538,12 @@ var Button = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -16165,6 +16168,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -16176,7 +16180,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -16211,11 +16215,12 @@ var Chip = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28089,9 +28094,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28208,9 +28214,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28263,6 +28270,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -28275,7 +28283,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28347,9 +28355,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28398,9 +28407,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28435,6 +28445,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
@@ -28454,7 +28465,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28703,6 +28714,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -28715,7 +28727,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28749,9 +28761,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28921,11 +28934,12 @@ var Tooltip2 = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = import_react39.default.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500

package/dist/components/index.d.cts

@@ -37,5 +37,5 @@ export { Tooltip } from './Tooltip/index.cjs';
 export { Video, VideoProps } from './Video/index.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import '../colors-BNxEsOY3.cjs';
+import '../colors-cxE7RsuF.cjs';
 import '../attributes-DJIWir_0.cjs';

package/dist/components/index.d.ts

@@ -37,5 +37,5 @@ export { Tooltip } from './Tooltip/index.js';
 export { Video, VideoProps } from './Video/index.js';
 import 'react';
 import 'react/jsx-runtime';
-import '../colors-BNxEsOY3.js';
+import '../colors-cxE7RsuF.js';
 import '../attributes-DJIWir_0.js';

package/dist/components/index.js

@@ -1394,9 +1394,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1419,9 +1420,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1461,11 +1463,12 @@ var Button = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -16090,6 +16093,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -16101,7 +16105,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -16136,11 +16140,12 @@ var Chip = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28014,9 +28019,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28133,9 +28139,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28188,6 +28195,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -28200,7 +28208,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28272,9 +28280,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28323,9 +28332,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28360,6 +28370,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -28379,7 +28390,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28628,6 +28639,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -28640,7 +28652,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28674,9 +28686,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28846,11 +28859,12 @@ var Tooltip2 = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = React37.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500