@ebscn/ui 1.0.3-beta.13 → 1.0.3-beta.16

package/cjs/components/alphabet-keyboard/alphabet-keyboard.css

@@ -1,20 +1,38 @@
 :root {
-  --ebscn-color-keyboard-bg: #d2d5d8;
+  --ebscn-color-keyboard-bg: #d3d5d8;
   --ebscn-color-keyboard-key-bg: #fff;
-  --ebscn-color-functionkey-background: #adb3bd;
-  --ebscn-color-keyboard-active-background: #E5E5E5;
+  --ebscn-color-keyboard-fckey-bg: #adb3bd;
+  --ebscn-color-keyboard-key-bg-active: #E5E5E5;
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord {
-  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete {
-  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
-  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2_dark.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
 }
 .ebscn-alphabet-keyboard {
   position: fixed;
@@ -28,41 +46,37 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-bg);
 }
-.ebscn-alphabet-keyboard-darkkey {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 11.2%;
-  height: 42px;
-  border-radius: 5px;
-  background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  font-size: 17px;
-  font-size: var(--ebscn-font-size-9);
-}
-.ebscn-alphabet-keyboard-darkkey:active {
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
-}
 .ebscn-alphabet-keyboard-shift {
   margin-right: 3.73%;
   background: url(../../assets/images/keybord_shift.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
   background-size: 17px 17px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
 }
 .ebscn-alphabet-keyboard-delete {
   margin-left: 2.26%;
   background: url(../../assets/images/delete.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-keybord {
   background: url(../../assets/images/keybord_keybord.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 18px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 18px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space {
   display: flex;
@@ -70,12 +84,16 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   justify-content: center;
   width: 48.4%;
   height: 42px;
-  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
   font-size: 16px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space:active {
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
@@ -84,7 +102,7 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding-top: 3%;
+  padding-top: calc(3% - 1px);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key,
@@ -93,40 +111,57 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
   width: 8.4%;
-  height: 42px;
+  height: 40px;
   background-color: #fff;
-  background-color: var(--ebscn-color-keyboard-key-bg);
+  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
   font-size: 23px;
   font-weight: 400;
   text-align: center;
+  color: #333;
   color: var(--ebscn-color-text);
-  margin-right: 1.6%;
+  margin: 0 3px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-key:active {
-  background-color: #eee;
-  background-color: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
-.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+.ebscn-alphabet-keyboard-darkkey {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  font-size: var(--ebscn-font-size-9);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-alphabet-keyboard-darkkey:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline {
   padding-left: 5.73%;
   padding-right: 5.73%;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
-  padding-bottom: 1.06%;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-bottom: 6px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
   display: flex;
@@ -142,16 +177,18 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   text-align: center;
   color: #fff;
   line-height: 22.5px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline img {
   height: 20%;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-alphabet-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
   }
 }

package/cjs/components/alphabet-keyboard/alphabet-keyboard.js

@@ -114,12 +114,11 @@ function AlphabetKeyboard(p) {
   }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
+      className: item == '↑' && isBig ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift ").concat(classPrefix, "-shift-big") : item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
       onClick: function () {
         if (visible) {
           onKeyPress(item);
         }
-        ;
       }
     }, imgKeys.includes(item) ? '' : item);
   })), _react.default.createElement("div", {

package/cjs/components/button/selectorButton.css

@@ -3,9 +3,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 14px;
 }
 .ebscn-selectorbutton-icon {
   margin-left: 4px;
+  font-size: 12px;
   display: flex;
   align-items: center;
   transition: transform 0.5s;

package/cjs/components/button/selectorButton.js

@@ -148,10 +148,6 @@ var SelectorButton = function (p) {
     onClick: handleClick
   }, props.children, _react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(classPrefix, "-icon"), (_a = {}, _a["".concat(classPrefix, "-icon-active")] = props.active && props.autoRotate, _a))
-  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, {
-    style: {
-      fontSize: '14px'
-    }
-  }))));
+  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, null))));
 };
 exports.SelectorButton = SelectorButton;

package/cjs/components/checkbox/checkbox.css

