From e7a17218653c59e25e6bbd2140dd969646adf997 Mon Sep 17 00:00:00 2001
From: saint3347 <zhaishengjia@shein.com>
Date: Tue, 21 Jan 2025 17:54:13 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20`Image`=20?=
 =?UTF-8?q?=E5=9C=A8=E9=A2=84=E8=A7=88=E5=A4=A7=E5=9B=BE=E6=97=B6=E7=9A=84?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=89=8B=E5=8A=BF=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 packages/base/src/icons/config.tsx            | 16 ++++-----
 packages/base/src/icons/icons.tsx             | 34 ++++++++++++++++---
 packages/base/src/image/image-gallery.tsx     |  3 +-
 packages/base/src/image/image-magnify.tsx     |  9 +++--
 packages/base/src/image/image.type.ts         |  2 ++
 packages/shineout-style/src/image/image.ts    |  3 ++
 .../src/image/__doc__/changelog.cn.md         |  7 ++++
 8 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 5c875bda3..ffca919c2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.8-beta.8",
+  "version": "3.5.8-beta.9",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/base/src/icons/config.tsx b/packages/base/src/icons/config.tsx
index 911817ead..09cb891c1 100644
--- a/packages/base/src/icons/config.tsx
+++ b/packages/base/src/icons/config.tsx
@@ -26,14 +26,14 @@ const config = {
   cascader: {
     More: icons.ArrowDown,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
     CollapseArrow: icons.ArrowRight,
   },
   collapse: {
     collapseArrow: icons.ArrowRight,
   },
   datepicker: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
     Time: icons.Time,
     Calendar: icons.Calendar,
     ArrowDoubleLeft: icons.ArrowLeftDouble,
@@ -45,10 +45,10 @@ const config = {
     DropdownArrow: icons.ArrowDown,
   },
   editableArea: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   image: {
-    Close: icons.Close,
+    Close: icons.CloseFill,
     Pics: icons.ImageCount,
     Download: icons.Download,
     Preview: icons.Preview,
@@ -59,7 +59,7 @@ const config = {
     ArrowLeft: icons.ArrowLeft,
     Hide: icons.Hide,
     Show: icons.Display,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   link: {
     prefixIcon: icons.Link,
@@ -96,7 +96,7 @@ const config = {
     Check: icons.Check,
     More: icons.More,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   steps: {
     Finish: icons.Check,
@@ -128,7 +128,7 @@ const config = {
   treeSelect: {
     More: icons.More,
     DropdownArrow: icons.ArrowDown,
-    Close: icons.Close,
+    Close: icons.CloseFill,
   },
   upload: {
     File: icons.File,
@@ -136,7 +136,7 @@ const config = {
     Warning: icons.WarningCircleFill,
     Recover: icons.Return,
     Delete: icons.Delete,
-    DeleteImage: icons.Close,
+    DeleteImage: icons.CloseFill,
     RecoverImage: icons.RecoverCircle,
     PreviewImage: icons.Preview,
     AddImage: icons.Add,
diff --git a/packages/base/src/icons/icons.tsx b/packages/base/src/icons/icons.tsx
index cf8d1b295..89b6c35d9 100644
--- a/packages/base/src/icons/icons.tsx
+++ b/packages/base/src/icons/icons.tsx
@@ -46,10 +46,19 @@ const clock = [
   'M12 23C5.925 23 1 18.075 1 12C1 5.925 5.925 1 12 1C18.075 1 23 5.925 23 12C23 18.075 18.075 23 12 23ZM12 21C15.2154 21 18.1865 19.2846 19.7942 16.5C21.4019 13.7154 21.4019 10.2846 19.7942 7.5C18.1865 4.71539 15.2154 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM13 11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H12C11.4477 13 11 12.5523 11 12V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11Z',
 ];
 
-
 const recoverCircle = [
-<path key="1" d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z" fill='currentColor'></path>,
-<path key="2" fillRule="evenodd" clipRule="evenodd" d="M10.1967 6.28261C10.5929 6.66737 10.6022 7.30046 10.2174 7.69667L9.39504 8.54349H13.3752C15.8901 8.54349 18 10.51 18 13.0217C18 15.5335 15.8901 17.5 13.3752 17.5H8.84425C8.29196 17.5 7.84425 17.0523 7.84425 16.5C7.84425 15.9477 8.29196 15.5 8.84425 15.5H13.3752C14.8641 15.5 16 14.352 16 13.0217C16 11.6915 14.8641 10.5435 13.3752 10.5435H9.43488L10.1964 11.2823C10.5927 11.6669 10.6023 12.3 10.2177 12.6964C9.83312 13.0927 9.20003 13.1023 8.80365 12.7177L6.30365 10.2921C6.11325 10.1073 6.00406 9.85452 6.00011 9.58925C5.99616 9.32399 6.09779 9.06803 6.28261 8.87771L8.78261 6.30333C9.16737 5.90713 9.80046 5.89785 10.1967 6.28261Z" fill="white"></path>
+  <path
+    key='1'
+    d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
+    fill='currentColor'
+  ></path>,
+  <path
+    key='2'
+    fillRule='evenodd'
+    clipRule='evenodd'
+    d='M10.1967 6.28261C10.5929 6.66737 10.6022 7.30046 10.2174 7.69667L9.39504 8.54349H13.3752C15.8901 8.54349 18 10.51 18 13.0217C18 15.5335 15.8901 17.5 13.3752 17.5H8.84425C8.29196 17.5 7.84425 17.0523 7.84425 16.5C7.84425 15.9477 8.29196 15.5 8.84425 15.5H13.3752C14.8641 15.5 16 14.352 16 13.0217C16 11.6915 14.8641 10.5435 13.3752 10.5435H9.43488L10.1964 11.2823C10.5927 11.6669 10.6023 12.3 10.2177 12.6964C9.83312 13.0927 9.20003 13.1023 8.80365 12.7177L6.30365 10.2921C6.11325 10.1073 6.00406 9.85452 6.00011 9.58925C5.99616 9.32399 6.09779 9.06803 6.28261 8.87771L8.78261 6.30333C9.16737 5.90713 9.80046 5.89785 10.1967 6.28261Z'
+    fill='white'
+  ></path>,
   // <path
   //   key={'1'}
   //   d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
@@ -152,8 +161,24 @@ const calendar1 = [
 ];
 
 const close = (
+  <svg viewBox='0 0 16 16' focusable='false' fill='currentColor' aria-hidden='true'>
+    <path
+      d='M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
+const closeFill = (
   <svg viewBox='0 0 24 24' focusable='false' fill='currentColor' aria-hidden='true'>
-    <path d='M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z'></path>
+    <path
+      d='M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z'
+      fill='currentColor'
+    ></path>
+    <path
+      d='M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z'
+      fill='white'
+    ></path>
   </svg>
 );
 
@@ -306,6 +331,7 @@ const Icons = {
   Warning: icon(warningSimple),
   Check: icon(check),
   Close: close,
+  CloseFill: closeFill,
 
   ImageCount: icon(imageCount),
   ImageError: icon(imageError),
diff --git a/packages/base/src/image/image-gallery.tsx b/packages/base/src/image/image-gallery.tsx
index 356d3c9c9..11520cb22 100644
--- a/packages/base/src/image/image-gallery.tsx
+++ b/packages/base/src/image/image-gallery.tsx
@@ -28,7 +28,6 @@ const ImageModal = (props: ImageGalleryProps) => {
 
 
   const overlayClass = classNames(galleryStyle?.overlay);
-  const magnifyClass = classNames(galleryStyle?.magnify);
   const closeClass = classNames(galleryStyle?.close);
 
   const closeIconProps = getCloseIconProps();
@@ -59,7 +58,7 @@ const ImageModal = (props: ImageGalleryProps) => {
     });
 
     const magnifyProps = getMaginfyProps(position, {
-      className: magnifyClass,
+      jssStyle,
       src: image.src,
     });
 
diff --git a/packages/base/src/image/image-magnify.tsx b/packages/base/src/image/image-magnify.tsx
index 739528ed6..fb1df5b85 100644
--- a/packages/base/src/image/image-magnify.tsx
+++ b/packages/base/src/image/image-magnify.tsx
@@ -1,12 +1,15 @@
 import { useImageMagnify } from '@sheinx/hooks';
 import { ImageMagnifyProps } from './image.type';
+import classNames from 'classnames';
 
 const ImageMagnify = (props: ImageMagnifyProps) => {
-  const { className, ...rest } = props;
+  const { jssStyle, ...rest } = props;
   const { loading, status, src, maxWidth, maxHeight, getRootProps } = useImageMagnify(rest);
 
   const rootProps = getRootProps();
 
+  const galleryStyle = jssStyle?.image?.()
+
   const renderLoading = () => {
     return <div></div>;
   };
@@ -22,8 +25,10 @@ const ImageMagnify = (props: ImageMagnifyProps) => {
     maxHeight: status === 1 ? undefined : maxHeight,
   };
 
+
+
   return (
-    <div className={className} style={rootStyle} {...rootProps}>
+    <div className={classNames(galleryStyle?.magnify, status === 1 && galleryStyle?.magnifyZoomOut)} style={rootStyle} {...rootProps}>
       <img style={imgStyle} src={src} alt='' />
       {loading && renderLoading()}
     </div>
diff --git a/packages/base/src/image/image.type.ts b/packages/base/src/image/image.type.ts
index f7c349b08..9809d2729 100644
--- a/packages/base/src/image/image.type.ts
+++ b/packages/base/src/image/image.type.ts
@@ -28,6 +28,7 @@ export interface ImageClasses {
 
   overlay: string;
   magnify: string;
+  magnifyZoomOut: string;
   close: string;
 
   gallery: string;
@@ -70,6 +71,7 @@ export interface ImageMagnifyProps {
   maxHeight: number;
   lockScroll: (isLock: boolean) => void;
   className?: string;
+  jssStyle?: ImageJssStyleType;
 }
 export interface ImageBaseProps
   extends BaseImageProps,
diff --git a/packages/shineout-style/src/image/image.ts b/packages/shineout-style/src/image/image.ts
index ab8abc2f2..e284ff338 100644
--- a/packages/shineout-style/src/image/image.ts
+++ b/packages/shineout-style/src/image/image.ts
@@ -255,6 +255,9 @@ const ImageStyle: JsStyles<ImageClass> = {
       borderStyle: 'none',
     },
   },
+  magnifyZoomOut: {
+    cursor: 'zoom-out',
+  },
 
   close: {
     position: 'absolute',
diff --git a/packages/shineout/src/image/__doc__/changelog.cn.md b/packages/shineout/src/image/__doc__/changelog.cn.md
index 1bdbca326..e7218669b 100644
--- a/packages/shineout/src/image/__doc__/changelog.cn.md
+++ b/packages/shineout/src/image/__doc__/changelog.cn.md
@@ -1,3 +1,10 @@
+## 3.5.8-beta.9
+2025-01-21
+
+### 🐞 BugFix
+
+- 修复 `Image` 在预览大图时的鼠标手势不正确问题 ([#938](https://github.com/sheinsight/shineout-next/pull/938))
+
 ## 3.5.4
 2024-12-12
 

From d10ccfa334111c714b448895bafef472b4ed7247 Mon Sep 17 00:00:00 2001
From: saint3347 <zhaishengjia@shein.com>
Date: Tue, 21 Jan 2025 17:55:25 +0800
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E5=AE=9E?=
 =?UTF-8?q?=E5=BF=83=E7=9A=84=E5=85=B3=E9=97=AD=E5=9B=BE=E6=A0=87=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F,=20=E6=9B=B4=E6=96=B0test=20snapshot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__snapshots__/alert.spec.tsx.snap         | 10 ++--
 .../__snapshots__/cascader.spec.tsx.snap      |  7 ++-
 .../__snapshots__/drawer.spec.tsx.snap        | 54 +++++++++++------
 .../__snapshots__/close.spec.tsx.snap         | 20 ++++---
 .../__snapshots__/message.spec.tsx.snap       | 20 ++++---
 .../__snapshots__/modalSnapshot.spec.tsx.snap | 60 +++++++++++--------
 .../__snapshots__/progress.spec.tsx.snap      |  5 +-
 .../__snapshots__/select.spec.tsx.snap        | 14 ++++-
 .../__snapshots__/steps.spec.tsx.snap         |  5 +-
 .../__snapshots__/transfer.spec.tsx.snap      | 15 +++--
 .../__snapshots__/treeSelect.spec.tsx.snap    | 14 ++++-
 11 files changed, 147 insertions(+), 77 deletions(-)

diff --git a/packages/shineout/src/alert/__test__/__snapshots__/alert.spec.tsx.snap b/packages/shineout/src/alert/__test__/__snapshots__/alert.spec.tsx.snap
index c7444f168..2632f9bdc 100644
--- a/packages/shineout/src/alert/__test__/__snapshots__/alert.spec.tsx.snap
+++ b/packages/shineout/src/alert/__test__/__snapshots__/alert.spec.tsx.snap
@@ -102,10 +102,11 @@ exports[`Alert[Base] should render correctly about closeable 1`] = `
           aria-hidden="true"
           fill="currentColor"
           focusable="false"
-          viewBox="0 0 24 24"
+          viewBox="0 0 16 16"
         >
           <path
-            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+            d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+            fill="currentColor"
           />
         </svg>
       </div>
@@ -173,10 +174,11 @@ exports[`Alert[Base] should render correctly about title 1`] = `
         aria-hidden="true"
         fill="currentColor"
         focusable="false"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
       >
         <path
-          d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+          d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+          fill="currentColor"
         />
       </svg>
     </div>
diff --git a/packages/shineout/src/cascader/__test__/__snapshots__/cascader.spec.tsx.snap b/packages/shineout/src/cascader/__test__/__snapshots__/cascader.spec.tsx.snap
index 0ebb634d6..c2812ffd1 100644
--- a/packages/shineout/src/cascader/__test__/__snapshots__/cascader.spec.tsx.snap
+++ b/packages/shineout/src/cascader/__test__/__snapshots__/cascader.spec.tsx.snap
@@ -96,7 +96,12 @@ exports[`Cascader[Base] should render correctly about compressed 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>
diff --git a/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap b/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap
index 1dcc03e44..48bfacc2c 100644
--- a/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap
+++ b/packages/shineout/src/drawer/__test__/__snapshots__/drawer.spec.tsx.snap
@@ -26,10 +26,11 @@ exports[`Drawer[Base] should render correctly about base 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -139,10 +140,11 @@ exports[`Drawer[Base] should render correctly about container 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -205,10 +207,11 @@ exports[`Drawer[Base] should render correctly about form 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -334,10 +337,11 @@ exports[`Drawer[Base] should render correctly about full screen 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -388,7 +392,12 @@ exports[`Drawer[Base] should render correctly about full screen 1`] = `
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                            d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+                            fill="currentColor"
+                          />
+                          <path
+                            d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+                            fill="white"
                           />
                         </svg>
                       </span>
@@ -465,7 +474,12 @@ exports[`Drawer[Base] should render correctly about full screen 1`] = `
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                            d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+                            fill="currentColor"
+                          />
+                          <path
+                            d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+                            fill="white"
                           />
                         </svg>
                       </span>
@@ -1038,10 +1052,11 @@ exports[`Drawer[Base] should render correctly about hide mask 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -1104,10 +1119,11 @@ exports[`Drawer[Base] should render correctly about position 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -1235,10 +1251,11 @@ exports[`Drawer[Base] should render correctly about resizable 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -1384,10 +1401,11 @@ exports[`Drawer[Base] should render correctly about type 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
diff --git a/packages/shineout/src/message/__test__/__snapshots__/close.spec.tsx.snap b/packages/shineout/src/message/__test__/__snapshots__/close.spec.tsx.snap
index 8f8fe86c5..b9246bd7a 100644
--- a/packages/shineout/src/message/__test__/__snapshots__/close.spec.tsx.snap
+++ b/packages/shineout/src/message/__test__/__snapshots__/close.spec.tsx.snap
@@ -276,10 +276,11 @@ exports[`Message[Base] should render default 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -312,10 +313,11 @@ exports[`Message[Base] should render default 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -356,10 +358,11 @@ exports[`Message[Base] should render default 2`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -392,10 +395,11 @@ exports[`Message[Base] should render default 2`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
diff --git a/packages/shineout/src/message/__test__/__snapshots__/message.spec.tsx.snap b/packages/shineout/src/message/__test__/__snapshots__/message.spec.tsx.snap
index 8f8fe86c5..b9246bd7a 100644
--- a/packages/shineout/src/message/__test__/__snapshots__/message.spec.tsx.snap
+++ b/packages/shineout/src/message/__test__/__snapshots__/message.spec.tsx.snap
@@ -276,10 +276,11 @@ exports[`Message[Base] should render default 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -312,10 +313,11 @@ exports[`Message[Base] should render default 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -356,10 +358,11 @@ exports[`Message[Base] should render default 2`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -392,10 +395,11 @@ exports[`Message[Base] should render default 2`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
diff --git a/packages/shineout/src/modal/__test__/__snapshots__/modalSnapshot.spec.tsx.snap b/packages/shineout/src/modal/__test__/__snapshots__/modalSnapshot.spec.tsx.snap
index 1f2114600..7390b6016 100644
--- a/packages/shineout/src/modal/__test__/__snapshots__/modalSnapshot.spec.tsx.snap
+++ b/packages/shineout/src/modal/__test__/__snapshots__/modalSnapshot.spec.tsx.snap
@@ -40,10 +40,11 @@ exports[`Modal[SnapShot] should render correctly  1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -120,10 +121,11 @@ exports[`Modal[SnapShot] should render correctly about close 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -200,10 +202,11 @@ exports[`Modal[SnapShot] should render correctly about confirm 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -280,10 +283,11 @@ exports[`Modal[SnapShot] should render correctly about container 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -360,10 +364,11 @@ exports[`Modal[SnapShot] should render correctly about focus 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -440,10 +445,11 @@ exports[`Modal[SnapShot] should render correctly about form 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -520,10 +526,11 @@ exports[`Modal[SnapShot] should render correctly about icon 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -600,10 +607,11 @@ exports[`Modal[SnapShot] should render correctly about move 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -680,10 +688,11 @@ exports[`Modal[SnapShot] should render correctly about multiple 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -760,10 +769,11 @@ exports[`Modal[SnapShot] should render correctly about position 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -840,10 +850,11 @@ exports[`Modal[SnapShot] should render correctly about type 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -920,10 +931,11 @@ exports[`Modal[SnapShot] should render correctly about zoom 1`] = `
             aria-hidden="true"
             fill="currentColor"
             focusable="false"
-            viewBox="0 0 24 24"
+            viewBox="0 0 16 16"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+              fill="currentColor"
             />
           </svg>
         </div>
diff --git a/packages/shineout/src/progress/__test__/__snapshots__/progress.spec.tsx.snap b/packages/shineout/src/progress/__test__/__snapshots__/progress.spec.tsx.snap
index e2c197ff2..32577e69f 100644
--- a/packages/shineout/src/progress/__test__/__snapshots__/progress.spec.tsx.snap
+++ b/packages/shineout/src/progress/__test__/__snapshots__/progress.spec.tsx.snap
@@ -277,10 +277,11 @@ exports[`Progress[Base] should render correctly about circle 1`] = `
         aria-hidden="true"
         fill="currentColor"
         focusable="false"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
       >
         <path
-          d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+          d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+          fill="currentColor"
         />
       </svg>
     </div>
diff --git a/packages/shineout/src/select/__test__/__snapshots__/select.spec.tsx.snap b/packages/shineout/src/select/__test__/__snapshots__/select.spec.tsx.snap
index 4b0c47dec..cfddf616f 100644
--- a/packages/shineout/src/select/__test__/__snapshots__/select.spec.tsx.snap
+++ b/packages/shineout/src/select/__test__/__snapshots__/select.spec.tsx.snap
@@ -608,7 +608,12 @@ exports[`Select[Base] should render correctly about custom unmatch 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>
@@ -819,7 +824,12 @@ exports[`Select[Base] should render correctly about disabled 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>
diff --git a/packages/shineout/src/steps/__test__/__snapshots__/steps.spec.tsx.snap b/packages/shineout/src/steps/__test__/__snapshots__/steps.spec.tsx.snap
index 28a83da26..e5a540853 100644
--- a/packages/shineout/src/steps/__test__/__snapshots__/steps.spec.tsx.snap
+++ b/packages/shineout/src/steps/__test__/__snapshots__/steps.spec.tsx.snap
@@ -1543,10 +1543,11 @@ exports[`Steps[Base] should render correctly about status 1`] = `
               aria-hidden="true"
               fill="currentColor"
               focusable="false"
-              viewBox="0 0 24 24"
+              viewBox="0 0 16 16"
             >
               <path
-                d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+                fill="currentColor"
               />
             </svg>
           </span>
diff --git a/packages/shineout/src/transfer/__test__/__snapshots__/transfer.spec.tsx.snap b/packages/shineout/src/transfer/__test__/__snapshots__/transfer.spec.tsx.snap
index e4838e9c7..e094e6715 100644
--- a/packages/shineout/src/transfer/__test__/__snapshots__/transfer.spec.tsx.snap
+++ b/packages/shineout/src/transfer/__test__/__snapshots__/transfer.spec.tsx.snap
@@ -7265,10 +7265,11 @@ exports[`Transfer[Base] should render correctly about simple 1`] = `
                           aria-hidden="true"
                           fill="currentColor"
                           focusable="false"
-                          viewBox="0 0 24 24"
+                          viewBox="0 0 16 16"
                         >
                           <path
-                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                            d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+                            fill="currentColor"
                           />
                         </svg>
                       </span>
@@ -7293,10 +7294,11 @@ exports[`Transfer[Base] should render correctly about simple 1`] = `
                           aria-hidden="true"
                           fill="currentColor"
                           focusable="false"
-                          viewBox="0 0 24 24"
+                          viewBox="0 0 16 16"
                         >
                           <path
-                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                            d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+                            fill="currentColor"
                           />
                         </svg>
                       </span>
@@ -7321,10 +7323,11 @@ exports[`Transfer[Base] should render correctly about simple 1`] = `
                           aria-hidden="true"
                           fill="currentColor"
                           focusable="false"
-                          viewBox="0 0 24 24"
+                          viewBox="0 0 16 16"
                         >
                           <path
-                            d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+                            d="M3.73895 2.81241L3.80175 2.86787L8 7.05665L12.2379 2.81922C12.4983 2.55888 12.9204 2.55888 13.1808 2.81922C13.4211 3.05955 13.4396 3.4377 13.2362 3.69923L13.1808 3.76203L8.94334 7.99998L13.1376 12.1948C13.398 12.4552 13.398 12.8773 13.1376 13.1376C12.8973 13.3779 12.5192 13.3964 12.2576 13.1931L12.1948 13.1376L8 8.94332L3.78745 13.1553C3.5271 13.4156 3.10499 13.4156 2.84464 13.1553C2.60432 12.9149 2.58583 12.5368 2.78918 12.2753L2.84464 12.2124L7.05667 7.99998L2.85894 3.81068C2.59859 3.55033 2.59859 3.12822 2.85894 2.86787C3.09927 2.62755 3.47742 2.60906 3.73895 2.81241Z"
+                            fill="currentColor"
                           />
                         </svg>
                       </span>
diff --git a/packages/shineout/src/tree-select/__test__/__snapshots__/treeSelect.spec.tsx.snap b/packages/shineout/src/tree-select/__test__/__snapshots__/treeSelect.spec.tsx.snap
index 8d8f47e70..1154cf828 100644
--- a/packages/shineout/src/tree-select/__test__/__snapshots__/treeSelect.spec.tsx.snap
+++ b/packages/shineout/src/tree-select/__test__/__snapshots__/treeSelect.spec.tsx.snap
@@ -258,7 +258,12 @@ exports[`TreeSelect[Base] should render correctly about compressed 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>
@@ -2890,7 +2895,12 @@ exports[`TreeSelect[Base] should render correctly about unmatch 1`] = `
             viewBox="0 0 24 24"
           >
             <path
-              d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.7845 8.38125C9.39221 8.07623 8.82498 8.10396 8.46449 8.46444C8.07397 8.85497 8.07397 9.48813 8.46449 9.87866L10.5846 11.9995L8.46449 14.1213L8.3813 14.2155C8.07628 14.6078 8.10401 15.175 8.46449 15.5355C8.85502 15.926 9.48818 15.926 9.87871 15.5355L11.9996 13.4136L14.1213 15.5355L14.2156 15.6187C14.6078 15.9237 15.1751 15.896 15.5356 15.5355C15.9261 15.145 15.9261 14.5118 15.5356 14.1213L13.4136 11.9995L15.5356 9.87866L15.6187 9.78445C15.9238 9.39216 15.896 8.82493 15.5356 8.46444C15.145 8.07392 14.5119 8.07392 14.1213 8.46444L11.9996 10.5845L9.87871 8.46444L9.7845 8.38125Z"
+              d="M12 23C5.924 23 1 18.076 1 12C1 5.924 5.924 1 12 1C18.076 1 23 5.924 23 12C23 18.076 18.076 23 12 23Z"
+              fill="currentColor"
+            />
+            <path
+              d="M9.6129 8.2097C9.22061 7.90468 8.65338 7.93241 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.413 11.828L8.29289 13.9497L8.2097 14.044C7.90468 14.4362 7.93241 15.0035 8.29289 15.364C8.68342 15.7545 9.31658 15.7545 9.70711 15.364L11.828 13.242L13.9497 15.364L14.044 15.4471C14.4362 15.7522 15.0035 15.7244 15.364 15.364C15.7545 14.9734 15.7545 14.3403 15.364 13.9497L13.242 11.828L15.364 9.70711L15.4471 9.6129C15.7522 9.22061 15.7244 8.65338 15.364 8.29289C14.9734 7.90237 14.3403 7.90237 13.9497 8.29289L11.828 10.413L9.70711 8.29289L9.6129 8.2097Z"
+              fill="white"
             />
           </svg>
         </span>