@antscorp/antsomi-ui 1.3.5-beta.536 → 1.3.5-beta.538

package/es/components/icons/CloseIcon.js

@@ -4,9 +4,6 @@ export const CloseIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
     return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 25", version: "1.1", id: "svg5", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
         React.createElement("defs", { id: "defs9" }),
-        React.createElement("g", { "aria-label": "close", id: "show_chart", style: {
-                fontSize: 24,
-                fill: '#666666',
-            } },
+        React.createElement("g", { "aria-label": "close", id: "show_chart", style: { fontSize: 24 } },
             React.createElement("path", { d: "M 18.984375,6.421875 13.40625,12 l 5.578125,5.578125 -1.40625,1.40625 L 12,13.40625 6.421875,18.984375 5.015625,17.578125 10.59375,12 5.015625,6.421875 6.421875,5.015625 12,10.59375 17.578125,5.015625 Z", id: "path826" }))));
 });

package/es/components/icons/ExpandMoreRightIcon.js

@@ -2,6 +2,6 @@ import React, { forwardRef } from 'react';
 import { useIcon } from './hooks/useIcon';
 export const ExpandMoreRightIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M3.67969 5L0.492188 1.8125L1.89844 0.40625L6.49219 5L1.89844 9.59375L0.492188 8.1875L3.67969 5ZM8.69531 5L5.50781 1.8125L6.91406 0.40625L11.5078 5L6.91406 9.59375L5.50781 8.1875L8.69531 5Z", fill: "currentColor" })));
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M9.67969 12L6.49219 8.8125L7.89844 7.40625L12.4922 12L7.89844 16.5938L6.49219 15.1875L9.67969 12ZM14.6953 12L11.5078 8.8125L12.9141 7.40625L17.5078 12L12.9141 16.5938L11.5078 15.1875L14.6953 12Z", fill: "currentColor" })));
 });

package/es/components/icons/PlaneIcon.js

@@ -4,9 +4,6 @@ export const PlaneIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
     return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 25", version: "1.1", id: "svg5", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
         React.createElement("defs", { id: "defs9" }),
-        React.createElement("g", { "aria-label": "send", style: {
-                fontSize: 24,
-                fill: '#666666',
-            } },
+        React.createElement("g", { "aria-label": "send", style: { fontSize: 24 } },
             React.createElement("path", { d: "m 2.015625,21 v -6.984375 l 15,-2.015625 -15,-2.015625 V 3 l 21,9 z", id: "path826" }))));
 });

package/es/components/icons/UserIcon.js

@@ -4,9 +4,6 @@ export const UserIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
     return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 25", version: "1.1", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
         React.createElement("defs", { id: "defs9" }),
-        React.createElement("g", { "aria-label": "person", id: "show_chart", style: {
-                fontSize: 24,
-                fill: '#666666',
-            } },
+        React.createElement("g", { "aria-label": "person", id: "show_chart", style: { fontSize: 24 } },
             React.createElement("path", { d: "m 6.703125,15.140625 q 2.765625,-1.125 5.296875,-1.125 2.53125,0 5.25,1.125 Q 20.015625,16.21875 20.015625,18 v 2.015625 H 3.984375 V 18 q 0,-1.78125 2.71875,-2.859375 z m 8.109375,-4.3125 Q 13.640625,12 12,12 10.359375,12 9.1875,10.828125 8.015625,9.65625 8.015625,8.015625 8.015625,6.375 9.1875,5.203125 10.359375,3.984375 12,3.984375 q 1.640625,0 2.8125,1.21875 1.171875,1.171875 1.171875,2.8125 0,1.640625 -1.171875,2.8125 z", id: "path826" }))));
 });

package/es/components/icons/document/IconGallery.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { message, Input } from 'antd';
-import { Col, Row } from '../../atoms';
-import { IconGalleryStyled } from './styled';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+import { ConfigProvider } from '@antscorp/antsomi-ui/es/providers';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { message } from 'antd';
+import React, { useState } from 'react';
+import { Flex, Input } from '../../index';
+import { IconGalleryStyled } from './styled';
 const requireContext = require.context('../', false, /\.tsx$/);
 const icons = requireContext
     .keys()
@@ -22,24 +23,23 @@ export const IconGallery = () => {
             invalidIcons.push(iconObj);
         return iconObj.Component;
     });
-    return (React.createElement(IconGalleryStyled, null,
-        invalidIcons.length > 0 ? (React.createElement("div", null,
-            React.createElement("h4", null, "These components below are invalid (check name and file name is correct?)"),
-            invalidIcons.map(item => (React.createElement("strong", { key: item.name, style: { color: 'red' } },
-                React.createElement("pre", null, item.name)))))) : null,
-        React.createElement(Row, { className: "grid-container", gutter: 16 },
-            React.createElement(Input, { value: search, onChange: e => setSearch(e.target.value) }),
-            validIcons
+    return (React.createElement(ConfigProvider, null,
+        React.createElement(IconGalleryStyled, null,
+            invalidIcons.length > 0 ? (React.createElement("div", null,
+                React.createElement("h4", null, "These components below are invalid (check name and file name is correct?)"),
+                invalidIcons.map(item => (React.createElement("strong", { key: item.name, style: { color: 'red' } },
+                    React.createElement("pre", null, item.name)))))) : null,
+            React.createElement(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '20px' } }),
+            React.createElement(Flex, { className: "grid-container", gap: 16 }, validIcons
                 .filter(item => searchStringQuery(item.name, debounceSearchValue))
                 .map(item => {
                 const { Component, name } = item;
-                return (React.createElement(Col, { key: name, span: 6, onClick: () => {
+                return (React.createElement("div", { key: name, className: "grid-item", onClick: () => {
                         const copiedText = `<${name} />`;
                         navigator.clipboard.writeText(copiedText);
                         message.success(`${copiedText} copied to clipboard 🚀`);
                     } },
-                    React.createElement("div", { className: "grid-item" },
-                        React.createElement(Component, null),
-                        React.createElement("span", null, name))));
-            }))));
+                    React.createElement(Component, null),
+                    React.createElement("span", null, name)));
+            })))));
 };

package/es/components/icons/document/styled.js

@@ -3,11 +3,17 @@ import styled from 'styled-components';
 export const IconGalleryStyled = styled.div `
   .grid-container {
     /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
-    row-gap: 16px;
+    /* row-gap: 16px; */
+    margin-top: 24px;
+    flex-wrap: wrap;
   }
 
   .grid-item {
-    padding: 16px;
+    width: calc((100% - 16px * 4) / 5);
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    padding: 32px 16px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -16,14 +22,18 @@ export const IconGalleryStyled = styled.div `
     border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
 
     cursor: pointer;
-    transition: all 100ms ease-in-out;
+    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 
     &:hover {
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue4};
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
 
+      svg {
+        transform: scale(1.2);
+      }
       svg,
       span {
-        transition: all 100ms ease-in-out;
+        transition: all 0.3s ease-in-out;
+        will-change: transform;
         fill: white;
         color: white;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.536",
+  "version": "1.3.5-beta.538",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",