@aloudata/aloudata-design 2.18.3 → 2.19.0-beta.1

package/dist/Checkbox/style/index.less

@@ -1,37 +1,19 @@
 @import '../../style/index.less';
 
-@checkbox-border-color-normal: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@checkbox-border-color-hover: var(
-  --alias-colors-border-accent-gray-subtle-hover,
-  #9ca3af
-);
-@checkbox-border-color-active: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@checkbox-border-color-disabled: var(--alias-colors-border-disabled);
-
-@checkbox-inner-bgc-normal: var(--alias-colors-bg-skeleton-subtler);
-@checkbox-inner-bgc-hover: var(--alias-colors-bg-skeleton-subtler);
-@checkbox-inner-bgc-active: var(--alias-colors-bg-skeleton-strong);
-@checkbox-inner-bgc-disabled: var(--alias-colors-border-disabled);
-
-@checkbox-checked-inner-bgc-normal: var(
-  --alias-colors-bg-selected-strong-default,
-  #126fdd
-);
-@checkbox-checked-inner-bgc-hover: var(
-  --alias-colors-bg-selected-strong-hover,
-  #0f59b1
-);
-@checkbox-checked-inner-bgc-active: var(
-  --alias-colors-bg-selected-strong-press,
-  #0b4385
-);
-@checkbox-checked-inner-bgc-disabled: #f3f4f6;
+@checkbox-border-color-normal: var(--interaction-border-neutral-normal);
+@checkbox-border-color-hover: var(--interaction-border-hover);
+@checkbox-border-color-active: var(--interaction-border-active);
+@checkbox-border-color-disabled: var(--interaction-default-normal);
+
+@checkbox-inner-bgc-normal: var(--interaction-background-form-field);
+@checkbox-inner-bgc-hover: var(--interaction-background-form-field);
+@checkbox-inner-bgc-active: var(--interaction-background-form-field);
+@checkbox-inner-bgc-disabled: var(--interaction-background-form-field);
+
+@checkbox-checked-inner-bgc-normal: var(--interaction-default-normal);
+@checkbox-checked-inner-bgc-hover: var(--interaction-default-hover);
+@checkbox-checked-inner-bgc-active: var(--interaction-default-active);
+@checkbox-checked-inner-bgc-disabled: var(--interaction-default-normal);
 
 @checkout-border-radius: var(--alias-radius-25);
 
@@ -91,7 +73,7 @@
 
       .ant-checkbox-checked.ant-checkbox-disabled {
         .ant-checkbox-inner[class][class] {
-          background: #93c5fd;
+          background: var(--alias-colors-bg-selected-default);
         }
       }
 
@@ -118,8 +100,8 @@
 
     .ant-checkbox-checked.ant-checkbox-disabled {
       .ant-checkbox-inner[class][class] {
-        background: #93c5fd;
-        border: 1px solid rgba(0, 0, 0, 0.2);
+        background: var(--alias-colors-bg-selected-default);
+        border: 1px solid var(--alias-colors-border-disabled);
       }
     }
 
@@ -173,10 +155,11 @@
 
     .ant-checkbox-inner {
       background-color: @checkbox-inner-bgc-disabled;
+      border: 0;
 
       &::after {
-        top: 2px;
-        left: 1px;
+        top: 3px;
+        left: 2px;
         z-index: 10;
         width: 10px;
         height: 8px;

package/dist/Collapse/index.js

@@ -8,10 +8,10 @@ var Collapse = function Collapse(props) {
     expandIcon: function expandIcon(props) {
       return props.isActive ? /*#__PURE__*/React.createElement(ArrowDownLightLine, {
         size: 20,
-        color: "#6B7280"
+        color: 'var(--alias-colors-icon-subtle)'
       }) : /*#__PURE__*/React.createElement(ArrowRightLightLine, {
         size: 20,
-        color: "#6B7280"
+        color: 'var(--alias-colors-icon-subtle)'
       });
     }
   }));

package/dist/Collapse/style/index.less

