@ebscn/ui 0.0.10 → 1.0.0

package/es/components/button/index.d.ts

@@ -0,0 +1,4 @@
+import './button.less';
+import { Button } from './button';
+export type { ButtonProps, ButtonRef } from './button';
+export default Button;

package/es/components/button/index.js

@@ -0,0 +1,3 @@
+import "./button.css";
+import { Button } from './button';
+export default Button;

package/es/components/card/card.css

@@ -0,0 +1,37 @@
+.ebscn-card {
+  background: var(--ebscn-color-background);
+}
+.ebscn-card-module {
+  border-radius: 16px;
+  padding: 16px;
+  margin: 0 0 12px 0;
+}
+.ebscn-card-line {
+  border-radius: 6px;
+  padding: 12px;
+  background-color: #f5f5f5;
+}
+.ebscn-card-line:not(:last-child) {
+  margin-bottom: 10px;
+}
+.ebscn-card-inline {
+  border-radius: 4px;
+  padding: 12px;
+  margin-top: 10px;
+  background-color: #f5f5f5;
+}
+.ebscn-card-inline:not(:last-child) {
+  margin-right: 10px;
+}
+.ebscn-card-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.ebscn-card-header-title {
+  font-size: var(--ebscn-font-size-7);
+  line-height: 1.4;
+  font-weight: bold;
+}

