feat(components): grid component added

package.json

@@ -15,6 +15,7 @@
     "pnpm": ">=1.12.x"
   },
   "scripts": {
+    "clean:pn-css-type": "rimraf node_modules/.pnpm/csstype*",
     "dev:docs": "turbo run dev --scope=@nextui-org/docs --no-deps",
     "start:docs": "turbo run start --scope=@nextui-org/docs --no-deps",
     "build:docs": "turbo run build --scope=@nextui-org/docs",
@@ -41,7 +42,8 @@
     "version": "changeset version",
     "release": "changeset publish",
     "version:dev": "changeset version --snapshot dev",
-    "release:dev": "changeset publish --tag dev"
+    "release:dev": "changeset publish --tag dev",
+    "postinstall": "pnpm clean:pn-css-type"
   },
   "dependencies": {
     "@babel/cli": "^7.14.5",

packages/components/container/src/container.tsx

@@ -8,7 +8,8 @@ import {useContainer, UseContainerProps} from "./use-container";
 export interface ContainerProps extends UseContainerProps {}
 
 const Container = forwardRef<ContainerProps, "div">((props, ref) => {
-  const {containerCss, css, fluid, responsive, className, ...otherProps} = useContainer(props);
+  const {children, containerCss, css, fluid, responsive, className, ...otherProps} =
+    useContainer(props);
 
   const domRef = useDOMRef(ref);
 
@@ -23,7 +24,9 @@ const Container = forwardRef<ContainerProps, "div">((props, ref) => {
       fluid={fluid}
       responsive={responsive}
       {...otherProps}
-    />
+    >
+      {children}
+    </StyledContainer>
   );
 });
 

packages/components/container/src/use-container.ts

@@ -11,6 +11,31 @@ import type {HTMLNextUIProps} from "@nextui-org/system";
 import {useMemo} from "react";
 
 export interface UseContainerProps extends HTMLNextUIProps<"div"> {
+  /**
+   * Max width extra small devices (<650px)
+   * @default "false"
+   */
+  xs?: boolean;
+  /**
+   * Max width small devices (>=650px)
+   * @default "false"
+   */
+  sm?: boolean;
+  /**
+   * Max width medium devices (>=960px)
+   * @default "false"
+   */
+  md?: boolean;
+  /**
+   * Max width large devices (>=1280px)
+   * @default "false"
+   */
+  lg?: boolean;
+  /**
+   * Max width extra large devices (>=1400px)
+   * @default "false"
+   */
+  xl?: boolean;
   /**
    * Sets the width in 100% at all breakpoints
    * @default false
@@ -53,31 +78,6 @@ export interface UseContainerProps extends HTMLNextUIProps<"div"> {
    * CSS "align-content" property
    */
   alignContent?: AlignContent;
-  /**
-   * Max width extra small devices (<650px)
-   * @default "false"
-   */
-  xs?: boolean;
-  /**
-   * Max width small devices (>=650px)
-   * @default "false"
-   */
-  sm?: boolean;
-  /**
-   * Max width medium devices (>=960px)
-   * @default "false"
-   */
-  md?: boolean;
-  /**
-   * Max width large devices (>=1280px)
-   * @default "false"
-   */
-  lg?: boolean;
-  /**
-   * Max width extra large devices (>=1400px)
-   * @default "false"
-   */
-  xl?: boolean;
 }
 
 export function useContainer(props: UseContainerProps) {

packages/components/grid/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/grid
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/grid
+# or
+npm i @nextui-org/grid
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

packages/components/grid/__tests__/grid.test.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Grid} from "../src";
+
+describe("Grid", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Grid />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+});

packages/components/grid/clean-package.config.json

@@ -0,0 +1,3 @@
+{ "replace": { "main": "dist/index.cjs.js", "module": "dist/index.esm.js",
+"types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.esm.js",
+"require": "./dist/index.cjs.js" }, "./package.json": "./package.json" } } }

packages/components/grid/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nextui-org/grid",
+  "version": "1.0.0-beta.11",
+  "description": "The layout Grid adapts to screen size and orientation, ensuring consistency across layouts.",
+  "keywords": [
+    "grid"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/grid"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/dom-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "clean-package": "2.1.1",
+    "react": "^17.0.2"
+  }
+}

packages/components/grid/src/grid-container.tsx

