@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/components/Chakra/Center.stories.mdx

@@ -3,6 +3,7 @@ import { Box, Center, Square, Circle, HStack } from "@chakra-ui/react";
 
 import { getCategory } from "../../utils/componentCategories";
 import Image from "../Image/Image";
+import { ImageSizes } from "../Image/ImageTypes";
 import Icon from "../Icons/Icon";
 import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
 import DSProvider from "../../theme/provider";
@@ -15,7 +16,8 @@ import DSProvider from "../../theme/provider";
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Center`, `Circle`,
@@ -30,17 +32,16 @@ guide on the Chakra UI site.
   <Story
     name="Center, Circle, Square"
     args={{
-      p: "5",
-      bg: "var(--brand-primary)",
-      color: "var(--ui-white)",
+      padding: "s",
+      bg: "var(--nypl-colors-brand-primary)",
+      color: "var(--nypl-colors-ui-white)",
     }}
   >
     {(args) => (
       <Box>
         Some text at the beginning.
         <Center {...args}>
-          So when I look up at the stars, I just wonder...what will they all
-          become someday?
+          This text is centered inside a `Center` component.
         </Center>
         Some text at the end.
       </Box>
@@ -50,23 +51,32 @@ guide on the Chakra UI site.
 
 <Canvas>
   <DSProvider>
-    <Center>
-      <Image src="https://placeimg.com/300/400/arch" alt="Centered Image" />
+    <Center border="1px solid" borderColor="var(--nypl-colors-ui-gray-medium)">
+      <Image
+        src="https://placeimg.com/300/400/arch"
+        alt="Centered Image"
+        imageSize={ImageSizes.Medium}
+      />
     </Center>
   </DSProvider>
 </Canvas>
 
 ## Circle
 
-Similar to `Center` but is always a circle!
+This component is similar to the `Center` component but it is always rendered as
+a circle.
 
 <Canvas>
   <DSProvider>
     <HStack spacing="s">
-      <Circle size="50px" bg="var(--ui-test)">
-        <Icon name={IconNames.Download} size={IconSizes.Large} />
+      <Circle size="50px" bg="var(--nypl-colors-brand-secondary)">
+        <Icon
+          name={IconNames.Download}
+          color={IconColors.UiWhite}
+          size={IconSizes.Large}
+        />
       </Circle>
-      <Circle size="50px" bg="var(--ui-link-primary)">
+      <Circle size="50px" bg="var(--nypl-colors-ui-link-primary)">
         <Icon
           name={IconNames.Check}
           color={IconColors.UiWhite}
@@ -79,15 +89,20 @@ Similar to `Center` but is always a circle!
 
 ## Square
 
-Similar to `Center` but always has equal height and width.
+This component is similar to the `Circle` component but always has equal height
+and width.
 
 <Canvas>
   <DSProvider>
     <HStack spacing="s">
-      <Square size="50px" bg="var(--ui-test)">
-        <Icon name={IconNames.Download} size={IconSizes.Large} />
+      <Square size="50px" bg="var(--nypl-colors-brand-secondary)">
+        <Icon
+          name={IconNames.Download}
+          color={IconColors.UiWhite}
+          size={IconSizes.Large}
+        />
       </Square>
-      <Square size="50px" bg="var(--ui-link-primary)">
+      <Square size="50px" bg="var(--nypl-colors-ui-link-primary)">
         <Icon
           name={IconNames.Check}
           color={IconColors.UiWhite}

package/src/components/Chakra/Grid.stories.mdx

@@ -2,6 +2,7 @@ import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import { Box } from "@chakra-ui/react";
 import { Grid, GridItem } from "@chakra-ui/react";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Grid")} component={Grid} />
 
@@ -11,13 +12,17 @@ import { getCategory } from "../../utils/componentCategories";
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
-This component is directly exported from Chakra UI. The `Grid` component is useful for grid layouts and offers more complexity and formatting options than the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes with helpful style shorthand. It renders a `div` element.
+This component is directly exported from Chakra UI. The `Grid` component is
+useful for grid layouts and offers more complexity and formatting options than
+the DS `SimpleGrid` component. `Grid` is `Box` with `display: grid` and it comes
+with helpful style shorthand. It renders a `div` element.
 
-Details about available props and related child components can be found on the [Grid component](https://chakra-ui.com/docs/layout/grid)
-page on the Chakra UI site.
+Details about available props and related child components can be found on the
+[Grid component](https://chakra-ui.com/docs/layout/grid) page on the Chakra UI site.
 
 <Canvas>
   <Story
@@ -46,34 +51,42 @@ page on the Chakra UI site.
 
 ## Complex Layouts with Grid Child Components
 
-In some layouts, you may need certain grid items to span a specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the `colSpan` prop to the `GridItem` component to span across columns and also pass the `rowSpan` component to span across rows. You also need to specify the `templateColumns` and `templateRows`.
+In some layouts, you may need certain grid items to span a specific amount of
+columns or rows instead of an even distribution. To achieve this, you need to
+pass the `colSpan` prop to the `GridItem` component to span across columns and
+also pass the `rowSpan` component to span across rows. You also need to specify
+the `templateColumns` and `templateRows`.
 
 <Canvas>
   <DSProvider>
     <Grid
-      h="200px"
+      height="200px"
       templateRows="repeat(2, 1fr)"
       templateColumns="repeat(5, 1fr)"
       gap="32"
     >
-      <GridItem rowSpan={2} colSpan={1} bg="var(--ui-link-primary)" />
-      <GridItem colSpan={2} bg="var(--ui-success-primary)" />
-      <GridItem colSpan={2} bg="var(--ui-success-secondary)" />
-      <GridItem colSpan={4} bg="var(--ui-link-secondary)" />
+      <GridItem
+        rowSpan={2}
+        colSpan={1}
+        bg="var(--nypl-colors-ui-link-primary)"
+      />
+      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
+      <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
+      <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
     </Grid>
   </DSProvider>
 </Canvas>
 
 ```jsx
 <Grid
