@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/components/svg/arrow-left.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGArrowLeft: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"
+    />
+  </svg>
+);
+
+export default SVGArrowLeft;

package/src/components/checkout/components/svg/arrow-right.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGArrowRight: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+    />
+  </svg>
+);
+
+export default SVGArrowRight;

package/src/components/checkout/components/svg/cross.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGCross: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+    />
+  </svg>
+);
+
+export default SVGCross;

package/src/components/checkout/components/svg/discount.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGDiscount: React.FC<Props> = ({ className }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <circle cx="8" cy="8" r="8" fill="#CFCED3" />
+    <path
+      d="M10.9167 5.08301L5.08334 10.9163"
+      stroke="white"
+      stroke-linecap="square"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.70832 6.75033C6.28362 6.75033 6.74999 6.28396 6.74999 5.70866C6.74999 5.13336 6.28362 4.66699 5.70832 4.66699C5.13303 4.66699 4.66666 5.13336 4.66666 5.70866C4.66666 6.28396 5.13303 6.75033 5.70832 6.75033Z"
+      fill="white"
+    />
+    <path
+      d="M10.2917 11.3333C10.867 11.3333 11.3333 10.867 11.3333 10.2917C11.3333 9.71637 10.867 9.25 10.2917 9.25C9.71637 9.25 9.25 9.71637 9.25 10.2917C9.25 10.867 9.71637 11.3333 10.2917 11.3333Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default SVGDiscount;

package/src/components/checkout/components/svg/external.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGExternal: React.FC<Props> = ({ className }) => (
+  <svg
+    width="82"
+    height="52"
+    viewBox="0 0 82 52"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <mask id="path-1-inside-1_1206:13861" fill="white">
+      <rect y="7" width="46" height="36.8" rx="0.925786" />
+    </mask>
+    <rect y="7" width="46" height="36.8" rx="0.925786" fill="#F7F7F9" />
+    <rect y="7" width="46" height="6.9697" fill="#F7F7F9" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.65531 11.3106C4.01723 11.3106 4.31062 11.0172 4.31062 10.6553C4.31062 10.2934 4.01723 10 3.65531 10C3.29339 10 3 10.2934 3 10.6553C3 11.0172 3.29339 11.3106 3.65531 11.3106Z"
+      fill="#272727"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.27543 11.3106C6.63735 11.3106 6.93074 11.0172 6.93074 10.6553C6.93074 10.2934 6.63735 10 6.27543 10C5.91351 10 5.62012 10.2934 5.62012 10.6553C5.62012 11.0172 5.91351 11.3106 6.27543 11.3106Z"
+      fill="#272727"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.89554 11.3106C9.25746 11.3106 9.55085 11.0172 9.55085 10.6553C9.55085 10.2934 9.25746 10 8.89554 10C8.53363 10 8.24023 10.2934 8.24023 10.6553C8.24023 11.0172 8.53363 11.3106 8.89554 11.3106Z"
+      fill="#272727"
+    />
+    <rect x="0.697266" y="13.2727" width="44.6061" height="1" fill="#272727" />
+    <rect
+      y="7"
+      width="46"
+      height="36.8"
+      rx="0.925786"
+      stroke="#272727"
+      stroke-width="2"
+      mask="url(#path-1-inside-1_1206:13861)"
+    />
+    <rect
+      x="16.5"
+      y="0.5"
+      width="65"
+      height="51"
+      rx="0.828302"
+      fill="#F7F7F9"
+    />
+    <rect x="16" width="66" height="9.84848" fill="#F7F7F9" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.9402 5.88045C21.4595 5.88045 21.8805 5.4595 21.8805 4.94023C21.8805 4.42095 21.4595 4 20.9402 4C20.421 4 20 4.42095 20 4.94023C20 5.4595 20.421 5.88045 20.9402 5.88045Z"
+      fill="#272727"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24.7 5.88045C25.2193 5.88045 25.6402 5.4595 25.6402 4.94023C25.6402 4.42095 25.2193 4 24.7 4C24.1807 4 23.7598 4.42095 23.7598 4.94023C23.7598 5.4595 24.1807 5.88045 24.7 5.88045Z"
+      fill="#272727"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M28.4588 5.88045C28.9781 5.88045 29.399 5.4595 29.399 4.94023C29.399 4.42095 28.9781 4 28.4588 4C27.9395 4 27.5186 4.42095 27.5186 4.94023C27.5186 5.4595 27.9395 5.88045 28.4588 5.88045Z"
+      fill="#272727"
+    />
+    <rect x="17" y="9" width="64" height="1" fill="#272727" />
+    <rect
+      x="16.5"
+      y="0.5"
+      width="65"
+      height="51"
+      rx="0.828302"
+      stroke="#272727"
+    />
+    <rect width="16" height="16" transform="translate(9 21)" fill="#F7F7F9" />
+    <path
+      d="M19.333 28L22.6663 31.3333L19.333 34.6667"
+      stroke="#272727"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 23.5V28.6667C12 29.3739 12.281 30.0522 12.781 30.5523C13.2811 31.0524 13.9594 31.3333 14.6667 31.3333H22.6667"
+      stroke="#272727"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default SVGExternal;

package/src/components/checkout/components/svg/gift.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const SVGGift: React.FC<Props> = ({ className, style }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    style={style}
+  >
+    <g clip-path="url(#clip0)">
+      <path
+        d="M14.9565 3.1166H13.7919C13.9455 2.87347 14.0469 2.60057 14.0758 2.31194C14.1681 1.38954 13.6823 0.562662 12.8553 0.196068C12.0951 -0.140901 11.2408 -0.00315052 10.6257 0.554787L9.15506 1.8876C8.86866 1.57435 8.45694 1.37747 8 1.37747C7.54225 1.37747 7.12988 1.57497 6.84341 1.88919L5.37091 0.554631C4.75475 -0.00330674 3.90081 -0.140526 3.14097 0.196256C2.31416 0.562881 1.82828 1.39004 1.92091 2.31241C1.94987 2.60082 2.05119 2.8736 2.20478 3.1166H1.04347C0.467156 3.1166 0 3.58379 0 4.16007V5.72529C0 6.01341 0.233594 6.24704 0.52175 6.24704H15.4783C15.7664 6.24704 16 6.01344 16 5.72529V4.16007C16 3.58379 15.5328 3.1166 14.9565 3.1166ZM6.43478 2.94269V3.1166H3.98031C3.33181 3.1166 2.82144 2.51204 2.98341 1.83685C3.05475 1.53951 3.26937 1.28604 3.54697 1.15772C3.92816 0.981537 4.35041 1.0381 4.67056 1.32788L6.43522 2.92732C6.43512 2.93247 6.43478 2.93754 6.43478 2.94269ZM13.0404 2.17341C13.0016 2.71569 12.5117 3.11666 11.9681 3.11666H9.56522V2.94276C9.56522 2.9366 9.56484 2.93051 9.56478 2.92435C9.96453 2.56197 10.8317 1.77597 11.3021 1.34963C11.5694 1.10735 11.9434 0.994256 12.2892 1.09738C12.7853 1.24538 13.0767 1.66732 13.0404 2.17341Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1.04395 7.29053V14.9427C1.04395 15.519 1.5111 15.9862 2.08741 15.9862H6.95698V7.29053H1.04395Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.04395 7.29053V15.9862H13.9135C14.4898 15.9862 14.957 15.519 14.957 14.9427V7.29053H9.04395Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SVGGift;

package/src/components/checkout/components/svg/ikas.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGIkas: React.FC<Props> = ({ className }) => (
+  <svg
+    width="42"
+    height="16"
+    viewBox="0 0 42 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M0.599609 14.325V6.37414C0.599609 6.02414 0.887609 5.74414 1.24761 5.74414H3.20961C3.56961 5.74414 3.85761 6.02414 3.85761 6.37414V14.325C3.85761 14.675 3.56961 14.955 3.20961 14.955H1.24761C0.887609 14.955 0.599609 14.675 0.599609 14.325Z"
+      fill="currentColor"
+    />
+    <path
+      d="M0.599609 3.20073V1.29323C0.599609 0.931559 0.899609 0.639893 1.27161 0.639893H3.18561C3.55761 0.639893 3.85761 0.931559 3.85761 1.29323V3.20073C3.85761 3.56239 3.55761 3.85406 3.18561 3.85406H1.27161C0.899609 3.85406 0.599609 3.55656 0.599609 3.20073Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.5847 14.7742L12.3287 11.0467L9.52072 14.8033C9.44872 14.8967 9.33472 14.955 9.21472 14.955H7.26472C7.05472 14.955 6.88672 14.7917 6.88672 14.5875V0.8675C6.88672 0.663333 7.05472 0.5 7.26472 0.5H9.76672C9.97672 0.5 10.1447 0.663333 10.1447 0.8675V9.81584L14.1107 3.8775C14.1827 3.7725 14.3027 3.70833 14.4287 3.70833H17.2427C17.5547 3.70833 17.7287 4.0525 17.5487 4.29167L14.4767 8.38084L17.9987 14.4067C18.1427 14.6517 17.9627 14.955 17.6687 14.955H14.9087C14.7767 14.955 14.6507 14.885 14.5847 14.7742Z"
+      fill="currentColor"
+    />
+    <path
+      d="M23.9277 15.1066C20.9337 15.1066 18.8457 12.7149 18.8457 9.29657C18.8457 5.87824 20.9337 3.48657 23.9277 3.48657C25.1757 3.48657 26.3217 3.99991 27.2457 4.97407L27.3657 5.10241L27.3777 4.92157C27.3777 4.68241 27.4017 4.32657 27.4197 4.05241C27.4377 3.85991 27.5997 3.70824 27.8037 3.70824H30.0297C30.2397 3.70824 30.4077 3.87157 30.4077 4.07574V14.5874C30.4077 14.7916 30.2397 14.9549 30.0297 14.9549H27.8037C27.6057 14.9549 27.4377 14.8032 27.4257 14.6107C27.4017 14.3074 27.3777 13.9166 27.3777 13.7474L27.3597 13.5374L27.2397 13.6599C26.3157 14.6049 25.1637 15.1066 23.9277 15.1066ZM24.8277 6.23991C23.2557 6.23991 22.1577 7.49407 22.1577 9.29657C22.1577 11.2391 23.1297 12.3532 24.8277 12.3532C25.8177 12.3532 26.6817 11.8049 27.1437 10.8891L27.1497 10.8716V10.8599C27.1017 9.82741 27.1017 8.78907 27.1497 7.75657L27.1437 7.73907C26.6757 6.79991 25.8117 6.23991 24.8277 6.23991Z"
+      fill="currentColor"
+    />
+    <path
+      d="M36.9306 15.1824C35.1486 15.1824 34.0146 14.8207 33.3786 14.5174C33.0606 14.3657 32.8326 14.2141 32.6766 14.0916C32.5386 13.9807 32.4966 13.7882 32.5866 13.6366L33.4806 11.9974C33.5886 11.7991 33.8526 11.7407 34.0386 11.8749C35.1606 12.6741 36.4086 12.7674 36.9366 12.7674C37.9866 12.7674 38.5686 12.3941 38.5686 11.7116C38.5686 10.8249 37.6926 10.6207 36.5826 10.3582C36.4746 10.3349 36.3726 10.3057 36.2586 10.2824C34.7826 9.92657 32.8266 9.20324 32.8266 7.10907C32.8266 6.04741 33.3066 5.13741 34.2246 4.47241C35.1006 3.83657 36.3126 3.48657 37.6446 3.48657C39.5706 3.48657 40.9206 4.11074 41.5146 4.45491C41.6886 4.55407 41.7486 4.76407 41.6526 4.93907L40.8246 6.50241C40.7286 6.68907 40.4886 6.75907 40.3026 6.65407C39.2106 6.04157 38.2626 5.90741 37.6386 5.90741C37.1946 5.90741 36.1626 5.90741 36.1626 6.88741C36.1626 7.62824 36.7986 7.76824 37.6026 7.94907C37.8666 8.00741 38.1666 8.07157 38.4726 8.16491C39.4986 8.47991 41.9106 9.20907 41.9106 11.4141C41.9106 12.4641 41.4306 13.4149 40.5546 14.1032C39.6246 14.8032 38.3766 15.1824 36.9306 15.1824Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SVGIkas;

package/src/components/checkout/components/svg/lock.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGLock: React.FC<Props> = ({ className }) => (
+  <svg
+    width="12"
+    height="16"
+    viewBox="0 0 12 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M10.5 6H10V4C10 1.794 8.206 0 6 0C3.794 0 2 1.794 2 4V6H1.5C0.673333 6 0 6.67267 0 7.5V14.5C0 15.3273 0.673333 16 1.5 16H10.5C11.3267 16 12 15.3273 12 14.5V7.5C12 6.67267 11.3267 6 10.5 6ZM3.33333 4C3.33333 2.52933 4.52933 1.33333 6 1.33333C7.47067 1.33333 8.66667 2.52933 8.66667 4V6H3.33333V4ZM6.66667 11.148V12.6667C6.66667 13.0347 6.36867 13.3333 6 13.3333C5.63133 13.3333 5.33333 13.0347 5.33333 12.6667V11.148C4.93667 10.9167 4.66667 10.4913 4.66667 10C4.66667 9.26467 5.26467 8.66667 6 8.66667C6.73533 8.66667 7.33333 9.26467 7.33333 10C7.33333 10.4913 7.06333 10.9167 6.66667 11.148Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SVGLock;

package/src/components/checkout/components/svg/shopping-cart.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGShoppingBag: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M4 16V4H2V2h3a1 1 0 0 1 1 1v12h12.438l2-8H8V5h13.72a1 1 0 0 1 .97 1.243l-2.5 10a1 1 0 0 1-.97.757H5a1 1 0 0 1-1-1zm2 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
+    />
+  </svg>
+);
+
+export default SVGShoppingBag;

package/src/components/checkout/components/svg/success-circle.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGSuccessCircle: React.FC<Props> = ({ className }) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <circle cx="20" cy="20" r="20" fill="#2DCA73" />
+    <path
+      d="M12 20L18 26L28.0005 15.9998"
+      stroke="white"
+      stroke-width="3.2"
+      stroke-linecap="round"
+    />
+  </svg>
+);
+
+export default SVGSuccessCircle;

package/src/components/checkout/components/svg/tag.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGTag: React.FC<Props> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    className={className}
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M10.9 2.1l9.899 1.415 1.414 9.9-9.192 9.192a1 1 0 0 1-1.414 0l-9.9-9.9a1 1 0 0 1 0-1.414L10.9 2.1zm2.828 8.486a2 2 0 1 0 2.828-2.829 2 2 0 0 0-2.828 2.829z"
+    />
+  </svg>
+);
+
+export default SVGTag;

package/src/components/checkout/components/svg/warning.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+type Props = {
+  className?: string;
+};
+
+const SVGWarning: React.FC<Props> = ({ className }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="8"
+      transform="rotate(180 8 8)"
+      fill="currentColor"
+    />
+    <path
+      d="M8.50976 4L8.50977 10.0938L7.49023 10.0938L7.49023 4L8.50976 4ZM8 11.1191C8.17187 11.1191 8.32031 11.1816 8.44531 11.3066C8.57031 11.4316 8.63281 11.5801 8.63281 11.752C8.63281 11.9277 8.57031 12.0762 8.44531 12.1973C8.32031 12.3223 8.17187 12.3848 8 12.3848C7.82422 12.3848 7.67383 12.3223 7.54883 12.1973C7.42383 12.0762 7.36133 11.9277 7.36133 11.752C7.36133 11.5801 7.42383 11.4316 7.54883 11.3066C7.67383 11.1816 7.82422 11.1191 8 11.1191Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default SVGWarning;

package/src/components/checkout/components/toggle/index.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import SVGCheck from "../checkbox/check";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  value: boolean;
+  label?: string | React.ReactElement;
+  hasError?: boolean;
+  removePadding?: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+export const Toggle: React.FC<Props> = observer(
+  ({ value, label, hasError, removePadding, onChange }) => {
+    const _onChange = () => {
+      onChange && onChange(!value);
+    };
+
+    const checkboxBorderClasses = [styles.CheckboxBorder];
+    const labelClasses = [styles.CheckboxLabel];
+    const tickClasses = [styles.CheckboxTick];
+
+    if (value) {
+      checkboxBorderClasses.push(styles.Checked);
+      tickClasses.push(styles.Visible);
+    }
+
+    if (hasError) labelClasses.push(styles.CheckboxLabelError);
+
+    return (
+      <div
+        className={[
+          styles.CheckboxWrapper,
+          removePadding ? styles.WithoutPadding : "",
+          !label ? styles.WithoutLabel : "",
+        ].join(" ")}
+        onClick={_onChange}
+      >
+        <div className={styles.CheckboxContainer}>
+          <div className={checkboxBorderClasses.join(" ")}></div>
+          <div className={tickClasses.join(" ")}>
+            <SVGCheck />
+          </div>
+        </div>
+        {!!label && <div className={labelClasses.join(" ")}>{label}</div>}
+      </div>
+    );
+  }
+);

package/src/components/checkout/components/toggle/style.module.scss

@@ -0,0 +1,75 @@
+@import "../../styles//variables.scss";
+
+.CheckboxWrapper {
+  width: 100%;
+  display: flex;
+  padding: 0.5em 0;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+
+  &.WithoutPadding {
+    padding: 0;
+  }
+
+  &.WithoutLabel {
+    padding: 0;
+    width: auto;
+  }
+
+  .CheckboxContainer {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-right: 16px;
+  }
+
+  .CheckboxBorder {
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    border: 1px solid $borderColor;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: border-width .2s ease-in-out;
+
+    &.Checked {
+      border: 10px solid $buttonBgColor;
+    }
+  }
+
+  .CheckboxTick {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: $buttonTextColor;
+    z-index: 2;
+
+    transition: all 0.2s ease-in-out;
+    transition-delay: .1s;
+    opacity: 0;
+    transform: scale(0.2);
+
+    &.Visible {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+  }
+
+  .CheckboxLabel {
+    flex: 1 1 auto;
+    font-weight: normal;
+  }
+
+  .CheckboxLabelError {
+    color: $errorColor;
+  }
+}

package/src/components/checkout/components/tooltip/index.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  text: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const Tooltip: React.FC<Props> = ({ text, className, style }) => {
+  return (
+    <div className={className} style={style}>
+      <div
+        className={styles.TooltipContainer}
+        data-tip={text}
+        data-event="touchstart focus mouseover"
+        data-event-off="mouseout"
+      >
+        ?
+      </div>
+    </div>
+  );
+};
+
+export default observer(Tooltip);

package/src/components/checkout/components/tooltip/style.module.scss

@@ -0,0 +1,86 @@
+@import "../../styles/variables.scss";
+
+.TooltipContainer {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  color: white;
+  background-color: $secondaryTextColor;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px !important;
+  cursor: pointer;
+  position: relative;
+
+  .Tooltip {
+    position: absolute;
+    margin: auto;
+    color: white;
+    background-color: rgba(64, 64, 64, 1);
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 12px;
+    display: none;
+    width: 280px;
+    text-align: center;
+    z-index: 999;
+    font-size: 16px !important;
+
+    .TooltipArrow {
+      background-color: rgba(64, 64, 64, 1);
+      width: 12px;
+      height: 12px;
+      transform: rotate(45deg);
+      position: absolute;
+      margin: auto;
+      border-radius: 2px;
+    }
+
+    &.Top {
+      bottom: 26px;
+
+      .TooltipArrow {
+        bottom: -4px;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &.Bottom {
+      top: 26px;
+
+      .TooltipArrow {
+        top: -4px;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &.Left {
+      right: 26px;
+
+      .TooltipArrow {
+        right: -4px;
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    &.Right {
+      left: 26px;
+
+      .TooltipArrow {
+        left: -4px;
+        top: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  &:hover {
+    .Tooltip {
+      display: inline-flex;
+    }
+  }
+}