@@ -0,0 +1,58 @@
+import type {Wrap} from "@nextui-org/shared-utils";
+
+import {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {clsx, __DEV__} from "@nextui-org/shared-utils";
+
+import GridItem, {GridProps} from "./grid";
+
+export interface GridContainerProps extends GridProps {
+  /**
+   * The children's spacing, commonly used for `Grid` components
+   * @default 0
+   */
+  gap?: number;
+  /**
+   * CSS "flex-wrap" property
+   * @default "wrap"
+   */
+  wrap?: Wrap;
+}
+
+const GridContainer = forwardRef<GridContainerProps, "div">((props, ref) => {
+  const {children, css, gap = 0, wrap = "wrap", className, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  const gapUnit = useMemo(() => {
+    return `calc(${gap} * $space$3)`;
+  }, [gap]);
+
+  return (
+    <GridItem
+      ref={domRef}
+      className={clsx("nextui-grid-container", className)}
+      css={{
+        $$gridGapUnit: gapUnit,
+        display: "flex",
+        flexWrap: wrap,
+        boxSizing: "border-box",
+        margin: "calc(-1 * $$gridGapUnit)",
+        width: "calc(100% + $$gridGapUnit * 2)",
+        ...css,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </GridItem>
+  );
+});
+
+if (__DEV__) {
+  GridContainer.displayName = "NextUI.GridContainer";
+}
+
+GridContainer.toString = () => ".nextui-grid-container";
+
+export default GridContainer;

packages/components/grid/src/grid.styles.ts

@@ -0,0 +1,7 @@
+import {styled} from "@nextui-org/system";
+
+export const StyledGrid = styled("div", {
+  margin: 0,
+  boxSizing: "border-box",
+  padding: "$$gridGapUnit",
+});

packages/components/grid/src/grid.tsx

@@ -0,0 +1,43 @@
+import {forwardRef} from "@nextui-org/system";
+import {useDOMRef} from "@nextui-org/dom-utils";
+import {clsx, __DEV__} from "@nextui-org/shared-utils";
+
+import {StyledGrid} from "./grid.styles";
+import GridContainer from "./grid-container";
+import {UseGridProps, useGrid} from "./use-grid";
+
+export interface GridProps extends UseGridProps {}
+
+type CompoundGrid = {
+  Container: typeof GridContainer;
+};
+
+const Grid = forwardRef<GridProps, "div", CompoundGrid>((props, ref) => {
+  const {children, gridCss, css, className, ...otherProps} = useGrid(props);
+
+  const domRef = useDOMRef(ref);
+
+  return (
+    <StyledGrid
+      ref={domRef}
+      className={clsx("nextui-grid", className)}
+      css={{
+        ...gridCss,
+        ...css,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </StyledGrid>
+  );
+});
+
+Grid.Container = GridContainer;
+
+if (__DEV__) {
+  Grid.displayName = "NextUI.Grid";
+}
+
+Grid.toString = () => ".nextui-grid";
+
+export default Grid;

packages/components/grid/src/index.ts

@@ -0,0 +1,8 @@
+import Grid from "./grid";
+
+// export types
+export type {GridProps} from "./grid";
+export type {GridContainerProps} from "./grid-container";
+
+// export component
+export {Grid};

packages/components/grid/src/use-grid.ts

@@ -0,0 +1,152 @@
+import type {HTMLNextUIProps} from "@nextui-org/system";
+
+import {
+  BreakpointsValue,
+  Justify,
+  Direction,
+  AlignItems,
+  AlignContent,
+  clsx,
+} from "@nextui-org/shared-utils";
+import {useMemo} from "react";
+
+export interface UseGridProps extends HTMLNextUIProps<"div"> {
+  /**
+   * Max width extra small devices (<650px)
+   * @default "false"
+   */
+  xs?: BreakpointsValue;
+  /**
+   * Max width small devices (>=650px)
+   * @default "false"
+   */
+  sm?: BreakpointsValue;
+  /**
+   * Max width medium devices (>=960px)
+   * @default "false"
+   */
+  md?: BreakpointsValue;
+  /**
+   * Max width large devices (>=1280px)
+   * @default "false"
+   */
+  lg?: BreakpointsValue;
+  /**
+   * Max width extra large devices (>=1400px)
+   * @default "false"
+   */
+  xl?: BreakpointsValue;
+  /**
+   * CSS "justify-content" property
+   */
+  justify?: Justify;
+  /**
+   * CSS "flex-direction" property
+   */
+  direction?: Direction;
+  /**
+   * CSS "align-items" property
+   */
+  alignItems?: AlignItems;
+  /**
+   * CSS "align-content" property
+   */
+  alignContent?: AlignContent;
+}
+
+const getItemLayout = (val?: BreakpointsValue): React.CSSProperties => {
+  const display = val === 0 ? "none" : "inherit";
+
+  if (typeof val === "number") {
+    const width = (100 / 12) * val;
+    const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
+
+    return {
+      flexGrow: 0,
+      display,
+      maxWidth: ratio,
+      flexBasis: ratio,
+    };
+  }
+
+  return {
+    flexGrow: 1,
+    display,
+    maxWidth: "100%",
+    flexBasis: "0",
+  };
+};
+
+export function useGrid(props: UseGridProps) {
+  const {
+    xs = false,
+    sm = false,
+    md = false,
+    lg = false,
+    xl = false,
+    alignItems,
+    alignContent,
+    justify,
+    direction,
+    className,
+    ...otherProps
+  } = props;
+
+  const classes = useMemo(() => {
+    const breaks: {[key: string]: unknown} = {
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+    };
+    const classString = Object.keys(breaks).reduce((pre, name) => {
+      if (breaks[name] !== undefined && breaks[name] !== false) return `${pre} ${name}`;
+
+      return pre;
+    }, "");
+
+    return classString.trim();
+  }, [xs, sm, md, lg, xl]);
+
+  const gridCss = useMemo(() => {
+    return {
+      alignItems,
+      alignContent,
+      justifyContent: justify,
+      flexDirection: direction,
+      "&.xs": {
+        ...getItemLayout(xs),
+      },
+      "@xsMax": {
+        "&.xs": {
+          ...getItemLayout(xs),
+        },
+      },
+      "@sm": {
+        "&.sm": {
+          ...getItemLayout(sm),
+        },
+      },
+      "@md": {
+        "&.md": {
+          ...getItemLayout(md),
+        },
+      },
+      "@lg": {
+        "&.lg": {
+          ...getItemLayout(lg),
+        },
+      },
+      "@xl": {
+        "&.xl": {
+          ...getItemLayout(xl),
+        },
+      },
+    };
+  }, [xs, sm, md, lg, xl, justify, direction, alignItems, alignContent, getItemLayout]);
+
+  return {gridCss, className: clsx(classes, className), ...otherProps};
+}
+
+export type UseGridReturn = ReturnType<typeof useGrid>;

packages/components/grid/stories/grid.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import { Grid } from "../src";
+
+export default {
+  title: "Grid",
+  component: Grid,
+} as Meta;
+
+
+export const Default = () => <Grid />;

packages/components/grid/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@stitches/react": ["../../../node_modules/@stitches/react"]
+    }
+  },
+  "include": ["src", "index.ts"]
+}

packages/components/grid/tsup.config.ts

@@ -0,0 +1,13 @@
+import {defineConfig} from "tsup";
+import {findUpSync} from "find-up";
+
+export default defineConfig({
+  clean: true,
+  minify: false,
+  treeshake: false,
+  format: ["cjs", "esm"],
+  outExtension(ctx) {
+    return {js: `.${ctx.format}.js`};
+  },
+  inject: process.env.JSX ? [findUpSync("react-shim.js")!] : undefined,
+});

packages/components/row/src/row.tsx

@@ -8,7 +8,7 @@ import {StyledRow} from "./row.styles";
 export interface RowProps extends UseRowProps {}
 
 const Row = forwardRef<RowProps, "div">((props, ref) => {
-  const {rowCss, css, className, ...otherProps} = useRow(props);
+  const {children, rowCss, css, className, ...otherProps} = useRow(props);
 
   const domRef = useDOMRef(ref);
 
@@ -21,7 +21,9 @@ const Row = forwardRef<RowProps, "div">((props, ref) => {
         ...css,
       }}
       {...otherProps}
-    />
+    >
+      {children}
+    </StyledRow>
   );
 });
 

packages/components/spacer/src/spacer.tsx

@@ -8,7 +8,7 @@ import {useSpacer, UseSpacerProps} from "./use-spacer";
 export interface SpacerProps extends UseSpacerProps {}
 
 const Spacer = forwardRef<SpacerProps, "span">((props, ref) => {
-  const {spacerCss, inline, css, ...otherProps} = useSpacer(props);
+  const {children, spacerCss, inline, css, ...otherProps} = useSpacer(props);
 
   const domRef = useDOMRef(ref);
 
@@ -22,7 +22,9 @@ const Spacer = forwardRef<SpacerProps, "span">((props, ref) => {
       }}
       inline={inline}
       {...otherProps}
-    />
+    >
+      {children}
+    </StyledSpacer>
   );
 });
 

plop/component/src/use-{{componentName}}.ts.hbs

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {HTMLNextUIProps, forwardRef} from "@nextui-org/system";
+import {HTMLNextUIProps} from "@nextui-org/system";
 
 export interface Use{{capitalize componentName}}Props extends HTMLNextUIProps<"div"> {}
 

plop/component/src/{{componentName}}.tsx.hbs

@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/dom-utils";
-import {__DEV__} from "@nextui-org/shared-utils";
+import {clsx, __DEV__} from "@nextui-org/shared-utils";
 
 import { Styled{{capitalize componentName}} } from "./{{componentName}}.styles";
 import { Use{{capitalize componentName}}Props, use{{capitalize componentName}} } from "./use-{{componentName}}";

pnpm-lock.yaml

@@ -365,6 +365,21 @@ importers:
       clean-package: 2.1.1
       react: 17.0.2
 
+  packages/components/grid:
+    specifiers:
+      '@nextui-org/dom-utils': workspace:*
+      '@nextui-org/shared-utils': workspace:*
+      '@nextui-org/system': workspace:*
+      clean-package: 2.1.1
+      react: ^17.0.2
+    dependencies:
+      '@nextui-org/dom-utils': link:../../utilities/dom-utils
+      '@nextui-org/shared-utils': link:../../utilities/shared-utils
+      '@nextui-org/system': link:../../core/system
+    devDependencies:
+      clean-package: 2.1.1
+      react: 17.0.2
+
   packages/components/row:
     specifiers:
       '@nextui-org/dom-utils': workspace:*
@@ -2103,14 +2118,14 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: false
 
-  /@changesets/apply-release-plan/6.1.0:
-    resolution: {integrity: sha512-fMNBUAEc013qaA4KUVjdwgYMmKrf5Mlgf6o+f97MJVNzVnikwpWY47Lc3YR1jhC874Fonn5MkjkWK9DAZsdQ5g==}
+  /@changesets/apply-release-plan/6.1.1:
+    resolution: {integrity: sha512-LaQiP/Wf0zMVR0HNrLQAjz3rsNsr0d/RlnP6Ef4oi8VafOwnY1EoWdK4kssuUJGgNgDyHpomS50dm8CU3D7k7g==}
     dependencies:
       '@babel/runtime': 7.19.0
-      '@changesets/config': 2.1.1
+      '@changesets/config': 2.2.0
       '@changesets/get-version-range-type': 0.3.2
-      '@changesets/git': 1.4.1
-      '@changesets/types': 5.1.0
+      '@changesets/git': 1.5.0
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
       fs-extra: 7.0.1
@@ -2121,21 +2136,21 @@ packages:
       semver: 5.7.1
     dev: false
 
-  /@changesets/assemble-release-plan/5.2.1:
-    resolution: {integrity: sha512-d6ckasOWlKF9Mzs82jhl6TKSCgVvfLoUK1ERySrTg2TQJdrVUteZue6uEIYUTA7SgMu67UOSwol6R9yj1nTdjw==}
+  /@changesets/assemble-release-plan/5.2.2:
+    resolution: {integrity: sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==}
     dependencies:
       '@babel/runtime': 7.19.0
       '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.3
-      '@changesets/types': 5.1.0
+      '@changesets/get-dependents-graph': 1.3.4
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       semver: 5.7.1
     dev: false
 
-  /@changesets/changelog-git/0.1.12:
-    resolution: {integrity: sha512-Xv2CPjTBmwjl8l4ZyQ3xrsXZMq8WafPUpEonDpTmcb24XY8keVzt7ZSCJuDz035EiqrjmDKDhODoQ6XiHudlig==}
+  /@changesets/changelog-git/0.1.13:
+    resolution: {integrity: sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==}
     dependencies:
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
     dev: false
 
   /@changesets/changelog-github/0.4.6:
@@ -2153,17 +2168,17 @@ packages:
     hasBin: true
     dependencies:
       '@babel/runtime': 7.19.0
-      '@changesets/apply-release-plan': 6.1.0
-      '@changesets/assemble-release-plan': 5.2.1
-      '@changesets/changelog-git': 0.1.12
-      '@changesets/config': 2.1.1
+      '@changesets/apply-release-plan': 6.1.1
+      '@changesets/assemble-release-plan': 5.2.2
+      '@changesets/changelog-git': 0.1.13
+      '@changesets/config': 2.2.0
       '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.3
+      '@changesets/get-dependents-graph': 1.3.4
       '@changesets/get-release-plan': 3.0.12
-      '@changesets/git': 1.4.1
+      '@changesets/git': 1.5.0
       '@changesets/logger': 0.0.5
-      '@changesets/pre': 1.0.12
-      '@changesets/read': 0.5.7
+      '@changesets/pre': 1.0.13
+      '@changesets/read': 0.5.8
       '@changesets/types': 5.1.0
       '@changesets/write': 0.1.9
       '@manypkg/get-packages': 1.1.3
@@ -2187,13 +2202,13 @@ packages:
       tty-table: 4.1.6
     dev: false
 
-  /@changesets/config/2.1.1:
-    resolution: {integrity: sha512-nSRINMqHpdtBpNVT9Eh9HtmLhOwOTAeSbaqKM5pRmGfsvyaROTBXV84ujF9UsWNlV71YxFbxTbeZnwXSGQlyTw==}
+  /@changesets/config/2.2.0:
+    resolution: {integrity: sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==}
     dependencies:
       '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.3
+      '@changesets/get-dependents-graph': 1.3.4
       '@changesets/logger': 0.0.5
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
       micromatch: 4.0.5
@@ -2205,10 +2220,10 @@ packages:
       extendable-error: 0.1.7
     dev: false
 
-  /@changesets/get-dependents-graph/1.3.3:
-    resolution: {integrity: sha512-h4fHEIt6X+zbxdcznt1e8QD7xgsXRAXd2qzLlyxoRDFSa6SxJrDAUyh7ZUNdhjBU4Byvp4+6acVWVgzmTy4UNQ==}
+  /@changesets/get-dependents-graph/1.3.4:
+    resolution: {integrity: sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==}
     dependencies:
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       chalk: 2.4.2
       fs-extra: 7.0.1
@@ -2228,10 +2243,10 @@ packages:
     resolution: {integrity: sha512-TlpEdpxV5ZQmNeHoD6KNKAc01wjRrcu9/CQqzmO4qAlX7ARA4pIuAxd8QZ1AQXv/l4qhHox7SUYH3VLHfarv5w==}
     dependencies:
       '@babel/runtime': 7.19.0
-      '@changesets/assemble-release-plan': 5.2.1
-      '@changesets/config': 2.1.1
-      '@changesets/pre': 1.0.12
-      '@changesets/read': 0.5.7
+      '@changesets/assemble-release-plan': 5.2.2
+      '@changesets/config': 2.2.0
+      '@changesets/pre': 1.0.13
+      '@changesets/read': 0.5.8
       '@changesets/types': 5.1.0
       '@manypkg/get-packages': 1.1.3
     dev: false
@@ -2240,12 +2255,12 @@ packages:
     resolution: {integrity: sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==}
     dev: false
 
-  /@changesets/git/1.4.1:
-    resolution: {integrity: sha512-GWwRXEqBsQ3nEYcyvY/u2xUK86EKAevSoKV/IhELoZ13caZ1A1TSak/71vyKILtzuLnFPk5mepP5HjBxr7lZ9Q==}
+  /@changesets/git/1.5.0:
+    resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==}
     dependencies:
       '@babel/runtime': 7.19.0
       '@changesets/errors': 0.1.4
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
       spawndamnit: 2.0.0
