@integrigo/integrigo-ui 1.6.7-c → 1.6.10

package/src/components/molecules/Button/Button.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { Color } from '../../../styles';
+import { IconAddition, IconType, Icon } from '../../atoms/Icon';
+import { BasicButton } from './BasicButton';
+import { Ghost } from './Ghost';
+import { Primary } from './Primary';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  primary?: boolean;
+  ghost?: boolean;
+  icon?: IconType;
+  direction?: 'rtl' | 'ltr';
+  size?: 'xl' | 'l' | 'm' | 's';
+  loading?: boolean;
+  onIconClick?: () => void;
+}
+
+const sizeVariant = {
+  xl: '8px',
+  l: '6px',
+  m: '4px',
+  s: '2px',
+};
+
+const getButtonComponent = (primary?: boolean, ghost?: boolean) => {
+  if (primary) {
+    return Primary;
+  }
+
+  if (ghost) {
+    return Ghost;
+  }
+
+  return BasicButton;
+};
+
+const getIconColorVariant = (primary?: boolean, ghost?: boolean) => {
+  if (primary) {
+    return 'white';
+  }
+
+  if (ghost) {
+    return 'ghost';
+  }
+
+  return 'grey';
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      icon,
+      size = 'm',
+      onIconClick,
+      direction,
+      loading = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const ButtonComponent = getButtonComponent(props.primary, props.ghost);
+    const isDisabled = props.disabled || loading;
+
+    return (
+      <ButtonWrapper
+        ref={ref}
+        fullWidth={!props.ghost}
+        orangeIconOnHover={!props.primary && !props.disabled}
+        {...props}
+      >
+        {direction !== 'rtl' && (
+          <IconOffset size={size} ghost={Boolean(props.ghost)}>
+            <IconAddition
+              icon={icon}
+              size={size}
+              colorVariant={getIconColorVariant(props.primary, props.ghost)}
+              disabled={isDisabled}
+              direction={direction}
+              onClick={onIconClick}
+            />
+          </IconOffset>
+        )}
+
+        <ButtonComponent
+          sizeVariant={size}
+          ghost={props.ghost}
+          disabled={isDisabled}
+          loading={loading}
+          direction={icon && (direction || 'ltr')}
+        >
+          {children}
+          {loading && (
+            <Loading>
+              <Icon
+                type="process"
+                fill={props.ghost ? Color.Grey40 : Color.Grey60}
+              />
+            </Loading>
+          )}
+        </ButtonComponent>
+
+        {direction === 'rtl' && (
+          <IconOffset size={size} ghost={Boolean(props.ghost)} right>
+            <IconAddition
+              icon={icon}
+              size={size}
+              colorVariant={getIconColorVariant(props.primary, props.ghost)}
+              disabled={isDisabled}
+              direction={direction}
+              onClick={onIconClick}
+            />
+          </IconOffset>
+        )}
+      </ButtonWrapper>
+    );
+  },
+);
+
+const ButtonWrapper = styled.button<{
+  fullWidth: boolean;
+  orangeIconOnHover: boolean;
+}>`
+  border: none;
+  background-color: transparent;
+  position: relative;
+  padding: 0;
+  width: ${(p) => (p.fullWidth ? '100%' : 'min-content')};
+
+  &:hover svg {
+    fill: ${(p) => p.orangeIconOnHover && 'var(--color-orange)'};
+  }
+
+  &:active svg {
+    fill: ${(p) => p.orangeIconOnHover && 'var(--color-orange-80)'};
+  }
+
+  & svg {
+    position: absolute;
+    left: 0;
+  }
+`;
+
+ButtonWrapper.displayName = 'ButtonWrapper';
+
+const IconOffset = styled.div<{
+  right?: boolean;
+  ghost: boolean;
+  size: 'xl' | 'l' | 'm' | 's';
+}>`
+  position: absolute;
+  bottom: 0;
+  ${(p) =>
+    p.right
+      ? `right: ${p.ghost ? 0 : sizeVariant[p.size]}`
+      : `left: ${p.ghost ? 0 : sizeVariant[p.size]}`};
+`;
+
+IconOffset.displayName = 'IconOffset';
+
+const rotate = keyframes`
+  100% {
+    transform: rotate(-360deg);
+  }
+`;
+
+const Loading = styled.div`
+  position: absolute;
+  left: calc(50% - 10px);
+  top: calc(50% - 10px);
+
+  & > svg {
+    animation: ${rotate} 1s linear infinite;
+    will-change: transform;
+  }
+`;
+
+Loading.displayName = 'Loading';