-  h="200px"
+  height="200px"
   templateRows="repeat(2, 1fr)"
   templateColumns="repeat(5, 1fr)"
   gap="32"
 >
-  <GridItem rowSpan={2} colSpan={1} bg="var(--ui-link-primary)" />
-  <GridItem colSpan={2} bg="var(--ui-success-primary)" />
-  <GridItem colSpan={2} bg="var(--ui-success-secondary)" />
-  <GridItem colSpan={4} bg="var(--ui-link-secondary)" />
+  <GridItem rowSpan={2} colSpan={1} bg="var(--nypl-colors-ui-link-primary)" />
+  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-primary)" />
+  <GridItem colSpan={2} bg="var(--nypl-colors-ui-success-secondary)" />
+  <GridItem colSpan={4} bg="var(--nypl-colors-ui-link-secondary)" />
 </Grid>
 ```

package/src/components/Chakra/Stack.stories.mdx

@@ -4,8 +4,7 @@ import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
-import Radio from "../Radio/Radio";
+import { IconNames, IconSizes } from "../Icons/IconTypes";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
 
@@ -15,7 +14,8 @@ import Radio from "../Radio/Radio";
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
 
-Note: This needs the use of the `DSProvider` component. See the [README](https://github.com/NYPL/nypl-design-system#using-the-design-system-in-your-product)
+Note: This needs the use of the `DSProvider` component. See the
+[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Stack`, `HStack`,
@@ -25,17 +25,21 @@ with spacing between them.
 All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
 guide on the Chakra UI site.
 
+In all the following examples, Design System `Icon` components are wrapped in
+Chakra's `Circle` component.
+
 ## Stack
 
