@sproutsocial/seeds-react-select 1.1.40 → 1.1.42

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/select.css dist/select.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     6.78 KB
-CJS dist/index.js.map 9.86 KB
-CJS ⚡️ Build success in 79ms
-ESM dist/esm/index.js     4.79 KB
-ESM dist/esm/index.js.map 9.78 KB
-ESM ⚡️ Build success in 78ms
+CJS dist/index.js     9.83 KB
+CJS dist/index.js.map 15.23 KB
+CJS ⚡️ Build success in 75ms
+ESM dist/esm/index.js     7.56 KB
+ESM dist/esm/index.js.map 15.10 KB
+ESM ⚡️ Build success in 75ms
 DTS Build start
-DTS ⚡️ Build success in 4910ms
-DTS dist/index.d.ts  1.72 KB
-DTS dist/index.d.mts 1.72 KB
-Done in 6.50s.
+DTS ⚡️ Build success in 6154ms
+DTS dist/index.d.ts  1.80 KB
+DTS dist/index.d.mts 1.80 KB
+Done in 7.69s.

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sproutsocial/seeds-react-select
 
+## 1.1.42
+
+### Patch Changes
+
+- 0e113bc: Migrate progress, token, select, spot-illustration, and collapsible to the Button hybrid Tailwind pattern. Each component now ships a CSS-class implementation routed alongside the styled-components path. Component CSS is wrapped in `@layer components` so Tailwind utility classes win the cascade and can override component styles via `className`. `Collapsible.Panel` now forwards `className` onto the panel root so utility overrides reach the styled element.
+
+## 1.1.41
+
+### Patch Changes
+
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+  - @sproutsocial/seeds-react-icon@2.4.1
+  - @sproutsocial/seeds-react-mixins@4.3.8
+
 ## 1.1.40
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,6 +1,10 @@
 // src/Select.tsx
 import "react";
-import Icon from "@sproutsocial/seeds-react-icon";
+
+// src/SelectHybrid.tsx
+import "react";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -116,9 +120,27 @@ Container.displayName = "SelectContainer";
 Arrow.displayName = "Select Arrow";
 var styles_default = Container;
 