package/src/components/molecules/Button/Ghost.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { BasicButton } from './BasicButton';
+
+export const sizeVariant = {
+  xl: 24,
+  l: 18,
+  m: 16,
+  s: 12,
+};
+
+const getLeftAlignment = (offset: number, direction?: 'ltr' | 'rtl') => {
+  switch (direction) {
+    case 'ltr':
+      return `calc(${offset}px - 8px)`;
+    case 'rtl':
+    default:
+      return `${offset}px`;
+  }
+};
+
+export const Ghost = styled(BasicButton)<{
+  direction?: 'ltr' | 'rtl';
+  disabled?: boolean;
+}>`
+  padding-left: ${(p) => p.direction !== 'ltr' && 0};
+  padding-right: ${(p) => p.direction !== 'rtl' && 0};
+  border-radius: 0;
+
+  &::before {
+    border: none;
+    left: 0;
+    top: auto;
+    bottom: 4px;
+    width: ${(p) => `calc(100% + ${p.direction ? '8px' : '0px'})`};
+    height: 0;
+    border: 1px solid var(--color-navy);
+    border-radius: 0;
+    z-index: 2;
+  }
+
+  &:hover,
+  &:hover:before {
+    opacity: 1;
+    color: var(--color-orange);
+    border-color: var(--color-orange);
+  }
+
+  &:hover:active,
+  &:hover:active:before {
+    opacity: 1;
+    color: var(--color-orange-80);
+    border-color: var(--color-orange-80);
+  }
+
+  ${(p) =>
+    p.disabled &&
+    `
+    background-color: transparent;
+    color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-40)'};
+
+    &::before {
+      border-color: var(--shades-of-grey-40);
+    }
+
+    &:hover,
+    &:active,
+    &:hover:active,
+    &:hover:before,
+    &:hover:active:before {
+      opacity: 1;
+      color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-40)'};
+      border-color: var(--shades-of-grey-40);
+    }
+  `}
+`;

package/src/components/molecules/Button/Primary.tsx

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { BasicButton } from './BasicButton';
+
+export const Primary = styled(BasicButton)`
+  color: var(--color-white);
+  z-index: 1;
+
+  &::before {
+    background-color: var(--color-orange);
+    z-index: -1;
+  }
+
+  &:hover {
+    opacity: 1;
+    color: var(--color-white);
+  }
+
+  &:hover:active {
+    opacity: 1;
+  }
+
+  ${(p) =>
+    p.disabled &&
+    `
+      color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
+
+      &::before {
+        background-color: var(--shades-of-grey-40);
+        border-color: var(--shades-of-grey-40);
+      }
+
+      &:hover,
+      &:active,
+      &:hover:active,
+      &:hover:before,
+      &:hover:active:before {
+        color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
+        border-color: var(--shades-of-grey-40);
+      }
+  `}
+`;

