@brycks/core-front 0.2.8 → 0.2.9

package/dist/components/form/FormLabel/FormLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),h=require("../../../utils/styles.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),e=require("../../../design-system/tokens/typography.cjs"),k={sm:{fontSize:e.fontSizes.xs},md:{fontSize:e.fontSizes.sm},lg:{fontSize:e.fontSizes.md}},n=p.forwardRef(function({children:a,size:s="md",required:i,disabled:t,description:l,className:c,style:f,testId:m,...y},b){const d=k[s],u={display:"block",fontFamily:e.textStyles.label.fontFamily,fontSize:d.fontSize,fontWeight:e.fontWeights.medium,lineHeight:e.textStyles.label.lineHeight,color:t?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",cursor:t?"not-allowed":"pointer",marginBottom:o.spacing[1],...f},g={color:"var(--brycks-error-default)",marginLeft:o.spacing[.5]},S={display:"block",fontSize:e.fontSizes.xs,fontWeight:e.fontWeights.regular,color:"var(--brycks-foreground-muted)",marginTop:o.spacing[.5]};return r.jsxs("label",{ref:b,className:h.cx("brycks-form-label",`brycks-form-label--${s}`,t&&"brycks-form-label--disabled",c),style:u,"data-testid":m,...y,children:[r.jsxs("span",{className:"brycks-form-label__text",children:[a,i&&r.jsx("span",{className:"brycks-form-label__required",style:g,"aria-hidden":"true",children:"*"})]}),l&&r.jsx("span",{className:"brycks-form-label__description",style:S,children:l})]})});n.displayName="FormLabel";exports.FormLabel=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),S=require("../../../utils/styles.cjs"),t=require("../../../design-system/tokens/spacing.cjs"),r=require("../../../design-system/tokens/typography.cjs"),h={sm:{fontSize:"var(--brycks-fs-ui-xs)"},md:{fontSize:"var(--brycks-fs-ui-sm)"},lg:{fontSize:"var(--brycks-fs-ui-md)"}},a=p.forwardRef(function({children:i,size:o="md",required:n,disabled:s,description:l,className:c,style:f,testId:y,...m},b){const u=h[o],d={display:"block",fontFamily:r.textStyles.label.fontFamily,fontSize:u.fontSize,fontWeight:r.fontWeights.medium,lineHeight:r.textStyles.label.lineHeight,color:s?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",cursor:s?"not-allowed":"pointer",marginBottom:t.spacing[1],...f},g={color:"var(--brycks-error-default)",marginLeft:t.spacing[.5]},k={display:"block",fontSize:"var(--brycks-fs-ui-xs)",fontWeight:r.fontWeights.regular,color:"var(--brycks-foreground-muted)",marginTop:t.spacing[.5]};return e.jsxs("label",{ref:b,className:S.cx("brycks-form-label",`brycks-form-label--${o}`,s&&"brycks-form-label--disabled",c),style:d,"data-testid":y,...m,children:[e.jsxs("span",{className:"brycks-form-label__text",children:[i,n&&e.jsx("span",{className:"brycks-form-label__required",style:g,"aria-hidden":"true",children:"*"})]}),l&&e.jsx("span",{className:"brycks-form-label__description",style:k,children:l})]})});a.displayName="FormLabel";exports.FormLabel=a;
 //# sourceMappingURL=FormLabel.cjs.map

package/dist/components/form/FormLabel/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontSizes, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<FormLabelSize, { fontSize: number }> = {\n  sm: { fontSize: fontSizes.xs },\n  md: { fontSize: fontSizes.sm },\n  lg: { fontSize: fontSizes.md },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: fontSizes.xs,\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","fontSizes","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"gSAgCMA,EAA0D,CAC9D,GAAI,CAAE,SAAUC,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,CAC5B,EAEaC,EAAYC,EAAAA,WAA6C,SACpE,CACE,SAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASd,EAAWK,CAAI,EAExBU,EAAa,CACjB,QAAS,QACT,WAAYC,EAAAA,WAAW,MAAM,WAC7B,SAAUF,EAAO,SACjB,WAAYG,EAAAA,YAAY,OACxB,WAAYD,EAAAA,WAAW,MAAM,WAC7B,MAAOT,EAAW,iCAAmC,mCACrD,OAAQA,EAAW,cAAgB,UACnC,aAAcW,EAAAA,QAAQ,CAAC,EACvB,GAAGR,CAAA,EAGCS,EAAgB,CACpB,MAAO,8BACP,WAAYD,EAAAA,QAAQ,EAAG,CAAA,EAGnBE,EAAmB,CACvB,QAAS,QACT,SAAUnB,EAAAA,UAAU,GACpB,WAAYgB,EAAAA,YAAY,QACxB,MAAO,iCACP,UAAWC,EAAAA,QAAQ,EAAG,CAAA,EAGxB,OACEG,EAAAA,KAAC,QAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,sBAAsBjB,CAAI,GAC1BE,GAAY,8BACZE,CAAA,EAEF,MAAOM,EACP,cAAaJ,EACZ,GAAGC,EAEJ,SAAA,CAAAS,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAjB,EACAE,SACE,OAAA,CAAK,UAAU,8BAA8B,MAAOa,EAAe,cAAY,OAAO,SAAA,GAAA,CAEvF,CAAA,EAEJ,EACCX,GACCe,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAiC,MAAOH,EACrD,SAAAZ,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDN,EAAU,YAAc"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"gSAqCMA,EAA0D,CAC9D,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,EAChB,GAAI,CAAE,SAAU,wBAAA,CAClB,EAEaC,EAAYC,EAAAA,WAA6C,SACpE,CACE,SAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASb,EAAWI,CAAI,EAExBU,EAAa,CACjB,QAAS,QACT,WAAYC,EAAAA,WAAW,MAAM,WAC7B,SAAUF,EAAO,SACjB,WAAYG,EAAAA,YAAY,OACxB,WAAYD,EAAAA,WAAW,MAAM,WAC7B,MAAOT,EAAW,iCAAmC,mCACrD,OAAQA,EAAW,cAAgB,UACnC,aAAcW,EAAAA,QAAQ,CAAC,EACvB,GAAGR,CAAA,EAGCS,EAAgB,CACpB,MAAO,8BACP,WAAYD,EAAAA,QAAQ,EAAG,CAAA,EAGnBE,EAAmB,CACvB,QAAS,QACT,SAAU,yBACV,WAAYH,EAAAA,YAAY,QACxB,MAAO,iCACP,UAAWC,EAAAA,QAAQ,EAAG,CAAA,EAGxB,OACEG,EAAAA,KAAC,QAAA,CACC,IAAAR,EACA,UAAWS,EAAAA,GACT,oBACA,sBAAsBjB,CAAI,GAC1BE,GAAY,8BACZE,CAAA,EAEF,MAAOM,EACP,cAAaJ,EACZ,GAAGC,EAEJ,SAAA,CAAAS,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAjB,EACAE,SACE,OAAA,CAAK,UAAU,8BAA8B,MAAOa,EAAe,cAAY,OAAO,SAAA,GAAA,CAEvF,CAAA,EAEJ,EACCX,GACCe,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAiC,MAAOH,EACrD,SAAAZ,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDN,EAAU,YAAc"}

package/dist/components/form/FormLabel/FormLabel.js

@@ -1,68 +1,68 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { cx as x } from "../../../utils/styles.js";
-import { spacing as o } from "../../../design-system/tokens/spacing.js";
-import { textStyles as i, fontWeights as n, fontSizes as e } from "../../../design-system/tokens/typography.js";
-const z = {
-  sm: { fontSize: e.xs },
-  md: { fontSize: e.sm },
-  lg: { fontSize: e.md }
-}, _ = h(function({
-  children: m,
-  size: t = "md",
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { cx as h } from "../../../utils/styles.js";
+import { spacing as e } from "../../../design-system/tokens/spacing.js";
+import { textStyles as a, fontWeights as i } from "../../../design-system/tokens/typography.js";
+const v = {
+  sm: { fontSize: "var(--brycks-fs-ui-xs)" },
+  md: { fontSize: "var(--brycks-fs-ui-sm)" },
+  lg: { fontSize: "var(--brycks-fs-ui-md)" }
+}, x = S(function({
+  children: n,
+  size: o = "md",
   required: c,
   disabled: r,
   description: l,
-  className: f,
-  style: d,
+  className: m,
+  style: f,
   testId: b,
   ...y
-}, p) {
-  const g = z[t], u = {
+}, d) {
+  const u = v[o], k = {
     display: "block",
-    fontFamily: i.label.fontFamily,
-    fontSize: g.fontSize,
-    fontWeight: n.medium,
-    lineHeight: i.label.lineHeight,
+    fontFamily: a.label.fontFamily,
+    fontSize: u.fontSize,
+    fontWeight: i.medium,
+    lineHeight: a.label.lineHeight,
     color: r ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
     cursor: r ? "not-allowed" : "pointer",
-    marginBottom: o[1],
-    ...d
-  }, k = {
+    marginBottom: e[1],
+    ...f
+  }, p = {
     color: "var(--brycks-error-default)",
-    marginLeft: o[0.5]
-  }, S = {
+    marginLeft: e[0.5]
+  }, g = {
     display: "block",
-    fontSize: e.xs,
-    fontWeight: n.regular,
+    fontSize: "var(--brycks-fs-ui-xs)",
+    fontWeight: i.regular,
     color: "var(--brycks-foreground-muted)",
-    marginTop: o[0.5]
+    marginTop: e[0.5]
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ t(
     "label",
     {
-      ref: p,
-      className: x(
+      ref: d,
+      className: h(
         "brycks-form-label",
-        `brycks-form-label--${t}`,
+        `brycks-form-label--${o}`,
         r && "brycks-form-label--disabled",
-        f
+        m
       ),
-      style: u,
+      style: k,
       "data-testid": b,
       ...y,
       children: [
-        /* @__PURE__ */ s("span", { className: "brycks-form-label__text", children: [
-          m,
-          c && /* @__PURE__ */ a("span", { className: "brycks-form-label__required", style: k, "aria-hidden": "true", children: "*" })
+        /* @__PURE__ */ t("span", { className: "brycks-form-label__text", children: [
+          n,
+          c && /* @__PURE__ */ s("span", { className: "brycks-form-label__required", style: p, "aria-hidden": "true", children: "*" })
         ] }),
-        l && /* @__PURE__ */ a("span", { className: "brycks-form-label__description", style: S, children: l })
+        l && /* @__PURE__ */ s("span", { className: "brycks-form-label__description", style: g, children: l })
       ]
     }
   );
 });
-_.displayName = "FormLabel";
+x.displayName = "FormLabel";
 export {
-  _ as FormLabel
+  x as FormLabel
 };
 //# sourceMappingURL=FormLabel.js.map

package/dist/components/form/FormLabel/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontSizes, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeStyles: Record<FormLabelSize, { fontSize: number }> = {\n  sm: { fontSize: fontSizes.xs },\n  md: { fontSize: fontSizes.sm },\n  lg: { fontSize: fontSizes.md },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: fontSizes.xs,\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","fontSizes","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;AAgCA,MAAMA,IAA0D;AAAA,EAC9D,IAAI,EAAE,UAAUC,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAC5B,GAEaC,IAAYC,EAA6C,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASd,EAAWK,CAAI,GAExBU,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,YAAYC,EAAW,MAAM;AAAA,IAC7B,UAAUF,EAAO;AAAA,IACjB,YAAYG,EAAY;AAAA,IACxB,YAAYD,EAAW,MAAM;AAAA,IAC7B,OAAOT,IAAW,mCAAmC;AAAA,IACrD,QAAQA,IAAW,gBAAgB;AAAA,IACnC,cAAcW,EAAQ,CAAC;AAAA,IACvB,GAAGR;AAAA,EAAA,GAGCS,IAAgB;AAAA,IACpB,OAAO;AAAA,IACP,YAAYD,EAAQ,GAAG;AAAA,EAAA,GAGnBE,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,UAAUnB,EAAU;AAAA,IACpB,YAAYgB,EAAY;AAAA,IACxB,OAAO;AAAA,IACP,WAAWC,EAAQ,GAAG;AAAA,EAAA;AAGxB,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,sBAAsBjB,CAAI;AAAA,QAC1BE,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,UAAAjB;AAAA,UACAE,uBACE,QAAA,EAAK,WAAU,+BAA8B,OAAOa,GAAe,eAAY,QAAO,UAAA,IAAA,CAEvF;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCAAiC,OAAOH,GACrD,UAAAZ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAU,cAAc;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/form/FormLabel/FormLabel.tsx"],"sourcesContent":["/**\n * FormLabel Component\n *\n * A semantic label component for form fields with consistent styling.\n * Supports required indicator and description text.\n * Uses CSS variables for font sizes to enable dynamic scaling.\n *\n * @module components/form/FormLabel\n */\n\nimport { forwardRef, type LabelHTMLAttributes, type ReactNode } from 'react'\nimport { textStyles, spacing, fontWeights } from '../../../design-system'\nimport { cx } from '../../../utils/styles'\n\nexport type FormLabelSize = 'sm' | 'md' | 'lg'\n\nexport interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /** Label text */\n  children: ReactNode\n  /** Label size */\n  size?: FormLabelSize\n  /** Whether the field is required */\n  required?: boolean\n  /** Whether the field is disabled */\n  disabled?: boolean\n  /** Optional description text */\n  description?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\n/**\n * Maps FormLabel sizes to CSS variables\n * Uses --brycks-fs-ui-* for UI elements\n */\nconst sizeStyles: Record<FormLabelSize, { fontSize: string }> = {\n  sm: { fontSize: 'var(--brycks-fs-ui-xs)' },\n  md: { fontSize: 'var(--brycks-fs-ui-sm)' },\n  lg: { fontSize: 'var(--brycks-fs-ui-md)' },\n}\n\nexport const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(function FormLabel(\n  {\n    children,\n    size = 'md',\n    required,\n    disabled,\n    description,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeStyles[size]\n\n  const labelStyle = {\n    display: 'block',\n    fontFamily: textStyles.label.fontFamily,\n    fontSize: config.fontSize,\n    fontWeight: fontWeights.medium,\n    lineHeight: textStyles.label.lineHeight,\n    color: disabled ? 'var(--brycks-foreground-muted)' : 'var(--brycks-foreground-default)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    marginBottom: spacing[1],\n    ...style,\n  }\n\n  const requiredStyle = {\n    color: 'var(--brycks-error-default)',\n    marginLeft: spacing[0.5],\n  }\n\n  const descriptionStyle = {\n    display: 'block',\n    fontSize: 'var(--brycks-fs-ui-xs)',\n    fontWeight: fontWeights.regular,\n    color: 'var(--brycks-foreground-muted)',\n    marginTop: spacing[0.5],\n  }\n\n  return (\n    <label\n      ref={ref}\n      className={cx(\n        'brycks-form-label',\n        `brycks-form-label--${size}`,\n        disabled && 'brycks-form-label--disabled',\n        className\n      )}\n      style={labelStyle}\n      data-testid={testId}\n      {...props}\n    >\n      <span className=\"brycks-form-label__text\">\n        {children}\n        {required && (\n          <span className=\"brycks-form-label__required\" style={requiredStyle} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span className=\"brycks-form-label__description\" style={descriptionStyle}>\n          {description}\n        </span>\n      )}\n    </label>\n  )\n})\n\nFormLabel.displayName = 'FormLabel'\n"],"names":["sizeStyles","FormLabel","forwardRef","children","size","required","disabled","description","className","style","testId","props","ref","config","labelStyle","textStyles","fontWeights","spacing","requiredStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":";;;;;AAqCA,MAAMA,IAA0D;AAAA,EAC9D,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAAA,EAChB,IAAI,EAAE,UAAU,yBAAA;AAClB,GAEaC,IAAYC,EAA6C,SACpE;AAAA,EACE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASb,EAAWI,CAAI,GAExBU,IAAa;AAAA,IACjB,SAAS;AAAA,IACT,YAAYC,EAAW,MAAM;AAAA,IAC7B,UAAUF,EAAO;AAAA,IACjB,YAAYG,EAAY;AAAA,IACxB,YAAYD,EAAW,MAAM;AAAA,IAC7B,OAAOT,IAAW,mCAAmC;AAAA,IACrD,QAAQA,IAAW,gBAAgB;AAAA,IACnC,cAAcW,EAAQ,CAAC;AAAA,IACvB,GAAGR;AAAA,EAAA,GAGCS,IAAgB;AAAA,IACpB,OAAO;AAAA,IACP,YAAYD,EAAQ,GAAG;AAAA,EAAA,GAGnBE,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAYH,EAAY;AAAA,IACxB,OAAO;AAAA,IACP,WAAWC,EAAQ,GAAG;AAAA,EAAA;AAGxB,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACA,sBAAsBjB,CAAI;AAAA,QAC1BE,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOM;AAAA,MACP,eAAaJ;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,UAAAjB;AAAA,UACAE,uBACE,QAAA,EAAK,WAAU,+BAA8B,OAAOa,GAAe,eAAY,QAAO,UAAA,IAAA,CAEvF;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCAAiC,OAAOH,GACrD,UAAAZ,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDN,EAAU,cAAc;"}

package/dist/components/form/Input/Input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),u=require("../../../design-system/primitives/typography.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:u.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:u.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:u.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?d.focusRing.error:d.focusRing.default:d.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/typography.cjs"),u=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
 //# sourceMappingURL=Input.cjs.map

package/dist/components/form/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsxs as F, jsx as d } from "react/jsx-runtime";
 import { forwardRef as N, useState as O } from "react";
 import { cx as $ } from "../../../utils/styles.js";
-import { focusRing as i } from "../../../design-system/primitives/focus.js";
-import { componentPaddingX as c, componentHeights as p, componentGap as m } from "../../../design-system/primitives/sizing.js";
-import { componentFontSize as u } from "../../../design-system/primitives/typography.js";
+import { componentFontSize as i } from "../../../design-system/primitives/typography.js";
+import { focusRing as c } from "../../../design-system/primitives/focus.js";
+import { componentPaddingX as p, componentHeights as u, componentGap as m } from "../../../design-system/primitives/sizing.js";
 import { transition as y } from "../../../design-system/primitives/transitions.js";
 import { stateOpacity as B } from "../../../design-system/primitives/opacity.js";
 const L = {
   sm: {
-    height: p.sm,
-    fontSize: u.sm,
-    paddingX: c.sm,
+    height: u.sm,
+    fontSize: i.sm,
+    paddingX: p.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: p.md,
-    fontSize: u.md,
-    paddingX: c.md,
+    height: u.md,
+    fontSize: i.md,
+    paddingX: p.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: p.lg,
-    fontSize: u.lg,
-    paddingX: c.lg,
+    height: u.lg,
+    fontSize: i.lg,
+    paddingX: p.lg,
     radius: "var(--brycks-radius-lg)"
   }
 }, G = N(function({
@@ -54,7 +54,7 @@ const L = {
         Object.assign(e, {
           backgroundColor: "var(--brycks-background-app)",
           border: `1px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
-          boxShadow: a ? t ? i.error : i.default : i.none
+          boxShadow: a ? t ? c.error : c.default : c.none
         });
         break;
       case "filled":

package/dist/components/primitives/Button/Button.styles.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../design-system/primitives/sizing.cjs"),s=require("../../../design-system/primitives/typography.cjs"),h=require("../../../design-system/primitives/transitions.cjs"),g=require("../../../design-system/primitives/opacity.cjs"),v={xs:{height:e.componentHeights.xs,paddingX:e.componentPaddingX.xs,fontSize:s.componentFontSize.xs,iconSize:e.iconSizes.xs,gap:e.componentGap.xs,radius:"var(--brycks-radius-md)"},sm:{height:e.componentHeights.sm,paddingX:e.componentPaddingX.sm,fontSize:s.componentFontSize.sm,iconSize:e.iconSizes.sm,gap:e.componentGap.sm,radius:"var(--brycks-radius-md)"},md:{height:e.componentHeights.md,paddingX:e.componentPaddingX.md,fontSize:s.componentFontSize.md,iconSize:e.iconSizes.md,gap:e.componentGap.md,radius:"var(--brycks-radius-default)"},lg:{height:e.componentHeights.lg,paddingX:e.componentPaddingX.lg,fontSize:s.componentFontSize.lg,iconSize:e.iconSizes.lg,gap:e.componentGap.md,radius:"var(--brycks-radius-lg)"},xl:{height:e.componentHeights.xl,paddingX:e.componentPaddingX.xl,fontSize:s.componentFontSize.xl,iconSize:e.iconSizes.xl,gap:e.componentGap.lg,radius:"var(--brycks-radius-xl)"}},f={primary:{solid:{bg:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-hover)",activeBg:"var(--brycks-primary-active)",text:"var(--brycks-primary-foreground)"},outline:{border:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},ghost:{hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},soft:{bg:"var(--brycks-primary-muted)",hoverBg:"var(--brycks-primary-soft-hover)",text:"var(--brycks-primary-default)"},link:{text:"var(--brycks-primary-default)",hoverText:"var(--brycks-primary-hover)"}},accent:{solid:{bg:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-hover)",activeBg:"var(--brycks-accent-active)",text:"var(--brycks-accent-foreground)"},outline:{border:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},ghost:{hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},soft:{bg:"var(--brycks-accent-muted)",hoverBg:"var(--brycks-accent-soft-hover)",text:"var(--brycks-accent-default)"},link:{text:"var(--brycks-accent-default)",hoverText:"var(--brycks-accent-hover)"}},neutral:{solid:{bg:"var(--brycks-foreground-default)",hoverBg:"var(--brycks-foreground-muted)",activeBg:"var(--brycks-foreground-subtle)",text:"var(--brycks-background-app)"},outline:{border:"var(--brycks-border-strong)",hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},ghost:{hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},soft:{bg:"var(--brycks-background-muted)",hoverBg:"var(--brycks-background-subtle)",text:"var(--brycks-foreground-default)"},link:{text:"var(--brycks-foreground-default)",hoverText:"var(--brycks-foreground-muted)"}},success:{solid:{bg:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-hover)",activeBg:"var(--brycks-success-hover)",text:"var(--brycks-success-foreground)"},outline:{border:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},ghost:{hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},soft:{bg:"var(--brycks-success-muted)",hoverBg:"var(--brycks-success-soft-hover)",text:"var(--brycks-success-default)"},link:{text:"var(--brycks-success-default)",hoverText:"var(--brycks-success-hover)"}},warning:{solid:{bg:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-hover)",activeBg:"var(--brycks-warning-hover)",text:"var(--brycks-warning-foreground)"},outline:{border:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},ghost:{hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},soft:{bg:"var(--brycks-warning-muted)",hoverBg:"var(--brycks-warning-soft-hover)",text:"var(--brycks-warning-default)"},link:{text:"var(--brycks-warning-default)",hoverText:"var(--brycks-warning-hover)"}},error:{solid:{bg:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-hover)",activeBg:"var(--brycks-error-hover)",text:"var(--brycks-error-foreground)"},outline:{border:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},ghost:{hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},soft:{bg:"var(--brycks-error-muted)",hoverBg:"var(--brycks-error-soft-hover)",text:"var(--brycks-error-default)"},link:{text:"var(--brycks-error-default)",hoverText:"var(--brycks-error-hover)"}}};function m(b){const{variant:c,intent:u,size:l,fullWidth:k,isIconOnly:d}=b,a=v[l],o=f[u][c],n={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:a.gap,height:a.height,minWidth:d?a.height:void 0,width:k?"100%":void 0,padding:d?0:`0 ${a.paddingX}px`,fontSize:a.fontSize,fontWeight:s.componentFontWeight.medium,fontFamily:"var(--brycks-font-sans)",lineHeight:s.componentLineHeight.none,borderRadius:a.radius,border:"none",outline:"none",cursor:"pointer",userSelect:"none",textDecoration:"none",transition:h.transition.quick,WebkitTapHighlightColor:"transparent"};switch(c){case"solid":{const r=o;Object.assign(n,{backgroundColor:r.bg,color:r.text,boxShadow:"var(--brycks-shadow-xs)"});break}case"outline":{const r=o;Object.assign(n,{backgroundColor:"transparent",color:r.text,border:`1px solid ${r.border}`});break}case"ghost":{Object.assign(n,{backgroundColor:"transparent",color:o.text});break}case"soft":{const r=o;Object.assign(n,{backgroundColor:r.bg,color:r.text});break}case"link":{Object.assign(n,{backgroundColor:"transparent",color:o.text,height:"auto",padding:0,borderRadius:0});break}}const t={};switch(c){case"solid":{const r=o;t.backgroundColor=r.hoverBg,t.boxShadow="var(--brycks-shadow-sm)";break}case"outline":{const r=o;t.backgroundColor=r.hoverBg;break}case"ghost":{const r=o;t.backgroundColor=r.hoverBg;break}case"soft":{const r=o;t.backgroundColor=r.hoverBg;break}case"link":{const r=o;t.color=r.hoverText,t.textDecoration="underline";break}}const i={transform:c!=="link"?`scale(${g.scale.pressed})`:void 0};if(c==="solid"){const r=o;i.backgroundColor=r.activeBg,i.boxShadow="var(--brycks-shadow-xs)"}const y={opacity:g.stateOpacity.disabled,cursor:"not-allowed",pointerEvents:"none"};return{base:n,hover:t,active:i,disabled:y,loading:{cursor:"wait",pointerEvents:"none"}}}exports.getButtonStyles=m;exports.sizeConfig=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/transitions.cjs"),d=require("../../../design-system/primitives/typography.cjs"),v=require("../../../design-system/primitives/opacity.cjs"),g={xs:{height:e.componentHeights.xs,paddingX:e.componentPaddingX.xs,fontSize:"var(--brycks-fs-ui-xs)",iconSize:e.iconSizes.xs,gap:e.componentGap.xs,radius:"var(--brycks-radius-md)"},sm:{height:e.componentHeights.sm,paddingX:e.componentPaddingX.sm,fontSize:"var(--brycks-fs-ui-sm)",iconSize:e.iconSizes.sm,gap:e.componentGap.sm,radius:"var(--brycks-radius-md)"},md:{height:e.componentHeights.md,paddingX:e.componentPaddingX.md,fontSize:"var(--brycks-fs-ui-md)",iconSize:e.iconSizes.md,gap:e.componentGap.md,radius:"var(--brycks-radius-default)"},lg:{height:e.componentHeights.lg,paddingX:e.componentPaddingX.lg,fontSize:"var(--brycks-fs-ui-lg)",iconSize:e.iconSizes.lg,gap:e.componentGap.md,radius:"var(--brycks-radius-lg)"},xl:{height:e.componentHeights.xl,paddingX:e.componentPaddingX.xl,fontSize:"var(--brycks-fs-ui-xl)",iconSize:e.iconSizes.xl,gap:e.componentGap.lg,radius:"var(--brycks-radius-xl)"}},f={primary:{solid:{bg:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-hover)",activeBg:"var(--brycks-primary-active)",text:"var(--brycks-primary-foreground)"},outline:{border:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},ghost:{hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},soft:{bg:"var(--brycks-primary-muted)",hoverBg:"var(--brycks-primary-soft-hover)",text:"var(--brycks-primary-default)"},link:{text:"var(--brycks-primary-default)",hoverText:"var(--brycks-primary-hover)"}},accent:{solid:{bg:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-hover)",activeBg:"var(--brycks-accent-active)",text:"var(--brycks-accent-foreground)"},outline:{border:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},ghost:{hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},soft:{bg:"var(--brycks-accent-muted)",hoverBg:"var(--brycks-accent-soft-hover)",text:"var(--brycks-accent-default)"},link:{text:"var(--brycks-accent-default)",hoverText:"var(--brycks-accent-hover)"}},neutral:{solid:{bg:"var(--brycks-foreground-default)",hoverBg:"var(--brycks-foreground-muted)",activeBg:"var(--brycks-foreground-subtle)",text:"var(--brycks-background-app)"},outline:{border:"var(--brycks-border-strong)",hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},ghost:{hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},soft:{bg:"var(--brycks-background-muted)",hoverBg:"var(--brycks-background-subtle)",text:"var(--brycks-foreground-default)"},link:{text:"var(--brycks-foreground-default)",hoverText:"var(--brycks-foreground-muted)"}},success:{solid:{bg:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-hover)",activeBg:"var(--brycks-success-hover)",text:"var(--brycks-success-foreground)"},outline:{border:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},ghost:{hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},soft:{bg:"var(--brycks-success-muted)",hoverBg:"var(--brycks-success-soft-hover)",text:"var(--brycks-success-default)"},link:{text:"var(--brycks-success-default)",hoverText:"var(--brycks-success-hover)"}},warning:{solid:{bg:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-hover)",activeBg:"var(--brycks-warning-hover)",text:"var(--brycks-warning-foreground)"},outline:{border:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},ghost:{hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},soft:{bg:"var(--brycks-warning-muted)",hoverBg:"var(--brycks-warning-soft-hover)",text:"var(--brycks-warning-default)"},link:{text:"var(--brycks-warning-default)",hoverText:"var(--brycks-warning-hover)"}},error:{solid:{bg:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-hover)",activeBg:"var(--brycks-error-hover)",text:"var(--brycks-error-foreground)"},outline:{border:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},ghost:{hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},soft:{bg:"var(--brycks-error-muted)",hoverBg:"var(--brycks-error-soft-hover)",text:"var(--brycks-error-default)"},link:{text:"var(--brycks-error-default)",hoverText:"var(--brycks-error-hover)"}}};function m(b){const{variant:c,intent:u,size:l,fullWidth:k,isIconOnly:i}=b,s=g[l],o=f[u][c],a={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:s.gap,height:s.height,minWidth:i?s.height:void 0,width:k?"100%":void 0,padding:i?0:`0 ${s.paddingX}px`,fontSize:s.fontSize,fontWeight:d.componentFontWeight.medium,fontFamily:"var(--brycks-font-sans)",lineHeight:d.componentLineHeight.none,borderRadius:s.radius,border:"none",outline:"none",cursor:"pointer",userSelect:"none",textDecoration:"none",transition:h.transition.quick,WebkitTapHighlightColor:"transparent"};switch(c){case"solid":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text,boxShadow:"var(--brycks-shadow-xs)"});break}case"outline":{const r=o;Object.assign(a,{backgroundColor:"transparent",color:r.text,border:`1px solid ${r.border}`});break}case"ghost":{Object.assign(a,{backgroundColor:"transparent",color:o.text});break}case"soft":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text});break}case"link":{Object.assign(a,{backgroundColor:"transparent",color:o.text,height:"auto",padding:0,borderRadius:0});break}}const t={};switch(c){case"solid":{const r=o;t.backgroundColor=r.hoverBg,t.boxShadow="var(--brycks-shadow-sm)";break}case"outline":{const r=o;t.backgroundColor=r.hoverBg;break}case"ghost":{const r=o;t.backgroundColor=r.hoverBg;break}case"soft":{const r=o;t.backgroundColor=r.hoverBg;break}case"link":{const r=o;t.color=r.hoverText,t.textDecoration="underline";break}}const n={transform:c!=="link"?`scale(${v.scale.pressed})`:void 0};if(c==="solid"){const r=o;n.backgroundColor=r.activeBg,n.boxShadow="var(--brycks-shadow-xs)"}const y={opacity:v.stateOpacity.disabled,cursor:"not-allowed",pointerEvents:"none"};return{base:a,hover:t,active:n,disabled:y,loading:{cursor:"wait",pointerEvents:"none"}}}exports.getButtonStyles=m;exports.sizeConfig=g;
 //# sourceMappingURL=Button.styles.cjs.map

package/dist/components/primitives/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  iconSizes,\r\n  componentFontSize,\r\n  componentFontWeight,\r\n  componentLineHeight,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\n\r\n/** Size dimension values - derived from design system primitives */\r\nconst sizeConfig: Record<\r\n  ButtonSize,\r\n  {\r\n    height: number\r\n    paddingX: number\r\n    fontSize: number\r\n    iconSize: number\r\n    gap: number\r\n    radius: string\r\n  }\r\n> = {\r\n  xs: {\r\n    height: componentHeights.xs,\r\n    paddingX: componentPaddingX.xs,\r\n    fontSize: componentFontSize.xs,\r\n    iconSize: iconSizes.xs,\r\n    gap: componentGap.xs,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    fontSize: componentFontSize.sm,\r\n    iconSize: iconSizes.sm,\r\n    gap: componentGap.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    paddingX: componentPaddingX.md,\r\n    fontSize: componentFontSize.md,\r\n    iconSize: iconSizes.md,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    fontSize: componentFontSize.lg,\r\n    iconSize: iconSizes.lg,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n  xl: {\r\n    height: componentHeights.xl,\r\n    paddingX: componentPaddingX.xl,\r\n    fontSize: componentFontSize.xl,\r\n    iconSize: iconSizes.xl,\r\n    gap: componentGap.lg,\r\n    radius: 'var(--brycks-radius-xl)',\r\n  },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n  ButtonIntent,\r\n  {\r\n    solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    outline: { border: string; hoverBg: string; text: string }\r\n    ghost: { hoverBg: string; text: string }\r\n    soft: { bg: string; hoverBg: string; text: string }\r\n    link: { text: string; hoverText: string }\r\n  }\r\n> = {\r\n  primary: {\r\n    solid: {\r\n      bg: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-hover)',\r\n      activeBg: 'var(--brycks-primary-active)',\r\n      text: 'var(--brycks-primary-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-primary-muted)',\r\n      hoverBg: 'var(--brycks-primary-soft-hover)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-primary-default)',\r\n      hoverText: 'var(--brycks-primary-hover)',\r\n    },\r\n  },\r\n  accent: {\r\n    solid: {\r\n      bg: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-hover)',\r\n      activeBg: 'var(--brycks-accent-active)',\r\n      text: 'var(--brycks-accent-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-accent-muted)',\r\n      hoverBg: 'var(--brycks-accent-soft-hover)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-accent-default)',\r\n      hoverText: 'var(--brycks-accent-hover)',\r\n    },\r\n  },\r\n  neutral: {\r\n    solid: {\r\n      bg: 'var(--brycks-foreground-default)',\r\n      hoverBg: 'var(--brycks-foreground-muted)',\r\n      activeBg: 'var(--brycks-foreground-subtle)',\r\n      text: 'var(--brycks-background-app)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-border-strong)',\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-background-muted)',\r\n      hoverBg: 'var(--brycks-background-subtle)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-foreground-default)',\r\n      hoverText: 'var(--brycks-foreground-muted)',\r\n    },\r\n  },\r\n  success: {\r\n    solid: {\r\n      bg: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-hover)',\r\n      activeBg: 'var(--brycks-success-hover)',\r\n      text: 'var(--brycks-success-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-success-muted)',\r\n      hoverBg: 'var(--brycks-success-soft-hover)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-success-default)',\r\n      hoverText: 'var(--brycks-success-hover)',\r\n    },\r\n  },\r\n  warning: {\r\n    solid: {\r\n      bg: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-hover)',\r\n      activeBg: 'var(--brycks-warning-hover)',\r\n      text: 'var(--brycks-warning-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-warning-muted)',\r\n      hoverBg: 'var(--brycks-warning-soft-hover)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-warning-default)',\r\n      hoverText: 'var(--brycks-warning-hover)',\r\n    },\r\n  },\r\n  error: {\r\n    solid: {\r\n      bg: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-hover)',\r\n      activeBg: 'var(--brycks-error-hover)',\r\n      text: 'var(--brycks-error-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-error-muted)',\r\n      hoverBg: 'var(--brycks-error-soft-hover)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-error-default)',\r\n      hoverText: 'var(--brycks-error-hover)',\r\n    },\r\n  },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n  variant: ButtonVariant\r\n  intent: ButtonIntent\r\n  size: ButtonSize\r\n  fullWidth?: boolean\r\n  isIconOnly?: boolean\r\n  isDisabled?: boolean\r\n  isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n  base: CSSProperties\r\n  hover: CSSProperties\r\n  active: CSSProperties\r\n  disabled: CSSProperties\r\n  loading: CSSProperties\r\n} {\r\n  const { variant, intent, size, fullWidth, isIconOnly } = props\r\n  const sizeValues = sizeConfig[size]\r\n  const colors = intentColors[intent][variant]\r\n\r\n  // Base styles common to all buttons\r\n  const base: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    gap: sizeValues.gap,\r\n    height: sizeValues.height,\r\n    minWidth: isIconOnly ? sizeValues.height : undefined,\r\n    width: fullWidth ? '100%' : undefined,\r\n    padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n    fontSize: sizeValues.fontSize,\r\n    fontWeight: componentFontWeight.medium,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: componentLineHeight.none,\r\n    borderRadius: sizeValues.radius,\r\n    border: 'none',\r\n    outline: 'none',\r\n    cursor: 'pointer',\r\n    userSelect: 'none',\r\n    textDecoration: 'none',\r\n    transition: transition.quick,\r\n    WebkitTapHighlightColor: 'transparent',\r\n  }\r\n\r\n  // Apply variant-specific base styles\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: solidColors.bg,\r\n        color: solidColors.text,\r\n        boxShadow: 'var(--brycks-shadow-xs)',\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: outlineColors.text,\r\n        border: `1px solid ${outlineColors.border}`,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: ghostColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: softColors.bg,\r\n        color: softColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: linkColors.text,\r\n        height: 'auto',\r\n        padding: 0,\r\n        borderRadius: 0,\r\n      })\r\n      break\r\n    }\r\n  }\r\n\r\n  // Hover styles\r\n  const hover: CSSProperties = {}\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      hover.backgroundColor = solidColors.hoverBg\r\n      hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n      break\r\n    }\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = outlineColors.hoverBg\r\n      break\r\n    }\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      hover.backgroundColor = ghostColors.hoverBg\r\n      break\r\n    }\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = softColors.hoverBg\r\n      break\r\n    }\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      hover.color = linkColors.hoverText\r\n      hover.textDecoration = 'underline'\r\n      break\r\n    }\r\n  }\r\n\r\n  // Active/pressed styles\r\n  const active: CSSProperties = {\r\n    transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n  }\r\n  if (variant === 'solid') {\r\n    const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    active.backgroundColor = solidColors.activeBg\r\n    active.boxShadow = 'var(--brycks-shadow-xs)'\r\n  }\r\n\r\n  // Disabled styles\r\n  const disabled: CSSProperties = {\r\n    opacity: stateOpacity.disabled,\r\n    cursor: 'not-allowed',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  // Loading styles\r\n  const loading: CSSProperties = {\r\n    cursor: 'wait',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","componentFontSize","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  iconSizes,\r\n  componentFontWeight,\r\n  componentLineHeight,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\n\r\n/**\r\n * Size dimension values - derived from design system primitives\r\n * Uses CSS variables for font sizes to enable dynamic scaling\r\n */\r\nconst sizeConfig: Record<\r\n  ButtonSize,\r\n  {\r\n    height: number\r\n    paddingX: number\r\n    fontSize: string\r\n    iconSize: number\r\n    gap: number\r\n    radius: string\r\n  }\r\n> = {\r\n  xs: {\r\n    height: componentHeights.xs,\r\n    paddingX: componentPaddingX.xs,\r\n    fontSize: 'var(--brycks-fs-ui-xs)',\r\n    iconSize: iconSizes.xs,\r\n    gap: componentGap.xs,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    fontSize: 'var(--brycks-fs-ui-sm)',\r\n    iconSize: iconSizes.sm,\r\n    gap: componentGap.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    paddingX: componentPaddingX.md,\r\n    fontSize: 'var(--brycks-fs-ui-md)',\r\n    iconSize: iconSizes.md,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    fontSize: 'var(--brycks-fs-ui-lg)',\r\n    iconSize: iconSizes.lg,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n  xl: {\r\n    height: componentHeights.xl,\r\n    paddingX: componentPaddingX.xl,\r\n    fontSize: 'var(--brycks-fs-ui-xl)',\r\n    iconSize: iconSizes.xl,\r\n    gap: componentGap.lg,\r\n    radius: 'var(--brycks-radius-xl)',\r\n  },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n  ButtonIntent,\r\n  {\r\n    solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    outline: { border: string; hoverBg: string; text: string }\r\n    ghost: { hoverBg: string; text: string }\r\n    soft: { bg: string; hoverBg: string; text: string }\r\n    link: { text: string; hoverText: string }\r\n  }\r\n> = {\r\n  primary: {\r\n    solid: {\r\n      bg: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-hover)',\r\n      activeBg: 'var(--brycks-primary-active)',\r\n      text: 'var(--brycks-primary-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-primary-muted)',\r\n      hoverBg: 'var(--brycks-primary-soft-hover)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-primary-default)',\r\n      hoverText: 'var(--brycks-primary-hover)',\r\n    },\r\n  },\r\n  accent: {\r\n    solid: {\r\n      bg: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-hover)',\r\n      activeBg: 'var(--brycks-accent-active)',\r\n      text: 'var(--brycks-accent-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-accent-muted)',\r\n      hoverBg: 'var(--brycks-accent-soft-hover)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-accent-default)',\r\n      hoverText: 'var(--brycks-accent-hover)',\r\n    },\r\n  },\r\n  neutral: {\r\n    solid: {\r\n      bg: 'var(--brycks-foreground-default)',\r\n      hoverBg: 'var(--brycks-foreground-muted)',\r\n      activeBg: 'var(--brycks-foreground-subtle)',\r\n      text: 'var(--brycks-background-app)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-border-strong)',\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-background-muted)',\r\n      hoverBg: 'var(--brycks-background-subtle)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-foreground-default)',\r\n      hoverText: 'var(--brycks-foreground-muted)',\r\n    },\r\n  },\r\n  success: {\r\n    solid: {\r\n      bg: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-hover)',\r\n      activeBg: 'var(--brycks-success-hover)',\r\n      text: 'var(--brycks-success-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-success-muted)',\r\n      hoverBg: 'var(--brycks-success-soft-hover)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-success-default)',\r\n      hoverText: 'var(--brycks-success-hover)',\r\n    },\r\n  },\r\n  warning: {\r\n    solid: {\r\n      bg: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-hover)',\r\n      activeBg: 'var(--brycks-warning-hover)',\r\n      text: 'var(--brycks-warning-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-warning-muted)',\r\n      hoverBg: 'var(--brycks-warning-soft-hover)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-warning-default)',\r\n      hoverText: 'var(--brycks-warning-hover)',\r\n    },\r\n  },\r\n  error: {\r\n    solid: {\r\n      bg: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-hover)',\r\n      activeBg: 'var(--brycks-error-hover)',\r\n      text: 'var(--brycks-error-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-error-muted)',\r\n      hoverBg: 'var(--brycks-error-soft-hover)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-error-default)',\r\n      hoverText: 'var(--brycks-error-hover)',\r\n    },\r\n  },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n  variant: ButtonVariant\r\n  intent: ButtonIntent\r\n  size: ButtonSize\r\n  fullWidth?: boolean\r\n  isIconOnly?: boolean\r\n  isDisabled?: boolean\r\n  isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n  base: CSSProperties\r\n  hover: CSSProperties\r\n  active: CSSProperties\r\n  disabled: CSSProperties\r\n  loading: CSSProperties\r\n} {\r\n  const { variant, intent, size, fullWidth, isIconOnly } = props\r\n  const sizeValues = sizeConfig[size]\r\n  const colors = intentColors[intent][variant]\r\n\r\n  // Base styles common to all buttons\r\n  const base: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    gap: sizeValues.gap,\r\n    height: sizeValues.height,\r\n    minWidth: isIconOnly ? sizeValues.height : undefined,\r\n    width: fullWidth ? '100%' : undefined,\r\n    padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n    fontSize: sizeValues.fontSize,\r\n    fontWeight: componentFontWeight.medium,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: componentLineHeight.none,\r\n    borderRadius: sizeValues.radius,\r\n    border: 'none',\r\n    outline: 'none',\r\n    cursor: 'pointer',\r\n    userSelect: 'none',\r\n    textDecoration: 'none',\r\n    transition: transition.quick,\r\n    WebkitTapHighlightColor: 'transparent',\r\n  }\r\n\r\n  // Apply variant-specific base styles\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: solidColors.bg,\r\n        color: solidColors.text,\r\n        boxShadow: 'var(--brycks-shadow-xs)',\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: outlineColors.text,\r\n        border: `1px solid ${outlineColors.border}`,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: ghostColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: softColors.bg,\r\n        color: softColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: linkColors.text,\r\n        height: 'auto',\r\n        padding: 0,\r\n        borderRadius: 0,\r\n      })\r\n      break\r\n    }\r\n  }\r\n\r\n  // Hover styles\r\n  const hover: CSSProperties = {}\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      hover.backgroundColor = solidColors.hoverBg\r\n      hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n      break\r\n    }\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = outlineColors.hoverBg\r\n      break\r\n    }\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      hover.backgroundColor = ghostColors.hoverBg\r\n      break\r\n    }\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = softColors.hoverBg\r\n      break\r\n    }\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      hover.color = linkColors.hoverText\r\n      hover.textDecoration = 'underline'\r\n      break\r\n    }\r\n  }\r\n\r\n  // Active/pressed styles\r\n  const active: CSSProperties = {\r\n    transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n  }\r\n  if (variant === 'solid') {\r\n    const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    active.backgroundColor = solidColors.activeBg\r\n    active.boxShadow = 'var(--brycks-shadow-xs)'\r\n  }\r\n\r\n  // Disabled styles\r\n  const disabled: CSSProperties = {\r\n    opacity: stateOpacity.disabled,\r\n    cursor: 'not-allowed',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  // Loading styles\r\n  const loading: CSSProperties = {\r\n    cursor: 'wait',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}

package/dist/components/primitives/Button/Button.styles.js

@@ -1,12 +1,12 @@
 import { componentGap as c, iconSizes as n, componentPaddingX as i, componentHeights as d } from "../../../design-system/primitives/sizing.js";
-import { componentFontSize as v, componentLineHeight as f, componentFontWeight as m } from "../../../design-system/primitives/typography.js";
-import { transition as x } from "../../../design-system/primitives/transitions.js";
-import { stateOpacity as p, scale as B } from "../../../design-system/primitives/opacity.js";
-const C = {
+import { transition as h } from "../../../design-system/primitives/transitions.js";
+import { componentLineHeight as f, componentFontWeight as m } from "../../../design-system/primitives/typography.js";
+import { stateOpacity as x, scale as p } from "../../../design-system/primitives/opacity.js";
+const B = {
   xs: {
     height: d.xs,
     paddingX: i.xs,
-    fontSize: v.xs,
+    fontSize: "var(--brycks-fs-ui-xs)",
     iconSize: n.xs,
     gap: c.xs,
     radius: "var(--brycks-radius-md)"
@@ -14,7 +14,7 @@ const C = {
   sm: {
     height: d.sm,
     paddingX: i.sm,
-    fontSize: v.sm,
+    fontSize: "var(--brycks-fs-ui-sm)",
     iconSize: n.sm,
     gap: c.sm,
     radius: "var(--brycks-radius-md)"
@@ -22,7 +22,7 @@ const C = {
   md: {
     height: d.md,
     paddingX: i.md,
-    fontSize: v.md,
+    fontSize: "var(--brycks-fs-ui-md)",
     iconSize: n.md,
     gap: c.md,
     radius: "var(--brycks-radius-default)"
@@ -30,7 +30,7 @@ const C = {
   lg: {
     height: d.lg,
     paddingX: i.lg,
-    fontSize: v.lg,
+    fontSize: "var(--brycks-fs-ui-lg)",
     iconSize: n.lg,
     gap: c.md,
     radius: "var(--brycks-radius-lg)"
@@ -38,12 +38,12 @@ const C = {
   xl: {
     height: d.xl,
     paddingX: i.xl,
-    fontSize: v.xl,
+    fontSize: "var(--brycks-fs-ui-xl)",
     iconSize: n.xl,
     gap: c.lg,
     radius: "var(--brycks-radius-xl)"
   }
-}, w = {
+}, C = {
   primary: {
     solid: {
       bg: "var(--brycks-primary-default)",
@@ -201,16 +201,16 @@ const C = {
     }
   }
 };
-function j(l) {
-  const { variant: a, intent: u, size: k, fullWidth: y, isIconOnly: g } = l, t = C[k], e = w[u][a], s = {
+function X(g) {
+  const { variant: a, intent: u, size: l, fullWidth: k, isIconOnly: b } = g, t = B[l], e = C[u][a], s = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     gap: t.gap,
     height: t.height,
-    minWidth: g ? t.height : void 0,
-    width: y ? "100%" : void 0,
-    padding: g ? 0 : `0 ${t.paddingX}px`,
+    minWidth: b ? t.height : void 0,
+    width: k ? "100%" : void 0,
+    padding: b ? 0 : `0 ${t.paddingX}px`,
     fontSize: t.fontSize,
     fontWeight: m.medium,
     fontFamily: "var(--brycks-font-sans)",
@@ -221,7 +221,7 @@ function j(l) {
     cursor: "pointer",
     userSelect: "none",
     textDecoration: "none",
-    transition: x.quick,
+    transition: h.quick,
     WebkitTapHighlightColor: "transparent"
   };
   switch (a) {
@@ -297,25 +297,25 @@ function j(l) {
       break;
     }
   }
-  const b = {
-    transform: a !== "link" ? `scale(${B.pressed})` : void 0
+  const v = {
+    transform: a !== "link" ? `scale(${p.pressed})` : void 0
   };
   if (a === "solid") {
     const r = e;
-    b.backgroundColor = r.activeBg, b.boxShadow = "var(--brycks-shadow-xs)";
+    v.backgroundColor = r.activeBg, v.boxShadow = "var(--brycks-shadow-xs)";
   }
-  const h = {
-    opacity: p.disabled,
+  const y = {
+    opacity: x.disabled,
     cursor: "not-allowed",
     pointerEvents: "none"
   };
-  return { base: s, hover: o, active: b, disabled: h, loading: {
+  return { base: s, hover: o, active: v, disabled: y, loading: {
     cursor: "wait",
     pointerEvents: "none"
   } };
 }
 export {
-  j as getButtonStyles,
-  C as sizeConfig
+  X as getButtonStyles,
+  B as sizeConfig
 };
 //# sourceMappingURL=Button.styles.js.map

package/dist/components/primitives/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  iconSizes,\r\n  componentFontSize,\r\n  componentFontWeight,\r\n  componentLineHeight,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\n\r\n/** Size dimension values - derived from design system primitives */\r\nconst sizeConfig: Record<\r\n  ButtonSize,\r\n  {\r\n    height: number\r\n    paddingX: number\r\n    fontSize: number\r\n    iconSize: number\r\n    gap: number\r\n    radius: string\r\n  }\r\n> = {\r\n  xs: {\r\n    height: componentHeights.xs,\r\n    paddingX: componentPaddingX.xs,\r\n    fontSize: componentFontSize.xs,\r\n    iconSize: iconSizes.xs,\r\n    gap: componentGap.xs,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    fontSize: componentFontSize.sm,\r\n    iconSize: iconSizes.sm,\r\n    gap: componentGap.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    paddingX: componentPaddingX.md,\r\n    fontSize: componentFontSize.md,\r\n    iconSize: iconSizes.md,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    fontSize: componentFontSize.lg,\r\n    iconSize: iconSizes.lg,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n  xl: {\r\n    height: componentHeights.xl,\r\n    paddingX: componentPaddingX.xl,\r\n    fontSize: componentFontSize.xl,\r\n    iconSize: iconSizes.xl,\r\n    gap: componentGap.lg,\r\n    radius: 'var(--brycks-radius-xl)',\r\n  },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n  ButtonIntent,\r\n  {\r\n    solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    outline: { border: string; hoverBg: string; text: string }\r\n    ghost: { hoverBg: string; text: string }\r\n    soft: { bg: string; hoverBg: string; text: string }\r\n    link: { text: string; hoverText: string }\r\n  }\r\n> = {\r\n  primary: {\r\n    solid: {\r\n      bg: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-hover)',\r\n      activeBg: 'var(--brycks-primary-active)',\r\n      text: 'var(--brycks-primary-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-primary-muted)',\r\n      hoverBg: 'var(--brycks-primary-soft-hover)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-primary-default)',\r\n      hoverText: 'var(--brycks-primary-hover)',\r\n    },\r\n  },\r\n  accent: {\r\n    solid: {\r\n      bg: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-hover)',\r\n      activeBg: 'var(--brycks-accent-active)',\r\n      text: 'var(--brycks-accent-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-accent-muted)',\r\n      hoverBg: 'var(--brycks-accent-soft-hover)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-accent-default)',\r\n      hoverText: 'var(--brycks-accent-hover)',\r\n    },\r\n  },\r\n  neutral: {\r\n    solid: {\r\n      bg: 'var(--brycks-foreground-default)',\r\n      hoverBg: 'var(--brycks-foreground-muted)',\r\n      activeBg: 'var(--brycks-foreground-subtle)',\r\n      text: 'var(--brycks-background-app)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-border-strong)',\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-background-muted)',\r\n      hoverBg: 'var(--brycks-background-subtle)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-foreground-default)',\r\n      hoverText: 'var(--brycks-foreground-muted)',\r\n    },\r\n  },\r\n  success: {\r\n    solid: {\r\n      bg: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-hover)',\r\n      activeBg: 'var(--brycks-success-hover)',\r\n      text: 'var(--brycks-success-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-success-muted)',\r\n      hoverBg: 'var(--brycks-success-soft-hover)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-success-default)',\r\n      hoverText: 'var(--brycks-success-hover)',\r\n    },\r\n  },\r\n  warning: {\r\n    solid: {\r\n      bg: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-hover)',\r\n      activeBg: 'var(--brycks-warning-hover)',\r\n      text: 'var(--brycks-warning-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-warning-muted)',\r\n      hoverBg: 'var(--brycks-warning-soft-hover)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-warning-default)',\r\n      hoverText: 'var(--brycks-warning-hover)',\r\n    },\r\n  },\r\n  error: {\r\n    solid: {\r\n      bg: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-hover)',\r\n      activeBg: 'var(--brycks-error-hover)',\r\n      text: 'var(--brycks-error-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-error-muted)',\r\n      hoverBg: 'var(--brycks-error-soft-hover)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-error-default)',\r\n      hoverText: 'var(--brycks-error-hover)',\r\n    },\r\n  },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n  variant: ButtonVariant\r\n  intent: ButtonIntent\r\n  size: ButtonSize\r\n  fullWidth?: boolean\r\n  isIconOnly?: boolean\r\n  isDisabled?: boolean\r\n  isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n  base: CSSProperties\r\n  hover: CSSProperties\r\n  active: CSSProperties\r\n  disabled: CSSProperties\r\n  loading: CSSProperties\r\n} {\r\n  const { variant, intent, size, fullWidth, isIconOnly } = props\r\n  const sizeValues = sizeConfig[size]\r\n  const colors = intentColors[intent][variant]\r\n\r\n  // Base styles common to all buttons\r\n  const base: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    gap: sizeValues.gap,\r\n    height: sizeValues.height,\r\n    minWidth: isIconOnly ? sizeValues.height : undefined,\r\n    width: fullWidth ? '100%' : undefined,\r\n    padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n    fontSize: sizeValues.fontSize,\r\n    fontWeight: componentFontWeight.medium,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: componentLineHeight.none,\r\n    borderRadius: sizeValues.radius,\r\n    border: 'none',\r\n    outline: 'none',\r\n    cursor: 'pointer',\r\n    userSelect: 'none',\r\n    textDecoration: 'none',\r\n    transition: transition.quick,\r\n    WebkitTapHighlightColor: 'transparent',\r\n  }\r\n\r\n  // Apply variant-specific base styles\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: solidColors.bg,\r\n        color: solidColors.text,\r\n        boxShadow: 'var(--brycks-shadow-xs)',\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: outlineColors.text,\r\n        border: `1px solid ${outlineColors.border}`,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: ghostColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: softColors.bg,\r\n        color: softColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: linkColors.text,\r\n        height: 'auto',\r\n        padding: 0,\r\n        borderRadius: 0,\r\n      })\r\n      break\r\n    }\r\n  }\r\n\r\n  // Hover styles\r\n  const hover: CSSProperties = {}\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      hover.backgroundColor = solidColors.hoverBg\r\n      hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n      break\r\n    }\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = outlineColors.hoverBg\r\n      break\r\n    }\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      hover.backgroundColor = ghostColors.hoverBg\r\n      break\r\n    }\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = softColors.hoverBg\r\n      break\r\n    }\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      hover.color = linkColors.hoverText\r\n      hover.textDecoration = 'underline'\r\n      break\r\n    }\r\n  }\r\n\r\n  // Active/pressed styles\r\n  const active: CSSProperties = {\r\n    transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n  }\r\n  if (variant === 'solid') {\r\n    const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    active.backgroundColor = solidColors.activeBg\r\n    active.boxShadow = 'var(--brycks-shadow-xs)'\r\n  }\r\n\r\n  // Disabled styles\r\n  const disabled: CSSProperties = {\r\n    opacity: stateOpacity.disabled,\r\n    cursor: 'not-allowed',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  // Loading styles\r\n  const loading: CSSProperties = {\r\n    cursor: 'wait',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","componentFontSize","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  iconSizes,\r\n  componentFontWeight,\r\n  componentLineHeight,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\n\r\n/**\r\n * Size dimension values - derived from design system primitives\r\n * Uses CSS variables for font sizes to enable dynamic scaling\r\n */\r\nconst sizeConfig: Record<\r\n  ButtonSize,\r\n  {\r\n    height: number\r\n    paddingX: number\r\n    fontSize: string\r\n    iconSize: number\r\n    gap: number\r\n    radius: string\r\n  }\r\n> = {\r\n  xs: {\r\n    height: componentHeights.xs,\r\n    paddingX: componentPaddingX.xs,\r\n    fontSize: 'var(--brycks-fs-ui-xs)',\r\n    iconSize: iconSizes.xs,\r\n    gap: componentGap.xs,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    fontSize: 'var(--brycks-fs-ui-sm)',\r\n    iconSize: iconSizes.sm,\r\n    gap: componentGap.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    paddingX: componentPaddingX.md,\r\n    fontSize: 'var(--brycks-fs-ui-md)',\r\n    iconSize: iconSizes.md,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    fontSize: 'var(--brycks-fs-ui-lg)',\r\n    iconSize: iconSizes.lg,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n  xl: {\r\n    height: componentHeights.xl,\r\n    paddingX: componentPaddingX.xl,\r\n    fontSize: 'var(--brycks-fs-ui-xl)',\r\n    iconSize: iconSizes.xl,\r\n    gap: componentGap.lg,\r\n    radius: 'var(--brycks-radius-xl)',\r\n  },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n  ButtonIntent,\r\n  {\r\n    solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    outline: { border: string; hoverBg: string; text: string }\r\n    ghost: { hoverBg: string; text: string }\r\n    soft: { bg: string; hoverBg: string; text: string }\r\n    link: { text: string; hoverText: string }\r\n  }\r\n> = {\r\n  primary: {\r\n    solid: {\r\n      bg: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-hover)',\r\n      activeBg: 'var(--brycks-primary-active)',\r\n      text: 'var(--brycks-primary-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-primary-muted)',\r\n      hoverBg: 'var(--brycks-primary-soft-hover)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-primary-default)',\r\n      hoverText: 'var(--brycks-primary-hover)',\r\n    },\r\n  },\r\n  accent: {\r\n    solid: {\r\n      bg: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-hover)',\r\n      activeBg: 'var(--brycks-accent-active)',\r\n      text: 'var(--brycks-accent-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-accent-muted)',\r\n      hoverBg: 'var(--brycks-accent-soft-hover)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-accent-default)',\r\n      hoverText: 'var(--brycks-accent-hover)',\r\n    },\r\n  },\r\n  neutral: {\r\n    solid: {\r\n      bg: 'var(--brycks-foreground-default)',\r\n      hoverBg: 'var(--brycks-foreground-muted)',\r\n      activeBg: 'var(--brycks-foreground-subtle)',\r\n      text: 'var(--brycks-background-app)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-border-strong)',\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-background-muted)',\r\n      hoverBg: 'var(--brycks-background-subtle)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-foreground-default)',\r\n      hoverText: 'var(--brycks-foreground-muted)',\r\n    },\r\n  },\r\n  success: {\r\n    solid: {\r\n      bg: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-hover)',\r\n      activeBg: 'var(--brycks-success-hover)',\r\n      text: 'var(--brycks-success-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-success-muted)',\r\n      hoverBg: 'var(--brycks-success-soft-hover)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-success-default)',\r\n      hoverText: 'var(--brycks-success-hover)',\r\n    },\r\n  },\r\n  warning: {\r\n    solid: {\r\n      bg: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-hover)',\r\n      activeBg: 'var(--brycks-warning-hover)',\r\n      text: 'var(--brycks-warning-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-warning-muted)',\r\n      hoverBg: 'var(--brycks-warning-soft-hover)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-warning-default)',\r\n      hoverText: 'var(--brycks-warning-hover)',\r\n    },\r\n  },\r\n  error: {\r\n    solid: {\r\n      bg: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-hover)',\r\n      activeBg: 'var(--brycks-error-hover)',\r\n      text: 'var(--brycks-error-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-error-muted)',\r\n      hoverBg: 'var(--brycks-error-soft-hover)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-error-default)',\r\n      hoverText: 'var(--brycks-error-hover)',\r\n    },\r\n  },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n  variant: ButtonVariant\r\n  intent: ButtonIntent\r\n  size: ButtonSize\r\n  fullWidth?: boolean\r\n  isIconOnly?: boolean\r\n  isDisabled?: boolean\r\n  isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n  base: CSSProperties\r\n  hover: CSSProperties\r\n  active: CSSProperties\r\n  disabled: CSSProperties\r\n  loading: CSSProperties\r\n} {\r\n  const { variant, intent, size, fullWidth, isIconOnly } = props\r\n  const sizeValues = sizeConfig[size]\r\n  const colors = intentColors[intent][variant]\r\n\r\n  // Base styles common to all buttons\r\n  const base: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    gap: sizeValues.gap,\r\n    height: sizeValues.height,\r\n    minWidth: isIconOnly ? sizeValues.height : undefined,\r\n    width: fullWidth ? '100%' : undefined,\r\n    padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n    fontSize: sizeValues.fontSize,\r\n    fontWeight: componentFontWeight.medium,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: componentLineHeight.none,\r\n    borderRadius: sizeValues.radius,\r\n    border: 'none',\r\n    outline: 'none',\r\n    cursor: 'pointer',\r\n    userSelect: 'none',\r\n    textDecoration: 'none',\r\n    transition: transition.quick,\r\n    WebkitTapHighlightColor: 'transparent',\r\n  }\r\n\r\n  // Apply variant-specific base styles\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: solidColors.bg,\r\n        color: solidColors.text,\r\n        boxShadow: 'var(--brycks-shadow-xs)',\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: outlineColors.text,\r\n        border: `1px solid ${outlineColors.border}`,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: ghostColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: softColors.bg,\r\n        color: softColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: linkColors.text,\r\n        height: 'auto',\r\n        padding: 0,\r\n        borderRadius: 0,\r\n      })\r\n      break\r\n    }\r\n  }\r\n\r\n  // Hover styles\r\n  const hover: CSSProperties = {}\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      hover.backgroundColor = solidColors.hoverBg\r\n      hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n      break\r\n    }\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = outlineColors.hoverBg\r\n      break\r\n    }\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      hover.backgroundColor = ghostColors.hoverBg\r\n      break\r\n    }\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = softColors.hoverBg\r\n      break\r\n    }\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      hover.color = linkColors.hoverText\r\n      hover.textDecoration = 'underline'\r\n      break\r\n    }\r\n  }\r\n\r\n  // Active/pressed styles\r\n  const active: CSSProperties = {\r\n    transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n  }\r\n  if (variant === 'solid') {\r\n    const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    active.backgroundColor = solidColors.activeBg\r\n    active.boxShadow = 'var(--brycks-shadow-xs)'\r\n  }\r\n\r\n  // Disabled styles\r\n  const disabled: CSSProperties = {\r\n    opacity: stateOpacity.disabled,\r\n    cursor: 'not-allowed',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  // Loading styles\r\n  const loading: CSSProperties = {\r\n    cursor: 'wait',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}

package/dist/components/typography/Heading/Heading.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),c=require("../../../design-system/tokens/typography.cjs"),S=require("../../../utils/styles.cjs"),m={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6",display:"displayMedium",displayLarge:"displayLarge",displaySmall:"displaySmall"};function w(e){const i=e.level??2,a=e.size??i,l=m[a],n=c.textStyles[l],t={fontFamily:n.fontFamily,fontSize:n.fontSize,fontWeight:e.weight?c.fontWeights[e.weight]:n.fontWeight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,margin:0};return e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),t}const x=({as:e,level:i=2,className:a,style:l,children:n,testId:t,...o},d)=>{const h=e||`h${i}`,f=w({level:i,...o}),{size:H,weight:b,align:p,color:v,truncate:_,...u}=o;return r.jsx(h,{ref:d,className:S.cx("brycks-heading",`brycks-heading--${i}`,a),style:{...f,...l},"data-testid":t,...u,children:n})},s=y.forwardRef(x);s.displayName="Heading";const z=({size:e="display",...i},a)=>r.jsx(s,{ref:a,level:1,size:e,...i}),g=y.forwardRef(z);g.displayName="Display";exports.Display=g;exports.Heading=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),y=require("../../../design-system/tokens/typography.cjs"),m=require("../../../utils/styles.cjs"),S={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6",display:"displayMedium",displayLarge:"displayLarge",displaySmall:"displaySmall"},b={h1:"var(--brycks-fs-h1)",h2:"var(--brycks-fs-h2)",h3:"var(--brycks-fs-h3)",h4:"var(--brycks-fs-h4)",h5:"var(--brycks-fs-h5)",h6:"var(--brycks-fs-h6)",displayLarge:"var(--brycks-fs-display-lg)",displayMedium:"var(--brycks-fs-display-md)",displaySmall:"var(--brycks-fs-display-sm)"};function v(e){const s=e.level??2,a=e.size??s,l=S[a],i=y.textStyles[l],n=b[l],t={fontFamily:i.fontFamily,fontSize:n,fontWeight:e.weight?y.fontWeights[e.weight]:i.fontWeight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,margin:0};return e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),t}const k=({as:e,level:s=2,className:a,style:l,children:i,testId:n,...t},h)=>{const g=e||`h${s}`,f=v({level:s,...t}),{size:w,weight:x,align:z,color:H,truncate:_,...u}=t;return c.jsx(g,{ref:h,className:m.cx("brycks-heading",`brycks-heading--${s}`,a),style:{...f,...l},"data-testid":n,...u,children:i})},r=o.forwardRef(k);r.displayName="Heading";const p=({size:e="display",...s},a)=>c.jsx(r,{ref:a,level:1,size:e,...s}),d=o.forwardRef(p);d.displayName="Display";exports.Display=d;exports.Heading=r;
 //# sourceMappingURL=Heading.cjs.map

package/dist/components/typography/Heading/Heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.cjs","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  textStyles,\r\n  type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Heading level (1-6) - determines semantic element and default styling */\r\n  level?: HeadingLevel\r\n  /** Visual size override - use a different visual style than the semantic level */\r\n  size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n  /** Font weight override */\r\n  weight?: FontWeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n  <E extends ElementType = 'h2'>(\r\n    props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'displayLarge'\r\n  | 'displayMedium'\r\n  | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n  1: 'h1',\r\n  2: 'h2',\r\n  3: 'h3',\r\n  4: 'h4',\r\n  5: 'h5',\r\n  6: 'h6',\r\n  display: 'displayMedium',\r\n  displayLarge: 'displayLarge',\r\n  displaySmall: 'displaySmall',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n  const level = props.level ?? 2\r\n  const visualSize = props.size ?? level\r\n  const styleKey = sizeToStyleMap[visualSize]\r\n  const baseStyles = textStyles[styleKey]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize: baseStyles.fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n    margin: 0,\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n  { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || (`h${level}` as ElementType)\r\n  const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n      style={{ ...headingStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n  { size = 'display', ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":"yOAsEMA,EAAyE,CAC7E,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,QAAS,gBACT,aAAc,eACd,aAAc,cAChB,EAEA,SAASC,EAAmBC,EAAuC,CACjE,MAAMC,EAAQD,EAAM,OAAS,EACvBE,EAAaF,EAAM,MAAQC,EAC3BE,EAAWL,EAAeI,CAAU,EACpCE,EAAaC,EAAAA,WAAWF,CAAQ,EAEhCG,EAAwB,CAC5B,WAAYF,EAAW,WACvB,SAAUA,EAAW,SACrB,WAAYJ,EAAM,OAASO,EAAAA,YAAYP,EAAM,MAAM,EAAII,EAAW,WAClE,WAAYA,EAAW,WACvB,cAAeA,EAAW,cAC1B,OAAQ,CAAA,EAGV,OAAIJ,EAAM,QAAOM,EAAO,UAAYN,EAAM,OACtCA,EAAM,QAAOM,EAAO,MAAQN,EAAM,OAElCA,EAAM,WACRM,EAAO,SAAW,SAClBA,EAAO,aAAe,WACtBA,EAAO,WAAa,UAGfA,CACT,CAEA,MAAME,EAAe,CACnB,CAAE,GAAAC,EAAI,MAAAR,EAAQ,EAAG,UAAAS,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGb,CAAA,EACxDc,IACG,CACH,MAAMC,EAAYN,GAAO,IAAIR,CAAK,GAC5Be,EAAgBjB,EAAmB,CAAE,MAAAE,EAAO,GAAGD,EAA0B,EAGzE,CACJ,KAAMiB,EACN,OAAQC,EACR,MAAOC,EACP,MAAOC,EACP,SAAUC,EACV,GAAGC,CAAA,EACDtB,EAEJ,OACEuB,EAAAA,IAACR,EAAA,CACC,IAAAD,EACA,UAAWU,EAAAA,GAAG,iBAAkB,mBAAmBvB,CAAK,GAAIS,CAAS,EACrE,MAAO,CAAE,GAAGM,EAAe,GAAGL,CAAA,EAC9B,cAAaE,EACZ,GAAGS,EAEH,SAAAV,CAAA,CAAA,CAGP,EAEaa,EAAUC,EAAAA,WAAWlB,CAAY,EAE9CiB,EAAQ,YAAc,UAGtB,MAAME,EAAe,CACnB,CAAE,KAAAC,EAAO,UAAW,GAAG5B,CAAA,EACvBc,UAEQW,EAAA,CAAQ,IAAAX,EAAoD,MAAO,EAAG,KAAAc,EAAa,GAAI5B,EAA8B,EAGlH6B,EAAUH,EAAAA,WAAWC,CAAY,EAE9CE,EAAQ,YAAc"}
+{"version":3,"file":"Heading.cjs","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  textStyles,\r\n  type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Heading level (1-6) - determines semantic element and default styling */\r\n  level?: HeadingLevel\r\n  /** Visual size override - use a different visual style than the semantic level */\r\n  size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n  /** Font weight override */\r\n  weight?: FontWeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n  <E extends ElementType = 'h2'>(\r\n    props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'displayLarge'\r\n  | 'displayMedium'\r\n  | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n  1: 'h1',\r\n  2: 'h2',\r\n  3: 'h3',\r\n  4: 'h4',\r\n  5: 'h5',\r\n  6: 'h6',\r\n  display: 'displayMedium',\r\n  displayLarge: 'displayLarge',\r\n  displaySmall: 'displaySmall',\r\n}\r\n\r\n/**\r\n * Maps style keys to CSS variables for font-size\r\n * Uses --brycks-fs-h* for headings and --brycks-fs-display-* for display\r\n */\r\nconst styleKeyToFontSizeVar: Record<StyleKey, string> = {\r\n  h1: 'var(--brycks-fs-h1)',\r\n  h2: 'var(--brycks-fs-h2)',\r\n  h3: 'var(--brycks-fs-h3)',\r\n  h4: 'var(--brycks-fs-h4)',\r\n  h5: 'var(--brycks-fs-h5)',\r\n  h6: 'var(--brycks-fs-h6)',\r\n  displayLarge: 'var(--brycks-fs-display-lg)',\r\n  displayMedium: 'var(--brycks-fs-display-md)',\r\n  displaySmall: 'var(--brycks-fs-display-sm)',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n  const level = props.level ?? 2\r\n  const visualSize = props.size ?? level\r\n  const styleKey = sizeToStyleMap[visualSize]\r\n  const baseStyles = textStyles[styleKey]\r\n\r\n  // Use CSS variables for font-size to enable dynamic scaling\r\n  const fontSize = styleKeyToFontSizeVar[styleKey]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n    margin: 0,\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n  { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || (`h${level}` as ElementType)\r\n  const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n      style={{ ...headingStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n  { size = 'display', ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","styleKeyToFontSizeVar","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","fontSize","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":"yOAuEMA,EAAyE,CAC7E,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,EAAG,KACH,QAAS,gBACT,aAAc,eACd,aAAc,cAChB,EAMMC,EAAkD,CACtD,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,aAAc,8BACd,cAAe,8BACf,aAAc,6BAChB,EAEA,SAASC,EAAmBC,EAAuC,CACjE,MAAMC,EAAQD,EAAM,OAAS,EACvBE,EAAaF,EAAM,MAAQC,EAC3BE,EAAWN,EAAeK,CAAU,EACpCE,EAAaC,EAAAA,WAAWF,CAAQ,EAGhCG,EAAWR,EAAsBK,CAAQ,EAEzCI,EAAwB,CAC5B,WAAYH,EAAW,WACvB,SAAAE,EACA,WAAYN,EAAM,OAASQ,EAAAA,YAAYR,EAAM,MAAM,EAAII,EAAW,WAClE,WAAYA,EAAW,WACvB,cAAeA,EAAW,cAC1B,OAAQ,CAAA,EAGV,OAAIJ,EAAM,QAAOO,EAAO,UAAYP,EAAM,OACtCA,EAAM,QAAOO,EAAO,MAAQP,EAAM,OAElCA,EAAM,WACRO,EAAO,SAAW,SAClBA,EAAO,aAAe,WACtBA,EAAO,WAAa,UAGfA,CACT,CAEA,MAAME,EAAe,CACnB,CAAE,GAAAC,EAAI,MAAAT,EAAQ,EAAG,UAAAU,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGd,CAAA,EACxDe,IACG,CACH,MAAMC,EAAYN,GAAO,IAAIT,CAAK,GAC5BgB,EAAgBlB,EAAmB,CAAE,MAAAE,EAAO,GAAGD,EAA0B,EAGzE,CACJ,KAAMkB,EACN,OAAQC,EACR,MAAOC,EACP,MAAOC,EACP,SAAUC,EACV,GAAGC,CAAA,EACDvB,EAEJ,OACEwB,EAAAA,IAACR,EAAA,CACC,IAAAD,EACA,UAAWU,EAAAA,GAAG,iBAAkB,mBAAmBxB,CAAK,GAAIU,CAAS,EACrE,MAAO,CAAE,GAAGM,EAAe,GAAGL,CAAA,EAC9B,cAAaE,EACZ,GAAGS,EAEH,SAAAV,CAAA,CAAA,CAGP,EAEaa,EAAUC,EAAAA,WAAWlB,CAAY,EAE9CiB,EAAQ,YAAc,UAGtB,MAAME,EAAe,CACnB,CAAE,KAAAC,EAAO,UAAW,GAAG7B,CAAA,EACvBe,UAEQW,EAAA,CAAQ,IAAAX,EAAoD,MAAO,EAAG,KAAAc,EAAa,GAAI7B,EAA8B,EAGlH8B,EAAUH,EAAAA,WAAWC,CAAY,EAE9CE,EAAQ,YAAc"}

package/dist/components/typography/Heading/Heading.js

@@ -1,8 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
 import { textStyles as f, fontWeights as m } from "../../../design-system/tokens/typography.js";
 import { cx as S } from "../../../utils/styles.js";
-const u = {
+const b = {
   1: "h1",
   2: "h2",
   3: "h3",
@@ -12,44 +12,54 @@ const u = {
   display: "displayMedium",
   displayLarge: "displayLarge",
   displaySmall: "displaySmall"
+}, v = {
+  h1: "var(--brycks-fs-h1)",
+  h2: "var(--brycks-fs-h2)",
+  h3: "var(--brycks-fs-h3)",
+  h4: "var(--brycks-fs-h4)",
+  h5: "var(--brycks-fs-h5)",
+  h6: "var(--brycks-fs-h6)",
+  displayLarge: "var(--brycks-fs-display-lg)",
+  displayMedium: "var(--brycks-fs-display-md)",
+  displaySmall: "var(--brycks-fs-display-sm)"
 };
-function w(e) {
-  const i = e.level ?? 2, l = e.size ?? i, a = u[l], n = f[a], t = {
-    fontFamily: n.fontFamily,
-    fontSize: n.fontSize,
-    fontWeight: e.weight ? m[e.weight] : n.fontWeight,
-    lineHeight: n.lineHeight,
-    letterSpacing: n.letterSpacing,
+function p(e) {
+  const i = e.level ?? 2, a = e.size ?? i, l = b[a], s = f[l], n = v[l], t = {
+    fontFamily: s.fontFamily,
+    fontSize: n,
+    fontWeight: e.weight ? m[e.weight] : s.fontWeight,
+    lineHeight: s.lineHeight,
+    letterSpacing: s.letterSpacing,
     margin: 0
   };
   return e.align && (t.textAlign = e.align), e.color && (t.color = e.color), e.truncate && (t.overflow = "hidden", t.textOverflow = "ellipsis", t.whiteSpace = "nowrap"), t;
 }
-const z = ({ as: e, level: i = 2, className: l, style: a, children: n, testId: t, ...s }, g) => {
-  const y = e || `h${i}`, d = w({ level: i, ...s }), {
-    size: H,
-    weight: _,
-    align: b,
-    color: v,
+const k = ({ as: e, level: i = 2, className: a, style: l, children: s, testId: n, ...t }, c) => {
+  const h = e || `h${i}`, d = p({ level: i, ...t }), {
+    size: z,
+    weight: x,
+    align: H,
+    color: _,
     truncate: D,
-    ...h
-  } = s;
-  return /* @__PURE__ */ o(
-    y,
+    ...g
+  } = t;
+  return /* @__PURE__ */ r(
+    h,
     {
-      ref: g,
-      className: S("brycks-heading", `brycks-heading--${i}`, l),
-      style: { ...d, ...a },
-      "data-testid": t,
-      ...h,
-      children: n
+      ref: c,
+      className: S("brycks-heading", `brycks-heading--${i}`, a),
+      style: { ...d, ...l },
+      "data-testid": n,
+      ...g,
+      children: s
     }
   );
-}, r = c(z);
-r.displayName = "Heading";
-const p = ({ size: e = "display", ...i }, l) => /* @__PURE__ */ o(r, { ref: l, level: 1, size: e, ...i }), x = c(p);
-x.displayName = "Display";
+}, y = o(k);
+y.displayName = "Heading";
+const u = ({ size: e = "display", ...i }, a) => /* @__PURE__ */ r(y, { ref: a, level: 1, size: e, ...i }), w = o(u);
+w.displayName = "Display";
 export {
-  x as Display,
-  r as Heading
+  w as Display,
+  y as Heading
 };
 //# sourceMappingURL=Heading.js.map

package/dist/components/typography/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  textStyles,\r\n  type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Heading level (1-6) - determines semantic element and default styling */\r\n  level?: HeadingLevel\r\n  /** Visual size override - use a different visual style than the semantic level */\r\n  size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n  /** Font weight override */\r\n  weight?: FontWeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n  <E extends ElementType = 'h2'>(\r\n    props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'displayLarge'\r\n  | 'displayMedium'\r\n  | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n  1: 'h1',\r\n  2: 'h2',\r\n  3: 'h3',\r\n  4: 'h4',\r\n  5: 'h5',\r\n  6: 'h6',\r\n  display: 'displayMedium',\r\n  displayLarge: 'displayLarge',\r\n  displaySmall: 'displaySmall',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n  const level = props.level ?? 2\r\n  const visualSize = props.size ?? level\r\n  const styleKey = sizeToStyleMap[visualSize]\r\n  const baseStyles = textStyles[styleKey]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize: baseStyles.fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n    margin: 0,\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n  { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || (`h${level}` as ElementType)\r\n  const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n      style={{ ...headingStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n  { size = 'display', ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":";;;;AAsEA,MAAMA,IAAyE;AAAA,EAC7E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAChB;AAEA,SAASC,EAAmBC,GAAuC;AACjE,QAAMC,IAAQD,EAAM,SAAS,GACvBE,IAAaF,EAAM,QAAQC,GAC3BE,IAAWL,EAAeI,CAAU,GACpCE,IAAaC,EAAWF,CAAQ,GAEhCG,IAAwB;AAAA,IAC5B,YAAYF,EAAW;AAAA,IACvB,UAAUA,EAAW;AAAA,IACrB,YAAYJ,EAAM,SAASO,EAAYP,EAAM,MAAM,IAAII,EAAW;AAAA,IAClE,YAAYA,EAAW;AAAA,IACvB,eAAeA,EAAW;AAAA,IAC1B,QAAQ;AAAA,EAAA;AAGV,SAAIJ,EAAM,UAAOM,EAAO,YAAYN,EAAM,QACtCA,EAAM,UAAOM,EAAO,QAAQN,EAAM,QAElCA,EAAM,aACRM,EAAO,WAAW,UAClBA,EAAO,eAAe,YACtBA,EAAO,aAAa,WAGfA;AACT;AAEA,MAAME,IAAe,CACnB,EAAE,IAAAC,GAAI,OAAAR,IAAQ,GAAG,WAAAS,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGb,EAAA,GACxDc,MACG;AACH,QAAMC,IAAYN,KAAO,IAAIR,CAAK,IAC5Be,IAAgBjB,EAAmB,EAAE,OAAAE,GAAO,GAAGD,GAA0B,GAGzE;AAAA,IACJ,MAAMiB;AAAA,IACN,QAAQC;AAAA,IACR,OAAOC;AAAA,IACP,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,GAAGC;AAAA,EAAA,IACDtB;AAEJ,SACE,gBAAAuB;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWU,EAAG,kBAAkB,mBAAmBvB,CAAK,IAAIS,CAAS;AAAA,MACrE,OAAO,EAAE,GAAGM,GAAe,GAAGL,EAAA;AAAA,MAC9B,eAAaE;AAAA,MACZ,GAAGS;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaa,IAAUC,EAAWlB,CAAY;AAE9CiB,EAAQ,cAAc;AAGtB,MAAME,IAAe,CACnB,EAAE,MAAAC,IAAO,WAAW,GAAG5B,EAAA,GACvBc,wBAEQW,GAAA,EAAQ,KAAAX,GAAoD,OAAO,GAAG,MAAAc,GAAa,GAAI5B,GAA8B,GAGlH6B,IAAUH,EAAWC,CAAY;AAE9CE,EAAQ,cAAc;"}
+{"version":3,"file":"Heading.js","sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["/**\r\n * Heading Component\r\n *\r\n * Semantic heading component with consistent typography styles.\r\n * Maps heading levels (h1-h6) to appropriate visual styles.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  textStyles,\r\n  type FontWeight,\r\n} from '../../../design-system/tokens/typography'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\nexport interface HeadingOwnProps {\r\n  /** The element type to render */\r\n  as?: ElementType\r\n  /** Heading level (1-6) - determines semantic element and default styling */\r\n  level?: HeadingLevel\r\n  /** Visual size override - use a different visual style than the semantic level */\r\n  size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall'\r\n  /** Font weight override */\r\n  weight?: FontWeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>\r\n\r\ninterface HeadingComponent {\r\n  <E extends ElementType = 'h2'>(\r\n    props: HeadingProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\ntype StyleKey =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'displayLarge'\r\n  | 'displayMedium'\r\n  | 'displaySmall'\r\n\r\nconst sizeToStyleMap: Record<NonNullable<HeadingOwnProps['size']>, StyleKey> = {\r\n  1: 'h1',\r\n  2: 'h2',\r\n  3: 'h3',\r\n  4: 'h4',\r\n  5: 'h5',\r\n  6: 'h6',\r\n  display: 'displayMedium',\r\n  displayLarge: 'displayLarge',\r\n  displaySmall: 'displaySmall',\r\n}\r\n\r\n/**\r\n * Maps style keys to CSS variables for font-size\r\n * Uses --brycks-fs-h* for headings and --brycks-fs-display-* for display\r\n */\r\nconst styleKeyToFontSizeVar: Record<StyleKey, string> = {\r\n  h1: 'var(--brycks-fs-h1)',\r\n  h2: 'var(--brycks-fs-h2)',\r\n  h3: 'var(--brycks-fs-h3)',\r\n  h4: 'var(--brycks-fs-h4)',\r\n  h5: 'var(--brycks-fs-h5)',\r\n  h6: 'var(--brycks-fs-h6)',\r\n  displayLarge: 'var(--brycks-fs-display-lg)',\r\n  displayMedium: 'var(--brycks-fs-display-md)',\r\n  displaySmall: 'var(--brycks-fs-display-sm)',\r\n}\r\n\r\nfunction buildHeadingStyles(props: HeadingOwnProps): CSSProperties {\r\n  const level = props.level ?? 2\r\n  const visualSize = props.size ?? level\r\n  const styleKey = sizeToStyleMap[visualSize]\r\n  const baseStyles = textStyles[styleKey]\r\n\r\n  // Use CSS variables for font-size to enable dynamic scaling\r\n  const fontSize = styleKeyToFontSizeVar[styleKey]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n    margin: 0,\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst HeadingInner = <E extends ElementType = 'h2'>(\r\n  { as, level = 2, className, style, children, testId, ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || (`h${level}` as ElementType)\r\n  const headingStyles = buildHeadingStyles({ level, ...props } as HeadingOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-heading', `brycks-heading--${level}`, className)}\r\n      style={{ ...headingStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Heading = forwardRef(HeadingInner) as HeadingComponent\r\n\r\nHeading.displayName = 'Heading'\r\n\r\n/** Display heading for hero sections */\r\nconst DisplayInner = <E extends ElementType = 'h1'>(\r\n  { size = 'display', ...props }: HeadingProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Heading ref={ref as React.ForwardedRef<HTMLHeadingElement>} level={1} size={size} {...(props as HeadingProps<'h1'>)} />\r\n}\r\n\r\nexport const Display = forwardRef(DisplayInner) as HeadingComponent\r\n\r\nDisplay.displayName = 'Display'\r\n"],"names":["sizeToStyleMap","styleKeyToFontSizeVar","buildHeadingStyles","props","level","visualSize","styleKey","baseStyles","textStyles","fontSize","styles","fontWeights","HeadingInner","as","className","style","children","testId","ref","Component","headingStyles","_size","_weight","_align","_color","_truncate","rest","jsx","cx","Heading","forwardRef","DisplayInner","size","Display"],"mappings":";;;;AAuEA,MAAMA,IAAyE;AAAA,EAC7E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS;AAAA,EACT,cAAc;AAAA,EACd,cAAc;AAChB,GAMMC,IAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAChB;AAEA,SAASC,EAAmBC,GAAuC;AACjE,QAAMC,IAAQD,EAAM,SAAS,GACvBE,IAAaF,EAAM,QAAQC,GAC3BE,IAAWN,EAAeK,CAAU,GACpCE,IAAaC,EAAWF,CAAQ,GAGhCG,IAAWR,EAAsBK,CAAQ,GAEzCI,IAAwB;AAAA,IAC5B,YAAYH,EAAW;AAAA,IACvB,UAAAE;AAAA,IACA,YAAYN,EAAM,SAASQ,EAAYR,EAAM,MAAM,IAAII,EAAW;AAAA,IAClE,YAAYA,EAAW;AAAA,IACvB,eAAeA,EAAW;AAAA,IAC1B,QAAQ;AAAA,EAAA;AAGV,SAAIJ,EAAM,UAAOO,EAAO,YAAYP,EAAM,QACtCA,EAAM,UAAOO,EAAO,QAAQP,EAAM,QAElCA,EAAM,aACRO,EAAO,WAAW,UAClBA,EAAO,eAAe,YACtBA,EAAO,aAAa,WAGfA;AACT;AAEA,MAAME,IAAe,CACnB,EAAE,IAAAC,GAAI,OAAAT,IAAQ,GAAG,WAAAU,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGd,EAAA,GACxDe,MACG;AACH,QAAMC,IAAYN,KAAO,IAAIT,CAAK,IAC5BgB,IAAgBlB,EAAmB,EAAE,OAAAE,GAAO,GAAGD,GAA0B,GAGzE;AAAA,IACJ,MAAMkB;AAAA,IACN,QAAQC;AAAA,IACR,OAAOC;AAAA,IACP,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,GAAGC;AAAA,EAAA,IACDvB;AAEJ,SACE,gBAAAwB;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWU,EAAG,kBAAkB,mBAAmBxB,CAAK,IAAIU,CAAS;AAAA,MACrE,OAAO,EAAE,GAAGM,GAAe,GAAGL,EAAA;AAAA,MAC9B,eAAaE;AAAA,MACZ,GAAGS;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaa,IAAUC,EAAWlB,CAAY;AAE9CiB,EAAQ,cAAc;AAGtB,MAAME,IAAe,CACnB,EAAE,MAAAC,IAAO,WAAW,GAAG7B,EAAA,GACvBe,wBAEQW,GAAA,EAAQ,KAAAX,GAAoD,OAAO,GAAG,MAAAc,GAAa,GAAI7B,GAA8B,GAGlH8B,IAAUH,EAAWC,CAAY;AAE9CE,EAAQ,cAAc;"}

package/dist/components/typography/Text/Text.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),u=require("../../../utils/styles.cjs"),n=require("../../../design-system/tokens/typography.cjs"),a=require("../../../design-system/tokens/spacing.cjs"),c={body:{element:"p",styles:n.textStyles.bodyDefault},bodyLarge:{element:"p",styles:n.textStyles.bodyLarge},bodySmall:{element:"p",styles:n.textStyles.bodySmall},label:{element:"span",styles:n.textStyles.label},caption:{element:"span",styles:n.textStyles.caption},overline:{element:"span",styles:n.textStyles.overline},code:{element:"code",styles:n.textStyles.code}};function S(e){const i=e.variant??"body",l=c[i].styles,t={fontFamily:l.fontFamily,fontSize:e.size?n.fontSizes[e.size]:l.fontSize,fontWeight:e.weight?n.fontWeights[e.weight]:l.fontWeight,lineHeight:e.leading?n.lineHeights[e.leading]:l.lineHeight,letterSpacing:l.letterSpacing};return"textTransform"in l&&(t.textTransform=l.textTransform),e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),e.lineClamp&&(t.display="-webkit-box",t.WebkitLineClamp=e.lineClamp,t.WebkitBoxOrient="vertical",t.overflow="hidden"),t}const h=({as:e,variant:i="body",className:l,style:t,children:y,testId:g,...s},x)=>{const b=e||c[i].element,f=S({variant:i,...s}),{size:k,weight:z,leading:R,align:_,color:j,truncate:q,lineClamp:O,...m}=s;return o.jsx(b,{ref:x,className:u.cx("brycks-text",`brycks-text--${i}`,l),style:{...f,...t},"data-testid":g,...m,children:y})},w=r.forwardRef(h),d=Object.assign(w,{displayName:"Text"}),C=(e,i)=>o.jsx(d,{...e,ref:i,variant:"code",style:{backgroundColor:"var(--brycks-background-muted)",padding:`${a.spacing[.5]}px ${a.spacing[1.5]}px`,borderRadius:"var(--brycks-radius-sm)",...e.style}}),v=r.forwardRef(C),T=Object.assign(v,{displayName:"Code"});exports.Code=T;exports.Text=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("react"),v=require("../../../utils/styles.cjs"),s=require("../../../design-system/tokens/typography.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),k={body:"var(--brycks-fs-body-md)",bodyLarge:"var(--brycks-fs-body-lg)",bodySmall:"var(--brycks-fs-body-base)",label:"var(--brycks-fs-body-sm)",caption:"var(--brycks-fs-body-xs)",overline:"var(--brycks-fs-body-xs)",code:"var(--brycks-fs-body-sm)"},u={xs:"var(--brycks-fs-body-xs)",sm:"var(--brycks-fs-body-sm)",base:"var(--brycks-fs-body-base)",md:"var(--brycks-fs-body-md)",lg:"var(--brycks-fs-body-lg)",xl:"var(--brycks-fs-h6)","2xl":"var(--brycks-fs-h5)","3xl":"var(--brycks-fs-h4)","4xl":"var(--brycks-fs-h3)","5xl":"var(--brycks-fs-h2)","6xl":"var(--brycks-fs-h1)","7xl":"var(--brycks-fs-display-sm)","8xl":"var(--brycks-fs-display-md)","9xl":"var(--brycks-fs-display-lg)"},c={body:{element:"p",styles:s.textStyles.bodyDefault},bodyLarge:{element:"p",styles:s.textStyles.bodyLarge},bodySmall:{element:"p",styles:s.textStyles.bodySmall},label:{element:"span",styles:s.textStyles.label},caption:{element:"span",styles:s.textStyles.caption},overline:{element:"span",styles:s.textStyles.overline},code:{element:"code",styles:s.textStyles.code}};function S(e){const l=e.variant??"body",a=c[l].styles,r=e.size?u[e.size]:k[l],t={fontFamily:a.fontFamily,fontSize:r,fontWeight:e.weight?s.fontWeights[e.weight]:a.fontWeight,lineHeight:e.leading?s.lineHeights[e.leading]:a.lineHeight,letterSpacing:a.letterSpacing};return"textTransform"in a&&(t.textTransform=a.textTransform),e.align&&(t.textAlign=e.align),e.color&&(t.color=e.color),e.truncate&&(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"),e.lineClamp&&(t.display="-webkit-box",t.WebkitLineClamp=e.lineClamp,t.WebkitBoxOrient="vertical",t.overflow="hidden"),t}const h=({as:e,variant:l="body",className:a,style:r,children:t,testId:d,...n},f)=>{const x=e||c[l].element,g=S({variant:l,...n}),{size:R,weight:_,leading:j,align:p,color:q,truncate:F,lineClamp:O,...m}=n;return i.jsx(x,{ref:f,className:v.cx("brycks-text",`brycks-text--${l}`,a),style:{...g,...r},"data-testid":d,...m,children:t})},w=y.forwardRef(h),b=Object.assign(w,{displayName:"Text"}),C=(e,l)=>i.jsx(b,{...e,ref:l,variant:"code",style:{backgroundColor:"var(--brycks-background-muted)",padding:`${o.spacing[.5]}px ${o.spacing[1.5]}px`,borderRadius:"var(--brycks-radius-sm)",...e.style}}),T=y.forwardRef(C),z=Object.assign(T,{displayName:"Code"});exports.Code=z;exports.Text=b;
 //# sourceMappingURL=Text.cjs.map

package/dist/components/typography/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["/**\r\n * Text Component\r\n *\r\n * A polymorphic text component for rendering body text with consistent styling.\r\n * Supports all text styles from the design system.\r\n * All values derive from design system - NO hardcoded values.\r\n *\r\n * @module components/typography/Text\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontSizes,\r\n  fontWeights,\r\n  lineHeights,\r\n  textStyles,\r\n  spacing,\r\n  type FontSize,\r\n  type FontWeight,\r\n  type LineHeight,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport interface TextOwnProps {\r\n  /** Text style preset */\r\n  variant?: 'body' | 'bodyLarge' | 'bodySmall' | 'label' | 'caption' | 'overline' | 'code'\r\n  /** Font size */\r\n  size?: FontSize\r\n  /** Font weight */\r\n  weight?: FontWeight\r\n  /** Line height */\r\n  leading?: LineHeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Max number of lines before truncating */\r\n  lineClamp?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type TextProps<E extends ElementType = 'p'> = TextOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps> & {\r\n    /** The element type to render */\r\n    as?: E\r\n  }\r\n\r\ntype TextComponent = <E extends ElementType = 'p'>(\r\n  props: TextProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n) => React.JSX.Element | null\r\n\r\nconst variantMap: Record<\r\n  NonNullable<TextOwnProps['variant']>,\r\n  { element: ElementType; styles: CSSProperties }\r\n> = {\r\n  body: { element: 'p', styles: textStyles.bodyDefault },\r\n  bodyLarge: { element: 'p', styles: textStyles.bodyLarge },\r\n  bodySmall: { element: 'p', styles: textStyles.bodySmall },\r\n  label: { element: 'span', styles: textStyles.label },\r\n  caption: { element: 'span', styles: textStyles.caption },\r\n  overline: { element: 'span', styles: textStyles.overline },\r\n  code: { element: 'code', styles: textStyles.code },\r\n}\r\n\r\nfunction buildTextStyles(props: TextOwnProps): CSSProperties {\r\n  const variant = props.variant ?? 'body'\r\n  const baseStyles = variantMap[variant].styles\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize: props.size ? fontSizes[props.size] : baseStyles.fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: props.leading ? lineHeights[props.leading] : baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n  }\r\n\r\n  if ('textTransform' in baseStyles) {\r\n    styles.textTransform = baseStyles.textTransform\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  if (props.lineClamp) {\r\n    styles.display = '-webkit-box'\r\n    styles.WebkitLineClamp = props.lineClamp\r\n    styles.WebkitBoxOrient = 'vertical'\r\n    styles.overflow = 'hidden'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst TextInner = <E extends ElementType = 'p'>(\r\n  { as, variant = 'body', className, style, children, testId, ...props }: TextProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || variantMap[variant].element\r\n  const builtTextStyles = buildTextStyles({ variant, ...props } as TextOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    leading: _leading,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    lineClamp: _lineClamp,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-text', `brycks-text--${variant}`, className)}\r\n      style={{ ...builtTextStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nconst TextForwardRef = forwardRef(TextInner) as TextComponent\r\nexport const Text = Object.assign(TextForwardRef, { displayName: 'Text' })\r\n\r\n/** Monospace code text shorthand */\r\nconst CodeInner = (\r\n  props: Omit<TextProps<'code'>, 'variant'>,\r\n  ref: React.ForwardedRef<HTMLElement>\r\n) => {\r\n  return (\r\n    <Text\r\n      {...props}\r\n      ref={ref as ComponentPropsWithRef<'p'>['ref']}\r\n      variant=\"code\"\r\n      style={{\r\n        backgroundColor: 'var(--brycks-background-muted)',\r\n        padding: `${spacing[0.5]}px ${spacing[1.5]}px`,\r\n        borderRadius: 'var(--brycks-radius-sm)',\r\n        ...props.style,\r\n      }}\r\n    />\r\n  )\r\n}\r\n\r\nconst CodeForwardRef = forwardRef(CodeInner) as TextComponent\r\nexport const Code = Object.assign(CodeForwardRef, { displayName: 'Code' })\r\n"],"names":["variantMap","textStyles","buildTextStyles","props","variant","baseStyles","styles","fontSizes","fontWeights","lineHeights","TextInner","as","className","style","children","testId","ref","Component","builtTextStyles","_size","_weight","_leading","_align","_color","_truncate","_lineClamp","rest","jsx","cx","TextForwardRef","forwardRef","Text","CodeInner","spacing","CodeForwardRef","Code"],"mappings":"gSAmEMA,EAGF,CACF,KAAM,CAAE,QAAS,IAAK,OAAQC,EAAAA,WAAW,WAAA,EACzC,UAAW,CAAE,QAAS,IAAK,OAAQA,EAAAA,WAAW,SAAA,EAC9C,UAAW,CAAE,QAAS,IAAK,OAAQA,EAAAA,WAAW,SAAA,EAC9C,MAAO,CAAE,QAAS,OAAQ,OAAQA,EAAAA,WAAW,KAAA,EAC7C,QAAS,CAAE,QAAS,OAAQ,OAAQA,EAAAA,WAAW,OAAA,EAC/C,SAAU,CAAE,QAAS,OAAQ,OAAQA,EAAAA,WAAW,QAAA,EAChD,KAAM,CAAE,QAAS,OAAQ,OAAQA,EAAAA,WAAW,IAAA,CAC9C,EAEA,SAASC,EAAgBC,EAAoC,CAC3D,MAAMC,EAAUD,EAAM,SAAW,OAC3BE,EAAaL,EAAWI,CAAO,EAAE,OAEjCE,EAAwB,CAC5B,WAAYD,EAAW,WACvB,SAAUF,EAAM,KAAOI,EAAAA,UAAUJ,EAAM,IAAI,EAAIE,EAAW,SAC1D,WAAYF,EAAM,OAASK,EAAAA,YAAYL,EAAM,MAAM,EAAIE,EAAW,WAClE,WAAYF,EAAM,QAAUM,EAAAA,YAAYN,EAAM,OAAO,EAAIE,EAAW,WACpE,cAAeA,EAAW,aAAA,EAG5B,MAAI,kBAAmBA,IACrBC,EAAO,cAAgBD,EAAW,eAGhCF,EAAM,QAAOG,EAAO,UAAYH,EAAM,OACtCA,EAAM,QAAOG,EAAO,MAAQH,EAAM,OAElCA,EAAM,WACRG,EAAO,SAAW,SAClBA,EAAO,aAAe,WACtBA,EAAO,WAAa,UAGlBH,EAAM,YACRG,EAAO,QAAU,cACjBA,EAAO,gBAAkBH,EAAM,UAC/BG,EAAO,gBAAkB,WACzBA,EAAO,SAAW,UAGbA,CACT,CAEA,MAAMI,EAAY,CAChB,CAAE,GAAAC,EAAI,QAAAP,EAAU,OAAQ,UAAAQ,EAAW,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,GAAGZ,CAAA,EAC/Da,IACG,CACH,MAAMC,EAAYN,GAAMX,EAAWI,CAAO,EAAE,QACtCc,EAAkBhB,EAAgB,CAAE,QAAAE,EAAS,GAAGD,EAAuB,EAGvE,CACJ,KAAMgB,EACN,OAAQC,EACR,QAASC,EACT,MAAOC,EACP,MAAOC,EACP,SAAUC,EACV,UAAWC,EACX,GAAGC,CAAA,EACDvB,EAEJ,OACEwB,EAAAA,IAACV,EAAA,CACC,IAAAD,EACA,UAAWY,EAAAA,GAAG,cAAe,gBAAgBxB,CAAO,GAAIQ,CAAS,EACjE,MAAO,CAAE,GAAGM,EAAiB,GAAGL,CAAA,EAChC,cAAaE,EACZ,GAAGW,EAEH,SAAAZ,CAAA,CAAA,CAGP,EAEMe,EAAiBC,EAAAA,WAAWpB,CAAS,EAC9BqB,EAAO,OAAO,OAAOF,EAAgB,CAAE,YAAa,OAAQ,EAGnEG,EAAY,CAChB7B,EACAa,IAGEW,EAAAA,IAACI,EAAA,CACE,GAAG5B,EACJ,IAAAa,EACA,QAAQ,OACR,MAAO,CACL,gBAAiB,iCACjB,QAAS,GAAGiB,EAAAA,QAAQ,EAAG,CAAC,MAAMA,EAAAA,QAAQ,GAAG,CAAC,KAC1C,aAAc,0BACd,GAAG9B,EAAM,KAAA,CACX,CAAA,EAKA+B,EAAiBJ,EAAAA,WAAWE,CAAS,EAC9BG,EAAO,OAAO,OAAOD,EAAgB,CAAE,YAAa,OAAQ"}
+{"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["/**\r\n * Text Component\r\n *\r\n * A polymorphic text component for rendering body text with consistent styling.\r\n * Supports all text styles from the design system.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n *\r\n * @module components/typography/Text\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  lineHeights,\r\n  textStyles,\r\n  spacing,\r\n  type FontSize,\r\n  type FontWeight,\r\n  type LineHeight,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport interface TextOwnProps {\r\n  /** Text style preset */\r\n  variant?: 'body' | 'bodyLarge' | 'bodySmall' | 'label' | 'caption' | 'overline' | 'code'\r\n  /** Font size */\r\n  size?: FontSize\r\n  /** Font weight */\r\n  weight?: FontWeight\r\n  /** Line height */\r\n  leading?: LineHeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Max number of lines before truncating */\r\n  lineClamp?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type TextProps<E extends ElementType = 'p'> = TextOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps> & {\r\n    /** The element type to render */\r\n    as?: E\r\n  }\r\n\r\ntype TextComponent = <E extends ElementType = 'p'>(\r\n  props: TextProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n) => React.JSX.Element | null\r\n\r\n/**\r\n * Maps variant to CSS variable for font-size\r\n * Uses --brycks-fs-body-* for body text variants\r\n */\r\nconst variantFontSizeVar: Record<NonNullable<TextOwnProps['variant']>, string> = {\r\n  body: 'var(--brycks-fs-body-md)',\r\n  bodyLarge: 'var(--brycks-fs-body-lg)',\r\n  bodySmall: 'var(--brycks-fs-body-base)',\r\n  label: 'var(--brycks-fs-body-sm)',\r\n  caption: 'var(--brycks-fs-body-xs)',\r\n  overline: 'var(--brycks-fs-body-xs)',\r\n  code: 'var(--brycks-fs-body-sm)',\r\n}\r\n\r\n/**\r\n * Maps FontSize to CSS variable\r\n */\r\nconst fontSizeToCssVar: Record<FontSize, string> = {\r\n  xs: 'var(--brycks-fs-body-xs)',\r\n  sm: 'var(--brycks-fs-body-sm)',\r\n  base: 'var(--brycks-fs-body-base)',\r\n  md: 'var(--brycks-fs-body-md)',\r\n  lg: 'var(--brycks-fs-body-lg)',\r\n  xl: 'var(--brycks-fs-h6)',\r\n  '2xl': 'var(--brycks-fs-h5)',\r\n  '3xl': 'var(--brycks-fs-h4)',\r\n  '4xl': 'var(--brycks-fs-h3)',\r\n  '5xl': 'var(--brycks-fs-h2)',\r\n  '6xl': 'var(--brycks-fs-h1)',\r\n  '7xl': 'var(--brycks-fs-display-sm)',\r\n  '8xl': 'var(--brycks-fs-display-md)',\r\n  '9xl': 'var(--brycks-fs-display-lg)',\r\n}\r\n\r\nconst variantMap: Record<\r\n  NonNullable<TextOwnProps['variant']>,\r\n  { element: ElementType; styles: CSSProperties }\r\n> = {\r\n  body: { element: 'p', styles: textStyles.bodyDefault },\r\n  bodyLarge: { element: 'p', styles: textStyles.bodyLarge },\r\n  bodySmall: { element: 'p', styles: textStyles.bodySmall },\r\n  label: { element: 'span', styles: textStyles.label },\r\n  caption: { element: 'span', styles: textStyles.caption },\r\n  overline: { element: 'span', styles: textStyles.overline },\r\n  code: { element: 'code', styles: textStyles.code },\r\n}\r\n\r\nfunction buildTextStyles(props: TextOwnProps): CSSProperties {\r\n  const variant = props.variant ?? 'body'\r\n  const baseStyles = variantMap[variant].styles\r\n\r\n  // Use CSS variables for font-size to enable dynamic scaling\r\n  const fontSize = props.size\r\n    ? fontSizeToCssVar[props.size]\r\n    : variantFontSizeVar[variant]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: props.leading ? lineHeights[props.leading] : baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n  }\r\n\r\n  if ('textTransform' in baseStyles) {\r\n    styles.textTransform = baseStyles.textTransform\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  if (props.lineClamp) {\r\n    styles.display = '-webkit-box'\r\n    styles.WebkitLineClamp = props.lineClamp\r\n    styles.WebkitBoxOrient = 'vertical'\r\n    styles.overflow = 'hidden'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst TextInner = <E extends ElementType = 'p'>(\r\n  { as, variant = 'body', className, style, children, testId, ...props }: TextProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || variantMap[variant].element\r\n  const builtTextStyles = buildTextStyles({ variant, ...props } as TextOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    leading: _leading,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    lineClamp: _lineClamp,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-text', `brycks-text--${variant}`, className)}\r\n      style={{ ...builtTextStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nconst TextForwardRef = forwardRef(TextInner) as TextComponent\r\nexport const Text = Object.assign(TextForwardRef, { displayName: 'Text' })\r\n\r\n/** Monospace code text shorthand */\r\nconst CodeInner = (\r\n  props: Omit<TextProps<'code'>, 'variant'>,\r\n  ref: React.ForwardedRef<HTMLElement>\r\n) => {\r\n  return (\r\n    <Text\r\n      {...props}\r\n      ref={ref as ComponentPropsWithRef<'p'>['ref']}\r\n      variant=\"code\"\r\n      style={{\r\n        backgroundColor: 'var(--brycks-background-muted)',\r\n        padding: `${spacing[0.5]}px ${spacing[1.5]}px`,\r\n        borderRadius: 'var(--brycks-radius-sm)',\r\n        ...props.style,\r\n      }}\r\n    />\r\n  )\r\n}\r\n\r\nconst CodeForwardRef = forwardRef(CodeInner) as TextComponent\r\nexport const Code = Object.assign(CodeForwardRef, { displayName: 'Code' })\r\n"],"names":["variantFontSizeVar","fontSizeToCssVar","variantMap","textStyles","buildTextStyles","props","variant","baseStyles","fontSize","styles","fontWeights","lineHeights","TextInner","as","className","style","children","testId","ref","Component","builtTextStyles","_size","_weight","_leading","_align","_color","_truncate","_lineClamp","rest","jsx","cx","TextForwardRef","forwardRef","Text","CodeInner","spacing","CodeForwardRef","Code"],"mappings":"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"}

package/dist/components/typography/Text/Text.js

@@ -1,9 +1,32 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
 import { cx as x } from "../../../utils/styles.js";
-import { textStyles as l, lineHeights as u, fontWeights as h, fontSizes as w } from "../../../design-system/tokens/typography.js";
-import { spacing as a } from "../../../design-system/tokens/spacing.js";
-const c = {
+import { textStyles as l, lineHeights as v, fontWeights as k } from "../../../design-system/tokens/typography.js";
+import { spacing as o } from "../../../design-system/tokens/spacing.js";
+const h = {
+  body: "var(--brycks-fs-body-md)",
+  bodyLarge: "var(--brycks-fs-body-lg)",
+  bodySmall: "var(--brycks-fs-body-base)",
+  label: "var(--brycks-fs-body-sm)",
+  caption: "var(--brycks-fs-body-xs)",
+  overline: "var(--brycks-fs-body-xs)",
+  code: "var(--brycks-fs-body-sm)"
+}, u = {
+  xs: "var(--brycks-fs-body-xs)",
+  sm: "var(--brycks-fs-body-sm)",
+  base: "var(--brycks-fs-body-base)",
+  md: "var(--brycks-fs-body-md)",
+  lg: "var(--brycks-fs-body-lg)",
+  xl: "var(--brycks-fs-h6)",
+  "2xl": "var(--brycks-fs-h5)",
+  "3xl": "var(--brycks-fs-h4)",
+  "4xl": "var(--brycks-fs-h3)",
+  "5xl": "var(--brycks-fs-h2)",
+  "6xl": "var(--brycks-fs-h1)",
+  "7xl": "var(--brycks-fs-display-sm)",
+  "8xl": "var(--brycks-fs-display-md)",
+  "9xl": "var(--brycks-fs-display-lg)"
+}, c = {
   body: { element: "p", styles: l.bodyDefault },
   bodyLarge: { element: "p", styles: l.bodyLarge },
   bodySmall: { element: "p", styles: l.bodySmall },
@@ -12,54 +35,54 @@ const c = {
   overline: { element: "span", styles: l.overline },
   code: { element: "code", styles: l.code }
 };
-function S(e) {
-  const i = e.variant ?? "body", n = c[i].styles, t = {
-    fontFamily: n.fontFamily,
-    fontSize: e.size ? w[e.size] : n.fontSize,
-    fontWeight: e.weight ? h[e.weight] : n.fontWeight,
-    lineHeight: e.leading ? u[e.leading] : n.lineHeight,
-    letterSpacing: n.letterSpacing
+function w(e) {
+  const s = e.variant ?? "body", a = c[s].styles, r = e.size ? u[e.size] : h[s], t = {
+    fontFamily: a.fontFamily,
+    fontSize: r,
+    fontWeight: e.weight ? k[e.weight] : a.fontWeight,
+    lineHeight: e.leading ? v[e.leading] : a.lineHeight,
+    letterSpacing: a.letterSpacing
   };
-  return "textTransform" in n && (t.textTransform = n.textTransform), e.align && (t.textAlign = e.align), e.color && (t.color = e.color), e.truncate && (t.overflow = "hidden", t.textOverflow = "ellipsis", t.whiteSpace = "nowrap"), e.lineClamp && (t.display = "-webkit-box", t.WebkitLineClamp = e.lineClamp, t.WebkitBoxOrient = "vertical", t.overflow = "hidden"), t;
+  return "textTransform" in a && (t.textTransform = a.textTransform), e.align && (t.textAlign = e.align), e.color && (t.color = e.color), e.truncate && (t.overflow = "hidden", t.textOverflow = "ellipsis", t.whiteSpace = "nowrap"), e.lineClamp && (t.display = "-webkit-box", t.WebkitLineClamp = e.lineClamp, t.WebkitBoxOrient = "vertical", t.overflow = "hidden"), t;
 }
-const C = ({ as: e, variant: i = "body", className: n, style: t, children: d, testId: m, ...o }, y) => {
-  const f = e || c[i].element, g = S({ variant: i, ...o }), {
+const S = ({ as: e, variant: s = "body", className: a, style: r, children: t, testId: b, ...n }, d) => {
+  const f = e || c[s].element, m = w({ variant: s, ...n }), {
     size: _,
-    weight: W,
-    leading: F,
-    align: O,
-    color: R,
-    truncate: j,
-    lineClamp: p,
-    ...b
-  } = o;
-  return /* @__PURE__ */ s(
+    weight: F,
+    leading: W,
+    align: L,
+    color: O,
+    truncate: R,
+    lineClamp: j,
+    ...g
+  } = n;
+  return /* @__PURE__ */ i(
     f,
     {
-      ref: y,
-      className: x("brycks-text", `brycks-text--${i}`, n),
-      style: { ...g, ...t },
-      "data-testid": m,
-      ...b,
-      children: d
+      ref: d,
+      className: x("brycks-text", `brycks-text--${s}`, a),
+      style: { ...m, ...r },
+      "data-testid": b,
+      ...g,
+      children: t
     }
   );
-}, v = r(C), k = Object.assign(v, { displayName: "Text" }), T = (e, i) => /* @__PURE__ */ s(
-  k,
+}, C = y(S), T = Object.assign(C, { displayName: "Text" }), p = (e, s) => /* @__PURE__ */ i(
+  T,
   {
     ...e,
-    ref: i,
+    ref: s,
     variant: "code",
     style: {
       backgroundColor: "var(--brycks-background-muted)",
-      padding: `${a[0.5]}px ${a[1.5]}px`,
+      padding: `${o[0.5]}px ${o[1.5]}px`,
       borderRadius: "var(--brycks-radius-sm)",
       ...e.style
     }
   }
-), z = r(T), A = Object.assign(z, { displayName: "Code" });
+), z = y(p), A = Object.assign(z, { displayName: "Code" });
 export {
   A as Code,
-  k as Text
+  T as Text
 };
 //# sourceMappingURL=Text.js.map

package/dist/components/typography/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["/**\r\n * Text Component\r\n *\r\n * A polymorphic text component for rendering body text with consistent styling.\r\n * Supports all text styles from the design system.\r\n * All values derive from design system - NO hardcoded values.\r\n *\r\n * @module components/typography/Text\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontSizes,\r\n  fontWeights,\r\n  lineHeights,\r\n  textStyles,\r\n  spacing,\r\n  type FontSize,\r\n  type FontWeight,\r\n  type LineHeight,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport interface TextOwnProps {\r\n  /** Text style preset */\r\n  variant?: 'body' | 'bodyLarge' | 'bodySmall' | 'label' | 'caption' | 'overline' | 'code'\r\n  /** Font size */\r\n  size?: FontSize\r\n  /** Font weight */\r\n  weight?: FontWeight\r\n  /** Line height */\r\n  leading?: LineHeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Max number of lines before truncating */\r\n  lineClamp?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type TextProps<E extends ElementType = 'p'> = TextOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps> & {\r\n    /** The element type to render */\r\n    as?: E\r\n  }\r\n\r\ntype TextComponent = <E extends ElementType = 'p'>(\r\n  props: TextProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n) => React.JSX.Element | null\r\n\r\nconst variantMap: Record<\r\n  NonNullable<TextOwnProps['variant']>,\r\n  { element: ElementType; styles: CSSProperties }\r\n> = {\r\n  body: { element: 'p', styles: textStyles.bodyDefault },\r\n  bodyLarge: { element: 'p', styles: textStyles.bodyLarge },\r\n  bodySmall: { element: 'p', styles: textStyles.bodySmall },\r\n  label: { element: 'span', styles: textStyles.label },\r\n  caption: { element: 'span', styles: textStyles.caption },\r\n  overline: { element: 'span', styles: textStyles.overline },\r\n  code: { element: 'code', styles: textStyles.code },\r\n}\r\n\r\nfunction buildTextStyles(props: TextOwnProps): CSSProperties {\r\n  const variant = props.variant ?? 'body'\r\n  const baseStyles = variantMap[variant].styles\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize: props.size ? fontSizes[props.size] : baseStyles.fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: props.leading ? lineHeights[props.leading] : baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n  }\r\n\r\n  if ('textTransform' in baseStyles) {\r\n    styles.textTransform = baseStyles.textTransform\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  if (props.lineClamp) {\r\n    styles.display = '-webkit-box'\r\n    styles.WebkitLineClamp = props.lineClamp\r\n    styles.WebkitBoxOrient = 'vertical'\r\n    styles.overflow = 'hidden'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst TextInner = <E extends ElementType = 'p'>(\r\n  { as, variant = 'body', className, style, children, testId, ...props }: TextProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || variantMap[variant].element\r\n  const builtTextStyles = buildTextStyles({ variant, ...props } as TextOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    leading: _leading,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    lineClamp: _lineClamp,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-text', `brycks-text--${variant}`, className)}\r\n      style={{ ...builtTextStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nconst TextForwardRef = forwardRef(TextInner) as TextComponent\r\nexport const Text = Object.assign(TextForwardRef, { displayName: 'Text' })\r\n\r\n/** Monospace code text shorthand */\r\nconst CodeInner = (\r\n  props: Omit<TextProps<'code'>, 'variant'>,\r\n  ref: React.ForwardedRef<HTMLElement>\r\n) => {\r\n  return (\r\n    <Text\r\n      {...props}\r\n      ref={ref as ComponentPropsWithRef<'p'>['ref']}\r\n      variant=\"code\"\r\n      style={{\r\n        backgroundColor: 'var(--brycks-background-muted)',\r\n        padding: `${spacing[0.5]}px ${spacing[1.5]}px`,\r\n        borderRadius: 'var(--brycks-radius-sm)',\r\n        ...props.style,\r\n      }}\r\n    />\r\n  )\r\n}\r\n\r\nconst CodeForwardRef = forwardRef(CodeInner) as TextComponent\r\nexport const Code = Object.assign(CodeForwardRef, { displayName: 'Code' })\r\n"],"names":["variantMap","textStyles","buildTextStyles","props","variant","baseStyles","styles","fontSizes","fontWeights","lineHeights","TextInner","as","className","style","children","testId","ref","Component","builtTextStyles","_size","_weight","_leading","_align","_color","_truncate","_lineClamp","rest","jsx","cx","TextForwardRef","forwardRef","Text","CodeInner","spacing","CodeForwardRef","Code"],"mappings":";;;;;AAmEA,MAAMA,IAGF;AAAA,EACF,MAAM,EAAE,SAAS,KAAK,QAAQC,EAAW,YAAA;AAAA,EACzC,WAAW,EAAE,SAAS,KAAK,QAAQA,EAAW,UAAA;AAAA,EAC9C,WAAW,EAAE,SAAS,KAAK,QAAQA,EAAW,UAAA;AAAA,EAC9C,OAAO,EAAE,SAAS,QAAQ,QAAQA,EAAW,MAAA;AAAA,EAC7C,SAAS,EAAE,SAAS,QAAQ,QAAQA,EAAW,QAAA;AAAA,EAC/C,UAAU,EAAE,SAAS,QAAQ,QAAQA,EAAW,SAAA;AAAA,EAChD,MAAM,EAAE,SAAS,QAAQ,QAAQA,EAAW,KAAA;AAC9C;AAEA,SAASC,EAAgBC,GAAoC;AAC3D,QAAMC,IAAUD,EAAM,WAAW,QAC3BE,IAAaL,EAAWI,CAAO,EAAE,QAEjCE,IAAwB;AAAA,IAC5B,YAAYD,EAAW;AAAA,IACvB,UAAUF,EAAM,OAAOI,EAAUJ,EAAM,IAAI,IAAIE,EAAW;AAAA,IAC1D,YAAYF,EAAM,SAASK,EAAYL,EAAM,MAAM,IAAIE,EAAW;AAAA,IAClE,YAAYF,EAAM,UAAUM,EAAYN,EAAM,OAAO,IAAIE,EAAW;AAAA,IACpE,eAAeA,EAAW;AAAA,EAAA;AAG5B,SAAI,mBAAmBA,MACrBC,EAAO,gBAAgBD,EAAW,gBAGhCF,EAAM,UAAOG,EAAO,YAAYH,EAAM,QACtCA,EAAM,UAAOG,EAAO,QAAQH,EAAM,QAElCA,EAAM,aACRG,EAAO,WAAW,UAClBA,EAAO,eAAe,YACtBA,EAAO,aAAa,WAGlBH,EAAM,cACRG,EAAO,UAAU,eACjBA,EAAO,kBAAkBH,EAAM,WAC/BG,EAAO,kBAAkB,YACzBA,EAAO,WAAW,WAGbA;AACT;AAEA,MAAMI,IAAY,CAChB,EAAE,IAAAC,GAAI,SAAAP,IAAU,QAAQ,WAAAQ,GAAW,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,GAAGZ,EAAA,GAC/Da,MACG;AACH,QAAMC,IAAYN,KAAMX,EAAWI,CAAO,EAAE,SACtCc,IAAkBhB,EAAgB,EAAE,SAAAE,GAAS,GAAGD,GAAuB,GAGvE;AAAA,IACJ,MAAMgB;AAAA,IACN,QAAQC;AAAA,IACR,SAASC;AAAA,IACT,OAAOC;AAAA,IACP,OAAOC;AAAA,IACP,UAAUC;AAAA,IACV,WAAWC;AAAA,IACX,GAAGC;AAAA,EAAA,IACDvB;AAEJ,SACE,gBAAAwB;AAAA,IAACV;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWY,EAAG,eAAe,gBAAgBxB,CAAO,IAAIQ,CAAS;AAAA,MACjE,OAAO,EAAE,GAAGM,GAAiB,GAAGL,EAAA;AAAA,MAChC,eAAaE;AAAA,MACZ,GAAGW;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGP,GAEMe,IAAiBC,EAAWpB,CAAS,GAC9BqB,IAAO,OAAO,OAAOF,GAAgB,EAAE,aAAa,QAAQ,GAGnEG,IAAY,CAChB7B,GACAa,MAGE,gBAAAW;AAAA,EAACI;AAAA,EAAA;AAAA,IACE,GAAG5B;AAAA,IACJ,KAAAa;AAAA,IACA,SAAQ;AAAA,IACR,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,SAAS,GAAGiB,EAAQ,GAAG,CAAC,MAAMA,EAAQ,GAAG,CAAC;AAAA,MAC1C,cAAc;AAAA,MACd,GAAG9B,EAAM;AAAA,IAAA;AAAA,EACX;AAAA,GAKA+B,IAAiBJ,EAAWE,CAAS,GAC9BG,IAAO,OAAO,OAAOD,GAAgB,EAAE,aAAa,QAAQ;"}
+{"version":3,"file":"Text.js","sources":["../../../../src/components/typography/Text/Text.tsx"],"sourcesContent":["/**\r\n * Text Component\r\n *\r\n * A polymorphic text component for rendering body text with consistent styling.\r\n * Supports all text styles from the design system.\r\n * Uses CSS variables for font sizes to enable dynamic scaling.\r\n *\r\n * @module components/typography/Text\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type ComponentPropsWithoutRef,\r\n} from 'react'\r\nimport {\r\n  fontWeights,\r\n  lineHeights,\r\n  textStyles,\r\n  spacing,\r\n  type FontSize,\r\n  type FontWeight,\r\n  type LineHeight,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport interface TextOwnProps {\r\n  /** Text style preset */\r\n  variant?: 'body' | 'bodyLarge' | 'bodySmall' | 'label' | 'caption' | 'overline' | 'code'\r\n  /** Font size */\r\n  size?: FontSize\r\n  /** Font weight */\r\n  weight?: FontWeight\r\n  /** Line height */\r\n  leading?: LineHeight\r\n  /** Text alignment */\r\n  align?: CSSProperties['textAlign']\r\n  /** Text color (CSS variable or direct value) */\r\n  color?: string\r\n  /** Whether text should truncate with ellipsis */\r\n  truncate?: boolean\r\n  /** Max number of lines before truncating */\r\n  lineClamp?: number\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Custom inline styles */\r\n  style?: CSSProperties\r\n  /** Children */\r\n  children?: ReactNode\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport type TextProps<E extends ElementType = 'p'> = TextOwnProps &\r\n  Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps> & {\r\n    /** The element type to render */\r\n    as?: E\r\n  }\r\n\r\ntype TextComponent = <E extends ElementType = 'p'>(\r\n  props: TextProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n) => React.JSX.Element | null\r\n\r\n/**\r\n * Maps variant to CSS variable for font-size\r\n * Uses --brycks-fs-body-* for body text variants\r\n */\r\nconst variantFontSizeVar: Record<NonNullable<TextOwnProps['variant']>, string> = {\r\n  body: 'var(--brycks-fs-body-md)',\r\n  bodyLarge: 'var(--brycks-fs-body-lg)',\r\n  bodySmall: 'var(--brycks-fs-body-base)',\r\n  label: 'var(--brycks-fs-body-sm)',\r\n  caption: 'var(--brycks-fs-body-xs)',\r\n  overline: 'var(--brycks-fs-body-xs)',\r\n  code: 'var(--brycks-fs-body-sm)',\r\n}\r\n\r\n/**\r\n * Maps FontSize to CSS variable\r\n */\r\nconst fontSizeToCssVar: Record<FontSize, string> = {\r\n  xs: 'var(--brycks-fs-body-xs)',\r\n  sm: 'var(--brycks-fs-body-sm)',\r\n  base: 'var(--brycks-fs-body-base)',\r\n  md: 'var(--brycks-fs-body-md)',\r\n  lg: 'var(--brycks-fs-body-lg)',\r\n  xl: 'var(--brycks-fs-h6)',\r\n  '2xl': 'var(--brycks-fs-h5)',\r\n  '3xl': 'var(--brycks-fs-h4)',\r\n  '4xl': 'var(--brycks-fs-h3)',\r\n  '5xl': 'var(--brycks-fs-h2)',\r\n  '6xl': 'var(--brycks-fs-h1)',\r\n  '7xl': 'var(--brycks-fs-display-sm)',\r\n  '8xl': 'var(--brycks-fs-display-md)',\r\n  '9xl': 'var(--brycks-fs-display-lg)',\r\n}\r\n\r\nconst variantMap: Record<\r\n  NonNullable<TextOwnProps['variant']>,\r\n  { element: ElementType; styles: CSSProperties }\r\n> = {\r\n  body: { element: 'p', styles: textStyles.bodyDefault },\r\n  bodyLarge: { element: 'p', styles: textStyles.bodyLarge },\r\n  bodySmall: { element: 'p', styles: textStyles.bodySmall },\r\n  label: { element: 'span', styles: textStyles.label },\r\n  caption: { element: 'span', styles: textStyles.caption },\r\n  overline: { element: 'span', styles: textStyles.overline },\r\n  code: { element: 'code', styles: textStyles.code },\r\n}\r\n\r\nfunction buildTextStyles(props: TextOwnProps): CSSProperties {\r\n  const variant = props.variant ?? 'body'\r\n  const baseStyles = variantMap[variant].styles\r\n\r\n  // Use CSS variables for font-size to enable dynamic scaling\r\n  const fontSize = props.size\r\n    ? fontSizeToCssVar[props.size]\r\n    : variantFontSizeVar[variant]\r\n\r\n  const styles: CSSProperties = {\r\n    fontFamily: baseStyles.fontFamily,\r\n    fontSize,\r\n    fontWeight: props.weight ? fontWeights[props.weight] : baseStyles.fontWeight,\r\n    lineHeight: props.leading ? lineHeights[props.leading] : baseStyles.lineHeight,\r\n    letterSpacing: baseStyles.letterSpacing,\r\n  }\r\n\r\n  if ('textTransform' in baseStyles) {\r\n    styles.textTransform = baseStyles.textTransform\r\n  }\r\n\r\n  if (props.align) styles.textAlign = props.align\r\n  if (props.color) styles.color = props.color\r\n\r\n  if (props.truncate) {\r\n    styles.overflow = 'hidden'\r\n    styles.textOverflow = 'ellipsis'\r\n    styles.whiteSpace = 'nowrap'\r\n  }\r\n\r\n  if (props.lineClamp) {\r\n    styles.display = '-webkit-box'\r\n    styles.WebkitLineClamp = props.lineClamp\r\n    styles.WebkitBoxOrient = 'vertical'\r\n    styles.overflow = 'hidden'\r\n  }\r\n\r\n  return styles\r\n}\r\n\r\nconst TextInner = <E extends ElementType = 'p'>(\r\n  { as, variant = 'body', className, style, children, testId, ...props }: TextProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = as || variantMap[variant].element\r\n  const builtTextStyles = buildTextStyles({ variant, ...props } as TextOwnProps)\r\n\r\n  // Remove custom props before spreading\r\n  const {\r\n    size: _size,\r\n    weight: _weight,\r\n    leading: _leading,\r\n    align: _align,\r\n    color: _color,\r\n    truncate: _truncate,\r\n    lineClamp: _lineClamp,\r\n    ...rest\r\n  } = props\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={cx('brycks-text', `brycks-text--${variant}`, className)}\r\n      style={{ ...builtTextStyles, ...style }}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nconst TextForwardRef = forwardRef(TextInner) as TextComponent\r\nexport const Text = Object.assign(TextForwardRef, { displayName: 'Text' })\r\n\r\n/** Monospace code text shorthand */\r\nconst CodeInner = (\r\n  props: Omit<TextProps<'code'>, 'variant'>,\r\n  ref: React.ForwardedRef<HTMLElement>\r\n) => {\r\n  return (\r\n    <Text\r\n      {...props}\r\n      ref={ref as ComponentPropsWithRef<'p'>['ref']}\r\n      variant=\"code\"\r\n      style={{\r\n        backgroundColor: 'var(--brycks-background-muted)',\r\n        padding: `${spacing[0.5]}px ${spacing[1.5]}px`,\r\n        borderRadius: 'var(--brycks-radius-sm)',\r\n        ...props.style,\r\n      }}\r\n    />\r\n  )\r\n}\r\n\r\nconst CodeForwardRef = forwardRef(CodeInner) as TextComponent\r\nexport const Code = Object.assign(CodeForwardRef, { displayName: 'Code' })\r\n"],"names":["variantFontSizeVar","fontSizeToCssVar","variantMap","textStyles","buildTextStyles","props","variant","baseStyles","fontSize","styles","fontWeights","lineHeights","TextInner","as","className","style","children","testId","ref","Component","builtTextStyles","_size","_weight","_leading","_align","_color","_truncate","_lineClamp","rest","jsx","cx","TextForwardRef","forwardRef","Text","CodeInner","spacing","CodeForwardRef","Code"],"mappings":"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"}

package/dist/styles.css

@@ -1 +1 @@
-*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}*{margin:0;padding:0}html,body{height:100%}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{text-wrap:pretty}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:focus-visible{outline:2px solid var(--brycks-border-focus, #5578f4);outline-offset:2px}:focus:not(:focus-visible){outline:none}button{background:none;border:none;cursor:pointer}a{text-decoration:none}table{border-collapse:collapse;border-spacing:0}[hidden]{display:none!important}[disabled]{cursor:not-allowed}:root{--brycks-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--brycks-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--brycks-font-size-xs: 12px;--brycks-font-size-sm: 14px;--brycks-font-size-md: 16px;--brycks-font-size-lg: 18px;--brycks-font-size-xl: 20px;--brycks-font-size-2xl: 24px;--brycks-font-size-3xl: 30px;--brycks-font-size-4xl: 36px;--brycks-space-0: 0;--brycks-space-px: 1px;--brycks-space-0-5: 2px;--brycks-space-1: 4px;--brycks-space-1-5: 6px;--brycks-space-2: 8px;--brycks-space-2-5: 10px;--brycks-space-3: 12px;--brycks-space-3-5: 14px;--brycks-space-4: 16px;--brycks-space-5: 20px;--brycks-space-6: 24px;--brycks-space-7: 28px;--brycks-space-8: 32px;--brycks-space-9: 36px;--brycks-space-10: 40px;--brycks-space-12: 48px;--brycks-space-14: 56px;--brycks-space-16: 64px;--brycks-space-20: 80px;--brycks-space-24: 96px;--brycks-spacing-1: var(--brycks-space-1);--brycks-spacing-2: var(--brycks-space-2);--brycks-spacing-2-5: var(--brycks-space-2-5);--brycks-spacing-3: var(--brycks-space-3);--brycks-spacing-4: var(--brycks-space-4);--brycks-spacing-5: var(--brycks-space-5);--brycks-spacing-6: var(--brycks-space-6);--brycks-spacing-8: var(--brycks-space-8);--brycks-radius-none: 0;--brycks-radius-xs: 2px;--brycks-radius-sm: 4px;--brycks-radius-md: 6px;--brycks-radius-default: 8px;--brycks-radius-lg: 10px;--brycks-radius-xl: 12px;--brycks-radius-2xl: 16px;--brycks-radius-3xl: 20px;--brycks-radius-4xl: 24px;--brycks-radius-full: 9999px;--brycks-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .06);--brycks-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .04), 0 2px 6px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .04);--brycks-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .04), 0 4px 8px -1px rgba(0, 0, 0, .06), 0 8px 16px -2px rgba(0, 0, 0, .06);--brycks-shadow-lg: 0 4px 6px -2px rgba(0, 0, 0, .03), 0 8px 16px -4px rgba(0, 0, 0, .08), 0 16px 32px -8px rgba(0, 0, 0, .08);--brycks-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, .04), 0 16px 32px -8px rgba(0, 0, 0, .08), 0 32px 64px -16px rgba(0, 0, 0, .12);--brycks-shadow-2xl: 0 12px 24px -6px rgba(0, 0, 0, .05), 0 24px 48px -12px rgba(0, 0, 0, .1), 0 48px 96px -24px rgba(0, 0, 0, .15);--brycks-z-base: 0;--brycks-z-docked: 10;--brycks-z-dropdown: 1000;--brycks-z-sticky: 1100;--brycks-z-banner: 1200;--brycks-z-overlay: 1300;--brycks-z-modal: 1400;--brycks-z-popover: 1500;--brycks-z-toast: 1700;--brycks-z-tooltip: 1800;--brycks-duration-fast: .1s;--brycks-duration-normal: .2s;--brycks-duration-slow: .4s;--brycks-ease-out: cubic-bezier(0, 0, .2, 1);--brycks-ease-in-out: cubic-bezier(.4, 0, .2, 1);--brycks-ease-spring: cubic-bezier(.34, 1.56, .64, 1)}:root,[data-theme=light]{--brycks-background-app: #FFFFFF;--brycks-background-subtle: #FAFAFA;--brycks-background-muted: #F5F5F7;--brycks-background-elevated: #FFFFFF;--brycks-background-overlay: rgba(0, 0, 0, .4);--brycks-background-inverse: #1D1D1F;--brycks-background-default: #FAFAFA;--brycks-foreground-default: #1D1D1F;--brycks-foreground-muted: #636366;--brycks-foreground-subtle: #8E8E93;--brycks-foreground-disabled: #AEAEB2;--brycks-foreground-inverse: #FFFFFF;--brycks-foreground-link: #3B5CE9;--brycks-border-default: #E8E8ED;--brycks-border-muted: #F5F5F7;--brycks-border-strong: #D2D2D7;--brycks-border-focus: #5578F4;--brycks-primary-default: #3B5CE9;--brycks-primary-hover: #2D47D6;--brycks-primary-active: #2A3CAD;--brycks-primary-muted: #EEF4FF;--brycks-primary-soft-hover: #E0EBFF;--brycks-primary-foreground: #FFFFFF;--brycks-accent-default: #F86545;--brycks-accent-hover: #E54A28;--brycks-accent-active: #C13A1D;--brycks-accent-muted: #FFF5F3;--brycks-accent-soft-hover: #FFE8E3;--brycks-accent-foreground: #FFFFFF;--brycks-success-default: #059669;--brycks-success-hover: #047857;--brycks-success-muted: #ECFDF5;--brycks-success-soft-hover: #D1FAE5;--brycks-success-foreground: #FFFFFF;--brycks-success-on-muted: #047857;--brycks-warning-default: #F59E0B;--brycks-warning-hover: #D97706;--brycks-warning-muted: #FFFBEB;--brycks-warning-soft-hover: #FEF3C7;--brycks-warning-foreground: #1D1D1F;--brycks-warning-on-muted: #92400E;--brycks-error-default: #DC2626;--brycks-error-hover: #B91C1C;--brycks-error-muted: #FEF2F2;--brycks-error-soft-hover: #FEE2E2;--brycks-error-foreground: #FFFFFF;--brycks-error-on-muted: #B91C1C;--brycks-info-default: #0891B2;--brycks-info-hover: #0E7490;--brycks-info-muted: #ECFEFF;--brycks-info-soft-hover: #CFFAFE;--brycks-info-foreground: #FFFFFF;--brycks-info-on-muted: #0E7490}[data-theme=dark]{--brycks-background-app: #000000;--brycks-background-subtle: #1D1D1F;--brycks-background-muted: #2C2C2E;--brycks-background-elevated: #1D1D1F;--brycks-background-overlay: rgba(0, 0, 0, .6);--brycks-background-inverse: #FFFFFF;--brycks-background-default: #1D1D1F;--brycks-foreground-default: #FFFFFF;--brycks-foreground-muted: #AEAEB2;--brycks-foreground-subtle: #8E8E93;--brycks-foreground-disabled: #636366;--brycks-foreground-inverse: #1D1D1F;--brycks-foreground-link: #7A9FFF;--brycks-border-default: #3A3A3C;--brycks-border-muted: #2C2C2E;--brycks-border-strong: #48484A;--brycks-border-focus: #7A9FFF;--brycks-primary-default: #5578F4;--brycks-primary-hover: #7A9FFF;--brycks-primary-active: #A4C1FF;--brycks-primary-muted: #1A2352;--brycks-primary-soft-hover: #283889;--brycks-primary-foreground: #FFFFFF;--brycks-accent-default: #FF8A71;--brycks-accent-hover: #FFB5A6;--brycks-accent-active: #FFD5CC;--brycks-accent-muted: #48140A;--brycks-accent-soft-hover: #842F1D;--brycks-accent-foreground: #000000;--brycks-success-default: #34D399;--brycks-success-hover: #6EE7B7;--brycks-success-muted: #022C22;--brycks-success-soft-hover: #064E3B;--brycks-success-foreground: #000000;--brycks-success-on-muted: #6EE7B7;--brycks-warning-default: #FBBF24;--brycks-warning-hover: #FCD34D;--brycks-warning-muted: #451A03;--brycks-warning-soft-hover: #78350F;--brycks-warning-foreground: #000000;--brycks-warning-on-muted: #FCD34D;--brycks-error-default: #F87171;--brycks-error-hover: #FCA5A5;--brycks-error-muted: #450A0A;--brycks-error-soft-hover: #7F1D1D;--brycks-error-foreground: #000000;--brycks-error-on-muted: #FCA5A5;--brycks-info-default: #22D3EE;--brycks-info-hover: #67E8F9;--brycks-info-muted: #083344;--brycks-info-soft-hover: #164E63;--brycks-info-foreground: #000000;--brycks-info-on-muted: #67E8F9}html{font-family:var(--brycks-font-sans);color-scheme:light dark}body{font-family:var(--brycks-font-sans);font-size:16px;line-height:1.5;color:var(--brycks-foreground-default);background-color:var(--brycks-background-app);transition:background-color var(--brycks-duration-normal) var(--brycks-ease-out),color var(--brycks-duration-normal) var(--brycks-ease-out)}::selection{background-color:var(--brycks-primary-muted);color:var(--brycks-foreground-default)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--brycks-border-default);border-radius:var(--brycks-radius-full);border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:var(--brycks-border-strong)}*{scrollbar-width:thin;scrollbar-color:var(--brycks-border-default) transparent}code,kbd,pre,samp{font-family:var(--brycks-font-mono)}.brycks-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brycks-app-layout{display:flex;height:100vh;overflow:hidden;background-color:var(--brycks-background-subtle)}.brycks-app-layout__main{flex:1;display:flex;flex-direction:column;overflow:hidden}.brycks-app-layout__content{flex:1;overflow:auto;padding:var(--brycks-spacing-6)}.brycks-sidebar{width:240px;height:100vh;background-color:var(--brycks-background-elevated);border-right:1px solid var(--brycks-border-muted);display:flex;flex-direction:column;flex-shrink:0;will-change:width;contain:layout style}.brycks-sidebar--collapsed{width:72px}.brycks-sidebar__logo{padding:var(--brycks-spacing-4) var(--brycks-spacing-5);display:flex;align-items:center;gap:var(--brycks-spacing-3)}.brycks-sidebar--collapsed .brycks-sidebar__logo{padding:var(--brycks-spacing-4) var(--brycks-spacing-3);justify-content:center}.brycks-sidebar__logo-icon{width:32px;height:32px;background-color:var(--brycks-primary-default);border-radius:var(--brycks-radius-md);display:flex;align-items:center;justify-content:center;color:var(--brycks-primary-foreground);font-weight:700;font-size:var(--brycks-font-size-sm);flex-shrink:0}.brycks-sidebar__logo-text{font-size:var(--brycks-font-size-lg);font-weight:600;color:var(--brycks-foreground-default)}.brycks-sidebar__nav{flex:1;padding:var(--brycks-spacing-2) var(--brycks-spacing-3);overflow-y:auto}.brycks-sidebar--collapsed .brycks-sidebar__nav{padding:var(--brycks-spacing-2)}.brycks-sidebar__footer{padding:var(--brycks-spacing-3);text-align:center}.brycks-sidebar--collapsed .brycks-sidebar__footer{padding:var(--brycks-spacing-3) var(--brycks-spacing-2)}.brycks-nav-item{display:flex;align-items:center;gap:var(--brycks-spacing-3);padding:var(--brycks-spacing-2-5) var(--brycks-spacing-3);border-radius:var(--brycks-radius-md);cursor:pointer;background-color:transparent;color:var(--brycks-foreground-default);transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),color var(--brycks-duration-fast) var(--brycks-ease-out);border:none;width:100%;text-align:left;font-size:var(--brycks-font-size-sm)}.brycks-nav-item:hover{background-color:var(--brycks-background-muted)}.brycks-nav-item--active{background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default)}.brycks-nav-item--active:hover{background-color:var(--brycks-primary-muted)}.brycks-sidebar--collapsed .brycks-nav-item{padding:var(--brycks-spacing-3);justify-content:center}.brycks-nav-item__icon{width:20px;height:20px;flex-shrink:0;color:var(--brycks-foreground-muted)}.brycks-nav-item--active .brycks-nav-item__icon{color:var(--brycks-primary-default)}.brycks-nav-item__label{font-weight:400}.brycks-nav-item--active .brycks-nav-item__label{font-weight:500}.brycks-header{height:64px;background-color:var(--brycks-background-elevated);border-bottom:1px solid var(--brycks-border-muted);display:flex;align-items:center;justify-content:space-between;padding:0 var(--brycks-spacing-5);flex-shrink:0}.brycks-header__left,.brycks-header__right{display:flex;align-items:center}.brycks-header__left{gap:var(--brycks-spacing-4)}.brycks-header__right{gap:var(--brycks-spacing-2)}.brycks-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--brycks-radius-md);background-color:transparent;color:var(--brycks-foreground-muted);cursor:pointer;border:none;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-icon-btn:hover{background-color:var(--brycks-background-muted);color:var(--brycks-foreground-default)}.brycks-icon-btn:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}.brycks-avatar{width:36px;height:36px;border-radius:var(--brycks-radius-full);background-color:var(--brycks-primary-default);color:var(--brycks-primary-foreground);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--brycks-font-size-sm);cursor:pointer;transition:transform var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-avatar:hover{transform:scale(1.05)}.brycks-avatar--xs{width:24px;height:24px;font-size:10px}.brycks-avatar--sm{width:32px;height:32px;font-size:12px}.brycks-avatar--md{width:36px;height:36px;font-size:14px}.brycks-avatar--lg{width:40px;height:40px;font-size:16px}.brycks-avatar--xl{width:48px;height:48px;font-size:18px}.brycks-avatar--2xl{width:64px;height:64px;font-size:24px}.brycks-page-header{margin-bottom:var(--brycks-spacing-6)}.brycks-stat-card__icon{width:48px;height:48px;border-radius:var(--brycks-radius-lg);display:flex;align-items:center;justify-content:center}.brycks-stat-card__icon--default{background-color:color-mix(in srgb,var(--brycks-foreground-muted) 10%,transparent);color:var(--brycks-foreground-muted)}.brycks-stat-card__icon--primary{background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default)}.brycks-stat-card__icon--success{background-color:var(--brycks-success-muted);color:var(--brycks-success-default)}.brycks-stat-card__icon--warning{background-color:var(--brycks-warning-muted);color:var(--brycks-warning-default)}.brycks-stat-card__icon--error{background-color:var(--brycks-error-muted);color:var(--brycks-error-default)}.brycks-stat-card__trend{display:inline-flex;align-items:center;gap:var(--brycks-spacing-1);font-size:var(--brycks-font-size-xs);font-weight:500}.brycks-stat-card__trend--positive{color:var(--brycks-success-default)}.brycks-stat-card__trend--negative{color:var(--brycks-error-default)}.brycks-quick-action{padding:var(--brycks-spacing-4);border-radius:var(--brycks-radius-lg);background-color:var(--brycks-background-muted);cursor:pointer;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out);text-align:center;border:none;width:100%}.brycks-quick-action:hover{background-color:var(--brycks-primary-muted)}.brycks-quick-action:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}.brycks-quick-action__icon{color:var(--brycks-foreground-muted);margin-bottom:var(--brycks-spacing-2)}.brycks-quick-action:hover .brycks-quick-action__icon{color:var(--brycks-primary-default)}.brycks-search-input{position:relative;min-width:240px}.brycks-search-input__icon{position:absolute;left:var(--brycks-spacing-3);top:50%;transform:translateY(-50%);pointer-events:none;z-index:1;color:var(--brycks-foreground-muted);width:16px;height:16px}.brycks-search-input input{padding-left:36px}.brycks-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--brycks-spacing-6);background-color:var(--brycks-background-subtle)}.brycks-login-card{width:100%;max-width:400px}.brycks-login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:var(--brycks-spacing-8)}.brycks-login-logo__icon{width:64px;height:64px;background-color:var(--brycks-primary-default);border-radius:var(--brycks-radius-xl);display:flex;align-items:center;justify-content:center;color:var(--brycks-primary-foreground);font-weight:700;font-size:28px}.brycks-login-footer{margin-top:var(--brycks-spacing-6);text-align:center}.brycks-user-info{padding:var(--brycks-spacing-2) var(--brycks-spacing-3)}.brycks-link{color:var(--brycks-primary-default);text-decoration:none;font-size:var(--brycks-font-size-sm);cursor:pointer;transition:color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-link:hover{color:var(--brycks-primary-hover);text-decoration:underline}.brycks-login-form__options{display:flex;justify-content:space-between;align-items:center}.brycks-dropdown-item__content{display:flex;align-items:center;gap:var(--brycks-spacing-2)}.brycks-vehicle-card{cursor:pointer;transition:transform var(--brycks-duration-fast) var(--brycks-ease-out),box-shadow var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-vehicle-card:hover{transform:translateY(-2px);box-shadow:var(--brycks-shadow-lg)}.brycks-vehicle-card__image{width:100%;aspect-ratio:16/10;background-color:var(--brycks-background-muted);border-radius:var(--brycks-radius-md);display:flex;align-items:center;justify-content:center;color:var(--brycks-foreground-muted);margin-bottom:var(--brycks-spacing-3)}.brycks-vehicle-card__price{color:var(--brycks-primary-default)}.brycks-filter-select{min-width:160px}.brycks-page-card{cursor:pointer;transition:border-color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-page-card:hover{border-color:var(--brycks-primary-default)}.brycks-page-card__content{cursor:pointer}.brycks-page-card__icon{width:48px;height:48px;border-radius:var(--brycks-radius-lg);background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default);display:flex;align-items:center;justify-content:center;flex-shrink:0}.brycks-section-item{padding:var(--brycks-spacing-3);background-color:var(--brycks-background-elevated);border:1px solid var(--brycks-border-muted);border-radius:var(--brycks-radius-md);cursor:grab;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),border-color var(--brycks-duration-fast) var(--brycks-ease-out),opacity var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-section-item:active{cursor:grabbing}.brycks-section-item--dragging{opacity:.5;background-color:var(--brycks-background-muted)}.brycks-section-item--drag-over{background-color:var(--brycks-primary-muted);border-color:var(--brycks-primary-default)}.brycks-section-item__grip{cursor:grab;color:var(--brycks-foreground-muted)}.brycks-section-item__icon{width:40px;height:40px;border-radius:var(--brycks-radius-md);background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--brycks-font-size-base);flex-shrink:0}.brycks-section-type-btn{padding:var(--brycks-spacing-4);background-color:var(--brycks-background-muted);border:1px solid var(--brycks-border-muted);border-radius:var(--brycks-radius-md);cursor:pointer;text-align:center;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),border-color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-section-type-btn:hover{background-color:var(--brycks-primary-muted);border-color:var(--brycks-primary-default)}.brycks-empty-zone{padding:var(--brycks-spacing-10);border:2px dashed var(--brycks-border-muted);border-radius:var(--brycks-radius-lg);display:flex;justify-content:center;align-items:center}.brycks-info-item{display:flex;flex-direction:column;gap:var(--brycks-spacing-1)}.brycks-image-container{width:100%;aspect-ratio:16/9;background-color:var(--brycks-background-muted);border-radius:var(--brycks-radius-lg);display:flex;align-items:center;justify-content:center;color:var(--brycks-foreground-muted)}.brycks-table-action-btn{padding:var(--brycks-spacing-1)!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brycks-skip-link{position:absolute;top:-40px;left:0;background:var(--brycks-primary-default);color:var(--brycks-primary-foreground);padding:var(--brycks-spacing-2) var(--brycks-spacing-4);z-index:var(--brycks-z-tooltip);text-decoration:none;font-weight:500}.brycks-skip-link:focus{top:0}*:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes brycks-fade-in{0%{opacity:0}to{opacity:1}}@keyframes brycks-fade-out{0%{opacity:1}to{opacity:0}}@keyframes brycks-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes brycks-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes brycks-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-slide-left{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes brycks-slide-right{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes brycks-drawer-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes brycks-drawer-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes brycks-drawer-slide-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes brycks-drawer-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes brycks-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes brycks-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes brycks-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes brycks-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes brycks-bounce-scale{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes brycks-pulse-scale{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1);opacity:1}}@keyframes brycks-focus-ring-pulse{0%,to{box-shadow:0 0 0 3px #5578f459}50%{box-shadow:0 0 0 4px #5578f440}}@keyframes brycks-toast-slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes brycks-toast-slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes brycks-toast-slide-in-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-toast-slide-in-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-accordion-expand{0%{height:0;opacity:0}to{height:var(--brycks-accordion-content-height);opacity:1}}@keyframes brycks-accordion-collapse{0%{height:var(--brycks-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes brycks-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.brycks-animate-fade-in{animation:brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)}.brycks-animate-scale-in{animation:brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)}.brycks-animate-slide-up{animation:brycks-slide-up var(--brycks-duration-normal) var(--brycks-ease-out)}.brycks-animate-spin{animation:brycks-spin 1s linear infinite}.brycks-animate-pulse{animation:brycks-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.brycks-animate-shimmer{animation:brycks-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--brycks-background-muted) 0%,var(--brycks-background-subtle) 50%,var(--brycks-background-muted) 100%);background-size:200% 100%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.brycks-animate-spin{animation-duration:.5s!important}.brycks-animate-pulse,.brycks-animate-shimmer,.brycks-animate-bounce{animation:none!important}.brycks-skeleton{animation:none!important;background:var(--brycks-background-muted)!important}}:root{--brycks-anim-duration-instant: 50ms;--brycks-anim-duration-fast: .1s;--brycks-anim-duration-normal: .2s;--brycks-anim-duration-slow: .3s;--brycks-anim-duration-slower: .4s;--brycks-anim-ease-linear: linear;--brycks-anim-ease-out: cubic-bezier(0, 0, .2, 1);--brycks-anim-ease-in: cubic-bezier(.4, 0, 1, 1);--brycks-anim-ease-in-out: cubic-bezier(.4, 0, .2, 1);--brycks-anim-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--brycks-anim-ease-bounce: cubic-bezier(.68, -.55, .265, 1.55)}
+*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}*{margin:0;padding:0}html,body{height:100%}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{text-wrap:pretty}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:focus-visible{outline:2px solid var(--brycks-border-focus, #5578f4);outline-offset:2px}:focus:not(:focus-visible){outline:none}button{background:none;border:none;cursor:pointer}a{text-decoration:none}table{border-collapse:collapse;border-spacing:0}[hidden]{display:none!important}[disabled]{cursor:not-allowed}:root{--brycks-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--brycks-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--brycks-font-scale-body: 1;--brycks-font-scale-headings: 1;--brycks-font-scale-ui: 1;--brycks-fs-base-xs: 11px;--brycks-fs-base-sm: 12px;--brycks-fs-base-base: 14px;--brycks-fs-base-md: 16px;--brycks-fs-base-lg: 18px;--brycks-fs-base-xl: 20px;--brycks-fs-base-2xl: 24px;--brycks-fs-base-3xl: 28px;--brycks-fs-base-4xl: 32px;--brycks-fs-base-5xl: 40px;--brycks-fs-base-6xl: 48px;--brycks-fs-base-7xl: 60px;--brycks-fs-base-8xl: 72px;--brycks-fs-base-9xl: 96px;--brycks-fs-body-xs: calc(var(--brycks-fs-base-xs) * var(--brycks-font-scale-body));--brycks-fs-body-sm: calc(var(--brycks-fs-base-sm) * var(--brycks-font-scale-body));--brycks-fs-body-base: calc(var(--brycks-fs-base-base) * var(--brycks-font-scale-body));--brycks-fs-body-md: calc(var(--brycks-fs-base-md) * var(--brycks-font-scale-body));--brycks-fs-body-lg: calc(var(--brycks-fs-base-lg) * var(--brycks-font-scale-body));--brycks-fs-h6: calc(var(--brycks-fs-base-xl) * var(--brycks-font-scale-headings));--brycks-fs-h5: calc(var(--brycks-fs-base-2xl) * var(--brycks-font-scale-headings));--brycks-fs-h4: calc(var(--brycks-fs-base-3xl) * var(--brycks-font-scale-headings));--brycks-fs-h3: calc(var(--brycks-fs-base-4xl) * var(--brycks-font-scale-headings));--brycks-fs-h2: calc(var(--brycks-fs-base-5xl) * var(--brycks-font-scale-headings));--brycks-fs-h1: calc(var(--brycks-fs-base-6xl) * var(--brycks-font-scale-headings));--brycks-fs-display-sm: calc(var(--brycks-fs-base-7xl) * var(--brycks-font-scale-headings));--brycks-fs-display-md: calc(var(--brycks-fs-base-8xl) * var(--brycks-font-scale-headings));--brycks-fs-display-lg: calc(var(--brycks-fs-base-9xl) * var(--brycks-font-scale-headings));--brycks-fs-ui-xs: calc(var(--brycks-fs-base-xs) * var(--brycks-font-scale-ui));--brycks-fs-ui-sm: calc(var(--brycks-fs-base-sm) * var(--brycks-font-scale-ui));--brycks-fs-ui-md: calc(var(--brycks-fs-base-base) * var(--brycks-font-scale-ui));--brycks-fs-ui-lg: calc(15px * var(--brycks-font-scale-ui));--brycks-fs-ui-xl: calc(var(--brycks-fs-base-md) * var(--brycks-font-scale-ui));--brycks-font-size-xs: var(--brycks-fs-body-sm);--brycks-font-size-sm: var(--brycks-fs-body-base);--brycks-font-size-md: var(--brycks-fs-body-md);--brycks-font-size-lg: var(--brycks-fs-body-lg);--brycks-font-size-xl: var(--brycks-fs-h6);--brycks-font-size-2xl: var(--brycks-fs-h5);--brycks-font-size-3xl: var(--brycks-fs-h4);--brycks-font-size-4xl: var(--brycks-fs-h3);--brycks-space-0: 0;--brycks-space-px: 1px;--brycks-space-0-5: 2px;--brycks-space-1: 4px;--brycks-space-1-5: 6px;--brycks-space-2: 8px;--brycks-space-2-5: 10px;--brycks-space-3: 12px;--brycks-space-3-5: 14px;--brycks-space-4: 16px;--brycks-space-5: 20px;--brycks-space-6: 24px;--brycks-space-7: 28px;--brycks-space-8: 32px;--brycks-space-9: 36px;--brycks-space-10: 40px;--brycks-space-12: 48px;--brycks-space-14: 56px;--brycks-space-16: 64px;--brycks-space-20: 80px;--brycks-space-24: 96px;--brycks-spacing-1: var(--brycks-space-1);--brycks-spacing-2: var(--brycks-space-2);--brycks-spacing-2-5: var(--brycks-space-2-5);--brycks-spacing-3: var(--brycks-space-3);--brycks-spacing-4: var(--brycks-space-4);--brycks-spacing-5: var(--brycks-space-5);--brycks-spacing-6: var(--brycks-space-6);--brycks-spacing-8: var(--brycks-space-8);--brycks-radius-none: 0;--brycks-radius-xs: 2px;--brycks-radius-sm: 4px;--brycks-radius-md: 6px;--brycks-radius-default: 8px;--brycks-radius-lg: 10px;--brycks-radius-xl: 12px;--brycks-radius-2xl: 16px;--brycks-radius-3xl: 20px;--brycks-radius-4xl: 24px;--brycks-radius-full: 9999px;--brycks-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 3px 0 rgba(0, 0, 0, .06);--brycks-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .04), 0 2px 6px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .04);--brycks-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, .04), 0 4px 8px -1px rgba(0, 0, 0, .06), 0 8px 16px -2px rgba(0, 0, 0, .06);--brycks-shadow-lg: 0 4px 6px -2px rgba(0, 0, 0, .03), 0 8px 16px -4px rgba(0, 0, 0, .08), 0 16px 32px -8px rgba(0, 0, 0, .08);--brycks-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, .04), 0 16px 32px -8px rgba(0, 0, 0, .08), 0 32px 64px -16px rgba(0, 0, 0, .12);--brycks-shadow-2xl: 0 12px 24px -6px rgba(0, 0, 0, .05), 0 24px 48px -12px rgba(0, 0, 0, .1), 0 48px 96px -24px rgba(0, 0, 0, .15);--brycks-z-base: 0;--brycks-z-docked: 10;--brycks-z-dropdown: 1000;--brycks-z-sticky: 1100;--brycks-z-banner: 1200;--brycks-z-overlay: 1300;--brycks-z-modal: 1400;--brycks-z-popover: 1500;--brycks-z-toast: 1700;--brycks-z-tooltip: 1800;--brycks-duration-fast: .1s;--brycks-duration-normal: .2s;--brycks-duration-slow: .4s;--brycks-ease-out: cubic-bezier(0, 0, .2, 1);--brycks-ease-in-out: cubic-bezier(.4, 0, .2, 1);--brycks-ease-spring: cubic-bezier(.34, 1.56, .64, 1)}:root,[data-theme=light]{--brycks-background-app: #FFFFFF;--brycks-background-subtle: #FAFAFA;--brycks-background-muted: #F5F5F7;--brycks-background-elevated: #FFFFFF;--brycks-background-overlay: rgba(0, 0, 0, .4);--brycks-background-inverse: #1D1D1F;--brycks-background-default: #FAFAFA;--brycks-foreground-default: #1D1D1F;--brycks-foreground-muted: #636366;--brycks-foreground-subtle: #8E8E93;--brycks-foreground-disabled: #AEAEB2;--brycks-foreground-inverse: #FFFFFF;--brycks-foreground-link: #3B5CE9;--brycks-border-default: #E8E8ED;--brycks-border-muted: #F5F5F7;--brycks-border-strong: #D2D2D7;--brycks-border-focus: #5578F4;--brycks-primary-default: #3B5CE9;--brycks-primary-hover: #2D47D6;--brycks-primary-active: #2A3CAD;--brycks-primary-muted: #EEF4FF;--brycks-primary-soft-hover: #E0EBFF;--brycks-primary-foreground: #FFFFFF;--brycks-accent-default: #F86545;--brycks-accent-hover: #E54A28;--brycks-accent-active: #C13A1D;--brycks-accent-muted: #FFF5F3;--brycks-accent-soft-hover: #FFE8E3;--brycks-accent-foreground: #FFFFFF;--brycks-success-default: #059669;--brycks-success-hover: #047857;--brycks-success-muted: #ECFDF5;--brycks-success-soft-hover: #D1FAE5;--brycks-success-foreground: #FFFFFF;--brycks-success-on-muted: #047857;--brycks-warning-default: #F59E0B;--brycks-warning-hover: #D97706;--brycks-warning-muted: #FFFBEB;--brycks-warning-soft-hover: #FEF3C7;--brycks-warning-foreground: #1D1D1F;--brycks-warning-on-muted: #92400E;--brycks-error-default: #DC2626;--brycks-error-hover: #B91C1C;--brycks-error-muted: #FEF2F2;--brycks-error-soft-hover: #FEE2E2;--brycks-error-foreground: #FFFFFF;--brycks-error-on-muted: #B91C1C;--brycks-info-default: #0891B2;--brycks-info-hover: #0E7490;--brycks-info-muted: #ECFEFF;--brycks-info-soft-hover: #CFFAFE;--brycks-info-foreground: #FFFFFF;--brycks-info-on-muted: #0E7490}[data-theme=dark]{--brycks-background-app: #000000;--brycks-background-subtle: #1D1D1F;--brycks-background-muted: #2C2C2E;--brycks-background-elevated: #1D1D1F;--brycks-background-overlay: rgba(0, 0, 0, .6);--brycks-background-inverse: #FFFFFF;--brycks-background-default: #1D1D1F;--brycks-foreground-default: #FFFFFF;--brycks-foreground-muted: #AEAEB2;--brycks-foreground-subtle: #8E8E93;--brycks-foreground-disabled: #636366;--brycks-foreground-inverse: #1D1D1F;--brycks-foreground-link: #7A9FFF;--brycks-border-default: #3A3A3C;--brycks-border-muted: #2C2C2E;--brycks-border-strong: #48484A;--brycks-border-focus: #7A9FFF;--brycks-primary-default: #5578F4;--brycks-primary-hover: #7A9FFF;--brycks-primary-active: #A4C1FF;--brycks-primary-muted: #1A2352;--brycks-primary-soft-hover: #283889;--brycks-primary-foreground: #FFFFFF;--brycks-accent-default: #FF8A71;--brycks-accent-hover: #FFB5A6;--brycks-accent-active: #FFD5CC;--brycks-accent-muted: #48140A;--brycks-accent-soft-hover: #842F1D;--brycks-accent-foreground: #000000;--brycks-success-default: #34D399;--brycks-success-hover: #6EE7B7;--brycks-success-muted: #022C22;--brycks-success-soft-hover: #064E3B;--brycks-success-foreground: #000000;--brycks-success-on-muted: #6EE7B7;--brycks-warning-default: #FBBF24;--brycks-warning-hover: #FCD34D;--brycks-warning-muted: #451A03;--brycks-warning-soft-hover: #78350F;--brycks-warning-foreground: #000000;--brycks-warning-on-muted: #FCD34D;--brycks-error-default: #F87171;--brycks-error-hover: #FCA5A5;--brycks-error-muted: #450A0A;--brycks-error-soft-hover: #7F1D1D;--brycks-error-foreground: #000000;--brycks-error-on-muted: #FCA5A5;--brycks-info-default: #22D3EE;--brycks-info-hover: #67E8F9;--brycks-info-muted: #083344;--brycks-info-soft-hover: #164E63;--brycks-info-foreground: #000000;--brycks-info-on-muted: #67E8F9}html{font-family:var(--brycks-font-sans);color-scheme:light dark}body{font-family:var(--brycks-font-sans);font-size:16px;line-height:1.5;color:var(--brycks-foreground-default);background-color:var(--brycks-background-app);transition:background-color var(--brycks-duration-normal) var(--brycks-ease-out),color var(--brycks-duration-normal) var(--brycks-ease-out)}::selection{background-color:var(--brycks-primary-muted);color:var(--brycks-foreground-default)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--brycks-border-default);border-radius:var(--brycks-radius-full);border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:var(--brycks-border-strong)}*{scrollbar-width:thin;scrollbar-color:var(--brycks-border-default) transparent}code,kbd,pre,samp{font-family:var(--brycks-font-mono)}.brycks-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brycks-app-layout{display:flex;height:100vh;overflow:hidden;background-color:var(--brycks-background-subtle)}.brycks-app-layout__main{flex:1;display:flex;flex-direction:column;overflow:hidden}.brycks-app-layout__content{flex:1;overflow:auto;padding:var(--brycks-spacing-6)}.brycks-sidebar{width:240px;height:100vh;background-color:var(--brycks-background-elevated);border-right:1px solid var(--brycks-border-muted);display:flex;flex-direction:column;flex-shrink:0;will-change:width;contain:layout style}.brycks-sidebar--collapsed{width:72px}.brycks-sidebar__logo{padding:var(--brycks-spacing-4) var(--brycks-spacing-5);display:flex;align-items:center;gap:var(--brycks-spacing-3)}.brycks-sidebar--collapsed .brycks-sidebar__logo{padding:var(--brycks-spacing-4) var(--brycks-spacing-3);justify-content:center}.brycks-sidebar__logo-icon{width:32px;height:32px;background-color:var(--brycks-primary-default);border-radius:var(--brycks-radius-md);display:flex;align-items:center;justify-content:center;color:var(--brycks-primary-foreground);font-weight:700;font-size:var(--brycks-font-size-sm);flex-shrink:0}.brycks-sidebar__logo-text{font-size:var(--brycks-font-size-lg);font-weight:600;color:var(--brycks-foreground-default)}.brycks-sidebar__nav{flex:1;padding:var(--brycks-spacing-2) var(--brycks-spacing-3);overflow-y:auto}.brycks-sidebar--collapsed .brycks-sidebar__nav{padding:var(--brycks-spacing-2)}.brycks-sidebar__footer{padding:var(--brycks-spacing-3);text-align:center}.brycks-sidebar--collapsed .brycks-sidebar__footer{padding:var(--brycks-spacing-3) var(--brycks-spacing-2)}.brycks-nav-item{display:flex;align-items:center;gap:var(--brycks-spacing-3);padding:var(--brycks-spacing-2-5) var(--brycks-spacing-3);border-radius:var(--brycks-radius-md);cursor:pointer;background-color:transparent;color:var(--brycks-foreground-default);transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),color var(--brycks-duration-fast) var(--brycks-ease-out);border:none;width:100%;text-align:left;font-size:var(--brycks-font-size-sm)}.brycks-nav-item:hover{background-color:var(--brycks-background-muted)}.brycks-nav-item--active{background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default)}.brycks-nav-item--active:hover{background-color:var(--brycks-primary-muted)}.brycks-sidebar--collapsed .brycks-nav-item{padding:var(--brycks-spacing-3);justify-content:center}.brycks-nav-item__icon{width:20px;height:20px;flex-shrink:0;color:var(--brycks-foreground-muted)}.brycks-nav-item--active .brycks-nav-item__icon{color:var(--brycks-primary-default)}.brycks-nav-item__label{font-weight:400}.brycks-nav-item--active .brycks-nav-item__label{font-weight:500}.brycks-header{height:64px;background-color:var(--brycks-background-elevated);border-bottom:1px solid var(--brycks-border-muted);display:flex;align-items:center;justify-content:space-between;padding:0 var(--brycks-spacing-5);flex-shrink:0}.brycks-header__left,.brycks-header__right{display:flex;align-items:center}.brycks-header__left{gap:var(--brycks-spacing-4)}.brycks-header__right{gap:var(--brycks-spacing-2)}.brycks-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--brycks-radius-md);background-color:transparent;color:var(--brycks-foreground-muted);cursor:pointer;border:none;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-icon-btn:hover{background-color:var(--brycks-background-muted);color:var(--brycks-foreground-default)}.brycks-icon-btn:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}.brycks-avatar{width:36px;height:36px;border-radius:var(--brycks-radius-full);background-color:var(--brycks-primary-default);color:var(--brycks-primary-foreground);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--brycks-font-size-sm);cursor:pointer;transition:transform var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-avatar:hover{transform:scale(1.05)}.brycks-avatar--xs{width:24px;height:24px;font-size:10px}.brycks-avatar--sm{width:32px;height:32px;font-size:12px}.brycks-avatar--md{width:36px;height:36px;font-size:14px}.brycks-avatar--lg{width:40px;height:40px;font-size:16px}.brycks-avatar--xl{width:48px;height:48px;font-size:18px}.brycks-avatar--2xl{width:64px;height:64px;font-size:24px}.brycks-page-header{margin-bottom:var(--brycks-spacing-6)}.brycks-stat-card__icon{width:48px;height:48px;border-radius:var(--brycks-radius-lg);display:flex;align-items:center;justify-content:center}.brycks-stat-card__icon--default{background-color:color-mix(in srgb,var(--brycks-foreground-muted) 10%,transparent);color:var(--brycks-foreground-muted)}.brycks-stat-card__icon--primary{background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default)}.brycks-stat-card__icon--success{background-color:var(--brycks-success-muted);color:var(--brycks-success-default)}.brycks-stat-card__icon--warning{background-color:var(--brycks-warning-muted);color:var(--brycks-warning-default)}.brycks-stat-card__icon--error{background-color:var(--brycks-error-muted);color:var(--brycks-error-default)}.brycks-stat-card__trend{display:inline-flex;align-items:center;gap:var(--brycks-spacing-1);font-size:var(--brycks-font-size-xs);font-weight:500}.brycks-stat-card__trend--positive{color:var(--brycks-success-default)}.brycks-stat-card__trend--negative{color:var(--brycks-error-default)}.brycks-quick-action{padding:var(--brycks-spacing-4);border-radius:var(--brycks-radius-lg);background-color:var(--brycks-background-muted);cursor:pointer;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out);text-align:center;border:none;width:100%}.brycks-quick-action:hover{background-color:var(--brycks-primary-muted)}.brycks-quick-action:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}.brycks-quick-action__icon{color:var(--brycks-foreground-muted);margin-bottom:var(--brycks-spacing-2)}.brycks-quick-action:hover .brycks-quick-action__icon{color:var(--brycks-primary-default)}.brycks-search-input{position:relative;min-width:240px}.brycks-search-input__icon{position:absolute;left:var(--brycks-spacing-3);top:50%;transform:translateY(-50%);pointer-events:none;z-index:1;color:var(--brycks-foreground-muted);width:16px;height:16px}.brycks-search-input input{padding-left:36px}.brycks-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--brycks-spacing-6);background-color:var(--brycks-background-subtle)}.brycks-login-card{width:100%;max-width:400px}.brycks-login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:var(--brycks-spacing-8)}.brycks-login-logo__icon{width:64px;height:64px;background-color:var(--brycks-primary-default);border-radius:var(--brycks-radius-xl);display:flex;align-items:center;justify-content:center;color:var(--brycks-primary-foreground);font-weight:700;font-size:28px}.brycks-login-footer{margin-top:var(--brycks-spacing-6);text-align:center}.brycks-user-info{padding:var(--brycks-spacing-2) var(--brycks-spacing-3)}.brycks-link{color:var(--brycks-primary-default);text-decoration:none;font-size:var(--brycks-font-size-sm);cursor:pointer;transition:color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-link:hover{color:var(--brycks-primary-hover);text-decoration:underline}.brycks-login-form__options{display:flex;justify-content:space-between;align-items:center}.brycks-dropdown-item__content{display:flex;align-items:center;gap:var(--brycks-spacing-2)}.brycks-vehicle-card{cursor:pointer;transition:transform var(--brycks-duration-fast) var(--brycks-ease-out),box-shadow var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-vehicle-card:hover{transform:translateY(-2px);box-shadow:var(--brycks-shadow-lg)}.brycks-vehicle-card__image{width:100%;aspect-ratio:16/10;background-color:var(--brycks-background-muted);border-radius:var(--brycks-radius-md);display:flex;align-items:center;justify-content:center;color:var(--brycks-foreground-muted);margin-bottom:var(--brycks-spacing-3)}.brycks-vehicle-card__price{color:var(--brycks-primary-default)}.brycks-filter-select{min-width:160px}.brycks-page-card{cursor:pointer;transition:border-color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-page-card:hover{border-color:var(--brycks-primary-default)}.brycks-page-card__content{cursor:pointer}.brycks-page-card__icon{width:48px;height:48px;border-radius:var(--brycks-radius-lg);background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default);display:flex;align-items:center;justify-content:center;flex-shrink:0}.brycks-section-item{padding:var(--brycks-spacing-3);background-color:var(--brycks-background-elevated);border:1px solid var(--brycks-border-muted);border-radius:var(--brycks-radius-md);cursor:grab;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),border-color var(--brycks-duration-fast) var(--brycks-ease-out),opacity var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-section-item:active{cursor:grabbing}.brycks-section-item--dragging{opacity:.5;background-color:var(--brycks-background-muted)}.brycks-section-item--drag-over{background-color:var(--brycks-primary-muted);border-color:var(--brycks-primary-default)}.brycks-section-item__grip{cursor:grab;color:var(--brycks-foreground-muted)}.brycks-section-item__icon{width:40px;height:40px;border-radius:var(--brycks-radius-md);background-color:var(--brycks-primary-muted);color:var(--brycks-primary-default);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--brycks-font-size-base);flex-shrink:0}.brycks-section-type-btn{padding:var(--brycks-spacing-4);background-color:var(--brycks-background-muted);border:1px solid var(--brycks-border-muted);border-radius:var(--brycks-radius-md);cursor:pointer;text-align:center;transition:background-color var(--brycks-duration-fast) var(--brycks-ease-out),border-color var(--brycks-duration-fast) var(--brycks-ease-out)}.brycks-section-type-btn:hover{background-color:var(--brycks-primary-muted);border-color:var(--brycks-primary-default)}.brycks-empty-zone{padding:var(--brycks-spacing-10);border:2px dashed var(--brycks-border-muted);border-radius:var(--brycks-radius-lg);display:flex;justify-content:center;align-items:center}.brycks-info-item{display:flex;flex-direction:column;gap:var(--brycks-spacing-1)}.brycks-image-container{width:100%;aspect-ratio:16/9;background-color:var(--brycks-background-muted);border-radius:var(--brycks-radius-lg);display:flex;align-items:center;justify-content:center;color:var(--brycks-foreground-muted)}.brycks-table-action-btn{padding:var(--brycks-spacing-1)!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brycks-skip-link{position:absolute;top:-40px;left:0;background:var(--brycks-primary-default);color:var(--brycks-primary-foreground);padding:var(--brycks-spacing-2) var(--brycks-spacing-4);z-index:var(--brycks-z-tooltip);text-decoration:none;font-weight:500}.brycks-skip-link:focus{top:0}*:focus-visible{outline:2px solid var(--brycks-primary-default);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes brycks-fade-in{0%{opacity:0}to{opacity:1}}@keyframes brycks-fade-out{0%{opacity:1}to{opacity:0}}@keyframes brycks-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes brycks-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes brycks-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-slide-left{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes brycks-slide-right{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes brycks-drawer-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes brycks-drawer-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes brycks-drawer-slide-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes brycks-drawer-slide-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes brycks-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes brycks-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes brycks-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes brycks-bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes brycks-bounce-scale{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@keyframes brycks-pulse-scale{0%,to{transform:scale(.8);opacity:.5}50%{transform:scale(1);opacity:1}}@keyframes brycks-focus-ring-pulse{0%,to{box-shadow:0 0 0 3px #5578f459}50%{box-shadow:0 0 0 4px #5578f440}}@keyframes brycks-toast-slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes brycks-toast-slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes brycks-toast-slide-in-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-toast-slide-in-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes brycks-accordion-expand{0%{height:0;opacity:0}to{height:var(--brycks-accordion-content-height);opacity:1}}@keyframes brycks-accordion-collapse{0%{height:var(--brycks-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes brycks-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.brycks-animate-fade-in{animation:brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)}.brycks-animate-scale-in{animation:brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)}.brycks-animate-slide-up{animation:brycks-slide-up var(--brycks-duration-normal) var(--brycks-ease-out)}.brycks-animate-spin{animation:brycks-spin 1s linear infinite}.brycks-animate-pulse{animation:brycks-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.brycks-animate-shimmer{animation:brycks-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--brycks-background-muted) 0%,var(--brycks-background-subtle) 50%,var(--brycks-background-muted) 100%);background-size:200% 100%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.brycks-animate-spin{animation-duration:.5s!important}.brycks-animate-pulse,.brycks-animate-shimmer,.brycks-animate-bounce{animation:none!important}.brycks-skeleton{animation:none!important;background:var(--brycks-background-muted)!important}}:root{--brycks-anim-duration-instant: 50ms;--brycks-anim-duration-fast: .1s;--brycks-anim-duration-normal: .2s;--brycks-anim-duration-slow: .3s;--brycks-anim-duration-slower: .4s;--brycks-anim-ease-linear: linear;--brycks-anim-ease-out: cubic-bezier(0, 0, .2, 1);--brycks-anim-ease-in: cubic-bezier(.4, 0, 1, 1);--brycks-anim-ease-in-out: cubic-bezier(.4, 0, .2, 1);--brycks-anim-ease-spring: cubic-bezier(.34, 1.56, .64, 1);--brycks-anim-ease-bounce: cubic-bezier(.68, -.55, .265, 1.55)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brycks/core-front",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Brycks Design System - A modern, calm, and tactile UI component library",
   "type": "module",
   "main": "./dist/index.cjs",