-The `Stack` component is the most flexible component because it can stack elements
-both horizontally and vertically through the `direction` prop.
+The `Stack` component is the most flexible component because it can stack
+elements both horizontally and vertically through the `direction` prop and the
+`"row"` and `"column"` values, respectively.
 
 <Canvas>
   <Story
     name="Stack, HStack, VStack"
     args={{
       direction: "column",
-      spacing: "10px",
+      spacing: "s",
     }}
     argTypes={{
       direction: {
@@ -64,30 +68,43 @@ both horizontally and vertically through the `direction` prop.
 
 ## HStack
 
-Stacks components horizontally.
+Stacks components horizontally. This is the same as the `Stack` component with
+a `direction` value of `"row"`.
 
 <Canvas>
   <DSProvider>
-    <HStack>
-      <Radio checked labelText="Tom Nook" name="testChecked" />
-      <Radio labelText="Timmy" name="testChecked" />
-      <Radio labelText="Tommy" name="testChecked" />
-      <Radio labelText="Celeste" name="testChecked" />
+    <HStack spacing="s">
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.Check} size={IconSizes.Large} />
+      </Circle>
     </HStack>
   </DSProvider>
 </Canvas>
 
 ## VStack
 
-Stacks components vertically.
+Stacks components vertically. This is the same as the `Stack` component with
+a `direction` value of `"column"`.Pass in a value to the `align` prop to align
+all the elements in the stack.
 
 <Canvas>
   <DSProvider>
-    <VStack>
-      <Radio isChecked labelText="Tom Nook" name="testChecked" />
-      <Radio labelText="Timmy" name="testChecked" />
-      <Radio labelText="Tommy" name="testChecked" />
-      <Radio labelText="Celeste" name="testChecked" />
+    <VStack align="left" spacing="s">
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorFilled} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.ErrorOutline} size={IconSizes.Large} />
+      </Circle>
+      <Circle size="50px" borderColor="ui.black" borderWidth="1px">
+        <Icon name={IconNames.Check} size={IconSizes.Large} />
+      </Circle>
     </VStack>
   </DSProvider>
 </Canvas>

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -38,7 +38,7 @@ import { onChangeDefault } from "./Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.3`   |
 
 <Description of={Checkbox} />
 
@@ -49,16 +49,18 @@ cause an accessibility violation if none is present.
   <Story
     name="Checkbox"
     args={{
-      labelText: "Test Label",
-      showLabel: true,
+      helperText: "This is the helper text!",
       id: "test_id",
-      name: "test_name",
-      value: "1",
+      invalidText: "This is the error text :(",
       isDisabled: false,
-      isRequired: false,
+      isIndeterminate: false,
       isInvalid: false,
-      helperText: "This is the helper text!",
-      errorText: "This is the error text :(",
+      isRequired: false,
+      labelText: "Test Label",
+      name: "test_name",
+      showHelperInvalidText: true,
+      showLabel: true,
+      value: "1",
     }}
   >
     {(args) => <Checkbox {...args} />}
@@ -69,9 +71,29 @@ cause an accessibility violation if none is present.
 
 ## Checked
 
+Note that the `isChecked` property in this example is set to `true` and clicking
+on it won't remove the checkmark; the `isChecked` prop must now be controlled
+and removed manually by the parent component that controls this state.
+
 <Canvas>
   <DSProvider>
-    <Checkbox labelText="I am checked" isChecked value="1" />
+    <Checkbox id="isChecked" labelText="I am checked" isChecked value="1" />
+  </DSProvider>
+</Canvas>
+
+## Indeterminate
+
+Note: This state only changes the icon through the `isIndeterminate` prop. This
+does not affect whether the checkbox is checked. The `isIndeterminate` prop must
+now be controlled and removed by the parent component in order to remove this state.
+
+<Canvas>
+  <DSProvider>
+    <Checkbox
+      id="indeterminate"
+      labelText="I am indeterminate"
+      isIndeterminate
+    />
   </DSProvider>
 </Canvas>
 
@@ -126,9 +148,9 @@ cause an accessibility violation if none is present.
 <Canvas>
   <DSProvider>
     <Checkbox
