@aloudata/aloudata-design 0.3.0-beta.1 → 0.3.0

package/lib/Button/style/index.less

@@ -16,25 +16,11 @@
       align-items: center;
       justify-content: center;
       height: @height-base;
-      padding: @Button-padding;
       font-weight: 500;
       font-size: 12px;
       line-height: @height-base;
       text-shadow: none;
-      // border: none;
-      .@{ald-iconfont-css-prefix} {
-        + span {
-          margin-left: 4px;
-        }
-
-        &-icon-left {
-          margin-left: -4px;
-        }
-
-        &-icon-right {
-          margin-right: -4px;
-        }
-      }
+      vertical-align: bottom;
     }
 
     &.ant-btn-loading::before {
@@ -116,9 +102,16 @@
       }
     }
 
+    &.ant-btn-circle {
+      justify-content: center;
+      min-width: @height-base;
+      height: @height-base;
+      padding: 0;
+      border-radius: 50%;
+    }
+
     &-default,
     &-secondary {
-      padding: @Button-border-padding;
       color: @Button-secondary-color;
       background-color: @Button-secondary-bgColor;
       border: 1px solid;
@@ -163,14 +156,14 @@
       border: none;
       box-shadow: none;
 
-      &:focus {
+      &:focus,
+      &:active {
         color: @Button-text-color;
         background-color: @Button-text-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
       &.ant-btn-loading {
         color: @Button-text-color-active;
         background-color: @Button-text-bgColor-active;
@@ -233,8 +226,7 @@
 
     &.ant-btn-icon-only {
       justify-content: center;
-      width: @height-base;
-      height: @height-base;
+      width: initial;
       padding: 0;
       vertical-align: bottom;
 
@@ -245,94 +237,104 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-left: 0;
+        margin: 0;
       }
     }
 
-    &-circle {
-      justify-content: center;
-      width: @height-base;
-      min-width: auto;
-      padding: 0;
-      border-radius: 50%;
-    }
-
     &-large {
       min-width: auto;
       height: @Button-height-large;
+      padding: @Button-border-padding-large;
       font-size: @Button-text-size-large;
       border-radius: @Button-borderRadius-large;
 
       &.ant-btn-icon-only {
-        width: @Button-height-large;
-        min-width: auto;
+        min-width: @Button-height-large;
         height: @Button-height-large;
         border-radius: @Button-borderRadius-large;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-large;
+        min-width: @Button-height-large;
         height: @Button-height-large;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-large;
+      }
     }
 
     &-middle {
       min-width: auto;
       height: @Button-height-middle;
+      padding: @Button-border-padding-middle;
       font-size: @Button-text-size-middle;
       border-radius: @Button-borderRadius-middle;
 
       &.ant-btn-icon-only {
-        width: @Button-height-middle;
-        min-width: auto;
+        min-width: @Button-height-middle;
         height: @Button-height-middle;
         border-radius: @Button-borderRadius-middle;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-middle;
+        min-width: @Button-height-middle;
         height: @Button-height-middle;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-middle;
+      }
     }
 
     &-small {
       height: @Button-height-small;
+      padding: @Button-border-padding-small;
       font-size: @Button-text-size-small;
       line-height: 22px;
       border-radius: @Button-borderRadius-small;
 
       &.ant-btn-icon-only {
-        width: @Button-height-small;
+        min-width: @Button-height-small;
         height: @Button-height-small;
         border-radius: @Button-borderRadius-small;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-small;
+        min-width: @Button-height-small;
         height: @Button-height-small;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-small;
+      }
     }
 
     &-mini {
       height: @Button-height-mini;
+      padding: @Button-border-padding-mini;
       font-size: @Button-text-size-mini;
       line-height: 22px;
       border-radius: @Button-borderRadius-mini;
 
       &.ant-btn-icon-only {
-        width: @Button-height-mini;
+        min-width: @Button-height-mini;
         height: @Button-height-mini;
         border-radius: @Button-borderRadius-mini;
       }
 
       &.ant-btn-circle {
-        width: @Button-height-mini;
+        min-width: @Button-height-mini;
         height: @Button-height-mini;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-mini;
+      }
     }
   }
 }

package/lib/Button/style/variables.less

@@ -2,24 +2,31 @@
 @ald-iconfont-css-prefix: aldicon;
 
 @Button-padding: 0 12px;
-@Button-border-padding: 0 11px;
 
 /** size控制 **/
 @Button-height-large: 36px;
 @Button-text-size-large: 16px;
 @Button-borderRadius-large: 8px;
+@Button-border-padding-large: 0 11px;
+@Button-leftIcon-marginRight-large: 8px;
 
 @Button-height-middle: 32px;
 @Button-text-size-middle: 14px;
 @Button-borderRadius-middle: 6px;
+@Button-border-padding-middle: 0 11px;
+@Button-leftIcon-marginRight-middle: 8px;
 
 @Button-height-small: 28px;
 @Button-text-size-small: 12px;
 @Button-borderRadius-small: 4px;
+@Button-border-padding-small: 0 7px;
+@Button-leftIcon-marginRight-small: 4px;
 
 @Button-height-mini: 24px;
 @Button-text-size-mini: 12px;
 @Button-borderRadius-mini: 4px;
+@Button-border-padding-mini: 0 7px;
+@Button-leftIcon-marginRight-mini: 4px;
 
 /****  type控制  ****/
 @Button-primary-bgColor: @B60;
@@ -45,7 +52,7 @@
 @Button-secondary-borderColor: @NL90;
 @Button-secondary-borderColor-active: @B60;
 
-@Button-text-bgColor: @BG100;
+@Button-text-bgColor: transparent;
 @Button-text-bgColor-active: @NL97;
 @Button-text-bgColor-disable: @BG100;
 @Button-text-color: @NL30;

package/lib/Checkbox/style/index.less

@@ -1,6 +1,19 @@
 @import '../../style/index.less';
 
 .ald-checkbox {
+  height: 20px;
+  color: @NL0;
+  font-size: 14px;
+  line-height: 20px;
+
+  .ant-checkbox-wrapper {
+    height: 20px;
+    color: @NL0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
   .ant-checkbox-inner {
     width: 16px;
     height: 16px;
@@ -39,6 +52,7 @@
     cursor: default;
 
     & + span {
+      color: @NL0;
       cursor: default;
     }
 
@@ -72,6 +86,11 @@
       }
     }
   }
+
+  .ant-checkbox + span {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
 }
 
 .ant-checkbox-group.ald-checkbox,

package/lib/Dropdown/Button.js

@@ -41,6 +41,6 @@ function DropdownButton(props) {
     disabled: disabled,
     onVisibleChange: onVisibleChange
   }, /*#__PURE__*/_react.default.createElement(_Button.default, Object.assign({}, buttonProps), children, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "expand_more1"
+    type: "arrows-down-line"
   })));
 }

