@primer/react 38.0.0-rc.4 → 38.0.0-rc.5

package/dist/FormControl/FormControl.d.ts

@@ -21,6 +21,7 @@ export type FormControlProps = {
      */
     layout?: 'horizontal' | 'vertical';
     className?: string;
+    style?: React.CSSProperties;
 } & SxProp;
 declare const _default: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
@@ -42,6 +43,7 @@ declare const _default: React.ForwardRefExoticComponent<{
      */
     layout?: "horizontal" | "vertical";
     className?: string;
+    style?: React.CSSProperties;
 } & SxProp & React.RefAttributes<HTMLDivElement>> & {
     Caption: typeof FormControlCaption;
     Label: React.FC<React.PropsWithChildren<({
@@ -54,8 +56,11 @@ declare const _default: React.ForwardRefExoticComponent<{
         requiredIndicator?: boolean;
         id?: string;
         className?: string;
+        style?: React.CSSProperties;
     } & SxProp>>;
-    LeadingVisual: React.FC<React.PropsWithChildren<SxProp>>;
+    LeadingVisual: React.FC<React.PropsWithChildren<SxProp & {
+        style?: React.CSSProperties;
+    }>>;
     Validation: React.FC<React.PropsWithChildren<import("./_FormControlValidation").FormControlValidationProps>>;
 };
 export default _default;

package/dist/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AASvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;;eAnBG,KAAK,CAAC,SAAS;IAC1B;;OAEG;eACQ,OAAO;IAClB;;OAEG;SACE,MAAM;IACX;;OAEG;eACQ,OAAO;IAClB;;;OAGG;aACM,YAAY,GAAG,UAAU;gBACtB,MAAM;;;;;;;;;;;;;;;;;AA6KpB,wBAKE"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AASvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,MAAM,CAAA;;eApBG,KAAK,CAAC,SAAS;IAC1B;;OAEG;eACQ,OAAO;IAClB;;OAEG;SACE,MAAM;IACX;;OAEG;eACQ,OAAO;IAClB;;;OAGG;aACM,YAAY,GAAG,UAAU;gBACtB,MAAM;YACV,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;AA+K7B,wBAKE"}

package/dist/FormControl/FormControl.js

@@ -33,7 +33,8 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
     id: idProp,
     required,
     sx,
-    className
+    className,
+    style
   } = t0;
   const layout = t1 === undefined ? "vertical" : t1;
   let t2;
@@ -166,12 +167,14 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
     "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
     sx: sx,
     className: clsx(className, classes.ControlHorizontalLayout),