package/es/components/card/card.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ICardProps = {
+    title?: ReactNode;
+    type?: 'module' | 'line' | 'inline';
+    extra?: ReactNode;
+    headerStyle?: CSSProperties;
+    headerClassName?: string;
+    bodyStyle?: CSSProperties;
+    bodyClassName?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export default function Card(props: ICardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/es/components/card/card.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import cns from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+var classPrefix = "ebscn-card";
+export default function Card(props) {
+  var typeClassName = "".concat(classPrefix, "-").concat(props.type || 'module');
+  var renderHeader = function () {
+    if (!(props.title || props.extra)) {
+      return null;
+    }
+    return React.createElement("div", {
+      className: cns("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
+      style: props.headerStyle,
+      onClick: props.onHeaderClick
+    }, React.createElement("div", {
+      className: "".concat(classPrefix, "-header-title")
+    }, props.title), props.extra);
+  };
+  var renderBody = function () {
+    if (!props.children) {
+      return null;
+    }
+    return React.createElement("div", {
+      className: cns("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
+      style: props.bodyStyle,
+      onClick: props.onBodyClick
+    }, props.children);
+  };
+  return withNativeProps(props, React.createElement("div", {
+    className: cns(classPrefix, typeClassName),
+    onClick: props.onClick
+  }, renderHeader(), renderBody()));
+}

package/es/components/card/index.d.ts

@@ -0,0 +1,4 @@
+import './card.less';
+import Card from './card';
+export type { ICardProps } from './card';
+export default Card;

package/es/components/card/index.js

@@ -0,0 +1,3 @@
+import "./card.css";
+import Card from './card';
+export default Card;

package/es/components/checkbox/checkbox.css

@@ -0,0 +1,92 @@
+.ebscn-checkbox {
+  --icon-size: 24px;
+  --font-size: var(--ebscn-font-size-8);
+  --gap: 12px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+.ebscn-checkbox input {
+  display: none;
+}
+.ebscn-checkbox.ebscn-checkbox-small {
+  --icon-size: 16px;
+  --font-size: var(--ebscn-font-size-4);
+  --gap: 9px;
+}
+.ebscn-checkbox .ebscn-checkbox-icon {
+  flex: none;
+  border-radius: var(--icon-size);
+  border: 1px solid var(--ebscn-color-light);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-checkbox .ebscn-checkbox-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-checkbox div.ebscn-checkbox-icon.ebscn-checkbox-only-icon {
+  color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-background);
+}
+.ebscn-checkbox.ebscn-checkbox-block {
+  display: flex;
+}
+.ebscn-checkbox.ebscn-checkbox-checked .ebscn-checkbox-icon {
+  border-color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox.ebscn-checkbox-disabled {
+  cursor: not-allowed;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled .ebscn-checkbox-content {
+  opacity: 0.4;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled .ebscn-checkbox-icon {
+  background-color: #e4e4e4;
+  border-color: #d9d9d9;
+  opacity: 0.4;
+}
+.ebscn-checkbox.ebscn-checkbox-disabled.ebscn-checkbox-checked .ebscn-checkbox-icon {
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox .ebscn-checkbox-custom-icon {
+  font-size: var(--icon-size);
+}
+.ebscn-checkbox.ebscn-checkbox-indeterminate .ebscn-checkbox-icon {
+  background-color: var(--ebscn-color-background);
+  color: var(--ebscn-color-primary);
+}
+.ebscn-checkbox-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-content {
+  padding-left: 0;
+  height: 100%;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
+  margin-right: 16px;
+  height: 100%;
+  border-color: transparent;
+}
+.ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {
+  vertical-align: middle;
+}
+.ebscn-checkbox-icon-right {
+  width: 100%;
+  height: 100%;
+}

package/es/components/checkbox/checkbox.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type CheckboxValue = string | number;
+export type CheckboxProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: CheckboxValue;
+    indeterminate?: boolean;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean, indeterminate: boolean) => ReactNode;
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    size?: 'normal' | 'small';
+    iconRight?: boolean;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => ReactNode) | undefined;
+    children?: ReactNode;
+    onClick?: ((event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void) | undefined;
+    size?: "small" | "normal" | undefined;
+    iconRight?: boolean | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--icon-size" | "--font-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CheckboxRef>>;
+export default Checkbox;

package/es/components/checkbox/checkbox.js

@@ -0,0 +1,97 @@
+import { CheckIcon, CheckOnlyIcon, IndeterminateIcon, UncheckIcon } from '@ebscn/ui';
+import classNames from 'classnames';
+import React, { forwardRef, useContext, useImperativeHandle } from 'react';
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckboxGroupContext } from './group-context';
+import { NativeInput } from './native-input';
+var classPrefix = "ebscn-checkbox";
+var defaultProps = {
+  defaultChecked: false,
+  indeterminate: false,
+  size: 'normal',
+  iconRight: false
+};
+var Checkbox = forwardRef(function (p, ref) {
+  var _a;
+  var groupContext = useContext(CheckboxGroupContext);
+  var props = mergeProps(defaultProps, p);
+  var _b = usePropsValue({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _b[0],
+    setChecked = _b[1];
+  var disabled = props.disabled;
+  var value = props.value;
+  if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `checked` prop of `Checkbox` will not work.');
+      }
+      if (p.defaultChecked !== undefined) {
+        devWarning('Checkbox', 'When used within `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work.');
+      }
+    }
+    checked = groupContext.value.includes(value);
+    setChecked = function (checked) {
+      var _a;
+      if (checked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, checked);
+    };
+    disabled = disabled || groupContext.disabled;
+  }
+  useImperativeHandle(ref, function () {
+    return {
+      check: function () {
+        setChecked(true);
+      },
+      uncheck: function () {
+        setChecked(false);
+      },
+      toggle: function () {
+        setChecked(!checked);
+      }
+    };
+  });
+  var renderIcon = function () {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: "".concat(classPrefix, "-custom-icon")
+      }, props.icon(checked, props.indeterminate));
+    }
+    if (props.iconRight) {
+      return checked && React.createElement("div", {
+        className: "".concat(classPrefix, "-icon ").concat(classPrefix, "-only-icon")
+      }, React.createElement(CheckOnlyIcon, null));
+    }
+    return React.createElement("div", {
+      className: "".concat(classPrefix, "-icon")
+    }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked ? React.createElement(CheckIcon, null) : React.createElement(UncheckIcon, null));
+  };
+  return withNativeProps(props, React.createElement("label", {
+    onClick: props.onClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked && !props.indeterminate, _a["".concat(classPrefix, "-indeterminate")] = props.indeterminate, _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-icon-right")] = props.iconRight, _a))
+  }, React.createElement(NativeInput, {
+    type: "checkbox",
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), props.iconRight ? React.createElement("div", {
+    className: "".concat(classPrefix, "-icon-right-input")
+  }, props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children), renderIcon()) : React.createElement(React.Fragment, null, renderIcon(), props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children))));
+});
+export default Checkbox;

package/es/components/checkbox/group-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CheckboxValue } from '.';
+export declare const CheckboxGroupContext: import("react").Context<{
+    value: CheckboxValue[];
+    disabled: boolean;
+    check: (val: CheckboxValue) => void;
+    uncheck: (val: CheckboxValue) => void;
+} | null>;

package/es/components/checkbox/group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var CheckboxGroupContext = createContext(null);

package/es/components/checkbox/group.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import { CheckboxValue } from '.';
+export interface CheckboxGroupProps {
+    value?: CheckboxValue[];
+    onChange?: (val: CheckboxValue[]) => void;
+    defaultValue?: CheckboxValue[];
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export declare const Group: FC<CheckboxGroupProps>;

package/es/components/checkbox/group.js

@@ -0,0 +1,40 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckboxGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+var defaultProps = {
+  disabled: false,
+  defaultValue: []
+};
+export var Group = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var _a = usePropsValue(props),
+    value = _a[0],
+    setValue = _a[1];
+  return React.createElement(CheckboxGroupContext.Provider
+  // TODO: 性能优化
+  , {
+    // TODO: 性能优化
+    value: {
+      value: value,
+      disabled: props.disabled,
+      check: function (v) {
+        setValue(__spreadArray(__spreadArray([], value, true), [v], false));
+      },
+      uncheck: function (v) {
+        setValue(value.filter(function (item) {
+          return item !== v;
+        }));
+      }
+    }
+  }, props.children);
+};

package/es/components/checkbox/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import './checkbox.less';
+export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
+export type { CheckboxGroupProps } from './group';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: import("./checkbox").CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
+    children?: import("react").ReactNode;
+    onClick?: ((event: import("react").MouseEvent<HTMLLabelElement, MouseEvent>) => void) | undefined;
+    size?: "small" | "normal" | undefined;
+    iconRight?: boolean | undefined;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--icon-size" | "--font-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
+    Group: import("react").FC<import("./group").CheckboxGroupProps>;
+};
+export default _default;