package/lib/Form/style/index.less

@@ -1 +1,9 @@
 @import '../../style/index.less';
+
+.ant-form {
+  .ant-form-item {
+    .ant-select.ald-select {
+      width: 100%;
+    }
+  }
+}

package/lib/Icon/antdIconfont.d.ts

@@ -0,0 +1,4 @@
+import { IconFontProps } from '@ant-design/icons/lib/components/IconFont';
+import { createFromIconfontCN } from '@ant-design/icons';
+export type { IconFontProps };
+export { createFromIconfontCN };

package/lib/Icon/antdIconfont.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createFromIconfontCN", {
+  enumerable: true,
+  get: function get() {
+    return _icons.createFromIconfontCN;
+  }
+});
+
+var _icons = require("@ant-design/icons");

package/lib/Icon/components/Icon.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+interface IBaseIconProps {
+    className?: string;
+    type?: string;
+    size?: number | string;
+    color?: string;
+    style?: React.CSSProperties;
+}
+declare global {
+    interface IIconParkIconAttributes<T> extends IBaseIconProps, React.HTMLAttributes<T> {
+        'icon-id'?: string;
+        name?: string;
+        size?: string;
+        type?: string;
+        width?: string;
+        height?: string;
+        color?: string;
+        stroke?: string;
+        fill?: string;
+        rtl?: boolean;
+        spin?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'iconpark-icon': React.DetailedHTMLProps<IIconParkIconAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+export { IBaseIconProps };
+export default function Icon(props: IBaseIconProps): JSX.Element;

package/lib/Icon/components/Icon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Icon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["type", "size", "className", "color"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function Icon(props) {
+  var type = props.type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? '1em' : _props$size,
+      _props$className = props.className,
+      className = _props$className === void 0 ? 'ald-icon' : _props$className,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'currentColor' : _props$color,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("iconpark-icon", Object.assign({
+    name: type,
+    // @ts-ignore react里web-component 只能使用class
+    class: (0, _classnames.default)('ald-icon', className),
+    size: String(size),
+    color: color,
+    fill: color
+  }, rest));
+}

package/lib/Icon/components/createFromScripts.d.ts

@@ -0,0 +1 @@
+export declare function createFromScripts(scriptUrl: string[] | string, index?: number): void;

package/lib/Icon/components/createFromScripts.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFromScripts = createFromScripts;
+var FIRST_INDEX = 0;
+var customCache = new Set();
+
+function isValidCustomScriptUrl(scriptUrl) {
+  return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl));
+}
+
+function createFromScripts(scriptUrl) {
+  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FIRST_INDEX;
+  var scriptUrls = Array.isArray(scriptUrl) ? scriptUrl : [scriptUrl]; // index 表示即将创建的脚本的索引，当所有的脚本链接都创建之后，函数不再往下执行
+
+  if (index >= scriptUrls.length) {
+    return;
+  }
+
+  var currentScriptUrl = scriptUrls[index];
+
+  if (isValidCustomScriptUrl(currentScriptUrl)) {
+    var script = document.createElement('script');
+    script.setAttribute('src', currentScriptUrl);
+    script.setAttribute('data-namespace', currentScriptUrl);
+    customCache.add(currentScriptUrl);
+    document.body.appendChild(script);
+
+    if (scriptUrls.length > index + 1) {
+      script.onload = function () {
+        createFromScripts(scriptUrls, index + 1);
+      };
+
+      script.onerror = function () {
+        createFromScripts(scriptUrls, index + 1);
+      };
+    }
+  }
+}

package/lib/Icon/iconSvgs/arrows_right_sm.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16252 6.5876C9.39033 6.81541 9.39033 7.18475 9.16252 7.41256L5.66252 10.9126C5.43471 11.1404 5.06537 11.1404 4.83756 10.9126C4.60976 10.6848 4.60976 10.3154 4.83756 10.0876L7.92508 7.00008L4.83756 3.91256C4.60976 3.68475 4.60976 3.31541 4.83756 3.0876C5.06537 2.8598 5.43471 2.8598 5.66252 3.0876L9.16252 6.5876Z" fill="#001A33" fill-opacity="0.5"/>
+</svg>

package/lib/Icon/icons/AddLine.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: string | number;
+    width?: string | number;
+    height?: string | number;
+    spin?: boolean;
+    rtl?: boolean;
+    color?: string;
+    fill?: string;
+    stroke?: string;
+}
+export default function AddLine(props: IconProps): JSX.Element;
+export {};

