@taikai/rocket-kit 2.0.1 → 2.0.2

package/dist/rocket-kit.esm.js

@@ -178,7 +178,7 @@ const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
     `, props => props.color === 'magic' && css`
       --button: ${light};
       --hover: ${lightGrey};
-    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? props.circle ? rem('36px') : 'min-content' : rem('36px'), /*#__PURE__*/rem('32px'), props => props.value ? props.circle ? 0 : `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('36px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, props => props.variant === 'solid' ? '' : 'var(--button)', medium, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
+    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? props.circle ? rem('32px') : 'min-content' : rem('32px'), /*#__PURE__*/rem('32px'), props => props.value ? props.circle ? 0 : `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, props => props.variant === 'solid' ? '' : 'var(--button)', medium, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
       position: relative;
       background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
       height: ${rem('60px')};
@@ -404,7 +404,7 @@ const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
     `, props => props.color === 'magic' && css`
       --button: ${light$2};
       --hover: ${lightGrey$2};
-    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? rem('80px') : rem('36px'), /*#__PURE__*/rem('32px'), props => props.value ? `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('36px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, medium$1, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
+    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? rem('80px') : rem('32px'), /*#__PURE__*/rem('32px'), props => props.value ? `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, medium$1, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
       position: relative;
       background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
       height: ${rem('60px')};
@@ -1046,7 +1046,7 @@ const {
 const TagWrapper = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "sc-1ghratr-0"
-})(["display:inline-block;border:", " solid ", ";border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;line-height:1;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;&:not(:first-child){margin-left:", ";}", " ", " ", " ", " ", " ", ""], /*#__PURE__*/rem('2px'), grey$b, /*#__PURE__*/rem('3px'), grey$b, /*#__PURE__*/rem('150px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), bold$3, light$7, /*#__PURE__*/rem('5px'), props => props.color === 'green' && css`
+})(["display:inline-block;border:", " solid ", ";border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;line-height:1;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;", " ", " ", " ", " ", " ", ""], /*#__PURE__*/rem('2px'), grey$b, /*#__PURE__*/rem('3px'), grey$b, /*#__PURE__*/rem('150px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), bold$3, light$7, props => props.color === 'green' && css`
       border-color: ${green$5};
       background-color: ${green$5};
       color: ${props.variant === 'solid' ? light$7 : green$5};
@@ -1464,6 +1464,11 @@ const Wrapper$2 = _styled.div`
     flex: 1;
     border: 0;
     color: ${props => props.error ? red$8 : normal$7};
+
+    &:disabled {
+      margin: 0;
+      border-radius: 0;
+    }
   }
 
   & + span {
@@ -5850,7 +5855,7 @@ const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-46huls-2"
-})(["position:fixed;right:0;background:", ";width:100%;height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], light$o, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
+})(["position:fixed;right:0;background:", ";width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], light$o, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
 const ModalHeader$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalHeader",
   componentId: "sc-46huls-3"
@@ -5871,6 +5876,23 @@ const ModalDrawer = props => {
     footerHidden = false,
     zIndex = 10
   } = props;
+  useEffect(() => {
+    const fixViewport = () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    fixViewport();
+
+    if (typeof window !== 'undefined') {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+      window.addEventListener('resize', fixViewport);
+      return () => window.removeEventListener('resize', fixViewport);
+    }
+
+    return;
+  }, []);
   return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay$1, {
     zIndex: zIndex
   }), /*#__PURE__*/React.createElement(ModalWrapper$1, {