@@ -2257,31 +2272,31 @@ packages:
       chalk: 2.4.2
     dev: false
 
-  /@changesets/parse/0.3.14:
-    resolution: {integrity: sha512-SWnNVyC9vz61ueTbuxvA6b4HXcSx2iaWr2VEa37lPg1Vw+cEyQp7lOB219P7uow1xFfdtIEEsxbzXnqLAAaY8w==}
+  /@changesets/parse/0.3.15:
+    resolution: {integrity: sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==}
     dependencies:
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       js-yaml: 3.14.1
     dev: false
 
-  /@changesets/pre/1.0.12:
-    resolution: {integrity: sha512-RFzWYBZx56MtgMesXjxx7ymyI829/rcIw/41hvz3VJPnY8mDscN7RJyYu7Xm7vts2Fcd+SRcO0T/Ws3I1/6J7g==}
+  /@changesets/pre/1.0.13:
+    resolution: {integrity: sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==}
     dependencies:
       '@babel/runtime': 7.19.0
       '@changesets/errors': 0.1.4
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
     dev: false
 
-  /@changesets/read/0.5.7:
-    resolution: {integrity: sha512-Iteg0ccTPpkJ+qFzY97k7qqdVE5Kz30TqPo9GibpBk2g8tcLFUqf+Qd0iXPLcyhUZpPL1U6Hia1gINHNKIKx4g==}
+  /@changesets/read/0.5.8:
+    resolution: {integrity: sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==}
     dependencies:
       '@babel/runtime': 7.19.0