package/lib/Icon/icons/AddLine.js

@@ -0,0 +1,83 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AddLine;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _excluded = ["size", "width", "height", "spin", "rtl", "color", "fill", "stroke", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function AddLine(props) {
+  var root = (0, _react.useRef)(null);
+
+  var _props$size = props.size,
+      size = _props$size === void 0 ? '1em' : _props$size,
+      width = props.width,
+      height = props.height,
+      spin = props.spin,
+      rtl = props.rtl,
+      color = props.color,
+      fill = props.fill,
+      stroke = props.stroke,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _width = width || size;
+
+  var _height = height || size;
+
+  var _stroke = stroke || color;
+
+  var _fill = fill || color;
+
+  (0, _react.useEffect)(function () {
+    if (!_fill) {
+      var _root$current;
+
+      (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.querySelectorAll('[data-follow-fill]').forEach(function (item) {
+        item.setAttribute('fill', item.getAttribute('data-follow-fill') || '');
+      });
+    }
+
+    if (!_stroke) {
+      var _root$current2;
+
+      (_root$current2 = root.current) === null || _root$current2 === void 0 ? void 0 : _root$current2.querySelectorAll('[data-follow-stroke]').forEach(function (item) {
+        item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '');
+      });
+    }
+  }, [stroke, color, fill]);
+  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+    ref: root,
+    width: _width,
+    height: _height,
+    viewBox: "0 0 24 24",
+    preserveAspectRatio: "xMidYMid meet",
+    fill: "none",
+    role: "presentation",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "".concat(className || '', " ").concat(spin ? _style.default.spin : '', " ").concat(rtl ? _style.default.rtl : '').trim()
+  }, rest), /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
+    "data-follow-fill": "#001A33",
+    d: "M13 2a1 1 0 0 0-2 0v9H2a1 1 0 1 0 0 2h9v9a1 1 0 1 0 2 0v-9h9a1 1 0 0 0 0-2h-9V2Z",
+    clipRule: "evenodd",
+    fillRule: "evenodd",
+    fill: _fill
+  })));
+}

