@purpurds/checkbox 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-checkbox_10fl8_1{all:unset;padding:calc((var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2);margin:calc(-1 * (var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2);cursor:pointer}._purpur-checkbox_10fl8_1:active>._purpur-checkbox__box_10fl8_7{box-shadow:var(--purpur-color-border-interactive-subtle-hover) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox_10fl8_1:disabled{cursor:default}._purpur-checkbox_10fl8_1:disabled>._purpur-checkbox__box_10fl8_7{box-shadow:var(--purpur-color-border-weak) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox--error_10fl8_16>._purpur-checkbox__box_10fl8_7{box-shadow:var(--purpur-color-border-status-error) 0 0 0 var(--purpur-border-width-xs) inset}._purpur-checkbox--error_10fl8_16:not(:disabled)~label *{color:var(--purpur-color-text-status-error-strong)}._purpur-checkbox_10fl8_1:not(:disabled):not(:active):hover>._purpur-checkbox__box_10fl8_7{box-shadow:var(--purpur-color-border-interactive-subtle-hover) 0 0 0 var(--purpur-border-width-sm) inset}._purpur-checkbox_10fl8_1:focus-visible:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--purpur-border-radius-xs);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-25);pointer-events:none}._purpur-checkbox_10fl8_1[data-state=checked]>._purpur-checkbox__box_10fl8_7,._purpur-checkbox_10fl8_1[data-state=indeterminate]>._purpur-checkbox__box_10fl8_7{box-shadow:none;background-color:var(--purpur-color-background-interactive-primary)}._purpur-checkbox_10fl8_1[data-state=checked]:active>._purpur-checkbox__box_10fl8_7,._purpur-checkbox_10fl8_1[data-state=indeterminate]:active>._purpur-checkbox__box_10fl8_7{background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-checkbox_10fl8_1[data-state=checked]:disabled>._purpur-checkbox__box_10fl8_7,._purpur-checkbox_10fl8_1[data-state=indeterminate]:disabled>._purpur-checkbox__box_10fl8_7{box-shadow:var(--purpur-color-border-weak) 0 0 0 var(--purpur-border-width-xs) inset;background-color:var(--purpur-color-background-interactive-disabled)}._purpur-checkbox_10fl8_1[data-state=checked]:not(:disabled):not(:active):hover>._purpur-checkbox__box_10fl8_7,._purpur-checkbox_10fl8_1[data-state=indeterminate]:not(:disabled):not(:active):hover>._purpur-checkbox__box_10fl8_7{box-shadow:none;background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-checkbox__box_10fl8_7{display:block;height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);background-color:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-xs);box-shadow:var(--purpur-color-border-interactive-subtle) 0 0 0 var(--purpur-border-width-xs) inset;transition:box-shadow var(--purpur-motion-duration-150) ease,background-color var(--purpur-motion-duration-150) ease;box-sizing:border-box}._purpur-checkbox__indicator_10fl8_59{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--purpur-color-text-interactive-on-primary)}._purpur-checkbox__indicator_10fl8_59[data-disabled]{color:var(--purpur-color-text-weak)}._purpur-checkbox__label_10fl8_70{padding-left:var(--purpur-spacing-150)}._purpur-checkbox__wrapper_10fl8_73{display:flex;flex-direction:column;justify-content:center;width:fit-content}._purpur-checkbox__container_10fl8_79{position:relative;display:flex;align-items:flex-start;width:fit-content;padding:calc((var(--purpur-spacing-400) + var(--purpur-spacing-150) - var(--purpur-spacing-300)) / 2) 0}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@purpurds/checkbox",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/checkbox.cjs.js",
+  "types": "./dist/checkbox.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/checkbox.cjs.js",
+      "systemjs": "./dist/checkbox.system.js",
+      "types": "./dist/checkbox.d.ts",
+      "default": "./dist/checkbox.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/checkbox.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@radix-ui/react-checkbox": "~1.0.4",
+    "@storybook/client-api": "~7.6.0",
+    "@purpurds/tokens": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/paragraph": "3.0.0",
+    "@purpurds/label": "3.0.0",
+    "@purpurds/field-error-text": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,168 @@
+import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as CheckboxStories from "./src/checkbox.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Checkbox" of={CheckboxStories} />
+
+# Checkbox
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/checkbox": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/checkbox/styles";
+```
+
+### Examples
+
+In MyComponent.tsx
+
+#### Controlled.
+
+---
+
+For when you have to controll and use the state of the checkbox.
+
+```tsx
+import { Checkbox } from "@purpurds/checkbox";
+
+export const MyComponent = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <Checkbox
+        id="my-checkbox"
+        checked={checked}
+        onChange={setChecked}
+        label="My checkbox"
+        labelPosition="right"
+      />
+    </div>
+  );
+};
+```
+
+#### Indeterminate.
+
+---
+
+When using the Indeterminate state, the toggle must be controlled.
+
+```tsx
+import { Checkbox } from "@purpurds/checkbox";
+
+export const MyComponent = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div>
+      <Checkbox
+        id="my-checkbox"
+        checked={checked}
+        onChange={setChecked}
+        label="My checkbox"
+        labelPosition="right"
+      />
+      <Button
+        variant="primary"
+        onClick={() =>
+          setChecked((prevChecked) => (prevChecked === "indeterminate" ? false : "indeterminate"))
+        }
+      >
+        Toggle indeterminate
+      </Button>
+    </div>
+  );
+};
+```
+
+#### Uncontrolled
+
+---
+
+For when you don't have to controll state of the checkbox, e.g. when in a form.
+
+```tsx
+import { Checkbox } from "@purpurds/checkbox";
+
+export const MyComponent = () => {
+  /**
+   * The checkbox will render checked, and handle it's state itself.
+   *
+   * Since it is rendered in a form, it will render a checkbox input under the hood
+   * that reflects its value and state.
+   */
+  return (
+    <form>
+      <Checkbox id="my-checkbox" defaultChecked label="My uncontrolled checkbox" />
+    </form>
+  );
+};
+```
+
+#### With custom label (not recommended).
+
+---
+
+Use the `aria-labelledby` property and pass the id of the label.
+
+```tsx
+import { Checkbox } from "@purpurds/checkbox";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <label id="my-custom-label" htmlFor="my-checkbox">
+        Custom label
+      </label>
+      <Checkbox aria-labeledby="my-custom-label" id="my-checkbox" {...otherProps} />
+    </div>
+  );
+};
+```
+
+#### Without label (not recommended).
+
+---
+
+If there should be no label at all, use the `aria-label` to label the checkbox for screen readers.
+
+```tsx
+import { Checkbox } from "@purpurds/checkbox";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Checkbox aria-label="checkbox some awesome stuff!" id="my-checkbox" {...otherProps} />
+    </div>
+  );
+};
+```

package/src/checkbox.module.scss

@@ -0,0 +1,125 @@
+$target-area-size: calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));
+$checkbox-size: var(--purpur-spacing-300);
+$checkbox-target-area-padding: calc(calc($target-area-size - $checkbox-size) / 2);
+
+@mixin border($color, $width) {
+  box-shadow: $color 0px 0px 0px $width inset;
+}
+
+.purpur-checkbox {
+  $root: &;
+
+  all: unset;
+  padding: $checkbox-target-area-padding;
+  margin: calc(-1 * $checkbox-target-area-padding);
+  cursor: pointer;
+
+  &:active > #{$root}__box {
+    @include border(
+      var(--purpur-color-border-interactive-subtle-hover),
+      var(--purpur-border-width-xs)
+    );
+  }
+
+  &:disabled {
+    cursor: default;
+
+    & > #{$root}__box {
+      @include border(var(--purpur-color-border-weak), var(--purpur-border-width-xs));
+    }
+  }
+
+  &--error > #{$root}__box {
+    @include border(var(--purpur-color-border-status-error), var(--purpur-border-width-xs));
+  }
+
+  &--error:not(:disabled) ~ label * {
+    color: var(--purpur-color-text-status-error-strong);
+  }
+
+  &:not(:disabled):not(:active):hover > #{$root}__box {
+    @include border(
+      var(--purpur-color-border-interactive-subtle-hover),
+      var(--purpur-border-width-sm)
+    );
+  }
+
+  &:focus-visible {
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--purpur-border-radius-xs);
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      outline-offset: var(--purpur-spacing-25);
+      pointer-events: none;
+    }
+  }
+
+  &[data-state="checked"],
+  &[data-state="indeterminate"] {
+    & > #{$root}__box {
+      box-shadow: none;
+      background-color: var(--purpur-color-background-interactive-primary);
+    }
+
+    &:active > #{$root}__box {
+      background-color: var(--purpur-color-background-interactive-primary-active);
+    }
+
+    &:disabled > #{$root}__box {
+      @include border(var(--purpur-color-border-weak), var(--purpur-border-width-xs));
+      background-color: var(--purpur-color-background-interactive-disabled);
+    }
+
+    &:not(:disabled):not(:active):hover > #{$root}__box {
+      box-shadow: none;
+      background-color: var(--purpur-color-background-interactive-primary-hover);
+    }
+  }
+
+  &__box {
+    display: block;
+    height: $checkbox-size;
+    width: $checkbox-size;
+    background-color: var(--purpur-color-background-primary);
+    border-radius: var(--purpur-border-radius-xs);
+    @include border(var(--purpur-color-border-interactive-subtle), var(--purpur-border-width-xs));
+    transition:
+      box-shadow var(--purpur-motion-duration-150) ease,
+      background-color var(--purpur-motion-duration-150) ease;
+    box-sizing: border-box;
+  }
+
+  &__indicator {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--purpur-color-text-interactive-on-primary);
+
+    &[data-disabled] {
+      color: var(--purpur-color-text-weak);
+    }
+  }
+
+  &__label {
+    padding-left: var(--purpur-spacing-150);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: fit-content;
+  }
+
+  &__container {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: fit-content;
+    padding: $checkbox-target-area-padding 0;
+  }
+}

package/src/checkbox.stories.tsx

@@ -0,0 +1,93 @@
+import { useArgs } from "@storybook/client-api";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Checkbox, CheckedState } from "./checkbox";
+
+import "@purpurds/icon/styles";
+import "@purpurds/field-error-text/styles";
+import "@purpurds/label/styles";
+import "@purpurds/paragraph/styles";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Inputs/Checkbox",
+  component: Checkbox,
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Controlled: Story = {
+  argTypes: {
+    checked: {
+      options: [true, false, "indeterminate"],
+    },
+  },
+  args: {
+    id: "checkbox-showcase",
+    label: "Controlled checkbox",
+  },
+  parameters: {
+    design: [
+      {
+        name: "Checkbox",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274-614&mode=dev",
+      },
+    ],
+  },
+  render: ({ ...args }) => {
+    const [{ checked }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const setChecked = (value: CheckedState) => {
+      args.onChange?.(value);
+      updateArgs({ checked: value });
+    };
+
+    return <Checkbox {...args} onChange={setChecked} checked={checked} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  argTypes: {
+    checked: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+  },
+  args: {
+    id: "checkbox-showcase",
+    label: "Uncontrolled checkbox",
+  },
+  parameters: {
+    design: [
+      {
+        name: "Checkbox",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=1274-614&mode=dev",
+      },
+    ],
+  },
+  decorators: [
+    (Story) => {
+      const codeStyle = {
+        background: "var(--purpur-color-transparent-black-50)",
+        padding: "var(--purpur-spacing-10)",
+        borderRadius: "var(--purpur-border-radius-xs)",
+        border: "var(--purpur-border-width-xs) solid var(--purpur-color-transparent-black-100)",
+      };
+
+      return (
+        <form>
+          <Story />
+          <hr />
+          <p>
+            In this case <code style={codeStyle}>checked</code> and&nbsp;
+            <code style={codeStyle}>onChange</code> are not passed to the component.
+          </p>
+          <p>
+            Also, it is wrapped in a form which makes it render a checkbox input under the hood that
+            reflects its value and state.
+          </p>
+        </form>
+      );
+    },
+  ],
+  render: ({ onChange: _onChange, checked: _checked, ...args }) => <Checkbox {...args} />,
+};

package/src/checkbox.test.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+expect.extend(matchers);
+
+describe("Checkbox", () => {
+  afterEach(cleanup);
+
+  it("should render uncontrolled default checked", () => {
+    render(<Checkbox id="test" defaultChecked />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("should render uncontrolled default unchecked checked", () => {
+    render(<Checkbox id="test" defaultChecked={false} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "unchecked");
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("should render controlled checked", () => {
+    render(<Checkbox id="test" checked />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("should render controlled unchecked", () => {
+    render(<Checkbox id="test" checked={false} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "unchecked");
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("should render disabled", () => {
+    render(<Checkbox data-testid="test" id="test" disabled />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("disabled");
+  });
+
+  it("should render label", () => {
+    render(<Checkbox data-testid="test" id="test" label="Test label" />);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("Test label");
+  });
+
+  it("should render label required", () => {
+    render(<Checkbox data-testid="test" id="test" label="Test label" required />);
+    expect(screen.getByTestId("test-label")).toHaveTextContent("* Test label");
+  });
+
+  it("should not render label given no label", () => {
+    render(<Checkbox data-testid="test" id="test" />);
+    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+  });
+
+  it("should render errorText when given", () => {
+    render(<Checkbox data-testid="test" id="test" errorText="Error text" />);
+    expect(screen.getByTestId("test-error-text")).toHaveTextContent("Error text");
+  });
+
+  it("should not render errorText when not given", () => {
+    render(<Checkbox data-testid="test" id="test" />);
+    expect(screen.queryByTestId("test-error-text")).not.toBeInTheDocument();
+  });
+
+  it("should emit onChange", () => {
+    const onChangeMock = vi.fn();
+    render(<Checkbox data-testid="test" id="test" label="Test label" onChange={onChangeMock} />);
+    fireEvent.click(screen.getByTestId("test-label"));
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+  });
+});

package/src/checkbox.tsx

@@ -0,0 +1,135 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import { FieldErrorText } from "@purpurds/field-error-text";
+import { checkmarkBold, Icon, minusBold } from "@purpurds/icon";
+import { Label } from "@purpurds/label";
+import { Paragraph } from "@purpurds/paragraph";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import c from "classnames";
+
+import styles from "./checkbox.module.scss";
+
+export type CheckedState = boolean | "indeterminate";
+export type CheckboxProps = {
+  /**
+   * To use when no label is given (not recommended).
+   * */
+  ["aria-label"]?: string;
+  /**
+   * To use with custom label (not recommended).
+   * */
+  ["aria-labelledby"]?: string;
+  ["data-testid"]?: string;
+  checked?: CheckedState;
+  /**
+   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+   */
+  className?: string;
+  /**
+   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
+   */
+  defaultChecked?: boolean;
+  /**
+   * When `true`, prevents the user from interacting with the checkbox.
+   */
+  disabled?: boolean;
+  /**
+   * Use to render error message below the checkbox. The checkbox renders with error appearance.
+   * */
+  errorText?: string;
+  /**
+   * ID of the checkbox.
+   * */
+  id: string;
+  /**
+   * The label of the checkbox.
+   * */
+  label?: string;
+  /**
+   * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
+   * */
+  name?: string;
+  /**
+   * Event handler called when the checked state of the checkbox changes.
+   * */
+  onChange?: (value: CheckedState) => void;
+  /**
+   * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+   * */
+  required?: boolean;
+  /**
+   * The value given as data when submitted with a name.
+   * */
+  value?: string;
+};
+
+const rootClassName = "purpur-checkbox";
+
+const CheckboxComponent = (
+  {
+    ["data-testid"]: dataTestId,
+    checked,
+    className,
+    errorText,
+    label,
+    onChange,
+    ...props
+  }: CheckboxProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) => {
+  const isError = errorText && !checked;
+
+  return (
+    <div className={c([className, styles[`${rootClassName}__wrapper`]])}>
+      <div className={c([className, styles[`${rootClassName}__container`]])}>
+        <RadixCheckbox.Root
+          {...props}
+          checked={checked}
+          className={c(styles[rootClassName], {
+            [styles[`${rootClassName}--error`]]: isError,
+          })}
+          data-testid={dataTestId}
+          onCheckedChange={onChange}
+          ref={ref}
+        >
+          <span className={styles[`${rootClassName}__box`]}>
+            <RadixCheckbox.Indicator className={styles[`${rootClassName}__indicator`]}>
+              {checked === "indeterminate" ? (
+                <Icon
+                  data-testid={dataTestId && `${dataTestId}-checked-icon`}
+                  size="xs"
+                  svg={minusBold}
+                />
+              ) : (
+                <Icon
+                  data-testid={dataTestId && `${dataTestId}-indeterminate-icon`}
+                  size="xs"
+                  svg={checkmarkBold}
+                />
+              )}
+            </RadixCheckbox.Indicator>
+          </span>
+        </RadixCheckbox.Root>
+        {label && (
+          <Label
+            htmlFor={props.id}
+            data-testid={dataTestId && `${dataTestId}-label`}
+            disabled={props.disabled}
+            className={styles[`${rootClassName}__label`]}
+          >
+            <Paragraph variant="paragraph-100" disabled={props.disabled}>
+              {`${props.required ? "* " : ""}${label}`}
+            </Paragraph>
+          </Label>
+        )}
+      </div>
+      {isError && (
+        <FieldErrorText data-testid={dataTestId && `${dataTestId}-error-text`}>
+          {errorText}
+        </FieldErrorText>
+      )}
+    </div>
+  );
+};
+
+export const Checkbox = forwardRef(CheckboxComponent);
+Checkbox.displayName = "Checkbox";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}