@ebscn/ui 1.0.3-beta.4 → 1.0.3-beta.7

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

@@ -1,3 +1,21 @@
+:root {
+  --ebscn-color-keyboard-bg: #d2d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-functionkey-background: #adb3bd;
+  --ebscn-color-keyboard-active-background: #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;
+}
+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;
+}
+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;
+}
 .ebscn-alphabet-keyboard {
   position: fixed;
   bottom: 0;
@@ -7,7 +25,7 @@
   width: 100%;
   transition: all 0.5s;
   align-content: flex-start;
-  background: #d2d5db;
+  background-color: var(--ebscn-color-keyboard-bg);
 }
 .ebscn-alphabet-keyboard-darkkey {
   display: flex;
@@ -16,25 +34,24 @@
   width: 11.2%;
   height: 42px;
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
-  background: #adb3bd;
+  background-color: var(--ebscn-color-functionkey-background);
   font-size: var(--ebscn-font-size-9);
 }
 .ebscn-alphabet-keyboard-darkkey:active {
-  background: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-active-background);
 }
 .ebscn-alphabet-keyboard-shift {
   margin-right: 3.73%;
-  background: url(../../assets/images/keybord_shift.png) #adb3bd no-repeat center;
+  background: url(../../assets/images/keybord_shift.png) var(--ebscn-color-functionkey-background) no-repeat center;
   background-size: 17px 17px;
 }
 .ebscn-alphabet-keyboard-delete {
   margin-left: 2.26%;
-  background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-alphabet-keyboard-keybord {
-  background: url(../../assets/images/keybord_keybord.png) #adb3bd no-repeat center;
+  background: url(../../assets/images/keybord_keybord.png) var(--ebscn-color-functionkey-background) no-repeat center;
   background-size: 24px 18px;
 }
 .ebscn-alphabet-keyboard-space {
@@ -43,9 +60,9 @@
   justify-content: center;
   width: 48.4%;
   height: 42px;
-  background: var(--ebscn-color-white);
+  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
+  font-size: 16px;
 }
 .ebscn-alphabet-keyboard-space:active {
   background: var(--ebscn-color-border);
@@ -57,7 +74,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding-top: 3.2%;
+  padding-top: 3%;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key,
@@ -68,9 +85,8 @@
   justify-content: center;
   width: 8.4%;
   height: 42px;
-  background: var(--ebscn-color-white);
+  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
   font-size: 23px;
   font-weight: 400;
   text-align: center;
@@ -108,11 +124,10 @@
   height: 42px;
   background: var(--ebscn-color-primary);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
   font-size: 16px;
   font-weight: 400;
   text-align: center;
-  color: var(--ebscn-color-white);
+  color: #fff;
   line-height: 22.5px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm:active {

package/es/components/card/card.js

@@ -9,7 +9,7 @@ export default function Card(props) {
       return null;
     }
     return React.createElement("div", {
-      className: cns("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
+      className: cns("".concat(classPrefix, "-header"), "".concat(typeClassName, "-header"), props.headerClassName),
       style: props.headerStyle,
       onClick: props.onHeaderClick
     }, React.createElement("div", {
@@ -21,7 +21,7 @@ export default function Card(props) {
       return null;
     }
     return React.createElement("div", {
-      className: cns("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
+      className: cns("".concat(classPrefix, "-body"), "".concat(typeClassName, "-body"), props.bodyClassName),
       style: props.bodyStyle,
       onClick: props.onBodyClick
     }, props.children);

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

@@ -10,6 +10,7 @@ var BackIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M361.344 121.392a32 32 0 0 1 45.312 45.216l-334.4 335.136a15.6 15.6 0 0 0 0.032 22.064l334.32 333.536a32 32 0 1 1-45.216 45.312L27.088 569.104a79.6 79.6 0 0 1-0.128-112.56l334.4-335.152z",
     "p-id": "8061"
   })));

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

@@ -10,6 +10,7 @@ var ClearIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64zM342.624 297.376a32 32 0 0 0-45.248 0l-1.872 2.032a32 32 0 0 0 1.872 43.216L466.72 512 297.376 681.376a32 32 0 0 0 0 45.248l2.032 1.872a32 32 0 0 0 43.216-1.872L512 557.248l169.376 169.376a32 32 0 0 0 45.248 0l1.872-2.032a32 32 0 0 0-1.872-43.216L557.248 512l169.376-169.376a32 32 0 0 0 0-45.248l-2.032-1.872a32 32 0 0 0-43.216 1.872L512 466.72z",
     "p-id": "8691"
   })));

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