package/lib/Icon/icons/AlertFill.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: string | number;
+    width?: string | number;
+    height?: string | number;
+    spin?: boolean;
+    rtl?: boolean;
+    color?: string;
+    fill?: string;
+    stroke?: string;
+}
+export default function AlertFill(props: IconProps): JSX.Element;
+export {};

package/lib/Icon/icons/AlertFill.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AlertFill;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _excluded = ["size", "width", "height", "spin", "rtl", "color", "fill", "stroke", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function AlertFill(props) {
+  var root = (0, _react.useRef)(null);
+
+  var _props$size = props.size,
+      size = _props$size === void 0 ? '1em' : _props$size,
+      width = props.width,
+      height = props.height,
+      spin = props.spin,
+      rtl = props.rtl,
+      color = props.color,
+      fill = props.fill,
+      stroke = props.stroke,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _width = width || size;
+
+  var _height = height || size;
+
+  var _stroke = stroke || color;
+
+  var _fill = fill || color;
+
+  (0, _react.useEffect)(function () {
+    if (!_fill) {
+      var _root$current;
+
+      (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.querySelectorAll('[data-follow-fill]').forEach(function (item) {
+        item.setAttribute('fill', item.getAttribute('data-follow-fill') || '');
+      });
+    }
+
+    if (!_stroke) {
+      var _root$current2;
+
+      (_root$current2 = root.current) === null || _root$current2 === void 0 ? void 0 : _root$current2.querySelectorAll('[data-follow-stroke]').forEach(function (item) {
+        item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '');
+      });
+    }
+  }, [stroke, color, fill]);
+  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+    ref: root,
+    width: _width,
+    height: _height,
+    viewBox: "0 0 24 24",
+    preserveAspectRatio: "xMidYMid meet",
+    fill: "none",
+    role: "presentation",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "".concat(className || '', " ").concat(spin ? _style.default.spin : '', " ").concat(rtl ? _style.default.rtl : '').trim()
+  }, rest), /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("g", {
+    clipPath: "url(#5639c__a)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "data-follow-fill": "#001A33",
+    d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0Zm0 19a1 1 0 0 1-1-1v-7.5a1 1 0 1 1 2 0V18a1 1 0 0 1-1 1Zm1-12.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1Z",
+    clipRule: "evenodd",
+    fillRule: "evenodd",
+    fill: _fill
+  })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: "5639c__a"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h24v24H0z"
+  })))));
+}

package/lib/Icon/icons/ArrowsDownLine.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: string | number;
+    width?: string | number;
+    height?: string | number;
+    spin?: boolean;
+    rtl?: boolean;
+    color?: string;
+    fill?: string;
+    stroke?: string;
+}
+export default function ArrowsDownLine(props: IconProps): JSX.Element;
+export {};