-      '@changesets/git': 1.4.1
+      '@changesets/git': 1.5.0
       '@changesets/logger': 0.0.5
-      '@changesets/parse': 0.3.14
-      '@changesets/types': 5.1.0
+      '@changesets/parse': 0.3.15
+      '@changesets/types': 5.2.0
       chalk: 2.4.2
       fs-extra: 7.0.1
       p-filter: 2.1.0
@@ -2295,11 +2310,15 @@ packages:
     resolution: {integrity: sha512-uUByGATZCdaPkaO9JkBsgGDjEvHyY2Sb0e/J23+cwxBi5h0fxpLF/HObggO/Fw8T2nxK6zDfJbPsdQt5RwYFJA==}
     dev: false
 
+  /@changesets/types/5.2.0:
+    resolution: {integrity: sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==}
+    dev: false
+
   /@changesets/write/0.1.9:
     resolution: {integrity: sha512-E90ZrsrfJVOOQaP3Mm5Xd7uDwBAqq3z5paVEavTHKA8wxi7NAL8CmjgbGxSFuiP7ubnJA2BuHlrdE4z86voGOg==}
     dependencies:
       '@babel/runtime': 7.19.0
-      '@changesets/types': 5.1.0
+      '@changesets/types': 5.2.0
       fs-extra: 7.0.1
       human-id: 1.0.2
       prettier: 1.19.1
