@sproutsocial/seeds-react-label 1.0.25 → 1.0.27

package/.turbo/turbo-build.log

@@ -1,5 +1,23 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/label.css dist/label.css
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +26,52 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     2.77 KB
-CJS dist/index.js.map 1.98 KB
-CJS ⚡️ Build success in 68ms
-ESM dist/esm/index.js     969.00 B
-ESM dist/esm/index.js.map 1.88 KB
-ESM ⚡️ Build success in 69ms
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+[warn] ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:14:6:
+      14 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:12:6:
+      12 │       "import": "./dist/esm/index.js",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:13:6:
+      13 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+CJS dist/index.js     4.70 KB
+CJS dist/index.js.map 5.91 KB
+CJS ⚡️ Build success in 85ms
+ESM dist/esm/index.js     2.60 KB
+ESM dist/esm/index.js.map 5.75 KB
+ESM ⚡️ Build success in 85ms
 DTS Build start
-DTS ⚡️ Build success in 4088ms
-DTS dist/index.d.ts  499.00 B
-DTS dist/index.d.mts 499.00 B
-Done in 5.61s.
+DTS ⚡️ Build success in 3946ms
+DTS dist/index.d.ts  665.00 B
+DTS dist/index.d.mts 665.00 B
+Done in 6.01s.

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sproutsocial/seeds-react-label
 
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+
+## 1.0.26
+
+### Patch Changes
+
+- Updated dependencies [6611f6a]
+  - @sproutsocial/seeds-react-system-props@3.1.2
+  - @sproutsocial/seeds-react-text@1.5.1
+
 ## 1.0.25
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,30 +1,100 @@
 // src/Label.tsx
 import "react";
+
+// src/LabelHybrid.tsx
+import "react";
+import Text3 from "@sproutsocial/seeds-react-text";
+
+// src/styles.tsx
+import "react";
 import styled from "styled-components";
 import Text from "@sproutsocial/seeds-react-text";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var LabelBase = ({ as = "label", ...rest }) => /* @__PURE__ */ jsx(Text, { ...rest, as });
 var StyledLabel = styled(LabelBase)`
   display: flex;
   align-items: center;
 `;