@@ -8,7 +8,8 @@ var CloseIcon = memo(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "8217",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: "currentColor"
   }, React.createElement("path", {
     d: "M137.376 137.376a32 32 0 0 1 45.248 0l712.768 712.768a32 32 0 1 1-45.248 45.248L137.376 182.624a32 32 0 0 1 0-45.248z",
     "p-id": "8218"

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

@@ -8,7 +8,8 @@ var NoticeIcon = memo(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "8375",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: "currentColor"
   }, React.createElement("path", {
     d: "M614.4 268.8a32 32 0 0 1 44.8-6.4C752.128 332.096 800 415.872 800 512c0 96.128-47.872 179.904-140.8 249.6a32 32 0 1 1-38.4-51.2C698.528 652.096 736 586.528 736 512s-37.472-140.096-115.2-198.4a32 32 0 0 1-6.4-44.8zM370.368 108.352A96 96 0 0 1 544 164.8v694.368a96 96 0 0 1-173.632 56.48L249.28 749.168A32 32 0 0 0 223.408 736H176a112 112 0 0 1-112-112V400a112 112 0 0 1 112-112h47.408a32 32 0 0 0 25.888-13.184l121.072-166.464z m96.448 30.576a32 32 0 0 0-44.688 7.056L301.056 312.48A96 96 0 0 1 223.408 352H176a48 48 0 0 0-48 48v224a48 48 0 0 0 48 48h47.408a96 96 0 0 1 77.648 39.536l121.072 166.48A32 32 0 0 0 480 859.184V164.816a32 32 0 0 0-13.184-25.888z",
     fill: "#333333",

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

@@ -10,6 +10,7 @@ var RightIcon = memo(function (props) {
     width: "1em",
     height: "1em"
   }, React.createElement("path", {
+    fill: "currentColor",
     d: "M662.656 121.392a32 32 0 0 0-45.312 45.216l334.4 335.136c6.08 6.096 6.064 15.968-0.032 22.064L617.392 857.344a32 32 0 1 0 45.216 45.312l334.304-333.552a79.6 79.6 0 0 0 0.128-112.56l-334.4-335.152z",
     "p-id": "8534"
   })));

package/es/components/input/input.css

@@ -1,7 +1,7 @@
-.adm-input {
-  --font-size: var(--adm-font-size-9);
-  --color: var(--adm-color-text);
-  --placeholder-color: var(--adm-color-light);
+.ebscn-input {
+  --font-size: var(--ebscn-font-size-9);
+  --color: var(--ebscn-color-text);
+  --placeholder-color: var(--ebscn-color-light);
   --text-align: left;
   --background-color: transparent;
   display: flex;
@@ -13,11 +13,11 @@
   min-height: 24px;
   background-color: var(--background-color);
 }
-.adm-input-disabled {
+.ebscn-input-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-.adm-input-element {
+.ebscn-input-element {
   flex: auto;
   display: inline-block;
   box-sizing: border-box;
@@ -37,60 +37,60 @@
   min-height: 1.5em;
   text-align: var(--text-align);
 }
-.adm-input-element::-webkit-input-placeholder {
+.ebscn-input-element::-webkit-input-placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-input-element::placeholder {
+.ebscn-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-input-element:-webkit-autofill {
+.ebscn-input-element:-webkit-autofill {
   background-color: transparent;
 }
-.adm-input-element:read-only {
+.ebscn-input-element:read-only {
   cursor: default;
 }
-.adm-input-element:invalid {
+.ebscn-input-element:invalid {
   box-shadow: none;
 }
-.adm-input-element::-ms-clear {
+.ebscn-input-element::-ms-clear {
   display: none;
 }
-.adm-input-element::-ms-reveal {
+.ebscn-input-element::-ms-reveal {
   display: none;
 }
-.adm-input-element::-webkit-search-cancel-button {
+.ebscn-input-element::-webkit-search-cancel-button {
   display: none;
 }
-.adm-input-element::-webkit-search-decoration {
+.ebscn-input-element::-webkit-search-decoration {
   display: none;
 }
-.adm-input-element:disabled {
+.ebscn-input-element:disabled {
   opacity: 1;
 }
-.adm-input-element[type='date'],
-.adm-input-element[type='time'],
-.adm-input-element[type='datetime-local'] {
+.ebscn-input-element[type='date'],
+.ebscn-input-element[type='time'],
+.ebscn-input-element[type='datetime-local'] {
   min-height: 1.5em;
 }
-.adm-input-element[type='search'] {
+.ebscn-input-element[type='search'] {
   -webkit-appearance: none;
 }
-.adm-input-element[readonly] {
+.ebscn-input-element[readonly] {
   pointer-events: none;
 }
-.adm-input-clear {
+.ebscn-input-clear {
   flex: none;
   margin-left: 8px;
-  color: var(--adm-color-light);
+  color: var(--ebscn-color-light);
   padding: 4px;
   cursor: pointer;
 }
-.adm-input-clear:active {
-  color: var(--adm-color-weak);
+.ebscn-input-clear:active {
+  color: var(--ebscn-color-weak);
 }
-.adm-input-clear .antd-mobile-icon {
+.ebscn-input-clear .antd-mobile-icon {
   display: block;
-  font-size: var(--adm-font-size-7);
+  font-size: var(--ebscn-font-size-7);
 }

package/es/components/input/input.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { useIsomorphicLayoutEffect } from 'ahooks';
 import { bound } from '../../utils/bound';
 import { isIOS } from '../../utils/validate';
-var classPrefix = "adm-input";
+var classPrefix = "ebscn-input";
 var defaultProps = {
   defaultValue: '',
   onlyShowClearWhenFocus: true

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

@@ -1,14 +1,6 @@
-:root {
-  --ebscn-color-keyboard-bg: #d2d5d8;
-  --ebscn-color-keyboard-key-bg: #fff;
-  --ebscn-color-functionkey-background: #adb3bd;
-  --ebscn-color-keyboard-active-background: #E5E5E5;
-}
-html[data-prefers-color-scheme='dark'] {
-  --ebscn-color-keyboard-bg: #1a1a1a;
-  --ebscn-color-keyboard-key-bg: #474747;
-  --ebscn-color-functionkey-background: #292929;
-  --ebscn-color-keyboard-active-background: #323232;
+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;
 }
 .ebscn-number-keyboard {
   display: none;
@@ -26,35 +18,31 @@ html[data-prefers-color-scheme='dark'] {
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-number-keyboard :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-background);
-}
-.ebscn-number-keyboard-key {
+.ebscn-number-keyboard-key,
+.ebscn-number-keyboard-confirmKey {
   width: calc(25% - 7.5px);
-  height: 48px;
-  line-height: 48px;
+  height: 48.5px;
+  line-height: 48.5px;
   border-radius: 4.17px;
   margin: 3px;
   text-align: center;
-  font-size: 24px;
-  font-weight: bold;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
+  font-weight: 400;
+}
+.ebscn-number-keyboard-key {
+  font-size: 23px;
   color: var(--ebscn-color-text);
-  box-shadow: 0 0 0 1px #cccccc;
   background: var(--ebscn-color-keyboard-key-bg);
 }
 .ebscn-number-keyboard-key:active {
   background: var(--ebscn-color-keyboard-active-background);
 }
 .ebscn-number-keyboard-option {
-  font-size: var(--ebscn-font-size-11);
+  font-size: var(--ebscn-font-size-10);
   color: var(--ebscn-color-text);
   background-color: var(--ebscn-color-functionkey-background);
 }
 .ebscn-number-keyboard-option:active {
-  font-size: var(--ebscn-font-size-11);
+  font-size: var(--ebscn-font-size-10);
   background-color: var(--ebscn-color-keyboard-active-background);
 }
 .ebscn-number-keyboard-delete {
@@ -67,20 +55,12 @@ html[data-prefers-color-scheme='dark'] {
 }
 .ebscn-number-keyboard-confirmKey {
   background-color: var(--ebscn-color-primary);
-  width: calc(25% - 7.5px);
-  height: 48px;
-  line-height: 48px;
-  text-align: center;
-  border-radius: 4.17px;
-  margin: 3px;
-  font-size: var(--ebscn-font-size-11);
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
+  width: calc(25% - 6px);
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-white);
 }
 .ebscn-number-keyboard-confirmKey:active {
   background-color: #D03B21;
-  color: var(--ebscn-color-background);
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-number-keyboard {

package/es/components/stock-count-keyboard/stock-count-keyboard.css

@@ -1,74 +1,68 @@
+html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
 .ebscn-stock-count-keyboard {
   display: none;
   position: fixed;
+  z-index: 999;
   bottom: 0;
   transform: translateY(101%);
   display: flex;
   flex-wrap: wrap;
   width: 100%;
-  height: 216px;
+  height: 223px;
+  background-color: var(--ebscn-color-keyboard-bg);
+  padding: 3px;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-stock-count-keyboard :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-background);
+.ebscn-stock-count-keyboard-key,
+.ebscn-stock-count-keyboard-confirmKey {
+  border-radius: 4.17px;
+  width: calc(20% - 7.5px);
+  margin: 3px;
+  height: 48px;
+  text-align: center;
+  line-height: 48px;
+  font-weight: 400;
 }
 .ebscn-stock-count-keyboard-key {
-  width: 20%;
-  height: 54px;
-  text-align: center;
-  line-height: 54px;
-  font-size: 24px;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-background);
+  font-size: 23px;
+  color: var(--ebscn-color-text);
+  background: var(--ebscn-color-keyboard-key-bg);
 }
 .ebscn-stock-count-keyboard-key:active {
-  width: 20%;
-  height: 54px;
-  text-align: center;
-  font-size: 24px;
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
-  background: var(--ebscn-color-border);
+  background: var(--ebscn-color-keyboard-active-background);
 }
 .ebscn-stock-count-keyboard-option {
-  font-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-text);
+  background-color: var(--ebscn-color-functionkey-background);
 }
 .ebscn-stock-count-keyboard-option:active {
-  font-size: var(--ebscn-font-size-11);
-  background: #CACBD0;
+  font-size: var(--ebscn-font-size-10);
+  background-color: var(--ebscn-color-keyboard-active-background);
 }
 .ebscn-stock-count-keyboard-delete {
-  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-count-keyboard-delete:active {
-  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
   background-size: 24px 24px;
 }
 .ebscn-stock-count-keyboard-confirmKey {
   background-color: var(--ebscn-color-primary);
-  width: 20%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: var(--ebscn-font-size-11);
-  color: var(--ebscn-color-text-dark-solid);
-  font-weight: 300;
-  box-shadow: 0 0 0 1px #cccccc;
+  font-size: var(--ebscn-font-size-10);
+  color: var(--ebscn-color-white);
 }
 .ebscn-stock-count-keyboard-confirmKey:active {
   background-color: #D03B21;
-  color: var(--ebscn-color-background);
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-stock-count-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/es/components/stock-count-keyboard/stock-count-keyboard.js

@@ -63,7 +63,7 @@ export function StockCountKeyboard(p) {
   }, keys.map(function (item, index) {
     return React.createElement("div", {
       key: item || index,
-      className: cns(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: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item !== '00' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);

package/es/components/stock-keyboard/alphabet-keyboard.css

@@ -0,0 +1,136 @@
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-keybord {
+  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-extra-shift {
+  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-alphabet-keyboard-extra {
+  position: relative;
+  transform: translateY(0);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  align-content: flex-start;
+  background-color: var(--ebscn-color-keyboard-bg);
+}
+.ebscn-alphabet-keyboard-extra-darkkey {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  background-color: var(--ebscn-color-functionkey-background);
+  font-size: var(--ebscn-font-size-9);
+}
+.ebscn-alphabet-keyboard-extra-darkkey:active {
+  background-color: var(--ebscn-color-keyboard-active-background);
+}
+.ebscn-alphabet-keyboard-extra-shift {
+  margin-right: 3.73%;
+  background: url(../../assets/images/keybord_shift.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 17px 17px;
+}
+.ebscn-alphabet-keyboard-extra-delete {
+  margin-left: 2.26%;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-alphabet-keyboard-extra-keybord {
+  background: url(../../assets/images/keybord_keybord.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background-size: 24px 18px;
+}
+.ebscn-alphabet-keyboard-extra-space {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48.4%;
+  height: 42px;
+  border-radius: 5px;
+  font-size: 16px;
+  background: var(--ebscn-color-keyboard-key-bg);
+}
+.ebscn-alphabet-keyboard-extra-space:active {
+  background: var(--ebscn-color-border);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 3%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline-key,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 8.4%;
+  height: 42px;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border-radius: 5px;
+  font-size: 23px;
+  font-weight: 400;
+  text-align: center;
+  color: var(--ebscn-color-text);
+  margin-right: 1.6%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline-key:active,
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-key:active {
+  background: var(--ebscn-color-border);
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firstline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-secondline {
+  padding-left: 5.73%;
+  padding-right: 5.73%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-thirdline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+  padding-bottom: 1.06%;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-confirm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 23.46%;
+  height: 42px;
+  background: var(--ebscn-color-primary);
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  color: #fff;
+  line-height: 22.5px;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline-confirm:active {
+  background-color: #D03B21;
+}
+.ebscn-alphabet-keyboard-extra .ebscn-alphabet-keyboard-extra-firthline img {
+  height: 20%;
+}
+@supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
+  .ebscn-alphabet-keyboard-extra {
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
+  }
+}

package/es/components/stock-keyboard/alphabet-keyboard.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { NativeProps } from '../../utils/native-props';
+export type AlphabetKeyboardProps = {
+    visible?: boolean;
+    onInput: Function;
+    onDelete: Function;
+    onClose: Function;
+    onChangeKeyBoard?: Function;
+    onConfirm: Function;
+} & NativeProps;
+export declare function AlphabetKeyboard(p: AlphabetKeyboardProps): JSX.Element;