@@ -9168,7 +9187,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001414
-      electron-to-chromium: 1.4.269
+      electron-to-chromium: 1.4.270
       node-releases: 2.0.6
       update-browserslist-db: 1.0.9_browserslist@4.21.4
     dev: false
@@ -9701,6 +9720,15 @@ packages:
       wrap-ansi: 7.0.0
     dev: false
 
+  /cliui/8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: false
+
   /clone-deep/4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
     engines: {node: '>=6'}
@@ -10682,8 +10710,8 @@ packages:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: false
 
-  /electron-to-chromium/1.4.269:
-    resolution: {integrity: sha512-7mHFONwp7MNvdyto1v70fCwk28NJMFgsK79op+iYHzz1BLE8T66a1B2qW5alb8XgE0yi3FL3ZQjSYZpJpF6snw==}
+  /electron-to-chromium/1.4.270:
+    resolution: {integrity: sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==}
     dev: false
 
   /element-resize-detector/1.2.4:
@@ -11794,7 +11822,7 @@ packages:
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      js-sdsl: 4.1.4
+      js-sdsl: 4.1.5
       js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
       levn: 0.4.1
@@ -14187,7 +14215,7 @@ packages:
       jest-util: 28.1.3
       jest-validate: 28.1.3
       prompts: 2.4.2