+    style: style,
     children: InputChildren
   }) : /*#__PURE__*/jsxs(BoxWithFallback, {
     ref: ref,
     "data-has-label": !isLabelHidden ? "" : undefined,
     sx: sx,
     className: clsx(className, classes.ControlVerticalLayout),
+    style: style,
     children: [slots.label, /*#__PURE__*/React.isValidElement(InputComponent) && /*#__PURE__*/React.cloneElement(InputComponent, Object.assign({
       id,
       required,

package/dist/FormControl/FormControlCaption.d.ts

@@ -3,7 +3,8 @@ import type { SxProp } from '../sx';
 type FormControlCaptionProps = React.PropsWithChildren<{
     id?: string;
     className?: string;
+    style?: React.CSSProperties;
 } & SxProp>;
-declare function FormControlCaption({ id, children, sx, className }: FormControlCaptionProps): React.JSX.Element;
+declare function FormControlCaption({ id, children, sx, className, style }: FormControlCaptionProps): React.JSX.Element;
 export { FormControlCaption };
 //# sourceMappingURL=FormControlCaption.d.ts.map

package/dist/FormControl/FormControlCaption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,KAAK,uBAAuB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CACX,CAAA;AAED,iBAAS,kBAAkB,CAAC,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAC,EAAE,uBAAuB,qBAcjF;AAED,OAAO,EAAC,kBAAkB,EAAC,CAAA"}
+{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,KAAK,uBAAuB,GAAG,KAAK,CAAC,iBAAiB,CACpD;IACE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,MAAM,CACX,CAAA;AAED,iBAAS,kBAAkB,CAAC,EAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,uBAAuB,qBAexF;AAED,OAAO,EAAC,kBAAkB,EAAC,CAAA"}

package/dist/FormControl/FormControlCaption.js

@@ -7,12 +7,13 @@ import { jsx } from 'react/jsx-runtime';
 import Text from '../Text/Text.js';
 
 function FormControlCaption(t0) {
-  const $ = c(8);
+  const $ = c(9);
   const {
     id,
     children,
     sx,
-    className
+    className,
+    style
   } = t0;
   const {
     captionId,
@@ -29,23 +30,25 @@ function FormControlCaption(t0) {
   }
   const t3 = disabled ? "" : undefined;
   let t4;
-  if ($[2] !== children || $[3] !== sx || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
+  if ($[2] !== children || $[3] !== style || $[4] !== sx || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
     t4 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: Text,
       id: t1,
       className: t2,
       "data-control-disabled": t3,
       sx: sx,
+      style: style,
       children: children
     });
     $[2] = children;
-    $[3] = sx;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
-    $[7] = t4;
+    $[3] = style;
+    $[4] = sx;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
   } else {
-    t4 = $[7];
+    t4 = $[8];
   }
   return t4;
 }

package/dist/FormControl/FormControlLabel.d.ts

@@ -10,6 +10,7 @@ export type Props = {
     requiredIndicator?: boolean;
     id?: string;
     className?: string;
+    style?: React.CSSProperties;
 } & SxProp;
 declare const FormControlLabel: React.FC<React.PropsWithChildren<{
     htmlFor?: string;

package/dist/FormControl/FormControlLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAA;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAC9B,KAAK,CAAC,iBAAiB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG,KAAK,CAAC,CAoC9F,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAA;AAE5D,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAC9B,KAAK,CAAC,iBAAiB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG,KAAK,CAAC,CAoC9F,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/FormControl/FormControlLeadingVisual.d.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 import type { SxProp } from '../sx';
-declare const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>>;
+declare const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp & {
+    style?: React.CSSProperties;
+}>>;
 export default FormControlLeadingVisual;
 //# sourceMappingURL=FormControlLeadingVisual.d.ts.map

package/dist/FormControl/FormControlLeadingVisual.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlLeadingVisual.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLeadingVisual.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAWvE,CAAA;AA2BD,eAAe,wBAAwB,CAAA"}
+{"version":3,"file":"FormControlLeadingVisual.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLeadingVisual.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAKjC,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,GAAG;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAC,CAAC,CAgBvG,CAAA;AA2BD,eAAe,wBAAwB,CAAA"}

package/dist/FormControl/FormControlLeadingVisual.js

@@ -6,10 +6,11 @@ import sx from '../sx.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FormControlLeadingVisual = t0 => {
-  const $ = c(5);
+  const $ = c(6);
   const {
     children,
-    sx
+    sx,
+    style
   } = t0;
   const {
     disabled,
@@ -18,20 +19,22 @@ const FormControlLeadingVisual = t0 => {
   const t1 = disabled ? "" : undefined;
   const t2 = captionId ? "" : undefined;
   let t3;
-  if ($[0] !== children || $[1] !== sx || $[2] !== t1 || $[3] !== t2) {
+  if ($[0] !== children || $[1] !== style || $[2] !== sx || $[3] !== t1 || $[4] !== t2) {
     t3 = /*#__PURE__*/jsx(StyledLeadingVisual, {
       "data-control-disabled": t1,
+      style: style,
       "data-has-caption": t2,
       sx: sx,
       children: children
     });
     $[0] = children;
-    $[1] = sx;
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = t3;
+    $[1] = style;
+    $[2] = sx;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
   } else {
-    t3 = $[4];
+    t3 = $[5];
   }
   return t3;
 };

package/dist/FormControl/_FormControlValidation.d.ts

@@ -5,6 +5,7 @@ export type FormControlValidationProps = {
     variant: FormValidationStatus;
     id?: string;
     className?: string;
+    style?: React.CSSProperties;
 } & SxProp;
 declare const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>>;
 export default FormControlValidation;

package/dist/FormControl/_FormControlValidation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_FormControlValidation.d.ts","sourceRoot":"","sources":["../../src/FormControl/_FormControlValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAG7E,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,oBAAoB,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAaxF,CAAA;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"_FormControlValidation.d.ts","sourceRoot":"","sources":["../../src/FormControl/_FormControlValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAG7E,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,oBAAoB,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAoBxF,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/dist/FormControl/_FormControlValidation.js

@@ -4,35 +4,38 @@ import { useFormControlContext } from './_FormControlContext.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FormControlValidation = t0 => {
-  const $ = c(6);
+  const $ = c(7);
   const {
     children,
     className,
     variant,
     sx,
-    id
+    id,
+    style
   } = t0;
   const {
     validationMessageId
   } = useFormControlContext();
   const t1 = id || validationMessageId || "";
   let t2;
-  if ($[0] !== children || $[1] !== className || $[2] !== sx || $[3] !== t1 || $[4] !== variant) {
+  if ($[0] !== children || $[1] !== className || $[2] !== style || $[3] !== sx || $[4] !== t1 || $[5] !== variant) {
     t2 = /*#__PURE__*/jsx(InputValidation, {
       className: className,
       validationStatus: variant,
       id: t1,
       sx: sx,
+      style: style,
       children: children
     });
     $[0] = children;
     $[1] = className;
-    $[2] = sx;
-    $[3] = t1;
-    $[4] = variant;
-    $[5] = t2;
+    $[2] = style;
+    $[3] = sx;
+    $[4] = t1;
+    $[5] = variant;
+    $[6] = t2;
   } else {
-    t2 = $[5];
+    t2 = $[6];
   }
   return t2;
 };

package/dist/Heading/Heading.d.ts

@@ -1,11 +1,11 @@
-import type { SxProp } from '../sx';
 import type { ComponentProps } from '../utils/types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 type StyledHeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    as?: HeadingLevels;
     variant?: 'large' | 'medium' | 'small';
-} & SxProp;
-declare const Heading: PolymorphicForwardRefComponent<"h2", StyledHeadingProps>;
+};
+declare const Heading: PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>;
 export type HeadingProps = ComponentProps<typeof Heading>;
 export default Heading;
 //# sourceMappingURL=Heading.d.ts.map

package/dist/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAClD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,KAAK,kBAAkB,GAAG;IACxB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACvC,GAAG,MAAM,CAAA;AAEV,QAAA,MAAM,OAAO,EAkCP,8BAA8B,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAA;AAI9D,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAClD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5D,KAAK,kBAAkB,GAAG;IACxB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACvC,CAAA;AAED,QAAA,MAAM,OAAO,EAsBP,8BAA8B,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAA;AAIvE,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,eAAe,OAAO,CAAA"}

package/dist/Heading/Heading.js

@@ -3,7 +3,6 @@ import React, { forwardRef, useEffect } from 'react';
 import classes from './Heading.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import Box from '../Box/Box.js';
 
 const Heading = /*#__PURE__*/forwardRef(({
   as: Component = 'h2',
@@ -29,16 +28,6 @@ const Heading = /*#__PURE__*/forwardRef(({
       }
     }, [innerRef]);
   }
-  if (props.sx) {
-    return /*#__PURE__*/jsx(Box, {
-      as: Component,
-      className: clsx(className, classes.Heading),
-      "data-variant": variant,
-      ...props,
-      // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
-      ref: innerRef
-    });
-  }
   return /*#__PURE__*/jsx(Component, {
     className: clsx(className, classes.Heading),
     "data-variant": variant,

package/dist/KeybindingHint/components/Chord-81099645.css

@@ -0,0 +1,2 @@
+.prc-components-Chord-vlqS5{border:var(--borderWidth-thin,.0625rem) solid;box-shadow:none;display:inline-flex;font-weight:var(--base-text-weight-normal,400);gap:.5ch;justify-content:center;overflow:hidden;vertical-align:baseline}.prc-components-ChordNormal-6rvP6{background:var(--bgColor-transparent,transparent);border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-components-ChordOnEmphasis-XDov-{background:var(--counter-bgColor-emphasis,#59636e)}.prc-components-ChordOnEmphasis-XDov-,.prc-components-ChordOnPrimary--7rmy{border-color:transparent;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-components-ChordOnPrimary--7rmy{background:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg))}.prc-components-ChordSmall-nDiio{border-radius:var(--borderRadius-small,.1875rem);font-size:11px;line-height:var(--base-size-8,.5rem);min-width:var(--base-size-16,1rem);padding:var(--base-size-2,.125rem)}.prc-components-ChordNormal-6rvP6:not(.prc-components-ChordSmall-nDiio){border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-small,.75rem);line-height:10px;min-width:var(--base-size-20,1.25rem);padding:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=Chord-81099645.css.map */

package/dist/KeybindingHint/components/Chord-81099645.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/KeybindingHint/components/Chord.module.css"],"names":[],"mappings":"AAAA,4BAEE,6CAAqC,CAGrC,eAAgB,CAJhB,mBAAoB,CAEpB,8CAA2C,CAC3C,QAAU,CAIV,sBAAuB,CADvB,eAAgB,CADhB,uBAGF,CAEA,kCACE,iDAAsC,CAEtC,mEAAwC,CADxC,gDAEF,CAEA,sCACE,kDAGF,CAEA,2EAHE,wBAAyB,CADzB,2DAQF,CAJA,qCACE,oFAGF,CAEA,iCACE,gDAAwC,CACxC,cAAe,CAEf,oCAA+B,CAC/B,kCAA8B,CAF9B,kCAGF,CAEA,wEACE,gDAAyC,CACzC,4CAA+C,CAE/C,gBAAiB,CACjB,qCAA8B,CAF9B,iCAGF","file":"Chord-81099645.css","sourcesContent":[".Chord {\n  display: inline-flex;\n  border: var(--borderWidth-thin) solid;\n  font-weight: var(--base-text-weight-normal);\n  gap: 0.5ch;\n  box-shadow: none;\n  vertical-align: baseline;\n  overflow: hidden;\n  justify-content: center;\n}\n\n.ChordNormal {\n  background: var(--bgColor-transparent);\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n.ChordOnEmphasis {\n  background: var(--counter-bgColor-emphasis);\n  color: var(--fgColor-onEmphasis);\n  border-color: transparent;\n}\n\n.ChordOnPrimary {\n  background: var(--button-primary-bgColor-active);\n  color: var(--fgColor-onEmphasis);\n  border-color: transparent;\n}\n\n.ChordSmall {\n  border-radius: var(--borderRadius-small);\n  font-size: 11px; /* stylelint-disable-line primer/typography */\n  padding: var(--base-size-2);\n  line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */\n  min-width: var(--base-size-16);\n}\n\n.ChordNormal:not(.ChordSmall) {\n  border-radius: var(--borderRadius-medium);\n  font-size: var(--text-body-size-small, 0.75rem);\n  padding: var(--base-size-4);\n  line-height: 10px; /* stylelint-disable-line primer/typography */\n  min-width: var(--base-size-20);\n}\n"]}

package/dist/KeybindingHint/components/Chord.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chord.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Chord.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AAmCjD,eAAO,MAAM,KAAK,GAAI,iCAAmE,mBAAmB,gCAkC3G,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,SAAS,OAAO,WAGvD,CAAA"}
+{"version":3,"file":"Chord.d.ts","sourceRoot":"","sources":["../../../src/KeybindingHint/components/Chord.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,UAAU,CAAA;AA+BjD,eAAO,MAAM,KAAK,GAAI,iCAAmE,mBAAmB,gCAqB3G,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,SAAS,OAAO,WAGvD,CAAA"}

package/dist/KeybindingHint/components/Chord.js

@@ -2,6 +2,8 @@ import { c } from 'react-compiler-runtime';
 import { Fragment } from 'react';
 import { Key } from './Key.js';
 import { accessibleKeyName } from '../key-names.js';
+import { clsx } from 'clsx';
+import classes from './Chord.module.css.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Text from '../../Text/Text.js';
 
@@ -21,13 +23,8 @@ const compareLowercaseKeys = (a, b) => keySortPriority(a) - keySortPriority(b);
 
 /** Split and sort the chord keys in standard order. */
 const splitChord = chord => chord.split('+').map(k => k.toLowerCase()).sort(compareLowercaseKeys);
-const backgroundColors = {
-  normal: 'var(--bgColor-transparent)',
-  onEmphasis: 'var(--counter-bgColor-emphasis)',
-  onPrimary: 'var(--button-primary-bgColor-active)'
-};
 const Chord = t0 => {
-  const $ = c(17);
+  const $ = c(13);
   const {
     keys,
     format: t1,
@@ -37,52 +34,31 @@ const Chord = t0 => {
   const format = t1 === undefined ? "condensed" : t1;
   const variant = t2 === undefined ? "normal" : t2;
   const size = t3 === undefined ? "normal" : t3;
-  const t4 = backgroundColors[variant];
-  const t5 = variant === "normal" ? "var(--fgColor-muted)" : "var(--fgColor-onEmphasis)";
-  const t6 = variant === "normal" ? "var(--borderColor-default)" : "transparent";
-  const t7 = size === "small" ? 1 : 2;
-  const t8 = size === "small" ? "11px" : 0;
-  const t9 = size === "small" ? "2px" : 1;
-  const t10 = size === "small" ? "8px" : "10px";
-  const t11 = size === "small" ? "var(--base-size-16)" : "var(--base-size-20)";
-  let t12;
-  if ($[0] !== t10 || $[1] !== t11 || $[2] !== t4 || $[3] !== t5 || $[4] !== t6 || $[5] !== t7 || $[6] !== t8 || $[7] !== t9) {
-    t12 = {
-      display: "inline-flex",
-      bg: t4,
-      color: t5,
-      border: "1px solid",
-      borderColor: t6,
-      borderRadius: t7,
-      fontWeight: "normal",
-      fontFamily: "normal",
-      fontSize: t8,
-      p: t9,
-      gap: "0.5ch",
-      boxShadow: "none",
-      verticalAlign: "baseline",
-      overflow: "hidden",
-      lineHeight: t10,
-      minWidth: t11,
-      justifyContent: "center"
-    };
-    $[0] = t10;
-    $[1] = t11;
-    $[2] = t4;
-    $[3] = t5;
-    $[4] = t6;
-    $[5] = t7;
-    $[6] = t8;
-    $[7] = t9;
-    $[8] = t12;
+  const t4 = variant === "normal";
+  const t5 = variant === "onEmphasis";
+  const t6 = variant === "onPrimary";
+  const t7 = size === "small";
+  let t8;
+  if ($[0] !== t4 || $[1] !== t5 || $[2] !== t6 || $[3] !== t7) {
+    t8 = clsx(classes.Chord, {
+      [classes.ChordNormal]: t4,
+      [classes.ChordOnEmphasis]: t5,
+      [classes.ChordOnPrimary]: t6,
+      [classes.ChordSmall]: t7
+    });
+    $[0] = t4;
+    $[1] = t5;
+    $[2] = t6;
+    $[3] = t7;
+    $[4] = t8;
   } else {
-    t12 = $[8];
+    t8 = $[4];
   }
-  let t13;
-  if ($[9] !== format || $[10] !== keys) {
-    let t14;
-    if ($[12] !== format) {
-      t14 = (k, i) => /*#__PURE__*/jsxs(Fragment, {
+  let t9;
+  if ($[5] !== format || $[6] !== keys) {
+    let t10;
+    if ($[8] !== format) {
+      t10 = (k, i) => /*#__PURE__*/jsxs(Fragment, {
         children: [i > 0 && format === "full" ? /*#__PURE__*/jsx("span", {
           "aria-hidden": true,
           children: " + "
@@ -91,31 +67,31 @@ const Chord = t0 => {
           format: format
         })]
       }, i);
-      $[12] = format;
-      $[13] = t14;
+      $[8] = format;
+      $[9] = t10;
     } else {
-      t14 = $[13];
+      t10 = $[9];
     }
-    t13 = splitChord(keys).map(t14);
-    $[9] = format;
-    $[10] = keys;
-    $[11] = t13;
+    t9 = splitChord(keys).map(t10);
+    $[5] = format;
+    $[6] = keys;
+    $[7] = t9;
   } else {
-    t13 = $[11];
+    t9 = $[7];
   }
-  let t14;
-  if ($[14] !== t12 || $[15] !== t13) {
-    t14 = /*#__PURE__*/jsx(Text, {
-      sx: t12,
-      children: t13
+  let t10;
+  if ($[10] !== t8 || $[11] !== t9) {
+    t10 = /*#__PURE__*/jsx(Text, {
+      className: t8,
+      children: t9
     });
-    $[14] = t12;
-    $[15] = t13;
-    $[16] = t14;
+    $[10] = t8;
+    $[11] = t9;
+    $[12] = t10;
   } else {
-    t14 = $[16];
+    t10 = $[12];
   }
-  return t14;
+  return t10;
 };
 
 /** Plain string version of `Chord` for use in `aria` string attributes. */

package/dist/KeybindingHint/components/Chord.module.css.js

@@ -0,0 +1,5 @@
+import './Chord-81099645.css';
+
+var classes = {"Chord":"prc-components-Chord-vlqS5","ChordNormal":"prc-components-ChordNormal-6rvP6","ChordOnEmphasis":"prc-components-ChordOnEmphasis-XDov-","ChordOnPrimary":"prc-components-ChordOnPrimary--7rmy","ChordSmall":"prc-components-ChordSmall-nDiio"};
+
+export { classes as default };

package/dist/Label/Label.d.ts

@@ -1,14 +1,12 @@
-import type { BetterSystemStyleObject, SxProp } from '../sx';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
 export type LabelProps = {
     /** The color of the label */
     variant?: LabelColorOptions;
     /** How large the label is rendered */
     size?: LabelSizeKeys;
-} & SxProp;
+};
 export type LabelColorOptions = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors';
 type LabelSizeKeys = 'small' | 'large';
-export declare const variants: Record<LabelColorOptions, BetterSystemStyleObject>;
 declare const Label: PolymorphicForwardRefComponent<"span", LabelProps>;
 export default Label;
 //# sourceMappingURL=Label.d.ts.map

package/dist/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,uBAAuB,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAuCvE,CAAA;AAED,QAAA,MAAM,KAAK,EAiBL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,QAAA,MAAM,KAAK,EAOL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}

package/dist/Label/Label.js

@@ -3,98 +3,66 @@ import { clsx } from 'clsx';
 import classes from './Label.module.css.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 const Label = /*#__PURE__*/React.forwardRef(function Label(t0, ref) {
-  const $ = c(24);
-  let as;
+  const $ = c(15);
   let className;
   let rest;
   let t1;
   let t2;
+  let t3;
   if ($[0] !== t0) {
     ({
-      as,
-      size: t1,
-      variant: t2,
+      as: t1,
+      size: t2,
+      variant: t3,
       className,
       ...rest
     } = t0);
     $[0] = t0;
-    $[1] = as;
-    $[2] = className;
-    $[3] = rest;
-    $[4] = t1;
-    $[5] = t2;
+    $[1] = className;
+    $[2] = rest;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
   } else {
-    as = $[1];
-    className = $[2];
-    rest = $[3];
-    t1 = $[4];
-    t2 = $[5];
-  }
-  const size = t1 === undefined ? "small" : t1;
-  const variant = t2 === undefined ? "default" : t2;
-  const Component = as || "span";
-  if (rest.sx) {
-    let t3;
-    if ($[6] !== className) {
-      t3 = clsx(className, classes.Label);
-      $[6] = className;
-      $[7] = t3;
-    } else {
-      t3 = $[7];
-    }
-    let t4;
-    if ($[8] !== Component || $[9] !== ref || $[10] !== rest || $[11] !== size || $[12] !== t3 || $[13] !== variant) {
-      t4 = /*#__PURE__*/jsx(Box, {
-        as: Component,
-        className: t3,
-        "data-size": size,
-        "data-variant": variant,
-        ref: ref,
-        ...rest
-      });
-      $[8] = Component;
-      $[9] = ref;
-      $[10] = rest;
-      $[11] = size;
-      $[12] = t3;
-      $[13] = variant;
-      $[14] = t4;
-    } else {
-      t4 = $[14];
-    }
-    return t4;
+    className = $[1];
+    rest = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
   }
-  let t3;
-  if ($[15] !== className) {
-    t3 = clsx(className, classes.Label);
-    $[15] = className;
-    $[16] = t3;
+  const Component = t1 === undefined ? "span" : t1;
+  const size = t2 === undefined ? "small" : t2;
+  const variant = t3 === undefined ? "default" : t3;
+  let t4;
+  if ($[6] !== className) {
+    t4 = clsx(className, classes.Label);
+    $[6] = className;
+    $[7] = t4;
   } else {
-    t3 = $[16];
+    t4 = $[7];
   }
-  let t4;
-  if ($[17] !== Component || $[18] !== ref || $[19] !== rest || $[20] !== size || $[21] !== t3 || $[22] !== variant) {
-    t4 = /*#__PURE__*/jsx(Component, {
-      className: t3,
+  let t5;
+  if ($[8] !== Component || $[9] !== ref || $[10] !== rest || $[11] !== size || $[12] !== t4 || $[13] !== variant) {
+    t5 = /*#__PURE__*/jsx(Component, {
+      className: t4,
       "data-size": size,
       "data-variant": variant,
       ref: ref,
       ...rest
     });
-    $[17] = Component;
-    $[18] = ref;
-    $[19] = rest;
-    $[20] = size;
-    $[21] = t3;
-    $[22] = variant;
-    $[23] = t4;
+    $[8] = Component;
+    $[9] = ref;
+    $[10] = rest;
+    $[11] = size;
+    $[12] = t4;
+    $[13] = variant;
+    $[14] = t5;
   } else {
-    t4 = $[23];
+    t5 = $[14];
   }
-  return t4;
+  return t5;
 });
 
 export { Label as default };