@@ -6,9 +6,9 @@
 
 .ald-collapse.ant-collapse.ant-collapse {
   border-radius: @border-radius;
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   border-bottom: 0;
-  background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+  background: var(--alias-colors-bg-skeleton-subtle);
 
   .ant-collapse-item {
     .ant-collapse-header {
@@ -19,7 +19,7 @@
       }
 
       .ant-collapse-header-text {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         font-family: 'PingFang SC';
         font-size: 14px;
         line-height: 20px; /* 142.857% */
@@ -30,7 +30,7 @@
       .ant-collapse-content-box {
         padding: @content-default-padding @content-default-padding
           @content-default-padding - 1px @content-default-padding;
-        color: var(--alias-colors-text-subtle, #4b5563);
+        color: var(--alias-colors-text-subtle);
         font-family: 'PingFang SC';
         font-size: 14px;
         line-height: 20px; /* 142.857% */
@@ -39,7 +39,7 @@
 
     &:last-child {
       border-radius: 0 0 @border-radius @border-radius;
-      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
+      border-bottom: 1px solid var(--alias-colors-border-default);
 
       & > .ant-collapse-content {
         overflow: hidden;
@@ -61,7 +61,7 @@
   &.ant-collapse-large {
     .ant-collapse-header {
       .ant-collapse-header-text {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         font-family: 'PingFang SC';
         font-size: 16px;
         line-height: 24px; /* 150% */
@@ -91,7 +91,7 @@
   .ant-collapse-item {
     .ant-collapse-content-box {
       padding: 0 @content-default-padding @content-default-padding 40px;
-      background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+      background: var(--alias-colors-bg-skeleton-subtle);
     }
 
     &:last-child {

package/dist/ColorPicker/index.js

@@ -121,7 +121,7 @@ export default function ColorPicker(_ref) {
         onColorSelect(color);
       },
       style: {
-        borderColor: specialColors.includes(color) ? '#DBDBDB' : color
+        borderColor: specialColors.includes(color) ? 'var(--alias-colors-border-subtle)' : color
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: 'block',
@@ -144,7 +144,7 @@ export default function ColorPicker(_ref) {
         onColorSelect(color);
       },
       style: {
-        borderColor: specialColors.includes(color) ? '#DBDBDB' : color
+        borderColor: specialColors.includes(color) ? 'var(--alias-colors-border-subtle)' : color
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: 'block',
@@ -187,7 +187,7 @@ export default function ColorPicker(_ref) {
       }
     })), /*#__PURE__*/React.createElement(FoldDownFill, {
       size: 14,
-      color: "#575757"
+      color: 'var(--alias-colors-icon-subtle)'
     }))));
   }
   if (mode === 'complex') {

package/dist/ColorPicker/style/complex.less

@@ -2,10 +2,9 @@
   position: relative;
   width: 258px;
   padding: 12px;
-  background-color: #fff;
+  background-color: var(--background-default);
   border-radius: 8px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--elevation-bottom-bottom-lg);
 }
 
 .ald-color-picker-complex {
@@ -56,9 +55,9 @@
   box-sizing: border-box;
   width: 16px;
   height: 16px;
-  border: 2px solid #fff;
+  border: 2px solid var(--background-default);
   border-radius: 50%;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--elevation-bottom-bottom-sm);
 }
 
 .ald-color-picker-complex-handler-sm {
@@ -97,7 +96,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--alias-colors-border-subtle);
   border-radius: 4px;
 }
 
@@ -155,11 +154,11 @@
 .ald-color-picker-complex-trigger-wrapper {
   display: inline-flex;
   padding: 3px;
-  border: 1px solid #d1d5db;
-  background-color: #fff;
+  border: 1px solid var(--alias-colors-border-strong);
+  background-color: var(--background-default);
 
   .ald-color-picker-complex-trigger-inner {
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--alias-colors-border-subtle);
   }
 }
 

package/dist/ColorPicker/style/index.less

@@ -16,21 +16,20 @@
     padding: 6px 10px;
     gap: 4px;
     height: 28px;
-    background: #fff;
-    border: 1px solid
-      var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+    background: var(--background-default);
+    border: 1px solid var(--alias-colors-border-accent-gray-subtle-default);
     box-sizing: border-box;
     cursor: pointer;
     transition: border 0.5s ease-in-out;
     border-radius: 4px;
 
     &:not(.ald-color-picker-wrapper-disabled):hover {
-      border: 1px solid #3271c9;
+      border: 1px solid var(--interaction-border-normal);
     }
   }
 
   .ald-color-picker-wrapper-focused {
-    border: 1px solid #3271c9;
+    border: 1px solid var(--interaction-border-normal);
     box-sizing: border-box;
   }
 
@@ -57,7 +56,7 @@
 .ald-color-picker-overlay {
   position: relative;
   width: 253px;
-  background: #fff;
+  background: var(--background-default);
   box-sizing: border-box;
   border-radius: 2px;
   padding: 8px 7px;
@@ -75,7 +74,7 @@
     width: 21px;
     height: 21px;
     box-sizing: border-box;
-    border: 1px solid #fff;
+    border: 1px solid var(--background-default);
     cursor: pointer;
 
     .block {
@@ -86,7 +85,7 @@
     &.selected,
     &:hover {
       box-sizing: border-box;
-      border: 1px solid #000 !important;
+      border: 1px solid var(--border-neutral-strong) !important;
 
       .block {
         width: 17px;

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -25,7 +25,7 @@ export default function Cell(props) {
     return /*#__PURE__*/React.createElement("div", {
       style: _objectSpread({
         fontStyle: 'italic',
-        color: '#858585'
+        color: 'var(--alias-colors-text-subtle)'
       }, style),
       className: classNames('ald-data-preview-body-cell', 'ald-data-preview-body-cell-null')
     }, "null");

package/dist/DataPreviewTable/style/index.less

@@ -5,7 +5,7 @@
 @import '../../Spin/style/index.less';
 
 .ald-data-preview-table {
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   font-size: 12px;
   font-variant-numeric: lining-nums tabular-nums;
   position: relative;
@@ -27,16 +27,16 @@
 }
 
 .ald-data-preview-header-cell {
-  background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+  background: var(--alias-colors-bg-skeleton-subtle);
   height: 100%;
   position: relative;
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   border-left: none;
   border-top: none;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  color: var(--alias-colors-text-strong, #111827);
+  color: var(--alias-colors-text-strong);
   font-weight: 500;
 
   .ald-data-preview-header-default {
@@ -44,7 +44,7 @@
     height: 100%;
     width: 100%;
     line-height: 24px;
-    background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+    background: var(--alias-colors-bg-skeleton-subtle);
     display: flex;
     align-items: center;
 
@@ -55,7 +55,7 @@
       justify-content: center;
       font-size: 16px;
       margin-right: 4px;
-      color: #575757;
+      color: var(--alias-colors-icon-subtle);
     }
 
     .ald-data-preview-header-name {
@@ -84,13 +84,13 @@
 .ald-data-preview-body-cell {
   white-space: nowrap;
   overflow: hidden;
-  border: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
+  border: 1px solid var(--alias-colors-border-subtle);
   border-left: none;
   border-top: none;
   padding: 2px 4px;
   line-height: 16px;
   box-sizing: border-box;
-  color: var(--alias-colors-text-default, #1f2937);
+  color: var(--alias-colors-text-default);
   font-size: 12px;
 
   &.ald-data-preview-body-cell-custom {
@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e8e8e8;
+  border: 1px solid var(--alias-colors-border-default);
   border-left: none;
   border-top: none;
   padding: 2px 3px 1px 4px;

package/dist/DatePicker/style/index.less

@@ -1,14 +1,14 @@
 @import '../../style/index.less';
 
 .ant-picker.ant-picker {
-  border-color: #dbdbdb;
+  border-color: var(--alias-colors-border-default);
 
   &:hover {
-    border-color: #dbdbdb;
+    border-color: var(--alias-colors-border-default);
   }
 
   &.ant-picker-focused {
-    border-color: #3271c9;
+    border-color: var(--interaction-border-normal);
     box-shadow: none;
   }
 }

package/dist/Divider/style/index.less

@@ -10,7 +10,7 @@
     width: 100%;
     height: 100%;
     content: '';
-    background-color: #e5e7eb;
+    background-color: var(--border-default);
     mix-blend-mode: multiply;
   }
 

package/dist/DoubleCircleIcon/style/index.less

@@ -8,7 +8,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background-color: @B95;
+  background-color: var(--background-informative-subtle);
 
   .inner {
     font-family: 'PingFang SC';
@@ -18,38 +18,38 @@
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    background-color: @B90;
+    background-color: var(--background-informative-on-subtle);
   }
 }
 
 .ald-double-circle-icon-info {
-  background-color: @B95;
+  background-color: var(--background-informative-subtle);
 
   .inner {
-    background-color: @B90;
+    background-color: var(--background-informative-on-subtle);
   }
 }
 
-.ald-double-circle-icon-success{
-  background-color: @SA95;
+.ald-double-circle-icon-success {
+  background-color: var(--background-positive-subtle);
 
   .inner {
-    background-color: @SA90;
+    background-color: var(--background-positive-on-subtle);
   }
 }
 
 .ald-double-circle-icon-error {
-  background-color: @SC95;
+  background-color: var(--background-negative-subtle);
 
   .inner {
-    background-color: @SC90;
+    background-color: var(--background-negative-on-subtle);
   }
 }
 
 .ald-double-circle-icon-warning {
-  background-color: @SB95;
+  background-color: var(--background-warning-subtle);
 
   .inner {
-    background-color: @SB90;
+    background-color: var(--background-warning-on-subtle);
   }
-}
+}

package/dist/Empty/style/index.less

@@ -24,7 +24,7 @@
   }
 
   .ald-empty-title {
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--content-primary);
     font-size: 14px;
     line-height: 24px;
     margin-bottom: 4px;
@@ -32,13 +32,13 @@
   }
 
   .ald-empty-title-small {
-    color: #4b5563;
+    color: var(--content-secondary);
     font-weight: 400;
     font-size: 14px;
   }
 
   .ald-empty-description {
-    color: #4b5563;
+    color: var(--content-secondary);
     font-size: 12px;
     line-height: 20px;
     font-weight: 400;

package/dist/Form/style/index.less

@@ -27,7 +27,7 @@
       label {
         overflow: hidden;
         height: 32px;
-        color: var(--alias-colors-text-subtle, #4b5563);
+        color: var(--alias-colors-text-subtle);
         font-weight: 500;
         line-height: 20px;
 
@@ -38,13 +38,13 @@
         }
 
         .ant-form-item-tooltip {
-          margin-left: var(--alias-spacing-25, 2px);
+          margin-left: var(--alias-spacing-25);
         }
 
         &.ant-form-item-required::before {
           width: 8px;
-          margin-right: var(--alias-spacing-25, 2px);
-          color: var(--alias-colors-text-danger, #b91c1c);
+          margin-right: var(--alias-spacing-25);
+          color: var(--alias-colors-text-danger);
           text-align: right;
           font-size: 14px;
           font-weight: 500;

package/dist/HighlightText/style/index.less

@@ -1,5 +1,5 @@
 @import '../../style/index.less';
 
 .ald-highlight-text {
-  color: var(--alias-colors-text-danger, #b91c1c);
+  color: var(--content-negative-secondary);
 }

package/dist/Icon/components/CancelledCircleFill.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/CancelledCircleFill.js

@@ -24,7 +24,7 @@ var CancelledCircleFill = function CancelledCircleFill(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     d: "M1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm5.976-.833a.833.833 0 1 0 0 1.666h4.714a.833.833 0 0 0 0-1.666H7.643Z",
     clipRule: "evenodd"

package/dist/Icon/components/Ellipsis.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/Ellipsis.js

@@ -24,7 +24,7 @@ var Ellipsis = function Ellipsis(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     d: "M5.008 10.359a.833.833 0 0 0-.833-.834h-.008a.833.833 0 0 0-.834.834v.008c0 .46.373.833.834.833h.008c.46 0 .833-.373.833-.833v-.008Zm5-.834c.46 0 .834.373.834.834v.008c0 .46-.373.833-.834.833H10a.833.833 0 0 1-.833-.833v-.008c0-.46.373-.834.833-.834h.008Zm5.834 0c.46 0 .833.373.833.834v.008c0 .46-.373.833-.833.833h-.009a.833.833 0 0 1-.833-.833v-.008c0-.46.373-.834.833-.834h.009Z",
     clipRule: "evenodd"

package/dist/Icon/components/LoadingDuotone.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/LoadingDuotone.js

@@ -24,7 +24,7 @@ var LoadingDuotone = function LoadingDuotone(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {

package/dist/Icon/components/SortAscendingOrderColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortAscendingOrderColor.js

@@ -27,7 +27,7 @@ var SortAscendingOrderColor = function SortAscendingOrderColor(_ref, ref) {
     fill: "#2986F4",
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z"
   }));
 };

package/dist/Icon/components/SortColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortColor.js

@@ -24,7 +24,7 @@ var SortColor = function SortColor(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585ZM15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z"
   }));
 };

package/dist/Icon/components/SortDescendingOrderColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortDescendingOrderColor.js

@@ -24,7 +24,7 @@ var SortDescendingOrderColor = function SortDescendingOrderColor(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#2986F4",

package/dist/Icon/svg/Cancelled-Circle-fill.svg

@@ -1,5 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Fill / Interface /Cancelled-Circle-fill">
-<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M1.66675 9.9999C1.66675 5.39753 5.39771 1.66656 10.0001 1.66656C14.6025 1.66656 18.3334 5.39753 18.3334 9.9999C18.3334 14.6023 14.6025 18.3332 10.0001 18.3332C5.39771 18.3332 1.66675 14.6023 1.66675 9.9999ZM7.64295 9.16667C7.18271 9.16667 6.80961 9.53976 6.80961 10C6.80961 10.4602 7.18271 10.8333 7.64295 10.8333H12.357C12.8172 10.8333 13.1903 10.4602 13.1903 10C13.1903 9.53976 12.8172 9.16667 12.357 9.16667H7.64295Z" fill="#6B7280"/>
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M1.66675 9.9999C1.66675 5.39753 5.39771 1.66656 10.0001 1.66656C14.6025 1.66656 18.3334 5.39753 18.3334 9.9999C18.3334 14.6023 14.6025 18.3332 10.0001 18.3332C5.39771 18.3332 1.66675 14.6023 1.66675 9.9999ZM7.64295 9.16667C7.18271 9.16667 6.80961 9.53976 6.80961 10C6.80961 10.4602 7.18271 10.8333 7.64295 10.8333H12.357C12.8172 10.8333 13.1903 10.4602 13.1903 10C13.1903 9.53976 12.8172 9.16667 12.357 9.16667H7.64295Z" fill="black"/>
+
 </g>
 </svg>