package/es/components/checkbox/index.js

@@ -0,0 +1,7 @@
+import "./checkbox.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Group } from './group';
+import Checkbox from './checkbox';
+export default attachPropertiesToComponent(Checkbox, {
+  Group: Group
+});

package/es/components/checkbox/native-input.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+interface Props {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+}
+export declare const NativeInput: FC<Props>;
+export {};

package/es/components/checkbox/native-input.js

@@ -0,0 +1,29 @@
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useRef } from 'react';
+export var NativeInput = function (props) {
+  var inputRef = useRef(null);
+  var handleClick = useMemoizedFn(function (e) {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    var latestChecked = e.target.checked;
+    if (latestChecked === props.checked) return;
+    props.onChange(latestChecked);
+  });
+  useEffect(function () {
+    if (props.disabled) return;
+    if (!inputRef.current) return;
+    var input = inputRef.current;
+    input.addEventListener('click', handleClick);
+    return function () {
+      input.removeEventListener('click', handleClick);
+    };
+  }, [props.disabled, props.onChange]);
+  return React.createElement("input", {
+    ref: inputRef,
+    type: props.type,
+    checked: props.checked,
+    onChange: function () {},
+    disabled: props.disabled,
+    id: props.id
+  });
+};

package/es/components/grid/grid.css

@@ -0,0 +1,15 @@
+.adm-grid {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
+  display: grid;
+  grid-gap: 10px;
+  -webkit-column-gap: var(--gap-horizontal);
+          column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  align-items: stretch;
+}
+.adm-grid-item {
+  grid-column-end: span var(--item-span);
+}