@@ -1,11 +1,14 @@
 .ebscn-checkbox {
-  --icon-size: 24px;
+  --icon-size: 20px;
+  --icon-wrap-size: 24px;
   --font-size: var(--ebscn-font-size-8);
   --gap: 12px;
   display: inline-flex;
   vertical-align: text-bottom;
   justify-content: flex-start;
   align-items: center;
+  min-width: var(--icon-wrap-size);
+  min-height: var(--icon-wrap-size);
   cursor: pointer;
 }
 .ebscn-checkbox input {
@@ -17,11 +20,14 @@
   --gap: 9px;
 }
 .ebscn-checkbox .ebscn-checkbox-icon {
+  margin: auto;
   flex: none;
   border-radius: var(--icon-size);
   border: 1px solid var(--ebscn-color-light);
   box-sizing: border-box;
-  width: var(--icon-size);
+  width: 20px;
+  width: var(---icon-size);
+  height: 20px;
   height: var(--icon-size);
   color: var(--ebscn-color-text-light-solid);
 }
@@ -81,7 +87,6 @@
 }
 .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
   margin-right: 16px;
-  height: 100%;
   border-color: transparent;
 }
 .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {

package/cjs/components/divider/divider.css

@@ -3,9 +3,10 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--color);
+  border-color: var(--ebscn-color-split-line);
   border-style: solid;
-  color: var(--ebscn-color-weak);
+  color: #ebebeb;
+  color: var(--ebscn-color-split-line);
   font-size: 14px;
 }
 .ebscn-divider-left.ebscn-divider-horizontal::before {
@@ -35,5 +36,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--color);
+  border-left: 1px solid var(--ebscn-color-split-line);
 }

package/cjs/components/header/header.css

@@ -3,6 +3,7 @@
   --bgColor: #FFFFFF;
   --subTitleColor: #666666;
   --buttonColor: #666666;
+  --icon-size: 20px;
   display: flex;
   align-items: center;
   height: 44px;