-      name="testErrorText"
+      name="testinvalidText"
       labelText="I have error text"
-      errorText="I am the error text for this Checkbox"
+      invalidText="I am the error text for this Checkbox"
       isInvalid
     />
   </DSProvider>

package/src/components/Checkbox/Checkbox.test.tsx

@@ -63,7 +63,7 @@ describe("Checkbox", () => {
         id="inputID"
         labelText="Test Label"
         helperText="This is the helper text."
-        errorText="This is the error text :("
+        invalidText="This is the error text :("
       />
     );
     expect(screen.getByText("This is the helper text.")).toBeVisible();
@@ -77,7 +77,7 @@ describe("Checkbox", () => {
         labelText="Test Label"
         isInvalid
         helperText="This is the helper text."
-        errorText="This is the error text :("
+        invalidText="This is the error text :("
       />
     );
     expect(screen.getByText("This is the error text :(")).toBeVisible();
@@ -109,6 +109,22 @@ describe("Checkbox", () => {
     expect(screen.getByRole("checkbox")).toHaveAttribute("checked");
   });
 
+  it("Sets the 'indeterminate' state", () => {
+    const { container, rerender } = render(
+      <Checkbox id="inputID" labelText="Test Label" isChecked />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).not.toHaveAttribute("data-indeterminate");
+
+    rerender(
+      <Checkbox id="inputID" labelText="Test Label" isChecked isIndeterminate />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).toHaveAttribute("data-indeterminate");
+  });
+
   it("Sets the 'disabled' attribute", () => {
     render(
       <Checkbox
@@ -139,10 +155,28 @@ describe("Checkbox", () => {
         id="inputID-attributes"
         labelText="onChange test"
         showLabel={true}
+        invalidText="This is the error text!"
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("This is the error text!")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'isInvalid' is true but 'showHelperInvalidText' is false", () => {
+    render(
+      <Checkbox
+        id="inputID-attributes"
+        labelText="onChange test"
+        showLabel={true}
+        showHelperInvalidText={false}
         isInvalid
       />
     );
     expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(
+      screen.queryByText("This is the error text!")
+    ).not.toBeInTheDocument();
   });
 
   it("Changing the value calls the onChange handler", () => {
@@ -170,6 +204,16 @@ describe("Checkbox", () => {
         <Checkbox id="checkbox-checked" labelText="Test Label" isChecked />
       )
       .toJSON();
+    const isIndeterminate = renderer
+      .create(
+        <Checkbox
+          id="checkbox-checked"
+          labelText="Test Label"
+          isChecked
+          isIndeterminate
+        />
+      )
+      .toJSON();
     const isRequired = renderer
       .create(
         <Checkbox id="checkbox-required" labelText="Test Label" isRequired />
@@ -188,6 +232,7 @@ describe("Checkbox", () => {
 
     expect(primary).toMatchSnapshot();
     expect(isChecked).toMatchSnapshot();
+    expect(isIndeterminate).toMatchSnapshot();
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();

package/src/components/Checkbox/Checkbox.tsx

@@ -11,36 +11,40 @@ import generateUUID from "../../helpers/generateUUID";
 export interface CheckboxProps {
   /** className you can add in addition to 'input' */
   className?: string;
-  /** Optional string to populate the HelperErrorText for the error state
-   * when `isInvalid` is true.
-   */
-  errorText?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** When using the Checkbox as a "controlled" form element, you can specify the
-   * Checkbox's checked state using this prop.
+  /** Optional string to populate the HelperErrorText for the error state
+   * when `isInvalid` is true. */
+  invalidText?: string;
+  /** When using the Checkbox as a "controlled" form element, you can specify
+   * the Checkbox's checked state using this prop.
    * Learn more about controlled and uncontrolled form fields:
    * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
   isChecked?: boolean;
   /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-   * This also makes the text italic and color scheme gray.
-   */
+   * This also makes the text italic and color scheme gray. */
   isDisabled?: boolean;
+  /** Adds the indeterminate state to the `Checkbox`. */
+  isIndeterminate?: boolean;
   /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-   * the color theme "NYPL error" red for the button and text.
-   */
+   * the color theme "NYPL error" red for the button and text. */
   isInvalid?: boolean;
   /** Adds the 'required' attribute to the input when true. */
   isRequired?: boolean;
-  /** The checkbox's label.  This will serve as the text content for a `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+  /** The checkbox's label. This will serve as the text content for a `<label>`
+   * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
-  /** The name prop indicates into which group of checkboxes this checkbox belongs.  If none is specified, 'default' will be used */
+  /** The name prop indicates into which group of checkboxes this checkbox
+   * belongs. If none is specified, 'default' will be used */
   name?: string;
   /** The action to perform on the `<input>`'s onChange function  */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Offers the ability to show the checkbox's label onscreen or hide it. Refer to the `labelText` property for more information. */
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** Offers the ability to show the checkbox's label onscreen or hide it.
+   * Refer to the `labelText` property for more information. */
   showLabel?: boolean;
   /** Populates the value of the input */
   value?: string;
@@ -51,17 +55,17 @@ export const onChangeDefault = () => {
 };
 
 function CheckboxIcon(props) {
-  // Don't need the `isChecked` prop but it causes
-  // rendering issues on the SVG element.
+  // We don't need the `isIndeterminate` or `isChecked` props but it
+  // causes rendering issues on the SVG element, so we remove them
+  // before passing all the props to the `Icon` component.
   const { isIndeterminate, isChecked, ...rest } = props;
 
-  const d = isIndeterminate
-    ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z"
-    : "M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z";
-
   return (
     <Icon viewBox="0 0 24 24" {...rest}>
-      <path fill="currentColor" d={d} />
+      <path
+        fill="currentColor"
+        d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+      />
     </Icon>
   );
 }
@@ -70,29 +74,32 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref?) => {
     const {
       className,
-      errorText,
+      invalidText,
       helperText,
       id = generateUUID(),
       isChecked,
       isDisabled = false,
+      isIndeterminate = false,
       isInvalid = false,
       isRequired = false,
       labelText,
       name,
+      showHelperInvalidText = true,
       showLabel = true,
       value,
     } = props;
-
     const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote = isInvalid ? errorText : helperText;
-    const attributes = {};
+    const footnote = isInvalid ? invalidText : helperText;
+    const ariaAttributes = {};
     const onChange = props.onChange || onChangeDefault;
+    // Use Chakra's default indeterminate icon.
+    const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
 
     if (!showLabel) {
-      attributes["aria-label"] =
+      ariaAttributes["aria-label"] =
         labelText && footnote ? `${labelText} - ${footnote}` : labelText;
     } else {
-      if (footnote) attributes["aria-describedby"] = `${id}-helperText`;
+      if (footnote) ariaAttributes["aria-describedby"] = `${id}-helperText`;
     }
 
     return (
@@ -104,6 +111,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           isDisabled={isDisabled}
           isInvalid={isInvalid}
           isRequired={isRequired}
+          isIndeterminate={isIndeterminate}
           ref={ref}
           value={value}
           {...(isChecked !== undefined
@@ -114,15 +122,15 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             : {
                 defaultIsChecked: false,
               })}
-          icon={<CheckboxIcon />}
+          icon={icon}
           __css={styles}
-          {...attributes}
+          {...ariaAttributes}
         >
           {showLabel && labelText}
         </ChakraCheckbox>
-        {footnote && showLabel && (
-          <Box __css={styles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
+        {footnote && showHelperInvalidText && (
+          <Box __css={styles.helper}>
+            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
               {footnote}
             </HelperErrorText>
           </Box>
@@ -132,6 +140,4 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   }
 );
 
-Checkbox.displayName = "Checkbox";
-
 export default Checkbox;