package/src/components/molecules/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> ghost + disabled - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb hDwJKw"
+    disabled=""
+  >
+    <div
+      class="sc-jRQBWg jkA-dXA"
+    />
+    <div
+      class="sc-gsDKAQ sc-dkPtRN kIONOr cIZZHM"
+      disabled=""
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> ghost + loading - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb hHthlh"
+  >
+    <div
+      class="sc-jRQBWg jkA-dXA"
+    />
+    <div
+      class="sc-gsDKAQ sc-dkPtRN iqotZl dzfnVo"
+      disabled=""
+    >
+      Button
+      <div
+        class="sc-gKclnd guZOqG"
+      >
+        <svg
+          fill="#CCCCCC"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> ghost - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb uxtlD"
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ kfLXgb"
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> primary + disabled - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb fuvfKm"
+    disabled=""
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ sc-hKwDye kIONOr eaLkfq"
+      disabled=""
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> primary + loading - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb fuvfKm"
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ sc-hKwDye iqotZl cMIcDW"
+      disabled=""
+    >
+      Button
+      <div
+        class="sc-gKclnd guZOqG"
+      >
+        <svg
+          fill="#8C8C8C"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> primary - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb fuvfKm"
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ sc-hKwDye kfLXgb dbnkKr"
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> secondary + disabled - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb fuvfKm"
+    disabled=""
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ kIONOr"
+      disabled=""
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> secondary + loading - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb uxtlD"
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ iqotZl"
+      disabled=""
+    >
+      Button
+      <div
+        class="sc-gKclnd guZOqG"
+      >
+        <svg
+          fill="#8C8C8C"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> secondary - should match snapshot 1`] = `
+<div>
+  <button
+    class="sc-eCImPb uxtlD"
+  >
+    <div
+      class="sc-jRQBWg jNucwA"
+    />
+    <div
+      class="sc-gsDKAQ kfLXgb"
+    >
+      Button
+    </div>
+  </button>
+</div>
+`;

package/src/components/molecules/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/src/components/molecules/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Molecules/Checkbox',
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  disabled: false,
+  size: 'm',
+};
+
+export const Controlled = Template.bind({});
+Controlled.args = {
+  disabled: false,
+  checked: false,
+  size: 'm',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  disabled: false,
+  size: 'm',
+  label: 'Label',
+};

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FieldLabel } from '../../atoms/Field';
+
+import { Label } from '../../atoms/Typography/Label';
+
+export type CheckboxProps = Omit<
+React.InputHTMLAttributes<HTMLInputElement>,
+'type' | 'size'
+> & {
+  size?: 'xl' | 'l' | 'm' | 's';
+  label?: string;
+};
+
+const sizeVariant = {
+  xl: {
+    size: '30px',
+    borderRadius: '8px',
+    border: '4px',
+    tickSize: '16px',
+  },
+  l: {
+    size: '24px',
+    borderRadius: '6px',
+    border: '3px',
+    tickSize: '12px',
+  },
+  m: {
+    size: '18px',
+    borderRadius: '3px',
+    border: '2.5px',
+    tickSize: '10px',
+  },
+  s: {
+    size: '12px',
+    borderRadius: '2px',
+    border: '2px',
+    tickSize: '6px',
+  },
+};
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ size = 'm', label = '', ...props }, ref) => {
+    return (
+      <FieldLabel
+        sizeVariant={size}
+        position="inline"
+        disabled={props.disabled}
+      >
+        <Label size={size} text={label}>
+          <Input ref={ref} type="checkbox" sizeVariant={size} {...props} />
+        </Label>
+      </FieldLabel>
+    );
+  },
+);
+
+const Input = styled.input<{ sizeVariant: 'xl' | 'l' | 'm' | 's' }>`
+  appearance: none;
+  background-color: var(--color-white);
+
+  ${(p) => `
+    border: ${sizeVariant[p.sizeVariant].border} solid var(--shades-of-grey-40);
+    border-radius: ${sizeVariant[p.sizeVariant].borderRadius};
+    width: ${sizeVariant[p.sizeVariant].size};
+    height: ${sizeVariant[p.sizeVariant].size};
+  `}
+
+  transition: border var(--transition-speed), opacity var(--transition-speed),
+    background-color var(--transition-speed);
+  position: relative;
+
+  &:not([disabled]):hover {
+    border-color: var(--shades-of-grey-60);
+    cursor: pointer;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &:disabled:checked {
+    opacity: 1;
+  }
+
+  &::before {
+    content: "";
+    background-color: transparent;
+    position: absolute;
+
+    ${(p) => `
+      border-radius: ${sizeVariant[p.sizeVariant].borderRadius};
+      width: ${sizeVariant[p.sizeVariant].size};
+      height: ${sizeVariant[p.sizeVariant].size};
+      left: calc(-1 * ${sizeVariant[p.sizeVariant].border});
+      top: calc(-1 * ${sizeVariant[p.sizeVariant].border});
+    `}
+    transition: background-color var(--transition-speed);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: transparent;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: ${(p) => sizeVariant[p.sizeVariant].tickSize};
+    height: ${(p) => sizeVariant[p.sizeVariant].tickSize};
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transition: background-color var(--transition-speed);
+  }
+
+  &:not([disabled]):checked::before {
+    background-color: var(--color-orange);
+  }
+
+  &:disabled:checked::before {
+    background-color: var(--shades-of-grey-40);
+  }
+
+  &:checked::after {
+    background-color: var(--color-white);
+  }
+
+  &:not([disabled]):checked {
+    border-color: transparent;
+  }
+
+  &:not([disabled]):checked:hover {
+    opacity: 0.8;
+  }
+
+  &:not([disabled]):active {
+    background-color: var(--shades-of-grey-60);
+  }
+
+  &:not([disabled]):checked:active {
+    background-color: transparent;
+  }
+
+  &:not([disabled]):active::before {
+    opacity: 0.65;
+  }
+`;
+
+Input.displayName = 'Input';

package/src/components/molecules/Checkbox/index.tsx

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';