-var Label = ({ htmlFor, required, children, ...props }) => {
+
+// src/LabelTailwind.tsx
+import "react";
+import Text2 from "@sproutsocial/seeds-react-text";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+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 LabelTailwind = ({
+  htmlFor,
+  required,
+  children,
+  className,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsxs(
-    StyledLabel,
+    LabelBase,
     {
+      className: cn("seeds-label", className),
       fontSize: 200,
       fontWeight: "semibold",
       color: "text.headline",
       "data-qa-label": htmlFor,
       htmlFor,
-      ...props,
+      ...rest,
       children: [
         children,
-        required && /* @__PURE__ */ jsx(Text, { ml: 100, "aria-hidden": true, children: "*" })
+        required && /* @__PURE__ */ jsx2(Text2, { ml: 100, "aria-hidden": true, children: "*" })
       ]
     }
   );
 };
+LabelTailwind.displayName = "LabelTailwind";
+
+// src/LabelHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var LabelHybrid = ({
+  htmlFor,
+  required,
+  children,
+  ...rest
+}) => {
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsxs2(
+      StyledLabel,
+      {
+        fontSize: 200,
+        fontWeight: "semibold",
+        color: "text.headline",
+        "data-qa-label": htmlFor,
+        htmlFor,
+        ...rest,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx3(Text3, { ml: 100, "aria-hidden": true, children: "*" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(LabelTailwind, { htmlFor, required, ...rest, children });
+};
+var LabelHybrid_default = LabelHybrid;
+
+// src/Label.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Label = (props) => /* @__PURE__ */ jsx4(LabelHybrid_default, { ...props });
 var Label_default = Label;
 
 // src/LabelTypes.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Label.tsx","../../src/LabelTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nconst LabelBase = ({ as = \"label\", ...rest }: TypeLabelProps) => (\n  <Text {...rest} as={as} />\n);\n\n// TODO: Screen readers should read \"required\" instead of \"*\"\nconst StyledLabel = styled(LabelBase)`\n  display: flex;\n  align-items: center;\n`;\n\nconst Label = ({ htmlFor, required, children, ...props }: TypeLabelProps) => {\n  return (\n    <StyledLabel\n      fontSize={200}\n      fontWeight=\"semibold\"\n      color=\"text.headline\"\n      data-qa-label={htmlFor}\n      htmlFor={htmlFor}\n      {...props}\n    >\n      {children}\n      {required && (\n        <Text ml={100} aria-hidden>\n          *\n        </Text>\n      )}\n    </StyledLabel>\n  );\n};\n\nexport default Label;\n","import * as React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeLabelProps extends TypeTextProps {\n  /** ID of the associated form element */\n  htmlFor: string;\n  children: React.ReactNode;\n  required?: boolean;\n}\n","import Label from \"./Label\";\n\nexport default Label;\nexport { Label };\nexport * from \"./LabelTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,OAAO,YAAY;AACnB,OAAO,UAAU;AAIf,cAWE,YAXF;AADF,IAAM,YAAY,CAAC,EAAE,KAAK,SAAS,GAAG,KAAK,MACzC,oBAAC,QAAM,GAAG,MAAM,IAAQ;AAI1B,IAAM,cAAc,OAAO,SAAS;AAAA;AAAA;AAAA;AAKpC,IAAM,QAAQ,CAAC,EAAE,SAAS,UAAU,UAAU,GAAG,MAAM,MAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAe;AAAA,MACf;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YACC,oBAAC,QAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,gBAAQ;;;ACnCf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Label.tsx","../../src/LabelHybrid.tsx","../../src/styles.tsx","../../src/LabelTailwind.tsx","../../src/LabelTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport LabelHybrid from \"./LabelHybrid\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\n/**\n * Label 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 Label = (props: TypeLabelProps) => <LabelHybrid {...props} />;\n\nexport default Label;\n","/**\n * Hybrid Label Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { StyledLabel } from \"./styles\"; // Styled-components version\nimport { LabelTailwind } from \"./LabelTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nconst LabelHybrid = ({\n  htmlFor,\n  required,\n  children,\n  ...rest\n}: TypeLabelProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <StyledLabel\n        fontSize={200}\n        fontWeight=\"semibold\"\n        color=\"text.headline\"\n        data-qa-label={htmlFor}\n        htmlFor={htmlFor}\n        {...rest}\n      >\n        {children}\n        {required && (\n          <Text ml={100} aria-hidden>\n            *\n          </Text>\n        )}\n      </StyledLabel>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <LabelTailwind htmlFor={htmlFor} required={required} {...rest}>\n      {children}\n    </LabelTailwind>\n  );\n};\n\nexport default LabelHybrid;\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nexport const LabelBase = ({ as = \"label\", ...rest }: TypeLabelProps) => (\n  <Text {...rest} as={as} />\n);\n\n// TODO: Screen readers should read \"required\" instead of \"*\"\nexport const StyledLabel = styled(LabelBase)`\n  display: flex;\n  align-items: center;\n`;\n","/**\n * Tailwind CSS implementation of Label component\n * Uses Seeds label CSS classes from label.css\n *\n * Typography (fontSize / fontWeight / color) continues to flow through the\n * Text child props for exact parity; only the flex layout moves to label.css.\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { LabelBase } from \"./styles\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\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 LabelTailwind = ({\n  htmlFor,\n  required,\n  children,\n  className,\n  ...rest\n}: TypeLabelProps) => {\n  return (\n    <LabelBase\n      className={cn(\"seeds-label\", className)}\n      fontSize={200}\n      fontWeight=\"semibold\"\n      color=\"text.headline\"\n      data-qa-label={htmlFor}\n      htmlFor={htmlFor}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <Text ml={100} aria-hidden>\n          *\n        </Text>\n      )}\n    </LabelBase>\n  );\n};\n\nLabelTailwind.displayName = \"LabelTailwind\";\n","import * as React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeLabelProps extends TypeTextProps {\n  /** ID of the associated form element */\n  htmlFor: string;\n  children: React.ReactNode;\n  required?: boolean;\n}\n","import Label from \"./Label\";\n\nexport default Label;\nexport { Label };\nexport * from \"./LabelTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACKvB,OAAuB;AACvB,OAAOA,WAAU;;;ACNjB,OAAuB;AACvB,OAAO,YAAY;AACnB,OAAO,UAAU;AAIf;AADK,IAAM,YAAY,CAAC,EAAE,KAAK,SAAS,GAAG,KAAK,MAChD,oBAAC,QAAM,GAAG,MAAM,IAAQ;AAInB,IAAM,cAAc,OAAO,SAAS;AAAA;AAAA;AAAA;;;ACF3C,OAAuB;AACvB,OAAOC,WAAU;AAmCb,SAWI,OAAAC,MAXJ;AA9BJ,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,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAe;AAAA,MACf;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YACC,gBAAAA,KAACC,OAAA,EAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;;;AFtD5B,SAAS,sBAAsB;AAWzB,SAUI,OAAAC,MAVJ,QAAAC,aAAA;AARN,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,MAAI,eAAe,IAAI,GAAG;AACxB,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,OAAM;AAAA,QACN,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YACC,gBAAAD,KAACE,OAAA,EAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AAGA,SACE,gBAAAF,KAAC,iBAAc,SAAkB,UAAqB,GAAG,MACtD,UACH;AAEJ;AAEA,IAAO,sBAAQ;;;ADrC0B,gBAAAG,YAAA;AAAzC,IAAM,QAAQ,CAAC,UAA0B,gBAAAA,KAAC,uBAAa,GAAG,OAAO;AAEjE,IAAO,gBAAQ;;;AIXf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["Text","Text","jsx","Text","jsx","jsxs","Text","jsx"]}

package/dist/index.d.mts

@@ -9,6 +9,11 @@ interface TypeLabelProps extends TypeTextProps {
     required?: boolean;
 }
 
-declare const Label: ({ htmlFor, required, children, ...props }: TypeLabelProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Label component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Label: (props: TypeLabelProps) => react_jsx_runtime.JSX.Element;
 
 export { Label, type TypeLabelProps, Label as default };

package/dist/index.d.ts

@@ -9,6 +9,11 @@ interface TypeLabelProps extends TypeTextProps {
     required?: boolean;
 }
 
-declare const Label: ({ htmlFor, required, children, ...props }: TypeLabelProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Label component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Label: (props: TypeLabelProps) => react_jsx_runtime.JSX.Element;
 
 export { Label, type TypeLabelProps, Label as default };

package/dist/index.js

@@ -36,6 +36,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Label.tsx
+var React4 = require("react");
+
+// src/LabelHybrid.tsx
+var React3 = require("react");
+var import_seeds_react_text3 = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/styles.tsx
 var React = require("react");
 var import_styled_components = __toESM(require("styled-components"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
@@ -45,27 +52,90 @@ var StyledLabel = (0, import_styled_components.default)(LabelBase)`
   display: flex;
   align-items: center;
 `;
-var Label = ({ htmlFor, required, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    StyledLabel,
+
+// src/LabelTailwind.tsx
+var React2 = require("react");
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+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 LabelTailwind = ({
+  htmlFor,
+  required,
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    LabelBase,
     {
+      className: cn("seeds-label", className),
       fontSize: 200,
       fontWeight: "semibold",
       color: "text.headline",
       "data-qa-label": htmlFor,
       htmlFor,
-      ...props,
+      ...rest,
       children: [
         children,
-        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { ml: 100, "aria-hidden": true, children: "*" })
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text2.default, { ml: 100, "aria-hidden": true, children: "*" })
       ]
     }
   );
 };
+LabelTailwind.displayName = "LabelTailwind";
+
+// src/LabelHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LabelHybrid = ({
+  htmlFor,
+  required,
+  children,
+  ...rest
+}) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      StyledLabel,
+      {
+        fontSize: 200,
+        fontWeight: "semibold",
+        color: "text.headline",
+        "data-qa-label": htmlFor,
+        htmlFor,
+        ...rest,
+        children: [
+          children,
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text3.default, { ml: 100, "aria-hidden": true, children: "*" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LabelTailwind, { htmlFor, required, ...rest, children });
+};
+var LabelHybrid_default = LabelHybrid;
+
+// src/Label.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Label = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LabelHybrid_default, { ...props });
 var Label_default = Label;
 
 // src/LabelTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/index.ts
 var index_default = Label_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Label.tsx","../src/LabelTypes.ts"],"sourcesContent":["import Label from \"./Label\";\n\nexport default Label;\nexport { Label };\nexport * from \"./LabelTypes\";\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nconst LabelBase = ({ as = \"label\", ...rest }: TypeLabelProps) => (\n  <Text {...rest} as={as} />\n);\n\n// TODO: Screen readers should read \"required\" instead of \"*\"\nconst StyledLabel = styled(LabelBase)`\n  display: flex;\n  align-items: center;\n`;\n\nconst Label = ({ htmlFor, required, children, ...props }: TypeLabelProps) => {\n  return (\n    <StyledLabel\n      fontSize={200}\n      fontWeight=\"semibold\"\n      color=\"text.headline\"\n      data-qa-label={htmlFor}\n      htmlFor={htmlFor}\n      {...props}\n    >\n      {children}\n      {required && (\n        <Text ml={100} aria-hidden>\n          *\n        </Text>\n      )}\n    </StyledLabel>\n  );\n};\n\nexport default Label;\n","import * as React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeLabelProps extends TypeTextProps {\n  /** ID of the associated form element */\n  htmlFor: string;\n  children: React.ReactNode;\n  required?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,+BAAmB;AACnB,8BAAiB;AAIf;AADF,IAAM,YAAY,CAAC,EAAE,KAAK,SAAS,GAAG,KAAK,MACzC,4CAAC,wBAAAA,SAAA,EAAM,GAAG,MAAM,IAAQ;AAI1B,IAAM,kBAAc,yBAAAC,SAAO,SAAS;AAAA;AAAA;AAAA;AAKpC,IAAM,QAAQ,CAAC,EAAE,SAAS,UAAU,UAAU,GAAG,MAAM,MAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAe;AAAA,MACf;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YACC,4CAAC,wBAAAD,SAAA,EAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,gBAAQ;;;ACnCf,IAAAE,SAAuB;;;AFEvB,IAAO,gBAAQ;","names":["Text","styled","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Label.tsx","../src/LabelHybrid.tsx","../src/styles.tsx","../src/LabelTailwind.tsx","../src/LabelTypes.ts"],"sourcesContent":["import Label from \"./Label\";\n\nexport default Label;\nexport { Label };\nexport * from \"./LabelTypes\";\n","import * as React from \"react\";\nimport LabelHybrid from \"./LabelHybrid\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\n/**\n * Label 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 Label = (props: TypeLabelProps) => <LabelHybrid {...props} />;\n\nexport default Label;\n","/**\n * Hybrid Label Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { StyledLabel } from \"./styles\"; // Styled-components version\nimport { LabelTailwind } from \"./LabelTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nconst LabelHybrid = ({\n  htmlFor,\n  required,\n  children,\n  ...rest\n}: TypeLabelProps) => {\n  if (hasStyledProps(rest)) {\n    return (\n      <StyledLabel\n        fontSize={200}\n        fontWeight=\"semibold\"\n        color=\"text.headline\"\n        data-qa-label={htmlFor}\n        htmlFor={htmlFor}\n        {...rest}\n      >\n        {children}\n        {required && (\n          <Text ml={100} aria-hidden>\n            *\n          </Text>\n        )}\n      </StyledLabel>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return (\n    <LabelTailwind htmlFor={htmlFor} required={required} {...rest}>\n      {children}\n    </LabelTailwind>\n  );\n};\n\nexport default LabelHybrid;\n","import * as React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\n\nexport const LabelBase = ({ as = \"label\", ...rest }: TypeLabelProps) => (\n  <Text {...rest} as={as} />\n);\n\n// TODO: Screen readers should read \"required\" instead of \"*\"\nexport const StyledLabel = styled(LabelBase)`\n  display: flex;\n  align-items: center;\n`;\n","/**\n * Tailwind CSS implementation of Label component\n * Uses Seeds label CSS classes from label.css\n *\n * Typography (fontSize / fontWeight / color) continues to flow through the\n * Text child props for exact parity; only the flex layout moves to label.css.\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { LabelBase } from \"./styles\";\nimport type { TypeLabelProps } from \"./LabelTypes\";\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 LabelTailwind = ({\n  htmlFor,\n  required,\n  children,\n  className,\n  ...rest\n}: TypeLabelProps) => {\n  return (\n    <LabelBase\n      className={cn(\"seeds-label\", className)}\n      fontSize={200}\n      fontWeight=\"semibold\"\n      color=\"text.headline\"\n      data-qa-label={htmlFor}\n      htmlFor={htmlFor}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <Text ml={100} aria-hidden>\n          *\n        </Text>\n      )}\n    </LabelBase>\n  );\n};\n\nLabelTailwind.displayName = \"LabelTailwind\";\n","import * as React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\nexport interface TypeLabelProps extends TypeTextProps {\n  /** ID of the associated form element */\n  htmlFor: string;\n  children: React.ReactNode;\n  required?: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACKvB,IAAAC,SAAuB;AACvB,IAAAC,2BAAiB;;;ACNjB,YAAuB;AACvB,+BAAmB;AACnB,8BAAiB;AAIf;AADK,IAAM,YAAY,CAAC,EAAE,KAAK,SAAS,GAAG,KAAK,MAChD,4CAAC,wBAAAC,SAAA,EAAM,GAAG,MAAM,IAAQ;AAInB,IAAM,kBAAc,yBAAAC,SAAO,SAAS;AAAA;AAAA;AAAA;;;ACF3C,IAAAC,SAAuB;AACvB,IAAAC,2BAAiB;AAmCb,IAAAC,sBAAA;AA9BJ,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,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC,UAAU;AAAA,MACV,YAAW;AAAA,MACX,OAAM;AAAA,MACN,iBAAe;AAAA,MACf;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YACC,6CAAC,yBAAAC,SAAA,EAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,cAAc,cAAc;;;AFtD5B,sCAA+B;AAWzB,IAAAC,sBAAA;AARN,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,UAAI,gDAAe,IAAI,GAAG;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,YAAW;AAAA,QACX,OAAM;AAAA,QACN,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YACC,6CAAC,yBAAAC,SAAA,EAAK,IAAI,KAAK,eAAW,MAAC,eAE3B;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AAGA,SACE,6CAAC,iBAAc,SAAkB,UAAqB,GAAG,MACtD,UACH;AAEJ;AAEA,IAAO,sBAAQ;;;ADrC0B,IAAAC,sBAAA;AAAzC,IAAM,QAAQ,CAAC,UAA0B,6CAAC,uBAAa,GAAG,OAAO;AAEjE,IAAO,gBAAQ;;;AIXf,IAAAC,SAAuB;;;ALEvB,IAAO,gBAAQ;","names":["React","React","import_seeds_react_text","Text","styled","React","import_seeds_react_text","import_jsx_runtime","Text","import_jsx_runtime","Text","import_jsx_runtime","React"]}

package/dist/label.css

@@ -0,0 +1,17 @@
+/**
+ * Seeds Label 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.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-label {
+    display: flex;
+    align-items: center;
+  }
+}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-label",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Seeds React Label",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/label.css": "./dist/label.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/label.css dist/label.css",
+    "build:debug": "tsup --dts --metafile && cp src/label.css dist/label.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,9 +26,9 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-text": "^1.5.0"
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-text": "^1.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Label.tsx

@@ -1,36 +1,12 @@
 import * as React from "react";
-import styled from "styled-components";
-import Text from "@sproutsocial/seeds-react-text";
+import LabelHybrid from "./LabelHybrid";
 import type { TypeLabelProps } from "./LabelTypes";
 
-const LabelBase = ({ as = "label", ...rest }: TypeLabelProps) => (
-  <Text {...rest} as={as} />
-);
-
-// TODO: Screen readers should read "required" instead of "*"
-const StyledLabel = styled(LabelBase)`
-  display: flex;
-  align-items: center;
-`;
-
-const Label = ({ htmlFor, required, children, ...props }: TypeLabelProps) => {
-  return (
-    <StyledLabel
-      fontSize={200}
-      fontWeight="semibold"
-      color="text.headline"
-      data-qa-label={htmlFor}
-      htmlFor={htmlFor}
-      {...props}
-    >
-      {children}
-      {required && (
-        <Text ml={100} aria-hidden>
-          *
-        </Text>
-      )}
-    </StyledLabel>
-  );
-};
+/**
+ * Label component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+const Label = (props: TypeLabelProps) => <LabelHybrid {...props} />;
 
 export default Label;

package/src/LabelHybrid.tsx

@@ -0,0 +1,47 @@
+/**
+ * Hybrid Label Component
+ * Automatically chooses between Tailwind and styled-components based on props
+ */
+
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import { StyledLabel } from "./styles"; // Styled-components version
+import { LabelTailwind } from "./LabelTailwind"; // Tailwind version
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeLabelProps } from "./LabelTypes";
+
+const LabelHybrid = ({
+  htmlFor,
+  required,
+  children,
+  ...rest
+}: TypeLabelProps) => {
+  if (hasStyledProps(rest)) {
+    return (
+      <StyledLabel
+        fontSize={200}
+        fontWeight="semibold"
+        color="text.headline"
+        data-qa-label={htmlFor}
+        htmlFor={htmlFor}
+        {...rest}
+      >
+        {children}
+        {required && (
+          <Text ml={100} aria-hidden>
+            *
+          </Text>
+        )}
+      </StyledLabel>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return (
+    <LabelTailwind htmlFor={htmlFor} required={required} {...rest}>
+      {children}
+    </LabelTailwind>
+  );
+};
+
+export default LabelHybrid;

package/src/LabelTailwind.tsx

@@ -0,0 +1,64 @@
+/**
+ * Tailwind CSS implementation of Label component
+ * Uses Seeds label CSS classes from label.css
+ *
+ * Typography (fontSize / fontWeight / color) continues to flow through the
+ * Text child props for exact parity; only the flex layout moves to label.css.
+ */
+
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import { LabelBase } from "./styles";
+import type { TypeLabelProps } from "./LabelTypes";
+
+// 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 LabelTailwind = ({
+  htmlFor,
+  required,
+  children,
+  className,
+  ...rest
+}: TypeLabelProps) => {
+  return (
+    <LabelBase
+      className={cn("seeds-label", className)}
+      fontSize={200}
+      fontWeight="semibold"
+      color="text.headline"
+      data-qa-label={htmlFor}
+      htmlFor={htmlFor}
+      {...rest}
+    >
+      {children}
+      {required && (
+        <Text ml={100} aria-hidden>
+          *
+        </Text>
+      )}
+    </LabelBase>
+  );
+};
+
+LabelTailwind.displayName = "LabelTailwind";

package/src/__tests__/Label.test.tsx

@@ -8,4 +8,41 @@ describe("Label", () => {
 
     expect(screen.getByText("First Name:")).toBeInTheDocument();
   });
+
+  it("renders the Tailwind path with the seeds-label class and qa attribute", () => {
+    const { container } = render(<Label htmlFor="firstname">First Name:</Label>);
+    const label = container.querySelector("[data-qa-label]");
+    expect(label).toHaveClass("seeds-label");
+    expect(label).toHaveAttribute("data-qa-label", "firstname");
+  });
+
+  it("renders the required marker on the Tailwind path", () => {
+    render(
+      <Label htmlFor="firstname" required>
+        First Name:
+      </Label>
+    );
+    expect(screen.getByText("*")).toBeInTheDocument();
+  });
+
+  it("merges a consumer className on the Tailwind path (styled() contract)", () => {
+    const { container } = render(
+      <Label htmlFor="firstname" className="custom">
+        First Name:
+      </Label>
+    );
+    const label = container.querySelector("[data-qa-label]");
+    expect(label).toHaveClass("seeds-label");
+    expect(label).toHaveClass("custom");
+  });
+
+  it("routes through the styled-components path when a system prop is present", () => {
+    // mt is a system prop, which routes Label through the styled-components path
+    render(
+      <Label htmlFor="firstname" mt={200}>
+        First Name:
+      </Label>
+    );
+    expect(screen.getByText("First Name:")).toBeInTheDocument();
+  });
 });

package/src/label.css

@@ -0,0 +1,17 @@
+/**
+ * Seeds Label 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.
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-label {
+    display: flex;
+    align-items: center;
+  }
+}

package/src/styles.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+import type { TypeLabelProps } from "./LabelTypes";
+
+export const LabelBase = ({ as = "label", ...rest }: TypeLabelProps) => (
+  <Text {...rest} as={as} />
+);
+
+// TODO: Screen readers should read "required" instead of "*"
+export const StyledLabel = styled(LabelBase)`
+  display: flex;
+  align-items: center;
+`;