package/es/components/grid/grid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type GridProps = {
+    columns: number;
+    gap?: number | string | [number | string, number | string];
+    children?: ReactNode;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Grid: FC<GridProps>;
+export type GridItemProps = {
+    span?: number;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export declare const GridItem: FC<GridItemProps>;

package/es/components/grid/grid.js

@@ -0,0 +1,36 @@
+import { mergeProps } from '../../utils/with-default-props';
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { toCSSLength } from '../../utils/to-css-length';
+var classPrefix = "adm-grid";
+export var Grid = function (props) {
+  var style = {
+    '--columns': props.columns.toString()
+  };
+  var gap = props.gap;
+  if (gap !== undefined) {
+    if (Array.isArray(gap)) {
+      style['--gap-horizontal'] = toCSSLength(gap[0]);
+      style['--gap-vertical'] = toCSSLength(gap[1]);
+    } else {
+      style['--gap'] = toCSSLength(gap);
+    }
+  }
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    style: style
+  }, props.children));
+};
+export var GridItem = function (p) {
+  var props = mergeProps({
+    span: 1
+  }, p);
+  var itemStyle = {
+    '--item-span': props.span
+  };
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix, "-item"),
+    style: itemStyle,
+    onClick: props.onClick
+  }, props.children));
+};

package/es/components/grid/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './grid.less';
+export type { GridProps, GridItemProps } from './grid';
+declare const _default: import("react").FC<import("./grid").GridProps> & {
+    Item: import("react").FC<import("./grid").GridItemProps>;
+};
+export default _default;

package/es/components/grid/index.js

@@ -0,0 +1,6 @@
+import "./grid.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Grid, GridItem } from './grid';
+export default attachPropertiesToComponent(Grid, {
+  Item: GridItem
+});

package/es/components/icons/check-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const CheckIcon: React.NamedExoticComponent<NativeProps>;
+export default CheckIcon;

package/es/components/icons/check-icon.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+var CheckIcon = memo(function (props) {
+  return withNativeProps(props, React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 48 48"
+  }, React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M24,4 C35.0470982,4 44,12.9529018 44,24 C44,35.0470982 35.0426786,44 24,44 C12.9573214,44 4,35.0426786 4,24 C4,12.9573214 12.9529018,4 24,4 Z",
+    fill: "none"
+  }), React.createElement("path", {
+    d: "M26.9781406,13.9393398 C27.5106738,14.471873 27.5590859,15.3052003 27.1233769,15.8924233 L26.9781406,16.0606602 L20.04,23 L31.9781406,34.9393398 C32.5639271,35.5251263 32.5639271,36.4748737 31.9781406,37.0606602 C31.4456075,37.5931933 30.6122802,37.6416054 30.0250572,37.2058965 L29.8568203,37.0606602 L16.8568203,24.0606602 C16.2710339,23.4748737 16.2710339,22.5251263 16.8568203,21.9393398 L24.8568203,13.9393398 C25.4426067,13.3535534 26.3923542,13.3535534 26.9781406,13.9393398 Z",
+    fill: "currentColor",
+    transform: "translate(24.417480, 25.500000) rotate(-90.000000) translate(-24.417480, -25.500000) "
+  }))));
+});
+export default CheckIcon;

package/es/components/icons/check-only-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const CheckOnlyIcon: React.NamedExoticComponent<NativeProps>;
+export default CheckOnlyIcon;

package/es/components/icons/check-only-icon.js

@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+var CheckOnlyIcon = memo(function (props) {
+  return withNativeProps(props, React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 32 32"
+  }, React.createElement("path", {
+    d: "M30.5986424,6.1055493 C30.9712631,6.53987855 30.9531134,7.18617346 30.5567048,7.59890623 L12.3166884,26.5900478 C11.9341206,26.9883697 11.3010844,27.001141 10.9027625,26.6185732 C10.8828778,26.5994749 10.8637913,26.5795625 10.8455522,26.5588869 L1.39075001,15.8410716 C1.02539196,15.4269074 1.06495712,14.7949798 1.47912126,14.4296218 C1.8340823,14.1164902 2.35996301,14.0951176 2.73916366,14.3784118 L10.9224935,20.4920347 C11.2975514,20.7722339 11.8168072,20.7547169 12.172129,20.4498784 L29.0316484,5.98571934 C29.497452,5.58609604 30.1990191,5.63974574 30.5986424,6.1055493 Z",
+    fill: "currentColor"
+  })));
+});
+export default CheckOnlyIcon;

package/es/components/icons/clear-icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare const ClearIcon: React.NamedExoticComponent<NativeProps>;
+export default ClearIcon;