@sproutsocial/seeds-react-drawer 1.0.0

package/dist/index.js

@@ -0,0 +1,328 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Drawer: () => Drawer_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Drawer.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_react_focus_lock = __toESM(require("react-focus-lock"));
+var import_web = require("@react-spring/web");
+var import_unitless = require("@sproutsocial/seeds-motion/unitless");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_portal = __toESM(require("@sproutsocial/seeds-react-portal"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var Content = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  overflow-y: auto;
+`;
+var Container = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  width: ${(props) => props.width}px;
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  box-shadow: ${(props) => props.theme.shadows.high};
+  filter: blur(0);
+
+  ${(props) => import_styled_components.css`
+    ${props.direction}: ${props.offset}px;
+  `}
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var styles_default = Container;
+
+// src/Drawer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var useSlideTransition = ({
+  isVisible,
+  width,
+  direction
+}) => {
+  const offset = width * (direction === "left" ? -1 : 1);
+  return (0, import_web.useTransition)(isVisible, {
+    from: {
+      opacity: 0,
+      x: offset
+    },
+    enter: {
+      opacity: 1,
+      x: 0
+    },
+    leave: {
+      opacity: 0,
+      x: offset
+    },
+    config: {
+      duration: import_unitless.MOTION_DURATION_MEDIUM * 1e3
+    }
+  });
+};
+var AnimatedDrawer = (0, import_web.animated)(styles_default);
+var doesRefContainEventTarget = (ref, event) => {
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
+};
+var DrawerContext = React.createContext({});
+var DrawerCloseButton = (props) => {
+  const { onClose, closeButtonLabel } = (0, import_react.useContext)(DrawerContext);
+  if (props.render) {
+    return props.render({
+      onClose,
+      closeButtonLabel
+    }) ?? null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_button.default,
+    {
+      appearance: "pill",
+      "aria-label": closeButtonLabel,
+      onClick: onClose,
+      ...props,
+      children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { "aria-hidden": true, name: "x-outline" })
+    }
+  );
+};
+var DrawerHeader = ({
+  title = "",
+  id = void 0,
+  children,
+  render,
+  ...rest
+}) => {
+  const drawerContext = (0, import_react.useContext)(DrawerContext);
+  if (render) {
+    return render(drawerContext);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_box2.default,
+    {
+      display: "flex",
+      flex: "0 0 auto",
+      justifyContent: "space-between",
+      alignItems: "center",
+      pt: 400,
+      px: 450,
+      ...rest,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_seeds_react_text.default,
+          {
+            as: "h2",
+            fontSize: 400,
+            fontWeight: "semibold",
+            color: "text.headline",
+            id,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerCloseButton, {})
+      ] })
+    }
+  );
+};
+var DrawerContent = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { height: "100%", p: 450, color: "text.body", ...rest, children });
+var useCloseOnBodyClick = ({
+  ref,
+  disableCloseOnClickOutside,
+  onClose,
+  closeTargets
+}) => {
+  (0, import_react.useEffect)(() => {
+    const documentBody = document.body;
+    if (!documentBody) {
+      return;
+    }
+    const onEsc = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    const bodyClick = (event) => {
+      if (
+        // @ts-ignore I'm not sure how to type this ref properly
+        !doesRefContainEventTarget(ref, event) && !disableCloseOnClickOutside
+      ) {
+        onClose();
+      }
+    };
+    documentBody?.addEventListener("keydown", onEsc, { capture: true });
+    if (closeTargets) {
+      closeTargets.forEach(
+        (targetElement) => targetElement?.addEventListener("click", bodyClick, { capture: true })
+      );
+    } else {
+      documentBody.firstElementChild?.addEventListener("click", bodyClick, {
+        capture: true
+      });
+    }
+    return () => {
+      documentBody?.removeEventListener("keydown", onEsc, { capture: true });
+      if (closeTargets) {
+        closeTargets.forEach(
+          (targetElement) => targetElement?.removeEventListener("click", bodyClick, {
+            capture: true
+          })
+        );
+      } else {
+        documentBody.firstElementChild?.removeEventListener(
+          "click",
+          bodyClick,
+          { capture: true }
+        );
+      }
+    };
+  }, [onClose, disableCloseOnClickOutside, closeTargets, ref]);
+};
+var Drawer = ({
+  id,
+  offset,
+  direction,
+  children,
+  disableCloseOnClickOutside,
+  onClose,
+  zIndex,
+  closeTargets,
+  width,
+  focusLockExemptCheck,
+  isOpen,
+  ...rest
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  useCloseOnBodyClick({
+    ref,
+    disableCloseOnClickOutside,
+    onClose,
+    closeTargets
+  });
+  const transition = useSlideTransition({
+    isVisible: isOpen,
+    width,
+    direction
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_focus_lock.default,
+    {
+      autoFocus: true,
+      returnFocus: true,
+      whiteList: focusLockExemptCheck ? (e) => !focusLockExemptCheck(e) : void 0,
+      children: transition(
+        (style, isVisible) => isVisible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          AnimatedDrawer,
+          {
+            ref,
+            style: { ...style, zIndex },
+            width,
+            offset,
+            direction,
+            "data-qa-drawer": id,
+            role: "dialog",
+            ...rest,
+            children
+          }
+        ) : null
+      )
+    },
+    id
+  );
+};
+var DrawerContainer = ({
+  children,
+  closeButtonLabel,
+  direction = "right",
+  disableCloseOnClickOutside = false,
+  id,
+  isOpen,
+  offset = 0,
+  onClose,
+  zIndex = 7,
+  closeTargets = [],
+  width = 600,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_portal.default, { id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DrawerContext.Provider,
+    {
+      value: {
+        onClose,
+        closeButtonLabel
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Drawer,
+        {
+          isOpen,
+          id,
+          offset,
+          direction,
+          disableCloseOnClickOutside,
+          onClose,
+          zIndex,
+          closeTargets,
+          width,
+          "data-qa-drawer": id || "",
+          "data-qa-drawer-isopen": isOpen,
+          ...rest,
+          children
+        }
+      )
+    }
+  ) });
+};
+DrawerHeader.displayName = "Drawer.Header";
+DrawerContent.displayName = "Drawer.Content";
+DrawerCloseButton.displayName = "Drawer.CloseButton";
+DrawerContainer.Header = DrawerHeader;
+DrawerContainer.Content = DrawerContent;
+DrawerContainer.CloseButton = DrawerCloseButton;
+var Drawer_default = DrawerContainer;
+
+// src/DrawerTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Drawer_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Drawer.tsx","../src/styles.ts","../src/DrawerTypes.ts"],"sourcesContent":["import Drawer from \"./Drawer\";\n\nexport default Drawer;\nexport { Drawer };\nexport * from \"./DrawerTypes\";\n","import * as React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport FocusLock from \"react-focus-lock\";\nimport { animated, useTransition } from \"@react-spring/web\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Container, { Content } from \"./styles\";\nimport type {\n  TypeDrawerContext,\n  TypeDrawerCloseButtonProps,\n  TypeDrawerHeaderProps,\n  TypeDrawerProps,\n  TypeInnerDrawerProps,\n  TypeDrawerContentProps,\n  TypeUseCloseOnBodyClickProps,\n} from \"./DrawerTypes\";\n\nconst useSlideTransition = ({\n  isVisible,\n  width,\n  direction,\n}: {\n  isVisible: boolean;\n  width: number;\n  direction: \"left\" | \"right\";\n}) => {\n  const offset = width * (direction === \"left\" ? -1 : 1);\n\n  return useTransition(isVisible, {\n    from: {\n      opacity: 0,\n      x: offset,\n    },\n    enter: {\n      opacity: 1,\n      x: 0,\n    },\n    leave: {\n      opacity: 0,\n      x: offset,\n    },\n    config: {\n      duration: MOTION_DURATION_MEDIUM * 1000,\n    },\n  });\n};\n\nconst AnimatedDrawer = animated(Container);\n\nconst doesRefContainEventTarget = (\n  ref: { current: { contains: (arg0: any) => any } },\n  event: Event\n) => {\n  return (\n    ref.current &&\n    event.target instanceof Node &&\n    ref.current.contains(event.target)\n  );\n};\n\nconst DrawerContext = React.createContext<TypeDrawerContext>({});\n\nconst DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {\n  const { onClose, closeButtonLabel } = useContext(DrawerContext);\n\n  if (props.render) {\n    return (\n      props.render({\n        onClose,\n        closeButtonLabel,\n      }) ?? null\n    );\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={closeButtonLabel}\n      onClick={onClose}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nconst DrawerHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypeDrawerHeaderProps) => {\n  const drawerContext = useContext(DrawerContext);\n\n  if (render) {\n    return render(drawerContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      pt={400}\n      px={450}\n      {...rest}\n    >\n      {children || (\n        <React.Fragment>\n          <Text\n            as=\"h2\"\n            fontSize={400}\n            fontWeight=\"semibold\"\n            color=\"text.headline\"\n            id={id}\n          >\n            {title}\n          </Text>\n          <DrawerCloseButton />\n        </React.Fragment>\n      )}\n    </Box>\n  );\n};\n\nconst DrawerContent = ({ children, ...rest }: TypeDrawerContentProps) => (\n  <Content height=\"100%\" p={450} color=\"text.body\" {...rest}>\n    {children}\n  </Content>\n);\n\nconst useCloseOnBodyClick = ({\n  ref,\n  disableCloseOnClickOutside,\n  onClose,\n  closeTargets,\n}: TypeUseCloseOnBodyClickProps) => {\n  useEffect(() => {\n    const documentBody = document.body;\n\n    if (!documentBody) {\n      return;\n    }\n\n    const onEsc = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    const bodyClick = (event: Event): void => {\n      if (\n        // @ts-ignore I'm not sure how to type this ref properly\n        !doesRefContainEventTarget(ref, event) &&\n        !disableCloseOnClickOutside\n      ) {\n        onClose();\n      }\n    };\n\n    documentBody?.addEventListener(\"keydown\", onEsc, { capture: true });\n\n    if (closeTargets) {\n      closeTargets.forEach((targetElement) =>\n        targetElement?.addEventListener(\"click\", bodyClick, { capture: true })\n      );\n    } else {\n      documentBody.firstElementChild?.addEventListener(\"click\", bodyClick, {\n        capture: true,\n      });\n    }\n\n    return () => {\n      documentBody?.removeEventListener(\"keydown\", onEsc, { capture: true });\n\n      if (closeTargets) {\n        closeTargets.forEach((targetElement) =>\n          targetElement?.removeEventListener(\"click\", bodyClick, {\n            capture: true,\n          })\n        );\n      } else {\n        documentBody.firstElementChild?.removeEventListener(\n          \"click\",\n          bodyClick,\n          { capture: true }\n        );\n      }\n    };\n  }, [onClose, disableCloseOnClickOutside, closeTargets, ref]);\n};\n\nconst Drawer = ({\n  id,\n  offset,\n  direction,\n  children,\n  disableCloseOnClickOutside,\n  onClose,\n  zIndex,\n  closeTargets,\n  width,\n  focusLockExemptCheck,\n  isOpen,\n  ...rest\n}: TypeInnerDrawerProps) => {\n  const ref = useRef(null);\n  useCloseOnBodyClick({\n    ref,\n    disableCloseOnClickOutside,\n    onClose,\n    closeTargets,\n  });\n\n  const transition = useSlideTransition({\n    isVisible: isOpen,\n    width,\n    direction,\n  });\n\n  return (\n    <FocusLock\n      key={id}\n      autoFocus={true}\n      returnFocus\n      whiteList={\n        focusLockExemptCheck ? (e) => !focusLockExemptCheck(e) : undefined\n      }\n    >\n      {transition((style, isVisible) =>\n        isVisible ? (\n          <AnimatedDrawer\n            ref={ref}\n            style={{ ...style, zIndex }}\n            width={width}\n            offset={offset}\n            direction={direction}\n            data-qa-drawer={id}\n            role=\"dialog\"\n            {...rest}\n          >\n            {children}\n          </AnimatedDrawer>\n        ) : null\n      )}\n    </FocusLock>\n  );\n};\n\nconst DrawerContainer = ({\n  children,\n  closeButtonLabel,\n  direction = \"right\",\n  disableCloseOnClickOutside = false,\n  id,\n  isOpen,\n  offset = 0,\n  onClose,\n  zIndex = 7,\n  closeTargets = [],\n  width = 600,\n  ...rest\n}: TypeDrawerProps) => {\n  return (\n    <Portal id={id}>\n      <DrawerContext.Provider\n        value={{\n          onClose,\n          closeButtonLabel,\n        }}\n      >\n        <Drawer\n          isOpen={isOpen}\n          id={id}\n          offset={offset}\n          direction={direction}\n          disableCloseOnClickOutside={disableCloseOnClickOutside}\n          onClose={onClose}\n          zIndex={zIndex}\n          closeTargets={closeTargets}\n          width={width}\n          data-qa-drawer={id || \"\"}\n          data-qa-drawer-isopen={isOpen}\n          {...rest}\n        >\n          {children}\n        </Drawer>\n      </DrawerContext.Provider>\n    </Portal>\n  );\n};\n\nDrawerHeader.displayName = \"Drawer.Header\";\nDrawerContent.displayName = \"Drawer.Content\";\nDrawerCloseButton.displayName = \"Drawer.CloseButton\";\n\nDrawerContainer.Header = DrawerHeader;\nDrawerContainer.Content = DrawerContent;\nDrawerContainer.CloseButton = DrawerCloseButton;\n\nexport default DrawerContainer;\n","import type { TypeDrawerProps } from \"./DrawerTypes\";\nimport styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const Content = styled(Box)`\n  overflow-y: auto;\n`;\n\ninterface ContainerType\n  extends Pick<TypeDrawerProps, \"offset\" | \"direction\">,\n    TypeSystemCommonProps {\n  width: number;\n}\n\nconst Container = styled.div<ContainerType>`\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  top: 0;\n  height: 100%;\n  width: ${(props) => props.width}px;\n  background-color: ${(props) => props.theme.colors.container.background.base};\n  box-shadow: ${(props) => props.theme.shadows.high};\n  filter: blur(0);\n\n  ${(props) => css`\n    ${props.direction}: ${props.offset}px;\n  `}\n\n  ${COMMON}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\ntype DrawerAnimationDirection = \"left\" | \"right\";\n\nexport interface TypeDrawerContext {\n  /** Callback for close button */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onClose?: () => any;\n\n  /** aria-label for drawer close button */\n  closeButtonLabel?: string;\n}\n// TODO: Should the render prop be a React.FC?\nexport interface TypeDrawerCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior. */\n  render?: React.FC<TypeDrawerContext>;\n  children?: React.ReactNode;\n}\n\nexport interface TypeDrawerHeaderProps extends TypeBoxProps {\n  title?: string;\n  children?: React.ReactNode;\n\n  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the header. */\n  render?: React.FC<TypeDrawerContext>;\n}\n\nexport interface TypeInnerDrawerProps\n  extends Omit<TypeDrawerProps, \"closeButtonLabel\"> {\n  width: number;\n  direction: DrawerAnimationDirection;\n}\n\ntype useBodyClicksProps = Pick<\n  TypeDrawerProps,\n  \"closeTargets\" | \"onClose\" | \"disableCloseOnClickOutside\"\n>;\n\nexport interface TypeUseCloseOnBodyClickProps\n  extends Pick<\n    TypeDrawerProps,\n    \"closeTargets\" | \"onClose\" | \"disableCloseOnClickOutside\"\n  > {\n  ref?: React.RefObject<HTMLElement | null>;\n}\n\nexport interface TypeDrawerProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually this should be \"Close\" */\n  closeButtonLabel: string;\n\n  /** Whether the drawer slides in from the left or right side of the screen */\n  direction?: DrawerAnimationDirection;\n\n  /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */\n  disableCloseOnClickOutside?: boolean;\n  id: string;\n  isOpen: boolean;\n  offset?: number;\n  onClose: () => void;\n  zIndex?: number;\n  closeTargets?: Array<Element>;\n  width?: number;\n  focusLockExemptCheck?: (element: HTMLElement) => boolean;\n}\n\nexport interface TypeDrawerContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n"],"mappings":"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","names":["import_seeds_react_box","styled","Box","Button","Icon","Box","Text","FocusLock","Portal","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-drawer",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sproutsocial/seeds-react-drawer",
+  "version": "1.0.0",
+  "description": "Seeds React Drawer",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-portal": "*",
+    "@sproutsocial/seeds-motion": "*",
+    "@react-spring/web": "^9.0.0",
+    "react-focus-lock": "^2.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}