@sproutsocial/seeds-react-tabs 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-tabs/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     7.71 KB
+CJS dist/index.js.map 12.04 KB
+CJS ⚡️ Build success in 159ms
+ESM dist/esm/index.js     5.67 KB
+ESM dist/esm/index.js.map 11.98 KB
+ESM ⚡️ Build success in 160ms
+DTS Build start
+DTS ⚡️ Build success in 41689ms
+DTS dist/index.d.ts  2.39 KB
+DTS dist/index.d.mts 2.39 KB
+Done in 49.01s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-tabs
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate tabs from Racine to seeds-react-tabs

package/dist/esm/index.js

@@ -0,0 +1,204 @@
+// src/Tabs.tsx
+import * as React2 from "react";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { Button } from "@sproutsocial/seeds-react-button";
+
+// src/TabsTypes.ts
+import "react";
+
+// src/styles.ts
+var Container = styled.ul`
+  display: ${(props) => props.fullWidth ? "flex" : "inline-flex"};
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-bottom: ${(props) => props.theme.borders[500]}
+    ${(props) => props.theme.colors.container.border.base};
+
+  ${COMMON}
+`;
+var TabItem = styled.li`
+  margin-bottom: -1px;
+  ${(props) => props.fullWidth && css`
+      flex-grow: 1;
+    `};
+
+  &:not(:last-child) {
+    ${(props) => !props.fullWidth && css`
+        margin-right: ${(props2) => props2.theme.space[350]};
+      `};
+  }
+
+  ${(props) => props.isSelected && css`
+      box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.base}`};
+    `};
+
+  &:hover {
+    ${(props) => props.isSelected && css`
+        box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.hover}`};
+      `};
+  }
+`;
+var TabButton = styled(Button)`
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  width: 100%;
+
+  ${(props) => props.isSelected && css`
+      color: ${(props2) => props2.theme.colors.link.base};
+    `};
+
+  &:hover {
+    ${(props) => props.isSelected && css`
+        color: ${(props2) => props2.theme.colors.link.hover};
+      `};
+  }
+
+  &:active {
+    transform: none;
+  }
+`;
+var styles_default = Container;
+
+// src/Tabs.tsx
+import { jsx } from "react/jsx-runtime";
+var TabButtonContext = React2.createContext({});
+var TabItemButton = class extends React2.Component {
+  static contextType = TabButtonContext;
+  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  context;
+  buttonRef = React2.createRef();
+  componentDidMount() {
+    this.context.onTabMount?.(this.props.id, this.buttonRef);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.context.onTabUpdate?.(prevProps.id, this.props.id);
+    }
+  }
+  componentWillUnmount() {
+    this.context.onTabUnmount?.(this.props.id);
+  }
+  render() {
+    const { children, id, ...rest } = this.props;
+    const { selectedId, onActivate, fullWidth } = this.context;
+    const isSelected = selectedId === id;
+    return /* @__PURE__ */ jsx(TabItem, { fullWidth, isSelected, children: /* @__PURE__ */ jsx(
+      TabButton,
+      {
+        innerRef: this.buttonRef,
+        id,
+        onClick: () => onActivate?.(id),
+        isSelected,
+        tabIndex: isSelected ? 0 : -1,
+        fullWidth,
+        "data-qa-tab-button": id,
+        "data-qa-tab-button-state": isSelected,
+        "aria-selected": isSelected,
+        role: "tab",
+        ...rest,
+        children
+      }
+    ) }, id);
+  }
+};
+var Tabs = class extends React2.Component {
+  static Button = TabItemButton;
+  buttonRefs = {};
+  tabList = [];
+  getSelectedId = () => this.props.selectedId;
+  onActivate = (id) => this.props.onSelect(id);
+  onTabMount = (id, ref) => {
+    if (!this.tabList.includes(id)) {
+      this.tabList.push(id);
+      this.buttonRefs[id] = ref;
+    }
+  };
+  onTabUpdate = (previousId, newId) => {
+    if (this.tabList.includes(previousId)) {
+      this.tabList = this.tabList.map((id) => id === previousId ? newId : id);
+      this.buttonRefs[newId] = this.buttonRefs[previousId];
+      this.buttonRefs[previousId] = void 0;
+    }
+  };
+  onTabUnmount = (id) => {
+    if (this.tabList.includes(id)) {
+      this.tabList = this.tabList.filter((currentId) => currentId !== id);
+      this.buttonRefs[id] = void 0;
+    }
+  };
+  selectNextTab = (id) => {
+    const buttonRef = this.buttonRefs[id];
+    this.props.onSelect(id);
+    buttonRef && buttonRef.current && buttonRef.current.focus && buttonRef.current.focus();
+  };
+  keyHandler = ({ keyCode }) => {
+    switch (keyCode) {
+      case 37:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+      case 39:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index + 1 < count ? index + 1 : 0;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  };
+  render() {
+    const { children, qa, onSelect, ...rest } = this.props;
+    return /* @__PURE__ */ jsx(
+      styles_default,
+      {
+        "data-qa-tabs": "",
+        onKeyUp: this.keyHandler,
+        onSelect,
+        role: "tablist",
+        ...qa,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          TabButtonContext.Provider,
+          {
+            value: {
+              selectedId: this.getSelectedId(),
+              fullWidth: this.props.fullWidth,
+              onActivate: this.onActivate,
+              onTabMount: this.onTabMount,
+              onTabUpdate: this.onTabUpdate,
+              onTabUnmount: this.onTabUnmount
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+};
+var Tabs_default = Tabs;
+
+// src/index.ts
+var src_default = Tabs_default;
+export {
+  Tabs_default as Tabs,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs.tsx","../../src/styles.ts","../../src/TabsTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Container, { TabItem, TabButton } from \"./styles\";\nimport type { TypeTabButtonsProps, TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabButtonRef {\n  current: null | React.ElementRef<\"button\">;\n}\ninterface TypeTabButtonContext {\n  onActivate: (arg0: string) => void;\n  onTabMount: (id: string, ref: TypeTabButtonRef) => void;\n  onTabUpdate: (previousId: string, nextId: string) => void;\n  onTabUnmount: (id: string) => void;\n  selectedId: string;\n  fullWidth?: boolean;\n}\n\nconst TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});\n\nclass TabItemButton extends React.Component<TypeTabButtonsProps> {\n  static override contextType = TabButtonContext;\n  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  context!: React.ContextType<typeof TabButtonContext>;\n\n  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<\"button\">>();\n\n  override componentDidMount() {\n    this.context.onTabMount?.(this.props.id, this.buttonRef);\n  }\n\n  override componentDidUpdate(prevProps: TypeTabButtonsProps) {\n    if (prevProps.id !== this.props.id) {\n      this.context.onTabUpdate?.(prevProps.id, this.props.id);\n    }\n  }\n\n  override componentWillUnmount() {\n    this.context.onTabUnmount?.(this.props.id);\n  }\n\n  override render() {\n    const { children, id, ...rest } = this.props;\n    const { selectedId, onActivate, fullWidth } = this.context;\n    const isSelected = selectedId === id;\n\n    return (\n      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>\n        <TabButton\n          innerRef={this.buttonRef}\n          id={id}\n          onClick={() => onActivate?.(id)}\n          isSelected={isSelected}\n          tabIndex={isSelected ? 0 : -1}\n          fullWidth={fullWidth}\n          data-qa-tab-button={id}\n          data-qa-tab-button-state={isSelected}\n          aria-selected={isSelected}\n          role=\"tab\"\n          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\n  }\n}\n\n/**\n * Render a group of buttons in a tab-heading style\n */\nclass Tabs extends React.Component<TypeTabsProps> {\n  static Button = TabItemButton;\n  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};\n  tabList: string[] = [];\n\n  getSelectedId = () => this.props.selectedId;\n  onActivate = (id: string) => this.props.onSelect(id);\n  onTabMount = (id: string, ref: TypeTabButtonRef) => {\n    if (!this.tabList.includes(id)) {\n      this.tabList.push(id);\n      this.buttonRefs[id] = ref;\n    }\n  };\n\n  onTabUpdate = (previousId: string, newId: string) => {\n    if (this.tabList.includes(previousId)) {\n      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));\n      this.buttonRefs[newId] = this.buttonRefs[previousId];\n      this.buttonRefs[previousId] = undefined;\n    }\n  };\n\n  onTabUnmount = (id: string) => {\n    if (this.tabList.includes(id)) {\n      this.tabList = this.tabList.filter((currentId) => currentId !== id);\n      this.buttonRefs[id] = undefined;\n    }\n  };\n\n  selectNextTab = (id: string) => {\n    const buttonRef = this.buttonRefs[id];\n    this.props.onSelect(id);\n    buttonRef &&\n      buttonRef.current &&\n      buttonRef.current.focus &&\n      buttonRef.current.focus();\n  };\n\n  keyHandler = ({ keyCode }: React.KeyboardEvent<HTMLUListElement>) => {\n    switch (keyCode) {\n      // left arrow\n      case 37:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      // right arrow\n      case 39:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index + 1 < count ? index + 1 : 0;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  override render() {\n    const { children, qa, onSelect, ...rest } = this.props;\n    return (\n      <Container\n        data-qa-tabs=\"\"\n        onKeyUp={this.keyHandler}\n        onSelect={onSelect}\n        role=\"tablist\"\n        {...qa}\n        {...rest}\n      >\n        <TabButtonContext.Provider\n          value={{\n            selectedId: this.getSelectedId(),\n            fullWidth: this.props.fullWidth,\n            onActivate: this.onActivate,\n            onTabMount: this.onTabMount,\n            onTabUpdate: this.onTabUpdate,\n            onTabUnmount: this.onTabUnmount,\n          }}\n        >\n          {children}\n        </TabButtonContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Tabs;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { type TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabState {\n  isSelected: boolean;\n}\ntype TypeFullWidth = Pick<TypeTabsProps, \"fullWidth\">;\ninterface TypeStyleProps extends TypeFullWidth, TypeTabState {}\n\nconst Container = styled.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: ${(props) => props.theme.borders[500]}\n    ${(props) => props.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const TabItem = styled.li<TypeStyleProps>`\n  margin-bottom: -1px;\n  ${(props) =>\n    props.fullWidth &&\n    css`\n      flex-grow: 1;\n    `};\n\n  &:not(:last-child) {\n    ${(props) =>\n      !props.fullWidth &&\n      css`\n        margin-right: ${(props) => props.theme.space[350]};\n      `};\n  }\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      box-shadow: ${(props) =>\n        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        box-shadow: ${(props) =>\n          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};\n      `};\n  }\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  padding: ${(props) => `${props.theme.space[350]} 0`};\n  color: ${(props) => props.theme.colors.text.headline};\n  width: 100%;\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\n  }\n\n  &:active {\n    transform: none;\n  }\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeTabButtonsProps extends TypeButtonProps {\n  children: React.ReactNode;\n\n  /** Should be unique among sibling elements */\n  id: string;\n}\n\nexport interface TypeTabsProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"ul\">,\n      keyof TypeSystemCommonProps | \"onSelect\"\n    > {\n  children: React.ReactNode;\n  onSelect: (arg0: string) => void;\n\n  /** Whether or not the tabs should stretch to fill the width of their container */\n  fullWidth?: boolean;\n  qa?: object;\n\n  /** ID of the selected tab */\n  selectedId: string;\n}\n","import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n"],"mappings":"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","names":["React","props"]}

package/dist/index.d.mts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeTabButtonsProps extends TypeButtonProps {
+    children: React.ReactNode;
+    /** Should be unique among sibling elements */
+    id: string;
+}
+interface TypeTabsProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"ul">, keyof TypeSystemCommonProps | "onSelect"> {
+    children: React.ReactNode;
+    onSelect: (arg0: string) => void;
+    /** Whether or not the tabs should stretch to fill the width of their container */
+    fullWidth?: boolean;
+    qa?: object;
+    /** ID of the selected tab */
+    selectedId: string;
+}
+
+interface TypeTabButtonRef {
+    current: null | React.ElementRef<"button">;
+}
+interface TypeTabButtonContext {
+    onActivate: (arg0: string) => void;
+    onTabMount: (id: string, ref: TypeTabButtonRef) => void;
+    onTabUpdate: (previousId: string, nextId: string) => void;
+    onTabUnmount: (id: string) => void;
+    selectedId: string;
+    fullWidth?: boolean;
+}
+declare const TabButtonContext: React.Context<Partial<TypeTabButtonContext>>;
+declare class TabItemButton extends React.Component<TypeTabButtonsProps> {
+    static contextType: React.Context<Partial<TypeTabButtonContext>>;
+    context: React.ContextType<typeof TabButtonContext>;
+    buttonRef: TypeTabButtonRef;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TypeTabButtonsProps): void;
+    componentWillUnmount(): void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+/**
+ * Render a group of buttons in a tab-heading style
+ */
+declare class Tabs extends React.Component<TypeTabsProps> {
+    static Button: typeof TabItemButton;
+    buttonRefs: Record<string, TypeTabButtonRef | null | undefined>;
+    tabList: string[];
+    getSelectedId: () => string;
+    onActivate: (id: string) => void;
+    onTabMount: (id: string, ref: TypeTabButtonRef) => void;
+    onTabUpdate: (previousId: string, newId: string) => void;
+    onTabUnmount: (id: string) => void;
+    selectNextTab: (id: string) => void;
+    keyHandler: ({ keyCode }: React.KeyboardEvent<HTMLUListElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Tabs, type TypeTabButtonsProps, type TypeTabsProps, Tabs as default };

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeTabButtonsProps extends TypeButtonProps {
+    children: React.ReactNode;
+    /** Should be unique among sibling elements */
+    id: string;
+}
+interface TypeTabsProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"ul">, keyof TypeSystemCommonProps | "onSelect"> {
+    children: React.ReactNode;
+    onSelect: (arg0: string) => void;
+    /** Whether or not the tabs should stretch to fill the width of their container */
+    fullWidth?: boolean;
+    qa?: object;
+    /** ID of the selected tab */
+    selectedId: string;
+}
+
+interface TypeTabButtonRef {
+    current: null | React.ElementRef<"button">;
+}
+interface TypeTabButtonContext {
+    onActivate: (arg0: string) => void;
+    onTabMount: (id: string, ref: TypeTabButtonRef) => void;
+    onTabUpdate: (previousId: string, nextId: string) => void;
+    onTabUnmount: (id: string) => void;
+    selectedId: string;
+    fullWidth?: boolean;
+}
+declare const TabButtonContext: React.Context<Partial<TypeTabButtonContext>>;
+declare class TabItemButton extends React.Component<TypeTabButtonsProps> {
+    static contextType: React.Context<Partial<TypeTabButtonContext>>;
+    context: React.ContextType<typeof TabButtonContext>;
+    buttonRef: TypeTabButtonRef;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TypeTabButtonsProps): void;
+    componentWillUnmount(): void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+/**
+ * Render a group of buttons in a tab-heading style
+ */
+declare class Tabs extends React.Component<TypeTabsProps> {
+    static Button: typeof TabItemButton;
+    buttonRefs: Record<string, TypeTabButtonRef | null | undefined>;
+    tabList: string[];
+    getSelectedId: () => string;
+    onActivate: (id: string) => void;
+    onTabMount: (id: string, ref: TypeTabButtonRef) => void;
+    onTabUpdate: (previousId: string, newId: string) => void;
+    onTabUnmount: (id: string) => void;
+    selectNextTab: (id: string) => void;
+    keyHandler: ({ keyCode }: React.KeyboardEvent<HTMLUListElement>) => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Tabs, type TypeTabButtonsProps, type TypeTabsProps, Tabs as default };

package/dist/index.js

@@ -0,0 +1,241 @@
+"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, {
+  Tabs: () => Tabs_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Tabs.tsx
+var React2 = __toESM(require("react"));
+
+// 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_button = require("@sproutsocial/seeds-react-button");
+
+// src/TabsTypes.ts
+var React = require("react");
+
+// src/styles.ts
+var Container = import_styled_components.default.ul`
+  display: ${(props) => props.fullWidth ? "flex" : "inline-flex"};
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-bottom: ${(props) => props.theme.borders[500]}
+    ${(props) => props.theme.colors.container.border.base};
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var TabItem = import_styled_components.default.li`
+  margin-bottom: -1px;
+  ${(props) => props.fullWidth && import_styled_components.css`
+      flex-grow: 1;
+    `};
+
+  &:not(:last-child) {
+    ${(props) => !props.fullWidth && import_styled_components.css`
+        margin-right: ${(props2) => props2.theme.space[350]};
+      `};
+  }
+
+  ${(props) => props.isSelected && import_styled_components.css`
+      box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.base}`};
+    `};
+
+  &:hover {
+    ${(props) => props.isSelected && import_styled_components.css`
+        box-shadow: ${(props2) => `inset 0 -3px 0 0 ${props2.theme.colors.button.primary.background.hover}`};
+      `};
+  }
+`;
+var TabButton = (0, import_styled_components.default)(import_seeds_react_button.Button)`
+  padding: ${(props) => `${props.theme.space[350]} 0`};
+  color: ${(props) => props.theme.colors.text.headline};
+  width: 100%;
+
+  ${(props) => props.isSelected && import_styled_components.css`
+      color: ${(props2) => props2.theme.colors.link.base};
+    `};
+
+  &:hover {
+    ${(props) => props.isSelected && import_styled_components.css`
+        color: ${(props2) => props2.theme.colors.link.hover};
+      `};
+  }
+
+  &:active {
+    transform: none;
+  }
+`;
+var styles_default = Container;
+
+// src/Tabs.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TabButtonContext = React2.createContext({});
+var TabItemButton = class extends React2.Component {
+  static contextType = TabButtonContext;
+  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  context;
+  buttonRef = React2.createRef();
+  componentDidMount() {
+    this.context.onTabMount?.(this.props.id, this.buttonRef);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.context.onTabUpdate?.(prevProps.id, this.props.id);
+    }
+  }
+  componentWillUnmount() {
+    this.context.onTabUnmount?.(this.props.id);
+  }
+  render() {
+    const { children, id, ...rest } = this.props;
+    const { selectedId, onActivate, fullWidth } = this.context;
+    const isSelected = selectedId === id;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabItem, { fullWidth, isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TabButton,
+      {
+        innerRef: this.buttonRef,
+        id,
+        onClick: () => onActivate?.(id),
+        isSelected,
+        tabIndex: isSelected ? 0 : -1,
+        fullWidth,
+        "data-qa-tab-button": id,
+        "data-qa-tab-button-state": isSelected,
+        "aria-selected": isSelected,
+        role: "tab",
+        ...rest,
+        children
+      }
+    ) }, id);
+  }
+};
+var Tabs = class extends React2.Component {
+  static Button = TabItemButton;
+  buttonRefs = {};
+  tabList = [];
+  getSelectedId = () => this.props.selectedId;
+  onActivate = (id) => this.props.onSelect(id);
+  onTabMount = (id, ref) => {
+    if (!this.tabList.includes(id)) {
+      this.tabList.push(id);
+      this.buttonRefs[id] = ref;
+    }
+  };
+  onTabUpdate = (previousId, newId) => {
+    if (this.tabList.includes(previousId)) {
+      this.tabList = this.tabList.map((id) => id === previousId ? newId : id);
+      this.buttonRefs[newId] = this.buttonRefs[previousId];
+      this.buttonRefs[previousId] = void 0;
+    }
+  };
+  onTabUnmount = (id) => {
+    if (this.tabList.includes(id)) {
+      this.tabList = this.tabList.filter((currentId) => currentId !== id);
+      this.buttonRefs[id] = void 0;
+    }
+  };
+  selectNextTab = (id) => {
+    const buttonRef = this.buttonRefs[id];
+    this.props.onSelect(id);
+    buttonRef && buttonRef.current && buttonRef.current.focus && buttonRef.current.focus();
+  };
+  keyHandler = ({ keyCode }) => {
+    switch (keyCode) {
+      case 37:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+      case 39:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index + 1 < count ? index + 1 : 0;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  };
+  render() {
+    const { children, qa, onSelect, ...rest } = this.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      styles_default,
+      {
+        "data-qa-tabs": "",
+        onKeyUp: this.keyHandler,
+        onSelect,
+        role: "tablist",
+        ...qa,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TabButtonContext.Provider,
+          {
+            value: {
+              selectedId: this.getSelectedId(),
+              fullWidth: this.props.fullWidth,
+              onActivate: this.onActivate,
+              onTabMount: this.onTabMount,
+              onTabUpdate: this.onTabUpdate,
+              onTabUnmount: this.onTabUnmount
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+};
+var Tabs_default = Tabs;
+
+// src/index.ts
+var src_default = Tabs_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Tabs.tsx","../src/styles.ts","../src/TabsTypes.ts"],"sourcesContent":["import Tabs from \"./Tabs\";\n\nexport default Tabs;\nexport { Tabs };\nexport * from \"./TabsTypes\";\n","import * as React from \"react\";\nimport Container, { TabItem, TabButton } from \"./styles\";\nimport type { TypeTabButtonsProps, TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabButtonRef {\n  current: null | React.ElementRef<\"button\">;\n}\ninterface TypeTabButtonContext {\n  onActivate: (arg0: string) => void;\n  onTabMount: (id: string, ref: TypeTabButtonRef) => void;\n  onTabUpdate: (previousId: string, nextId: string) => void;\n  onTabUnmount: (id: string) => void;\n  selectedId: string;\n  fullWidth?: boolean;\n}\n\nconst TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});\n\nclass TabItemButton extends React.Component<TypeTabButtonsProps> {\n  static override contextType = TabButtonContext;\n  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  //@ts-ignore\n  context!: React.ContextType<typeof TabButtonContext>;\n\n  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<\"button\">>();\n\n  override componentDidMount() {\n    this.context.onTabMount?.(this.props.id, this.buttonRef);\n  }\n\n  override componentDidUpdate(prevProps: TypeTabButtonsProps) {\n    if (prevProps.id !== this.props.id) {\n      this.context.onTabUpdate?.(prevProps.id, this.props.id);\n    }\n  }\n\n  override componentWillUnmount() {\n    this.context.onTabUnmount?.(this.props.id);\n  }\n\n  override render() {\n    const { children, id, ...rest } = this.props;\n    const { selectedId, onActivate, fullWidth } = this.context;\n    const isSelected = selectedId === id;\n\n    return (\n      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>\n        <TabButton\n          innerRef={this.buttonRef}\n          id={id}\n          onClick={() => onActivate?.(id)}\n          isSelected={isSelected}\n          tabIndex={isSelected ? 0 : -1}\n          fullWidth={fullWidth}\n          data-qa-tab-button={id}\n          data-qa-tab-button-state={isSelected}\n          aria-selected={isSelected}\n          role=\"tab\"\n          // TODO: Add a TabPanel subcomponent for use with tabs\n          // aria-controls={tabPanelId}\n          {...rest}\n        >\n          {children}\n        </TabButton>\n      </TabItem>\n    );\n  }\n}\n\n/**\n * Render a group of buttons in a tab-heading style\n */\nclass Tabs extends React.Component<TypeTabsProps> {\n  static Button = TabItemButton;\n  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};\n  tabList: string[] = [];\n\n  getSelectedId = () => this.props.selectedId;\n  onActivate = (id: string) => this.props.onSelect(id);\n  onTabMount = (id: string, ref: TypeTabButtonRef) => {\n    if (!this.tabList.includes(id)) {\n      this.tabList.push(id);\n      this.buttonRefs[id] = ref;\n    }\n  };\n\n  onTabUpdate = (previousId: string, newId: string) => {\n    if (this.tabList.includes(previousId)) {\n      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));\n      this.buttonRefs[newId] = this.buttonRefs[previousId];\n      this.buttonRefs[previousId] = undefined;\n    }\n  };\n\n  onTabUnmount = (id: string) => {\n    if (this.tabList.includes(id)) {\n      this.tabList = this.tabList.filter((currentId) => currentId !== id);\n      this.buttonRefs[id] = undefined;\n    }\n  };\n\n  selectNextTab = (id: string) => {\n    const buttonRef = this.buttonRefs[id];\n    this.props.onSelect(id);\n    buttonRef &&\n      buttonRef.current &&\n      buttonRef.current.focus &&\n      buttonRef.current.focus();\n  };\n\n  keyHandler = ({ keyCode }: React.KeyboardEvent<HTMLUListElement>) => {\n    switch (keyCode) {\n      // left arrow\n      case 37:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      // right arrow\n      case 39:\n        this.tabList.forEach((id, index) => {\n          if (id === this.getSelectedId()) {\n            const count = this.tabList.length;\n            const nextIndex = index + 1 < count ? index + 1 : 0;\n            const nextId = this.tabList[nextIndex];\n            this.selectNextTab(nextId ? nextId : \"\");\n          }\n        });\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  override render() {\n    const { children, qa, onSelect, ...rest } = this.props;\n    return (\n      <Container\n        data-qa-tabs=\"\"\n        onKeyUp={this.keyHandler}\n        onSelect={onSelect}\n        role=\"tablist\"\n        {...qa}\n        {...rest}\n      >\n        <TabButtonContext.Provider\n          value={{\n            selectedId: this.getSelectedId(),\n            fullWidth: this.props.fullWidth,\n            onActivate: this.onActivate,\n            onTabMount: this.onTabMount,\n            onTabUpdate: this.onTabUpdate,\n            onTabUnmount: this.onTabUnmount,\n          }}\n        >\n          {children}\n        </TabButtonContext.Provider>\n      </Container>\n    );\n  }\n}\n\nexport default Tabs;\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { type TypeTabsProps } from \"./TabsTypes\";\n\ninterface TypeTabState {\n  isSelected: boolean;\n}\ntype TypeFullWidth = Pick<TypeTabsProps, \"fullWidth\">;\ninterface TypeStyleProps extends TypeFullWidth, TypeTabState {}\n\nconst Container = styled.ul<TypeTabsProps>`\n  display: ${(props) => (props.fullWidth ? \"flex\" : \"inline-flex\")};\n  justify-content: space-between;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-bottom: ${(props) => props.theme.borders[500]}\n    ${(props) => props.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const TabItem = styled.li<TypeStyleProps>`\n  margin-bottom: -1px;\n  ${(props) =>\n    props.fullWidth &&\n    css`\n      flex-grow: 1;\n    `};\n\n  &:not(:last-child) {\n    ${(props) =>\n      !props.fullWidth &&\n      css`\n        margin-right: ${(props) => props.theme.space[350]};\n      `};\n  }\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      box-shadow: ${(props) =>\n        `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        box-shadow: ${(props) =>\n          `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};\n      `};\n  }\n`;\n\nexport const TabButton = styled(Button)<TypeStyleProps>`\n  padding: ${(props) => `${props.theme.space[350]} 0`};\n  color: ${(props) => props.theme.colors.text.headline};\n  width: 100%;\n\n  ${(props) =>\n    props.isSelected &&\n    css`\n      color: ${(props) => props.theme.colors.link.base};\n    `};\n\n  &:hover {\n    ${(props) =>\n      props.isSelected &&\n      css`\n        color: ${(props) => props.theme.colors.link.hover};\n      `};\n  }\n\n  &:active {\n    transform: none;\n  }\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeTabButtonsProps extends TypeButtonProps {\n  children: React.ReactNode;\n\n  /** Should be unique among sibling elements */\n  id: string;\n}\n\nexport interface TypeTabsProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<\n      React.ComponentPropsWithoutRef<\"ul\">,\n      keyof TypeSystemCommonProps | \"onSelect\"\n    > {\n  children: React.ReactNode;\n  onSelect: (arg0: string) => void;\n\n  /** Whether or not the tabs should stretch to fill the width of their container */\n  fullWidth?: boolean;\n  qa?: object;\n\n  /** ID of the selected tab */\n  selectedId: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,+BAA4B;AAC5B,sCAAuB;AACvB,gCAAuB;;;ACFvB,YAAuB;;;ADWvB,IAAM,YAAY,yBAAAC,QAAO;AAAA,aACZ,CAAC,UAAW,MAAM,YAAY,SAAS,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA,mBAK/C,CAAC,UAAU,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MAChD,CAAC,UAAU,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAErD,sCAAM;AAAA;AAGH,IAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA;AAAA,MAGC,CAAC,UACD,CAAC,MAAM,aACP;AAAA,wBACkB,CAACC,WAAUA,OAAM,MAAM,MAAM,GAAG,CAAC;AAAA,OAClD;AAAA;AAAA;AAAA,IAGH,CAAC,UACD,MAAM,cACN;AAAA,oBACgB,CAACA,WACb,oBAAoBA,OAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI,EAAE;AAAA,KAC1E;AAAA;AAAA;AAAA,MAGC,CAAC,UACD,MAAM,cACN;AAAA,sBACgB,CAACA,WACb,oBAAoBA,OAAM,MAAM,OAAO,OAAO,QAAQ,WAAW,KAAK,EAAE;AAAA,OAC3E;AAAA;AAAA;AAIA,IAAM,gBAAY,yBAAAD,SAAO,gCAAM;AAAA,aACzB,CAAC,UAAU,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI;AAAA,WAC1C,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlD,CAAC,UACD,MAAM,cACN;AAAA,eACW,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,IAAI;AAAA,KACjD;AAAA;AAAA;AAAA,MAGC,CAAC,UACD,MAAM,cACN;AAAA,iBACW,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,KAAK;AAAA,OAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,IAAO,iBAAQ;;;AD/BP;AAhCR,IAAM,mBAAyB,qBAA6C,CAAC,CAAC;AAE9E,IAAM,gBAAN,cAAkC,iBAA+B;AAAA,EAC/D,OAAgB,cAAc;AAAA;AAAA;AAAA;AAAA,EAI9B;AAAA,EAEA,YAAoC,iBAAsC;AAAA,EAEjE,oBAAoB;AAC3B,SAAK,QAAQ,aAAa,KAAK,MAAM,IAAI,KAAK,SAAS;AAAA,EACzD;AAAA,EAES,mBAAmB,WAAgC;AAC1D,QAAI,UAAU,OAAO,KAAK,MAAM,IAAI;AAClC,WAAK,QAAQ,cAAc,UAAU,IAAI,KAAK,MAAM,EAAE;AAAA,IACxD;AAAA,EACF;AAAA,EAES,uBAAuB;AAC9B,SAAK,QAAQ,eAAe,KAAK,MAAM,EAAE;AAAA,EAC3C;AAAA,EAES,SAAS;AAChB,UAAM,EAAE,UAAU,IAAI,GAAG,KAAK,IAAI,KAAK;AACvC,UAAM,EAAE,YAAY,YAAY,UAAU,IAAI,KAAK;AACnD,UAAM,aAAa,eAAe;AAElC,WACE,4CAAC,WAAiB,WAAsB,YACtC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,aAAa,EAAE;AAAA,QAC9B;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B;AAAA,QACA,sBAAoB;AAAA,QACpB,4BAA0B;AAAA,QAC1B,iBAAe;AAAA,QACf,MAAK;AAAA,QAGJ,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,KAjBY,EAkBd;AAAA,EAEJ;AACF;AAKA,IAAM,OAAN,cAAyB,iBAAyB;AAAA,EAChD,OAAO,SAAS;AAAA,EAChB,aAAkE,CAAC;AAAA,EACnE,UAAoB,CAAC;AAAA,EAErB,gBAAgB,MAAM,KAAK,MAAM;AAAA,EACjC,aAAa,CAAC,OAAe,KAAK,MAAM,SAAS,EAAE;AAAA,EACnD,aAAa,CAAC,IAAY,QAA0B;AAClD,QAAI,CAAC,KAAK,QAAQ,SAAS,EAAE,GAAG;AAC9B,WAAK,QAAQ,KAAK,EAAE;AACpB,WAAK,WAAW,EAAE,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAEA,cAAc,CAAC,YAAoB,UAAkB;AACnD,QAAI,KAAK,QAAQ,SAAS,UAAU,GAAG;AACrC,WAAK,UAAU,KAAK,QAAQ,IAAI,CAAC,OAAQ,OAAO,aAAa,QAAQ,EAAG;AACxE,WAAK,WAAW,KAAK,IAAI,KAAK,WAAW,UAAU;AACnD,WAAK,WAAW,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAAA,EAEA,eAAe,CAAC,OAAe;AAC7B,QAAI,KAAK,QAAQ,SAAS,EAAE,GAAG;AAC7B,WAAK,UAAU,KAAK,QAAQ,OAAO,CAAC,cAAc,cAAc,EAAE;AAClE,WAAK,WAAW,EAAE,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAEA,gBAAgB,CAAC,OAAe;AAC9B,UAAM,YAAY,KAAK,WAAW,EAAE;AACpC,SAAK,MAAM,SAAS,EAAE;AACtB,iBACE,UAAU,WACV,UAAU,QAAQ,SAClB,UAAU,QAAQ,MAAM;AAAA,EAC5B;AAAA,EAEA,aAAa,CAAC,EAAE,QAAQ,MAA6C;AACnE,YAAQ,SAAS;AAAA,MAEf,KAAK;AACH,aAAK,QAAQ,QAAQ,CAAC,IAAI,UAAU;AAClC,cAAI,OAAO,KAAK,cAAc,GAAG;AAC/B,kBAAM,QAAQ,KAAK,QAAQ;AAC3B,kBAAM,YAAY,QAAQ,KAAK,IAAI,QAAQ,IAAI,QAAQ;AACvD,kBAAM,SAAS,KAAK,QAAQ,SAAS;AACrC,iBAAK,cAAc,SAAS,SAAS,EAAE;AAAA,UACzC;AAAA,QACF,CAAC;AACD;AAAA,MAGF,KAAK;AACH,aAAK,QAAQ,QAAQ,CAAC,IAAI,UAAU;AAClC,cAAI,OAAO,KAAK,cAAc,GAAG;AAC/B,kBAAM,QAAQ,KAAK,QAAQ;AAC3B,kBAAM,YAAY,QAAQ,IAAI,QAAQ,QAAQ,IAAI;AAClD,kBAAM,SAAS,KAAK,QAAQ,SAAS;AACrC,iBAAK,cAAc,SAAS,SAAS,EAAE;AAAA,UACzC;AAAA,QACF,CAAC;AACD;AAAA,MAEF;AACE;AAAA,IACJ;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,EAAE,UAAU,IAAI,UAAU,GAAG,KAAK,IAAI,KAAK;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAa;AAAA,QACb,SAAS,KAAK;AAAA,QACd;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,OAAO;AAAA,cACL,YAAY,KAAK,cAAc;AAAA,cAC/B,WAAW,KAAK,MAAM;AAAA,cACtB,YAAY,KAAK;AAAA,cACjB,YAAY,KAAK;AAAA,cACjB,aAAa,KAAK;AAAA,cAClB,cAAc,KAAK;AAAA,YACrB;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,eAAQ;;;ADxKf,IAAO,cAAQ;","names":["React","styled","props"]}

package/jest.config.js

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