@@ -15,7 +16,11 @@
 .ebscn-header-left,
 .ebscn-header-right {
   flex: 1;
-  font-size: 28px;
+  font-size: 20px;
+  font-size: var(--icon-size);
+}
+.ebscn-header-left-back {
+  padding: 4px;
 }
 .ebscn-header-title {
   flex: auto;
@@ -54,6 +59,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-right: 4px;
 }
 .ebscn-header-text-button {
   font-size: 15px;

package/cjs/components/header/header.js

@@ -21,11 +21,13 @@ var Header = function (p) {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix)
   }, _react.default.createElement("div", {
-    className: "".concat(classPrefix, "-left"),
+    className: "".concat(classPrefix, "-left")
+  }, props.showLeftIcon && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-left-back"),
     onClick: function () {
       return props.onLeftClick();
     }
-  }, props.showLeftIcon && _react.default.createElement(_backIcon.default, null), props.left), _react.default.createElement("div", {
+  }, _react.default.createElement(_backIcon.default, null), " "), props.left), _react.default.createElement("div", {
     className: "".concat(classPrefix, "-title")
   }, props.title && _react.default.createElement("div", null, props.title), props.subTitle && _react.default.createElement("div", {
     className: "".concat(classPrefix, "-subtitle")

package/cjs/components/number-keyboard/number-keyboard.css

@@ -1,6 +1,6 @@
 html[data-prefers-color-scheme='dark'] .ebscn-number-keyboard-delete {
-  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
 }
 .ebscn-number-keyboard {
   display: none;
@@ -16,67 +16,71 @@ html[data-prefers-color-scheme='dark'] .ebscn-number-keyboard-delete {
   padding: 3px;
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-bg);
+  box-sizing: border-box;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-number-keyboard-key,
-.ebscn-number-keyboard-confirmKey {
-  width: calc(25% - 7.5px);
-  height: 48.5px;
-  line-height: 48.5px;
+.ebscn-number-keyboard-key {
+  width: calc(25% - 8.25px);
+  height: 46px;
+  line-height: 46px;
   border-radius: 4.17px;
   margin: 3px;
   text-align: center;
   font-weight: 400;
-}
-.ebscn-number-keyboard-key {
   font-size: 23px;
   color: #333;
   color: var(--ebscn-color-text);
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-number-keyboard-key:active {
   background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-number-keyboard-ABC {
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
 }
 .ebscn-number-keyboard-option {
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
   color: #333;
   color: var(--ebscn-color-text);
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-option:active {
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-number-keyboard-delete {
   background: url(../../assets/images/delete.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-delete:active {
   background: url(../../assets/images/delete.png) no-repeat center;
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
-  background-size: 24px 24px;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+  background-size: 25px 25px;
 }
 .ebscn-number-keyboard-confirmKey {
   background-color: #e84225;
   background-color: var(--ebscn-color-primary);
-  width: calc(25% - 6px);
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
   color: #fff;
   color: var(--ebscn-color-white);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-confirmKey:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-number-keyboard {

package/cjs/components/number-keyboard/number-keyboard.js

@@ -83,7 +83,7 @@ function NumberKeyboard(p) {
   }, keys.map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      className: (0, _classnames.default)("".concat(classPrefix, "-key"), item === 'ABC' ? "".concat(classPrefix, "-ABC") : '', typeof item !== 'number' && item.length && item !== '.' && item !== '确定' && item !== 'ABC' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);

package/cjs/components/picker-view/picker-view.css

@@ -1,6 +1,6 @@
 .ebscn-picker-view {
   --height: 240px;
-  --item-height: 34px;
+  --item-height: 33px;
   --item-font-size: var(--ebscn-font-size-8);
   height: var(--height);
   width: 100%;
@@ -97,9 +97,10 @@
 }
 .ebscn-picker-view-mask-middle {
   height: var(--item-height);
+  margin: 0 16px;
   box-sizing: border-box;
   flex: none;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.04);
   z-index: 0;
 }
 .ebscn-picker-view-mask-top {

package/cjs/components/selector/selector.css

@@ -12,7 +12,7 @@
   ---gap-horizontal: var(--gap-horizontal, var(--gap));
   ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
-  font-size: var(--ebscn-font-size-7);
+  font-size: var(--ebscn-font-size-6);
   line-height: 1.4;
 }
 .ebscn-selector .ebscn-space.ebscn-space {

package/cjs/components/skeleton/skeleton.css

@@ -2,22 +2,22 @@
   --width: 100%;
   --height: 0;
   --border-radius: 3px;
-  background-color: rgba(190, 190, 190, 0.2);
+  background-color: #f8f9fc;
   border-radius: var(--border-radius);
   width: var(--width);
   height: var(--height);
   display: block;
 }
 .ebscn-skeleton.ebscn-skeleton-animated {
-  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background: linear-gradient(90deg, rgba(248, 249, 245) 25%, rgba(248, 249, 245, 0.3) 37%, rgba(248, 249, 245) 63%);
   background-size: 400% 100%;
   animation: ebscn-skeleton-loading 1.3s ease infinite;
 }
 .ebscn-skeleton.ebscn-skeleton-primary {
-  background-color: rgba(232, 66, 37, 0.2);
+  background-color: rgba(255, 66, 37, 0.2);
 }
 .ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
-  background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
+  background: linear-gradient(90deg, rgba(255, 216, 214) 25%, rgba(255, 216, 214, 0.3) 37%, rgba(255, 216, 214) 63%);
   background-size: 400% 100%;
   animation: ebscn-skeleton-loading 1.3s ease infinite;
 }

package/cjs/components/squared-grid/squared-grid.css

@@ -12,7 +12,6 @@
 .ebscn-squared-grid-item {
   flex: 0 0 var(--flex-basic);
   display: flex;
-  justify-content: center;
   align-items: center;
   flex-direction: var(--item-flex-direction);
 }
@@ -20,7 +19,7 @@
   width: var(--icon-size);
   height: var(--icon-size);
   font-size: var(--icon-size);
-  margin: 5px;
+  padding: 6px;
 }
 .ebscn-squared-grid-item-label {
   font-size: var(--ebscn-font-size-5);

package/cjs/components/squared-grid/squared-grid.d.ts

@@ -1,10 +1,11 @@
-import type { FC, ReactNode } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PageIndicatorProps } from '../page-indicator';
 export type SquaredGridProps = {
     maxColumns?: number;
     maxRow?: number;
+    justifyContent?: CSSProperties['justifyContent'];
     children?: ReactNode;
     indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
 } & NativeProps<'--row-gap' | '--icon-size'>;

package/cjs/components/squared-grid/squared-grid.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SquaredGridItem = exports.SquaredGrid = void 0;
-var _ = require("../..");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
 var _nativeProps = require("../../utils/native-props");
 var _withDefaultProps = require("../../utils/with-default-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,8 +38,17 @@ var SquaredGrid = function (p) {
   var children = _react.default.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
   var pageSize = maxColumns * maxRow;
   var overPage = pageSize < children.length;
+  var justifyContent = props.justifyContent;
+  if (!justifyContent) {
+    if (children.length > maxColumns) {
+      justifyContent = 'flex-start';
+    } else {
+      justifyContent = 'space-around';
+    }
+  }
   var style = {
-    '--flex': "".concat(100 / maxColumns, "%")
+    '--flex': "".concat(100 / maxColumns, "%"),
+    justifyContent: justifyContent
   };
   var renderSwiperItems = function () {
     var pages = chunkArray(children, pageSize);