-// src/Select.tsx
+// src/SelectTailwind.tsx
+import "react";
+import Icon from "@sproutsocial/seeds-react-icon";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Select = ({
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var SelectTailwind = ({
   id,
   name,
   children,
@@ -134,6 +156,7 @@ var Select = ({
   size = "default",
   qa = {},
   inputProps = {},
+  className,
   ...rest
 }) => {
   const handleChange = (e) => {
@@ -141,41 +164,128 @@ var Select = ({
       onChange(e);
     }
   };
-  return /* @__PURE__ */ jsxs(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        id,
-        name,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedby,
-        defaultValue,
-        value,
-        required,
-        autoFocus,
-        disabled,
-        onChange: handleChange,
-        "data-qa-select": name || "",
-        "data-qa-select-value": value || "unselected",
-        "data-qa-select-isrequired": required === true,
-        "data-qa-select-isdisabled": disabled === true,
-        ...qa,
-        ...inputProps,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(Arrow, { size, children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        name: "chevron-down-outline",
-        fixedWidth: true,
-        size: size === "large" ? "medium" : "small",
-        "aria-hidden": true
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "seeds-select",
+        `seeds-select-${size}`,
+        {
+          "seeds-select-invalid": !!isInvalid,
+          "seeds-select-disabled": !!disabled
+        },
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "seeds-select-input",
+            id,
+            name,
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            defaultValue,
+            value,
+            required,
+            autoFocus,
+            disabled,
+            onChange: handleChange,
+            "data-qa-select": name || "",
+            "data-qa-select-value": value || "unselected",
+            "data-qa-select-isrequired": required === true,
+            "data-qa-select-isdisabled": disabled === true,
+            ...qa,
+            ...inputProps,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("seeds-select-arrow", `seeds-select-arrow-${size}`), children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-down-outline",
+            fixedWidth: true,
+            size: size === "large" ? "medium" : "small",
+            "aria-hidden": true
+          }
+        ) })
+      ]
+    }
+  );
 };
-var Select_default = Select;
+SelectTailwind.displayName = "SelectTailwind";
+
+// src/SelectHybrid.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = (props) => {
+  const {
+    id,
+    name,
+    children,
+    defaultValue,
+    value,
+    required,
+    isInvalid,
+    onChange,
+    autoFocus,
+    disabled,
+    ariaLabel,
+    ariaDescribedby,
+    size = "default",
+    qa = {},
+    inputProps = {},
+    ...rest
+  } = props;
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsxs2(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
+      /* @__PURE__ */ jsx2(
+        "select",
+        {
+          id,
+          name,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedby,
+          defaultValue,
+          value,
+          required,
+          autoFocus,
+          disabled,
+          onChange: handleChange,
+          "data-qa-select": name || "",
+          "data-qa-select-value": value || "unselected",
+          "data-qa-select-isrequired": required === true,
+          "data-qa-select-isdisabled": disabled === true,
+          ...qa,
+          ...inputProps,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx2(Arrow, { size, children: /* @__PURE__ */ jsx2(
+        Icon2,
+        {
+          name: "chevron-down-outline",
+          fixedWidth: true,
+          size: size === "large" ? "medium" : "small",
+          "aria-hidden": true
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(SelectTailwind, { ...props });
+};
+var SelectHybrid_default = Select;
+
+// src/Select.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Select2 = (props) => /* @__PURE__ */ jsx3(SelectHybrid_default, { ...props });
+Select2.displayName = "Select";
+var Select_default = Select2;
 
 // src/SelectTypes.ts
 import "react";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Select.tsx","../../src/styles.ts","../../src/SelectTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Arrow } from \"./styles\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n      <select\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <Arrow size={size}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"large\" ? \"medium\" : \"small\"}\n          aria-hidden\n        />\n      </Arrow>\n    </Container>\n  );\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n","import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":["props"]}
+{"version":3,"sources":["../../src/Select.tsx","../../src/SelectHybrid.tsx","../../src/styles.ts","../../src/SelectTailwind.tsx","../../src/SelectTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport SelectHybrid from \"./SelectHybrid\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\n/**\n * Select component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Select = (props: TypeSelectProps) => <SelectHybrid {...props} />;\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n","/**\n * Hybrid Select Component\n * Automatically chooses between Tailwind and styled-components based on props.\n * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the\n * styled-components implementation; everyone else gets the Tailwind path.\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport Container, { Arrow } from \"./styles\";\nimport { SelectTailwind } from \"./SelectTailwind\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = (props: TypeSelectProps) => {\n  const {\n    id,\n    name,\n    children,\n    defaultValue,\n    value,\n    required,\n    isInvalid,\n    onChange,\n    autoFocus,\n    disabled,\n    ariaLabel,\n    ariaDescribedby,\n    size = \"default\",\n    qa = {},\n    inputProps = {},\n    ...rest\n  } = props;\n\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  if (hasStyledProps(rest)) {\n    return (\n      <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n        <select\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          defaultValue={defaultValue}\n          value={value}\n          required={required}\n          autoFocus={autoFocus}\n          disabled={disabled}\n          onChange={handleChange}\n          data-qa-select={name || \"\"}\n          data-qa-select-value={value || \"unselected\"}\n          data-qa-select-isrequired={required === true}\n          data-qa-select-isdisabled={disabled === true}\n          {...qa}\n          {...inputProps}\n        >\n          {children}\n        </select>\n\n        <Arrow size={size}>\n          <Icon\n            name=\"chevron-down-outline\"\n            fixedWidth\n            size={size === \"large\" ? \"medium\" : \"small\"}\n            aria-hidden\n          />\n        </Arrow>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <SelectTailwind {...props} />;\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Select component\n * Uses Seeds select CSS classes from select.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const SelectTailwind = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  className,\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"seeds-select\",\n        `seeds-select-${size}`,\n        {\n          \"seeds-select-invalid\": !!isInvalid,\n          \"seeds-select-disabled\": !!disabled,\n        },\n        className\n      )}\n      {...(rest as any)}\n    >\n      <select\n        className=\"seeds-select-input\"\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <span className={cn(\"seeds-select-arrow\", `seeds-select-arrow-${size}`)}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"large\" ? \"medium\" : \"small\"}\n          aria-hidden\n        />\n      </span>\n    </div>\n  );\n};\n\nSelectTailwind.displayName = \"SelectTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n","import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\nexport * from \"./styles\";\n"],"mappings":";AAAA,OAAuB;;;ACOvB,OAAuB;AACvB,OAAOA,WAAU;AACjB,SAAS,sBAAsB;;;ACT/B,OAAO,UAAU,WAAW;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AAOvB,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOD,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO,IAAI;AAAA,qBACjD,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,wBAC9B,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,WAAW,IAAI;AAAA,aAC7D,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,cACtC,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,+BAGtC,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UACzD,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA,UAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,eAK7C,CAAC,UAAU;AACpB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IAEhH,KAAK;AACH,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,IAEhH,KAAK;AAAA,IACL;AACE,aAAO,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC,IAAI,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,EAClH;AACF,CAAC;AAAA,iBACY,CAAC,UAAU;AACtB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,IAErC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA,EACvC;AACF,CAAC;AAAA;AAAA,mBAEc,CAAC,UAAU;AACxB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,WAAW,GAAG,EAAE;AAAA;AAAA,IAGrC,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASb,CAAC,UACD,MAAM,YACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,CAAC,UACD,MAAM,WACN;AAAA;AAAA,wBAEoB,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO,KAAK;AAAA;AAAA;AAAA,QAG/D,KAAK;AAAA,iBACI,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,KAAK;AAAA;AAAA,KAEpD;AAAA;AAAA,IAED,MAAM;AAAA;AAGH,IAAM,QAAQ,OAAO;AAAA;AAAA;AAAA,WAGjB,CAAC,UAAU;AAClB,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,IAC9B,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,MAAM,MAAM,MAAM,GAAG;AAAA,EAChC;AACF,CAAC;AAAA;AAAA,WAEQ,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAIlD,UAAU,cAAc;AACxB,MAAM,cAAc;AAEpB,IAAO,iBAAQ;;;AC3Hf,OAAuB;AACvB,OAAO,UAAU;AAoDb,SAYE,KAZF;AAhDJ,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,KAAK,CAAC;AAAA,EACN,aAAa,CAAC;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,QAAM,eAAe,CAAC,MAA+C;AACnE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,UACE,wBAAwB,CAAC,CAAC;AAAA,UAC1B,yBAAyB,CAAC,CAAC;AAAA,QAC7B;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEL;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,oBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,kBAAgB,QAAQ;AAAA,YACxB,wBAAsB,SAAS;AAAA,YAC/B,6BAA2B,aAAa;AAAA,YACxC,6BAA2B,aAAa;AAAA,YACvC,GAAG;AAAA,YACH,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAEA,oBAAC,UAAK,WAAW,GAAG,sBAAsB,sBAAsB,IAAI,EAAE,GACpE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,YAAU;AAAA,YACV,MAAM,SAAS,UAAU,WAAW;AAAA,YACpC,eAAW;AAAA;AAAA,QACb,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;;;AF9DvB,SACE,OAAAC,MADF,QAAAC,aAAA;AA5BN,IAAM,SAAS,CAAC,UAA2B;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,KAAK,CAAC;AAAA,IACN,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,eAAe,CAAC,MAA+C;AACnE,QAAI,UAAU;AACZ,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAA,MAAC,kBAAU,SAAS,WAAW,UAAoB,MAAa,GAAG,MACjE;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,cAAY;AAAA,UACZ,oBAAkB;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,kBAAgB,QAAQ;AAAA,UACxB,wBAAsB,SAAS;AAAA,UAC/B,6BAA2B,aAAa;AAAA,UACxC,6BAA2B,aAAa;AAAA,UACvC,GAAG;AAAA,UACH,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,MAEA,gBAAAA,KAAC,SAAM,MACL,0BAAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,YAAU;AAAA,UACV,MAAM,SAAS,UAAU,WAAW;AAAA,UACpC,eAAW;AAAA;AAAA,MACb,GACF;AAAA,OACF;AAAA,EAEJ;AAGA,SAAO,gBAAAF,KAAC,kBAAgB,GAAG,OAAO;AACpC;AAEA,IAAO,uBAAQ;;;ADvE4B,gBAAAG,YAAA;AAA3C,IAAMC,UAAS,CAAC,UAA2B,gBAAAD,KAAC,wBAAc,GAAG,OAAO;AAEpEC,QAAO,cAAc;AAErB,IAAO,iBAAQA;;;AIbf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Icon","props","jsx","jsxs","Icon","jsx","Select"]}

package/dist/index.d.mts

@@ -26,7 +26,15 @@ interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     size?: "large" | "small" | "default";
 }
 
-declare const Select: ({ id, name, children, defaultValue, value, required, isInvalid, onChange, autoFocus, disabled, ariaLabel, ariaDescribedby, size, qa, inputProps, ...rest }: TypeSelectProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Select component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Select: {
+    (props: TypeSelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 declare const Arrow: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Pick<TypeSelectProps, "size">, never>;
 

package/dist/index.d.ts

@@ -26,7 +26,15 @@ interface TypeSelectProps extends TypeStyledComponentsCommonProps, TypeSystemCom
     size?: "large" | "small" | "default";
 }
 
-declare const Select: ({ id, name, children, defaultValue, value, required, isInvalid, onChange, autoFocus, disabled, ariaLabel, ariaDescribedby, size, qa, inputProps, ...rest }: TypeSelectProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Select component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Select: {
+    (props: TypeSelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 declare const Arrow: styled_components.StyledComponent<"span", styled_components.DefaultTheme, Pick<TypeSelectProps, "size">, never>;
 

package/dist/index.js

@@ -37,8 +37,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
-var React = require("react");
-var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var React3 = require("react");
+
+// src/SelectHybrid.tsx
+var React2 = require("react");
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -154,9 +158,27 @@ Container.displayName = "SelectContainer";
 Arrow.displayName = "Select Arrow";
 var styles_default = Container;
 
-// src/Select.tsx
+// src/SelectTailwind.tsx
+var React = require("react");
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Select = ({
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var SelectTailwind = ({
   id,
   name,
   children,
@@ -172,6 +194,7 @@ var Select = ({
   size = "default",
   qa = {},
   inputProps = {},
+  className,
   ...rest
 }) => {
   const handleChange = (e) => {
@@ -179,44 +202,131 @@ var Select = ({
       onChange(e);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "select",
-      {
-        id,
-        name,
-        "aria-label": ariaLabel,
-        "aria-describedby": ariaDescribedby,
-        defaultValue,
-        value,
-        required,
-        autoFocus,
-        disabled,
-        onChange: handleChange,
-        "data-qa-select": name || "",
-        "data-qa-select-value": value || "unselected",
-        "data-qa-select-isrequired": required === true,
-        "data-qa-select-isdisabled": disabled === true,
-        ...qa,
-        ...inputProps,
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arrow, { size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_seeds_react_icon.default,
-      {
-        name: "chevron-down-outline",
-        fixedWidth: true,
-        size: size === "large" ? "medium" : "small",
-        "aria-hidden": true
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "seeds-select",
+        `seeds-select-${size}`,
+        {
+          "seeds-select-invalid": !!isInvalid,
+          "seeds-select-disabled": !!disabled
+        },
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "select",
+          {
+            className: "seeds-select-input",
+            id,
+            name,
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            defaultValue,
+            value,
+            required,
+            autoFocus,
+            disabled,
+            onChange: handleChange,
+            "data-qa-select": name || "",
+            "data-qa-select-value": value || "unselected",
+            "data-qa-select-isrequired": required === true,
+            "data-qa-select-isdisabled": disabled === true,
+            ...qa,
+            ...inputProps,
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("seeds-select-arrow", `seeds-select-arrow-${size}`), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_seeds_react_icon.default,
+          {
+            name: "chevron-down-outline",
+            fixedWidth: true,
+            size: size === "large" ? "medium" : "small",
+            "aria-hidden": true
+          }
+        ) })
+      ]
+    }
+  );
+};
+SelectTailwind.displayName = "SelectTailwind";
+
+// src/SelectHybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Select = (props) => {
+  const {
+    id,
+    name,
+    children,
+    defaultValue,
+    value,
+    required,
+    isInvalid,
+    onChange,
+    autoFocus,
+    disabled,
+    ariaLabel,
+    ariaDescribedby,
+    size = "default",
+    qa = {},
+    inputProps = {},
+    ...rest
+  } = props;
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(styles_default, { invalid: isInvalid, disabled, size, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "select",
+        {
+          id,
+          name,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedby,
+          defaultValue,
+          value,
+          required,
+          autoFocus,
+          disabled,
+          onChange: handleChange,
+          "data-qa-select": name || "",
+          "data-qa-select-value": value || "unselected",
+          "data-qa-select-isrequired": required === true,
+          "data-qa-select-isdisabled": disabled === true,
+          ...qa,
+          ...inputProps,
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Arrow, { size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_seeds_react_icon2.default,
+        {
+          name: "chevron-down-outline",
+          fixedWidth: true,
+          size: size === "large" ? "medium" : "small",
+          "aria-hidden": true
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectTailwind, { ...props });
 };
-var Select_default = Select;
+var SelectHybrid_default = Select;
+
+// src/Select.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectHybrid_default, { ...props });
+Select2.displayName = "Select";
+var Select_default = Select2;
 
 // src/SelectTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Select_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Select.tsx","../src/styles.ts","../src/SelectTypes.ts"],"sourcesContent":["import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Container, { Arrow } from \"./styles\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n      <select\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <Arrow size={size}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"large\" ? \"medium\" : \"small\"}\n          aria-hidden\n        />\n      </Arrow>\n    </Container>\n  );\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n"],"mappings":"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","names":["styled","props","Icon","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Select.tsx","../src/SelectHybrid.tsx","../src/styles.ts","../src/SelectTailwind.tsx","../src/SelectTypes.ts"],"sourcesContent":["import Select from \"./Select\";\n\nexport default Select;\nexport { Select };\nexport * from \"./SelectTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport SelectHybrid from \"./SelectHybrid\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\n/**\n * Select component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Select = (props: TypeSelectProps) => <SelectHybrid {...props} />;\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n","/**\n * Hybrid Select Component\n * Automatically chooses between Tailwind and styled-components based on props.\n * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the\n * styled-components implementation; everyone else gets the Tailwind path.\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport Container, { Arrow } from \"./styles\";\nimport { SelectTailwind } from \"./SelectTailwind\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\nconst Select = (props: TypeSelectProps) => {\n  const {\n    id,\n    name,\n    children,\n    defaultValue,\n    value,\n    required,\n    isInvalid,\n    onChange,\n    autoFocus,\n    disabled,\n    ariaLabel,\n    ariaDescribedby,\n    size = \"default\",\n    qa = {},\n    inputProps = {},\n    ...rest\n  } = props;\n\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  if (hasStyledProps(rest)) {\n    return (\n      <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>\n        <select\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedby}\n          defaultValue={defaultValue}\n          value={value}\n          required={required}\n          autoFocus={autoFocus}\n          disabled={disabled}\n          onChange={handleChange}\n          data-qa-select={name || \"\"}\n          data-qa-select-value={value || \"unselected\"}\n          data-qa-select-isrequired={required === true}\n          data-qa-select-isdisabled={disabled === true}\n          {...qa}\n          {...inputProps}\n        >\n          {children}\n        </select>\n\n        <Arrow size={size}>\n          <Icon\n            name=\"chevron-down-outline\"\n            fixedWidth\n            size={size === \"large\" ? \"medium\" : \"small\"}\n            aria-hidden\n          />\n        </Arrow>\n      </Container>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <SelectTailwind {...props} />;\n};\n\nexport default Select;\n","import styled, { css } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\ninterface TypeSelectContainer extends Omit<TypeSelectProps, \"isInvalid\"> {\n  invalid?: boolean;\n}\n\nconst Container = styled.div<TypeSelectContainer>`\n  position: relative;\n  box-sizing: border-box;\n\n  select {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid ${(props) => props.theme.colors.form.border.base};\n    border-radius: ${(props) => props.theme.radii[500]};\n    background-color: ${(props) => props.theme.colors.form.background.base};\n    color: ${(props) => props.theme.colors.text.body};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    outline: none;\n    appearance: none;\n    transition: border-color ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in},\n      box-shadow ${(props) => props.theme.duration.fast}\n        ${(props) => props.theme.easing.ease_in};\n    font-family: ${(props) => props.theme.fontFamily};\n    font-weight: ${(props) => props.theme.fontWeights.normal};\n    margin: 0;\n    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */\n    visibility: visible;\n\n    padding: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return `${props.theme.space[350]} ${props.theme.space[600]} ${props.theme.space[350]} ${props.theme.space[400]}`;\n\n        case \"small\":\n          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;\n\n        case \"default\":\n        default:\n          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;\n      }\n    }};\n    font-size: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].fontSize;\n\n        case \"small\":\n        case \"default\":\n        default:\n          return props.theme.typography[200].fontSize;\n      }\n    }};\n\n    line-height: ${(props) => {\n      switch (props.size) {\n        case \"large\":\n          return props.theme.typography[300].lineHeight;\n\n        /* hardcoded to 'normal' so the large change doesn't impact small/default */\n        case \"small\":\n        case \"default\":\n        default:\n          return \"normal\";\n      }\n    }};\n\n    /* kill the dropdown arrow on IE 11 */\n    &::-ms-expand {\n      display: none;\n    }\n\n    &:focus {\n      ${focusRing}\n    }\n\n    /* Fix for red ring when input is marked required in Firefox */\n    &:not(output):not(:focus):-moz-ui-invalid {\n      box-shadow: none;\n    }\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    props.invalid &&\n    css`\n      select {\n        border-color: ${(props) => props.theme.colors.form.border.error};\n      }\n\n      ${Arrow} {\n        color: ${(props) => props.theme.colors.icon.error};\n      }\n    `}\n\n  ${COMMON}\n`;\n\nexport const Arrow = styled.span<Pick<TypeSelectProps, \"size\">>`\n  position: absolute;\n  top: 50%;\n  right: ${(props) => {\n    switch (props.size) {\n      case \"large\":\n        return props.theme.space[350];\n      case \"small\":\n      case \"default\":\n      default:\n        return props.theme.space[300];\n    }\n  }};\n  transform: translateY(-50%);\n  color: ${(props) => props.theme.colors.icon.base};\n  pointer-events: none;\n`;\n\nContainer.displayName = \"SelectContainer\";\nArrow.displayName = \"Select Arrow\";\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Select component\n * Uses Seeds select CSS classes from select.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSelectProps } from \"./SelectTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const SelectTailwind = ({\n  id,\n  name,\n  children,\n  defaultValue,\n  value,\n  required,\n  isInvalid,\n  onChange,\n  autoFocus,\n  disabled,\n  ariaLabel,\n  ariaDescribedby,\n  size = \"default\",\n  qa = {},\n  inputProps = {},\n  className,\n  ...rest\n}: TypeSelectProps) => {\n  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"seeds-select\",\n        `seeds-select-${size}`,\n        {\n          \"seeds-select-invalid\": !!isInvalid,\n          \"seeds-select-disabled\": !!disabled,\n        },\n        className\n      )}\n      {...(rest as any)}\n    >\n      <select\n        className=\"seeds-select-input\"\n        id={id}\n        name={name}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        defaultValue={defaultValue}\n        value={value}\n        required={required}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onChange={handleChange}\n        data-qa-select={name || \"\"}\n        data-qa-select-value={value || \"unselected\"}\n        data-qa-select-isrequired={required === true}\n        data-qa-select-isdisabled={disabled === true}\n        {...qa}\n        {...inputProps}\n      >\n        {children}\n      </select>\n\n      <span className={cn(\"seeds-select-arrow\", `seeds-select-arrow-${size}`)}>\n        <Icon\n          name=\"chevron-down-outline\"\n          fixedWidth\n          size={size === \"large\" ? \"medium\" : \"small\"}\n          aria-hidden\n        />\n      </span>\n    </div>\n  );\n};\n\nSelectTailwind.displayName = \"SelectTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSelectProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"onChange\"> {\n  /** ID of the form element, should match the \"for\" value of the associated label */\n  id: string;\n  name: string;\n\n  /** Label used to describe the select if not used with an accompanying visual label */\n  ariaLabel?: string;\n\n  /** Attribute used to associate other elements that describe the Select, like an error */\n  ariaDescribedby?: string;\n  children: React.ReactNode;\n  defaultValue?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n\n  /** Current value of the input */\n  value?: React.ComponentPropsWithoutRef<\"select\">[\"value\"];\n  required?: boolean;\n  isInvalid?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n\n  /** Props to spread onto the underlying input element */\n  inputProps?: React.ComponentPropsWithRef<\"select\">;\n  qa?: object;\n  onChange?: (e: React.SyntheticEvent<HTMLSelectElement>) => void;\n  size?: \"large\" | \"small\" | \"default\";\n}\n"],"mappings":"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","names":["React","React","import_seeds_react_icon","import_seeds_react_system_props","styled","props","Icon","import_jsx_runtime","Icon","import_jsx_runtime","Select","React"]}

package/dist/select.css

@@ -0,0 +1,115 @@
+/**
+ * Seeds Select component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-select seeds-select-default">
+ *     <select class="seeds-select-input">…</select>
+ *     <span class="seeds-select-arrow seeds-select-arrow-default">…</span>
+ *   </div>
+ */
+
+@layer components {
+  .seeds-select {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .seeds-select .seeds-select-input {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid var(--color-form-border-base);
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+  }
+
+  /* kill the dropdown arrow on IE 11 */
+  .seeds-select .seeds-select-input::-ms-expand {
+    display: none;
+  }
+
+  .seeds-select .seeds-select-input:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-select
+    .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* size: default */
+  .seeds-select-default .seeds-select-input {
+    padding: var(--space-300) var(--space-500) var(--space-300) var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  /* size: large */
+  .seeds-select-large .seeds-select-input {
+    padding: var(--space-350) var(--space-600) var(--space-350) var(--space-400);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  /* size: small */
+  .seeds-select-small .seeds-select-input {
+    padding: var(--space-200) var(--space-500) var(--space-200) var(--space-200);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  .seeds-select-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-icon-base);
+    pointer-events: none;
+  }
+
+  .seeds-select-arrow-default,
+  .seeds-select-arrow-small {
+    right: var(--space-300);
+  }
+
+  .seeds-select-arrow-large {
+    right: var(--space-350);
+  }
+
+  /* disabled */
+  .seeds-select-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-select-disabled .seeds-select-input {
+    cursor: not-allowed;
+  }
+
+  /* invalid */
+  .seeds-select-invalid .seeds-select-input {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-select-invalid .seeds-select-arrow {
+    color: var(--color-icon-error);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-select",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "description": "Seeds React Select",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -8,8 +8,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/select.css dist/select.css",
+    "build:debug": "tsup --dts --metafile && cp src/select.css dist/select.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,10 +18,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-theme": "^4.1.1",
     "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-icon": "^2.4.0",
-    "@sproutsocial/seeds-react-mixins": "^4.3.7"
+    "@sproutsocial/seeds-react-icon": "^2.4.1",
+    "@sproutsocial/seeds-react-mixins": "^4.3.8"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/postcss.config.js

@@ -0,0 +1,6 @@
+// Empty PostCSS config — prevents tsup from picking up the root postcss.config.js
+// (which runs Tailwind CSS and would fail without a tailwind.config.js in scope).
+// select.css uses plain CSS custom properties and needs no PostCSS processing.
+export default {
+  plugins: {},
+};

package/src/Select.stories.tsx

@@ -51,3 +51,10 @@ export const Large: Story = {
     size: "large",
   },
 };
+
+export const TailwindClassOverride: Story = {
+  name: "🚀 Tailwind class override",
+  args: {
+    className: "mx-200 p-300 inline-flex",
+  },
+};

package/src/Select.tsx

@@ -1,65 +1,14 @@
 import * as React from "react";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Container, { Arrow } from "./styles";
+import SelectHybrid from "./SelectHybrid";
 import type { TypeSelectProps } from "./SelectTypes";
 
-const Select = ({
-  id,
-  name,
-  children,
-  defaultValue,
-  value,
-  required,
-  isInvalid,
-  onChange,
-  autoFocus,
-  disabled,
-  ariaLabel,
-  ariaDescribedby,
-  size = "default",
-  qa = {},
-  inputProps = {},
-  ...rest
-}: TypeSelectProps) => {
-  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
-    if (onChange) {
-      onChange(e);
-    }
-  };
+/**
+ * Select component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+const Select = (props: TypeSelectProps) => <SelectHybrid {...props} />;
 
-  return (
-    <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>
-      <select
-        id={id}
-        name={name}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedby}
-        defaultValue={defaultValue}
-        value={value}
-        required={required}
-        autoFocus={autoFocus}
-        disabled={disabled}
-        onChange={handleChange}
-        data-qa-select={name || ""}
-        data-qa-select-value={value || "unselected"}
-        data-qa-select-isrequired={required === true}
-        data-qa-select-isdisabled={disabled === true}
-        {...qa}
-        {...inputProps}
-      >
-        {children}
-      </select>
-
-      <Arrow size={size}>
-        <Icon
-          name="chevron-down-outline"
-          fixedWidth
-          size={size === "large" ? "medium" : "small"}
-          aria-hidden
-        />
-      </Arrow>
-    </Container>
-  );
-};
+Select.displayName = "Select";
 
 export default Select;

package/src/SelectHybrid.tsx

@@ -0,0 +1,81 @@
+/**
+ * Hybrid Select Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the
+ * styled-components implementation; everyone else gets the Tailwind path.
+ */
+
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import Container, { Arrow } from "./styles";
+import { SelectTailwind } from "./SelectTailwind";
+import type { TypeSelectProps } from "./SelectTypes";
+
+const Select = (props: TypeSelectProps) => {
+  const {
+    id,
+    name,
+    children,
+    defaultValue,
+    value,
+    required,
+    isInvalid,
+    onChange,
+    autoFocus,
+    disabled,
+    ariaLabel,
+    ariaDescribedby,
+    size = "default",
+    qa = {},
+    inputProps = {},
+    ...rest
+  } = props;
+
+  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  if (hasStyledProps(rest)) {
+    return (
+      <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>
+        <select
+          id={id}
+          name={name}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedby}
+          defaultValue={defaultValue}
+          value={value}
+          required={required}
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onChange={handleChange}
+          data-qa-select={name || ""}
+          data-qa-select-value={value || "unselected"}
+          data-qa-select-isrequired={required === true}
+          data-qa-select-isdisabled={disabled === true}
+          {...qa}
+          {...inputProps}
+        >
+          {children}
+        </select>
+
+        <Arrow size={size}>
+          <Icon
+            name="chevron-down-outline"
+            fixedWidth
+            size={size === "large" ? "medium" : "small"}
+            aria-hidden
+          />
+        </Arrow>
+      </Container>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return <SelectTailwind {...props} />;
+};
+
+export default Select;

package/src/SelectTailwind.tsx

@@ -0,0 +1,105 @@
+/**
+ * Tailwind CSS implementation of Select component
+ * Uses Seeds select CSS classes from select.css
+ */
+
+import * as React from "react";
+import Icon from "@sproutsocial/seeds-react-icon";
+import type { TypeSelectProps } from "./SelectTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export const SelectTailwind = ({
+  id,
+  name,
+  children,
+  defaultValue,
+  value,
+  required,
+  isInvalid,
+  onChange,
+  autoFocus,
+  disabled,
+  ariaLabel,
+  ariaDescribedby,
+  size = "default",
+  qa = {},
+  inputProps = {},
+  className,
+  ...rest
+}: TypeSelectProps) => {
+  const handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "seeds-select",
+        `seeds-select-${size}`,
+        {
+          "seeds-select-invalid": !!isInvalid,
+          "seeds-select-disabled": !!disabled,
+        },
+        className
+      )}
+      {...(rest as any)}
+    >
+      <select
+        className="seeds-select-input"
+        id={id}
+        name={name}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        defaultValue={defaultValue}
+        value={value}
+        required={required}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        onChange={handleChange}
+        data-qa-select={name || ""}
+        data-qa-select-value={value || "unselected"}
+        data-qa-select-isrequired={required === true}
+        data-qa-select-isdisabled={disabled === true}
+        {...qa}
+        {...inputProps}
+      >
+        {children}
+      </select>
+
+      <span className={cn("seeds-select-arrow", `seeds-select-arrow-${size}`)}>
+        <Icon
+          name="chevron-down-outline"
+          fixedWidth
+          size={size === "large" ? "medium" : "small"}
+          aria-hidden
+        />
+      </span>
+    </div>
+  );
+};
+
+SelectTailwind.displayName = "SelectTailwind";

package/src/__tests__/Select.test.tsx

@@ -43,6 +43,25 @@ describe("Select", () => {
       })
     ).toBeTruthy();
   });
+  it("should render the Tailwind (CSS-class) implementation by default", () => {
+    const { container } = render(
+      <Select id="select" name="select">
+        <option value="v">option1</option>
+      </Select>
+    );
+    expect(container.querySelector(".seeds-select")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-select .seeds-select-input")
+    ).toBeInTheDocument();
+  });
+  it("should render the styled-components implementation when styled-system props are passed", () => {
+    const { container } = render(
+      <Select id="select" name="select" mb={400}>
+        <option value="v">option1</option>
+      </Select>
+    );
+    expect(container.querySelector(".seeds-select")).not.toBeInTheDocument();
+  });
   it("should render with chevron-down", () => {
     render(
       <Select

package/src/__tests__/displayName.test.tsx

@@ -0,0 +1,11 @@
+import Select from "../";
+
+// Regression guard for DS-4394: racine's `generate:props-docs` runs react-docgen
+// over each package's entry component and keys the output on `displayName`. A bare
+// cross-file re-export resolves to no local definition, so the entry must be a real
+// local component with an explicit `displayName`.
+describe("Select entry component", () => {
+  it("exposes an explicit displayName for react-docgen", () => {
+    expect((Select as { displayName?: string }).displayName).toBe("Select");
+  });
+});

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/select.css

@@ -0,0 +1,115 @@
+/**
+ * Seeds Select component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-select seeds-select-default">
+ *     <select class="seeds-select-input">…</select>
+ *     <span class="seeds-select-arrow seeds-select-arrow-default">…</span>
+ *   </div>
+ */
+
+@layer components {
+  .seeds-select {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .seeds-select .seeds-select-input {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid var(--color-form-border-base);
+    border-radius: var(--radius-500);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    cursor: pointer;
+    outline: none;
+    appearance: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    margin: 0;
+    /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
+    visibility: visible;
+  }
+
+  /* kill the dropdown arrow on IE 11 */
+  .seeds-select .seeds-select-input::-ms-expand {
+    display: none;
+  }
+
+  .seeds-select .seeds-select-input:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-select
+    .seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /* size: default */
+  .seeds-select-default .seeds-select-input {
+    padding: var(--space-300) var(--space-500) var(--space-300) var(--space-300);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  /* size: large */
+  .seeds-select-large .seeds-select-input {
+    padding: var(--space-350) var(--space-600) var(--space-350) var(--space-400);
+    font-size: var(--font-size-300);
+    line-height: var(--line-height-300);
+  }
+
+  /* size: small */
+  .seeds-select-small .seeds-select-input {
+    padding: var(--space-200) var(--space-500) var(--space-200) var(--space-200);
+    font-size: var(--font-size-200);
+    line-height: normal;
+  }
+
+  .seeds-select-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-icon-base);
+    pointer-events: none;
+  }
+
+  .seeds-select-arrow-default,
+  .seeds-select-arrow-small {
+    right: var(--space-300);
+  }
+
+  .seeds-select-arrow-large {
+    right: var(--space-350);
+  }
+
+  /* disabled */
+  .seeds-select-disabled {
+    opacity: 0.4;
+  }
+
+  .seeds-select-disabled .seeds-select-input {
+    cursor: not-allowed;
+  }
+
+  /* invalid */
+  .seeds-select-invalid .seeds-select-input {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-select-invalid .seeds-select-arrow {
+    color: var(--color-icon-error);
+  }
+}