@sproutsocial/seeds-react-modal 1.0.0

package/dist/index.js

@@ -0,0 +1,274 @@
+"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, {
+  Modal: () => Modal_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Modal.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+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"));
+
+// src/styles.tsx
+var import_react = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_react_modal = __toESM(require("react-modal"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var BODY_PADDING = "64px";
+var ReactModalAdapter = ({
+  className = "",
+  ...props
+}) => {
+  const contentClassName = className.split(" ").map((className2) => `${className2} ${className2}__Content`).join(" ");
+  const overlayClassName = className.split(" ").map((className2) => `${className2} ${className2}__Overlay`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_modal.default,
+    {
+      portalClassName: className,
+      className: contentClassName,
+      overlayClassName,
+      ...props
+    }
+  );
+};
+var Body = import_styled_components.createGlobalStyle`
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+var Container = (0, import_styled_components.default)(ReactModalAdapter)`
+  &__Overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors.overlay.background.base};
+    opacity: 0;
+    will-change: opacity;
+    transition: opacity ${(props) => props.theme.duration.medium}
+      ${(props) => props.theme.easing.ease_inout};
+
+    ${import_styled_system.zIndex}
+
+    &.ReactModal__Overlay--after-open {
+      opacity: 1;
+    }
+    &.ReactModal__Overlay--before-close {
+      opacity: 0;
+    }
+  }
+
+  &__Content {
+    display: flex;
+    flex-direction: column;
+    background: ${(props) => props.theme.colors.container.background.base};
+    border-radius: ${(props) => props.theme.radii[600]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
+    filter: blur(0);
+    color: ${(props) => props.theme.colors.text.body};
+
+    outline: none;
+    max-width: calc(100vw - ${BODY_PADDING});
+    max-height: calc(100vh - ${BODY_PADDING});
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      /**
+       * This prevents the modal from being very short in IE11. Better too big
+       * than too small.
+       */
+      height: calc(100vh - ${BODY_PADDING});
+    }
+
+    ${import_styled_system.width}
+
+    ${import_seeds_react_system_props.COMMON}
+  }
+`;
+var Content = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* 'flex-basis: auto' breaks overflow in IE11 */
+    flex-basis: 100%;
+  }
+`;
+var HeaderContainer = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+`;
+var Header = (0, import_styled_components.default)(HeaderContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  border-bottom-width: ${(props) => props.theme.borderWidths[500]};
+  border-bottom-color: ${(props) => props.bordered ? props.theme.colors.container.border.base : "transparent"};
+  border-bottom-style: solid;
+`;
+var Footer = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+`;
+Container.displayName = "ModalContainer";
+Content.displayName = "Content";
+Header.displayName = "Modal.Header";
+Footer.displayName = "Modal.Footer";
+
+// src/Modal.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModalContext = React2.createContext({});
+var ModalHeader = (props) => {
+  const { title, subtitle, children, bordered, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Header, { bordered: title || subtitle || bordered, ...rest, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box2.default, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default, { as: "h1", fontSize: 400, fontWeight: "semibold", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default, { as: "div", fontSize: 200, children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", "justify-content": "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalCloseButton, { ml: 400 }) })
+  ] }) });
+};
+var ModalCloseButton = (props) => {
+  const { onClose, closeButtonLabel } = (0, import_react2.useContext)(ModalContext);
+  if (!onClose)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_button.default, { onClick: onClose, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.default, { name: "x-outline", ariaLabel: closeButtonLabel }) });
+};
+var ModalFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Footer, { borderTop: 500, borderColor: "container.border.base", ...props });
+ModalFooter.defaultProps = {
+  bg: "container.background.base"
+};
+var ModalContent = React2.forwardRef(
+  ({ children, ...rest }, ref) => {
+    const { label } = (0, import_react2.useContext)(ModalContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { "data-qa-modal": true, "data-qa-label": label, ref, ...rest, children });
+  }
+);
+var Modal = (props) => {
+  const {
+    appElementSelector,
+    children,
+    isOpen,
+    label,
+    onClose,
+    closeButtonLabel,
+    width: width2,
+    zIndex: zIndex2,
+    data = {},
+    ...rest
+  } = props;
+  const isCloseable = Boolean(onClose);
+  const appElement = appElementSelector && document ? document.querySelector(appElementSelector) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Container,
+    {
+      appElement,
+      ariaHideApp: !!appElement,
+      isOpen,
+      contentLabel: label,
+      onRequestClose: onClose || (() => {
+      }),
+      shouldFocusAfterRender: true,
+      shouldCloseOnOverlayClick: isCloseable,
+      shouldCloseOnEsc: isCloseable,
+      shouldReturnFocusAfterClose: true,
+      closeTimeoutMS: 200,
+      role: "dialog",
+      width: width2,
+      zIndex: zIndex2,
+      data: {
+        "qa-modal": "",
+        "qa-modal-isopen": isOpen,
+        ...data
+      },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(React2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Body, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ModalContext.Provider,
+          {
+            value: {
+              onClose,
+              closeButtonLabel,
+              label
+            },
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+Modal.defaultProps = {
+  width: "800px",
+  zIndex: 6
+};
+ModalHeader.displayName = "Modal.Header";
+ModalFooter.displayName = "Modal.Footer";
+ModalContent.displayName = "Modal.Content";
+ModalCloseButton.displayName = "Modal.CloseButton";
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Content = ModalContent;
+Modal.CloseButton = ModalCloseButton;
+var Modal_default = Modal;
+
+// src/ModalTypes.ts
+var React3 = require("react");
+var import_react_modal2 = require("react-modal");
+
+// src/index.ts
+var src_default = Modal_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Modal.tsx","../src/styles.tsx","../src/ModalTypes.ts"],"sourcesContent":["import Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\nexport * from \"./ModalTypes\";\n","import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n  TypeModalProps,\n  TypeModalCloseButtonProps,\n  TypeModalContentProps,\n  TypeModalFooterProps,\n  TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n  onClose: () => void;\n  closeButtonLabel: string;\n  label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n  const { title, subtitle, children, bordered, ...rest } = props;\n  return (\n    <Header bordered={title || subtitle || bordered} {...rest}>\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n                {title}\n              </Text>\n            )}\n            {subtitle && (\n              <Text as=\"div\" fontSize={200}>\n                {subtitle}\n              </Text>\n            )}\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n            <ModalCloseButton ml={400} />\n          </Box>\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n  const { onClose, closeButtonLabel } = useContext(ModalContext);\n  if (!onClose) return null;\n  return (\n    <Button onClick={onClose} {...props}>\n      <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n    </Button>\n  );\n};\n\nconst ModalFooter = (props: TypeModalFooterProps) => (\n  <Footer borderTop={500} borderColor=\"container.border.base\" {...props} />\n);\n\nModalFooter.defaultProps = {\n  bg: \"container.background.base\",\n};\n\nconst ModalContent = React.forwardRef(\n  ({ children, ...rest }: TypeModalContentProps, ref) => {\n    const { label } = useContext(ModalContext);\n    return (\n      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n        {children}\n      </Content>\n    );\n  }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n  const {\n    appElementSelector,\n    children,\n    isOpen,\n    label,\n    onClose,\n    closeButtonLabel,\n    width,\n    zIndex,\n    data = {},\n    ...rest\n  } = props;\n\n  const isCloseable = Boolean(onClose);\n  const appElement =\n    appElementSelector && document\n      ? (document.querySelector(appElementSelector) as HTMLElement)\n      : undefined;\n\n  return (\n    <Container\n      appElement={appElement}\n      ariaHideApp={!!appElement}\n      isOpen={isOpen}\n      contentLabel={label}\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      onRequestClose={onClose || (() => {})}\n      shouldFocusAfterRender={true}\n      shouldCloseOnOverlayClick={isCloseable}\n      shouldCloseOnEsc={isCloseable}\n      shouldReturnFocusAfterClose={true}\n      closeTimeoutMS={200}\n      role=\"dialog\"\n      width={width}\n      zIndex={zIndex}\n      data={{\n        \"qa-modal\": \"\",\n        \"qa-modal-isopen\": isOpen,\n        ...data,\n      }}\n      {...rest}\n    >\n      <React.Fragment>\n        <Body />\n\n        <ModalContext.Provider\n          value={{\n            onClose,\n            closeButtonLabel,\n            label,\n          }}\n        >\n          {children}\n        </ModalContext.Provider>\n      </React.Fragment>\n    </Container>\n  );\n};\n\nModal.defaultProps = {\n  width: \"800px\",\n  zIndex: 6,\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n  className = \"\",\n  ...props\n}: { className?: string } & Omit<\n  ReactModal.Props,\n  \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n  // We want to create *__Content and *__Overlay class names on the subcomponents.\n  // Because `className` could be a space-separated list of class names, we make\n  // sure that we append `__Content` and `__Overlay` to every class name.\n  const contentClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Content`)\n    .join(\" \");\n\n  const overlayClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Overlay`)\n    .join(\" \");\n\n  return (\n    <ReactModal\n      portalClassName={className}\n      className={contentClassName}\n      overlayClassName={overlayClassName}\n      {...props}\n    />\n  );\n};\n\nexport const Body = createGlobalStyle`\n  .ReactModal__Body--open {\n    overflow: hidden;\n  }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n  &__Overlay {\n    position: fixed;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${(props) => props.theme.colors.overlay.background.base};\n    opacity: 0;\n    will-change: opacity;\n    transition: opacity ${(props) => props.theme.duration.medium}\n      ${(props) => props.theme.easing.ease_inout};\n\n    ${zIndex}\n\n    &.ReactModal__Overlay--after-open {\n      opacity: 1;\n    }\n    &.ReactModal__Overlay--before-close {\n      opacity: 0;\n    }\n  }\n\n  &__Content {\n    display: flex;\n    flex-direction: column;\n    background: ${(props) => props.theme.colors.container.background.base};\n    border-radius: ${(props) => props.theme.radii[600]};\n    box-shadow: ${(props) => props.theme.shadows.medium};\n    filter: blur(0);\n    color: ${(props) => props.theme.colors.text.body};\n\n    outline: none;\n    max-width: calc(100vw - ${BODY_PADDING});\n    max-height: calc(100vh - ${BODY_PADDING});\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      /**\n       * This prevents the modal from being very short in IE11. Better too big\n       * than too small.\n       */\n      height: calc(100vh - ${BODY_PADDING});\n    }\n\n    ${width}\n\n    ${COMMON}\n  }\n`;\n\nexport const Content = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  min-height: 80px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    /* 'flex-basis: auto' breaks overflow in IE11 */\n    flex-basis: 100%;\n  }\n`;\n\nexport const HeaderContainer = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n  border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n  border-bottom-color: ${(props) =>\n    props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n  border-bottom-style: solid;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport type {\n  TypeBoxProps,\n  TypeContainerProps,\n} from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeModalCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  children?: void | null;\n}\n\nexport interface TypeModalHeaderProps extends TypeBoxProps {\n  title?: string;\n  subtitle?: string;\n\n  /** Passing children will override the default modal header */\n  children?: React.ReactNode;\n\n  /** If you're rendering a custom header, you can use this prop to add a bottom border */\n  bordered?: boolean;\n}\n\nexport interface TypeModalFooterProps extends TypeBoxProps {\n  bg?: string;\n  children: React.ReactNode;\n}\n\nexport interface TypeModalContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypeModalProps\n  extends TypeContainerProps,\n    // @ts-notes - onClose is an alias for onRequestClose so we don't need to include it here\n    Omit<ReactModal.Props, keyof TypeContainerProps | \"onRequestClose\"> {\n  /** section of app to aria hide for the modal */\n  appElementSelector?: string;\n\n  /** trigger to open or close the modal */\n  isOpen: boolean;\n\n  /** label for screen readers to announce the modal */\n  label: string;\n\n  /** body content of the modal */\n  children: React.ReactNode;\n\n  /** callback for close */\n  onClose?: () => void;\n\n  /** aria-label for modal X */\n  closeButtonLabel: string;\n\n  /** Controls the z-index CSS property */\n  zIndex?: number;\n\n  /** The max width of the modal container */\n  width?: string | number;\n\n  /**\n   * Custom attributes to be added to the modals container\n   * Each key will be prepended with \"data-\" when rendered in the DOM\n   */\n  data?: Record<string, string | boolean | number>;\n}\n"],"mappings":"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","names":["React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex","React","import_react_modal"]}

package/jest.config.js

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sproutsocial/seeds-react-modal",
+  "version": "1.0.0",
+  "description": "Seeds React Modal",
+  "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": "*",
+    "react-modal": "^3.16.1",
+    "styled-system": "^5.1.5"
+  },
+  "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": "*",
+    "@sproutsocial/seeds-react-input": "*",
+    "@sproutsocial/seeds-react-form-field": "*",
+    "@types/react-modal": "^3.16.0",
+    "@types/styled-system": "^5.1.15"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}