-      yargs: 17.5.1
+      yargs: 17.6.0
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -14308,7 +14336,7 @@ packages:
       '@jest/fake-timers': 28.1.3
       '@jest/types': 28.1.3
       '@types/jsdom': 16.2.15
-      '@types/node': 15.14.9
+      '@types/node': 16.11.62
       jest-mock: 28.1.3
       jest-util: 28.1.3
       jsdom: 19.0.0
@@ -14692,8 +14720,8 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /js-sdsl/4.1.4:
-    resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
+  /js-sdsl/4.1.5:
+    resolution: {integrity: sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==}
     dev: false
 
   /js-string-escape/1.0.1:
@@ -19915,7 +19943,7 @@ packages:
       smartwrap: 2.0.2
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
-      yargs: 17.5.1
+      yargs: 17.6.0
     dev: false
 
   /turbo-android-arm64/1.3.4:
@@ -21147,11 +21175,11 @@ packages:
       yargs-parser: 20.2.9
     dev: false
 
-  /yargs/17.5.1:
-    resolution: {integrity: sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==}
+  /yargs/17.6.0:
+    resolution: {integrity: sha512-8H/wTDqlSwoSnScvV2N/JHfLWOKuh5MVla9hqLjK3nsfyy6Y4kDSYSvkU5YCUEPOSnRXfIyx3Sq+B/IWudTo4g==}
     engines: {node: '>=12'}
     dependencies:
-      cliui: 7.0.4
+      cliui: 8.0.1
       escalade: 3.1.1
       get-caller-file: 2.0.5
       require-directory: 2.1.1