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

package/dist/FormControl/FormControl.js

@@ -12,7 +12,7 @@ import FormControlValidation from './_FormControlValidation.js';
 import { FormControlContextProvider } from './_FormControlContext.js';
 import { warning } from '../utils/warning.js';
 import classes from './FormControl.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { isSlot } from '../utils/is-slot.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import CheckboxOrRadioGroupContext from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js';
 import Autocomplete from '../Autocomplete/Autocomplete.js';
@@ -32,7 +32,6 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
     layout: t1,
     id: idProp,
     required,
-    sx,
     className,
     style
   } = t0;
@@ -57,10 +56,10 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
   const validationMessageId = slots.validation ? `${id}-validationMessage` : undefined;
   const captionId = slots.caption ? `${id}-caption` : undefined;
   const validationStatus = (_slots$validation = slots.validation) === null || _slots$validation === void 0 ? void 0 : _slots$validation.props.variant;
-  const InputComponent = childrenWithoutSlots.find(child => expectedInputComponents.some(inputComponent => /*#__PURE__*/React.isValidElement(child) && child.type === inputComponent));
+  const InputComponent = childrenWithoutSlots.find(child => expectedInputComponents.some(inputComponent => /*#__PURE__*/React.isValidElement(child) && (child.type === inputComponent || isSlot(child, inputComponent))));
   const inputProps = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.props;
-  const isChoiceInput = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio);
-  const isRadioInput = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.type === Radio;
+  const isChoiceInput = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || isSlot(InputComponent, Checkbox) || isSlot(InputComponent, Radio));
+  const isRadioInput = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Radio || isSlot(InputComponent, Radio));
   if (InputComponent) {
     process.env.NODE_ENV !== "production" ? warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id, "instead of passing the 'id' prop directly to the input component, it should be passed to the parent component, <FormControl>") : void 0;
     process.env.NODE_ENV !== "production" ? warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, "instead of passing the 'disabled' prop directly to the input component, it should be passed to the parent component, <FormControl>") : void 0;
@@ -76,103 +75,100 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
     process.env.NODE_ENV !== "production" ? warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.") : void 0;
   }
   const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
-  const t3 = classes;
-  const t4 = /*#__PURE__*/React.isValidElement(InputComponent) ? /*#__PURE__*/React.cloneElement(InputComponent, {
+  const t3 = /*#__PURE__*/React.isValidElement(InputComponent) ? /*#__PURE__*/React.cloneElement(InputComponent, {
     id,
     disabled,
     required: required && !isRadioInput,
     "aria-describedby": captionId
   }) : null;
-  let t5;
+  let t4;
   if ($[1] !== childrenWithoutSlots) {
-    t5 = childrenWithoutSlots.filter(_temp2);
+    t4 = childrenWithoutSlots.filter(_temp2);
     $[1] = childrenWithoutSlots;
-    $[2] = t5;
+    $[2] = t4;
   } else {
-    t5 = $[2];
+    t4 = $[2];
   }
-  let t6;
-  if ($[3] !== t3.ControlChoiceInputs || $[4] !== t4 || $[5] !== t5) {
-    t6 = /*#__PURE__*/jsxs("div", {
-      className: t3.ControlChoiceInputs,
-      children: [t4, t5]
+  let t5;
+  if ($[3] !== t3 || $[4] !== t4) {
+    t5 = /*#__PURE__*/jsxs("div", {
+      className: classes.ControlChoiceInputs,
+      children: [t3, t4]
     });
-    $[3] = t3.ControlChoiceInputs;
+    $[3] = t3;
     $[4] = t4;
     $[5] = t5;
-    $[6] = t6;
   } else {
-    t6 = $[6];
+    t5 = $[5];
   }
-  let t7;
-  if ($[7] !== disabled || $[8] !== slots.caption || $[9] !== slots.leadingVisual) {
-    t7 = slots.leadingVisual ? /*#__PURE__*/jsx("div", {
+  let t6;
+  if ($[6] !== disabled || $[7] !== slots.caption || $[8] !== slots.leadingVisual) {
+    t6 = slots.leadingVisual ? /*#__PURE__*/jsx("div", {
       className: classes.LeadingVisual,
       "data-disabled": disabled ? "" : undefined,
       "data-has-caption": slots.caption ? "" : undefined,
       children: slots.leadingVisual
     }) : null;
-    $[7] = disabled;
-    $[8] = slots.caption;
-    $[9] = slots.leadingVisual;
-    $[10] = t7;
+    $[6] = disabled;
+    $[7] = slots.caption;
+    $[8] = slots.leadingVisual;
+    $[9] = t6;
   } else {
-    t7 = $[10];
+    t6 = $[9];
   }
-  let t8;
-  if ($[11] !== slots.caption || $[12] !== slots.label) {
-    t8 = /*#__PURE__*/jsxs("div", {
+  let t7;
+  if ($[10] !== slots.caption || $[11] !== slots.label) {
+    t7 = /*#__PURE__*/jsxs("div", {
       className: classes.LabelContainer,
       children: [slots.label, slots.caption]
     });
-    $[11] = slots.caption;
-    $[12] = slots.label;
-    $[13] = t8;
+    $[10] = slots.caption;
+    $[11] = slots.label;
+    $[12] = t7;
   } else {
-    t8 = $[13];
+    t7 = $[12];
   }
-  let t9;
-  if ($[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
-    t9 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t6, t7, t8]
+  let t8;
+  if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+    t8 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t5, t6, t7]
     });
+    $[13] = t5;
     $[14] = t6;
     $[15] = t7;
     $[16] = t8;
-    $[17] = t9;
   } else {
-    t9 = $[17];
+    t8 = $[16];
   }
-  const InputChildren = t9;
-  let t10;
-  if ($[18] !== captionId || $[19] !== disabled || $[20] !== id || $[21] !== required || $[22] !== validationMessageId) {
-    t10 = {
+  const InputChildren = t8;
+  const T0 = FormControlContextProvider;
+  let t9;
+  if ($[17] !== captionId || $[18] !== disabled || $[19] !== id || $[20] !== required || $[21] !== validationMessageId) {
+    t9 = {
       captionId,
       disabled,
       id,
       required,
       validationMessageId
     };
-    $[18] = captionId;
-    $[19] = disabled;
-    $[20] = id;
-    $[21] = required;
-    $[22] = validationMessageId;
-    $[23] = t10;
+    $[17] = captionId;
+    $[18] = disabled;
+    $[19] = id;
+    $[20] = required;
+    $[21] = validationMessageId;
+    $[22] = t9;
   } else {
-    t10 = $[23];
+    t9 = $[22];
   }
-  const t11 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsx(BoxWithFallback, {
+  const t10 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsx("div", {
     ref: ref,
     "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
-    sx: sx,
     className: clsx(className, classes.ControlHorizontalLayout),
     style: style,
     children: InputChildren
-  }) : /*#__PURE__*/jsxs(BoxWithFallback, {
+  }) : /*#__PURE__*/jsxs("div", {
     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({
@@ -181,26 +177,28 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
       disabled,
       validationStatus,
       "aria-describedby": [validationMessageId, captionId].filter(Boolean).join(" ")
-    }, InputComponent.props)), childrenWithoutSlots.filter(child_2 => /*#__PURE__*/React.isValidElement(child_2) && !expectedInputComponents.some(inputComponent_1 => child_2.type === inputComponent_1)), slots.validation ? /*#__PURE__*/jsx(ValidationAnimationContainer, {
+    }, InputComponent.props)), childrenWithoutSlots.filter(child_2 => /*#__PURE__*/React.isValidElement(child_2) && !expectedInputComponents.some(inputComponent_1 => child_2.type === inputComponent_1 || isSlot(child_2, inputComponent_1))), slots.validation ? /*#__PURE__*/jsx(ValidationAnimationContainer, {
       show: true,
       children: slots.validation
     }) : null, slots.caption]
   });
-  let t12;
-  if ($[24] !== t10 || $[25] !== t11) {
-    t12 = /*#__PURE__*/jsx(FormControlContextProvider, {
-      value: t10,
-      children: t11
+  let t11;
+  if ($[23] !== T0 || $[24] !== t10 || $[25] !== t9) {
+    t11 = /*#__PURE__*/jsx(T0, {
+      value: t9,
+      children: t10
     });
+    $[23] = T0;
     $[24] = t10;
-    $[25] = t11;
-    $[26] = t12;
+    $[25] = t9;
+    $[26] = t11;
   } else {
-    t12 = $[26];
+    t11 = $[26];
   }
-  return t12;
+  return t11;
 });
 var FormControl$1 = Object.assign(FormControl, {
+  __SLOT__: Symbol('FormControl'),
   Caption: FormControlCaption,
   Label: FormControlLabel,
   LeadingVisual: FormControlLeadingVisual,
@@ -211,7 +209,7 @@ function _temp(child_0) {
   return /*#__PURE__*/React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
 }
 function _temp2(child_1) {
-  return /*#__PURE__*/React.isValidElement(child_1) && ![Checkbox, Radio].some(inputComponent_0 => child_1.type === inputComponent_0);
+  return /*#__PURE__*/React.isValidElement(child_1) && ![Checkbox, Radio].some(inputComponent_0 => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
 }
 
 export { FormControl$1 as default };

package/dist/FormControl/FormControlCaption.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
-import type { SxProp } from '../sx';
-type FormControlCaptionProps = React.PropsWithChildren<{
+export type FormControlCaptionProps = React.PropsWithChildren<{
     id?: string;
     className?: string;
     style?: React.CSSProperties;
-} & SxProp>;
-declare function FormControlCaption({ id, children, sx, className, style }: FormControlCaptionProps): React.JSX.Element;
+}>;
+declare function FormControlCaption({ id, children, className, style }: FormControlCaptionProps): React.JSX.Element;
+declare namespace FormControlCaption {
+    var __SLOT__: symbol;
+}
 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;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"}
+{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AAEF,iBAAS,kBAAkB,CAAC,EAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,uBAAuB,qBAapF;kBAbQ,kBAAkB;;;AAiB3B,OAAO,EAAC,kBAAkB,EAAC,CAAA"}

package/dist/FormControl/FormControlCaption.js

@@ -2,16 +2,14 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './FormControlCaption.module.css.js';
 import { useFormControlContext } from './_FormControlContext.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../Text/Text.js';
 
 function FormControlCaption(t0) {
-  const $ = c(9);
+  const $ = c(8);
   const {
     id,
     children,
-    sx,
     className,
     style
   } = t0;
@@ -30,27 +28,25 @@ function FormControlCaption(t0) {
   }
   const t3 = disabled ? "" : undefined;
   let t4;
-  if ($[2] !== children || $[3] !== style || $[4] !== sx || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
-    t4 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: Text,
+  if ($[2] !== children || $[3] !== style || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx(Text, {
       id: t1,
       className: t2,
       "data-control-disabled": t3,
-      sx: sx,
       style: style,
       children: children
     });
     $[2] = children;
     $[3] = style;
-    $[4] = sx;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
-    $[8] = t4;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t4 = $[8];
+    t4 = $[7];
   }
   return t4;
 }
+FormControlCaption.__SLOT__ = Symbol('FormControl.Caption');
 
 export { FormControlCaption };

package/dist/FormControl/FormControlLabel.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-import type { SxProp } from '../sx';
 import { InputLabel } from '../internal/components/InputLabel';
+import type { FCWithSlotMarker } from '../utils/types';
 export type Props = {
     /**
      * Whether the label should be visually hidden
@@ -11,8 +11,8 @@ export type Props = {
     id?: string;
     className?: string;
     style?: React.CSSProperties;
-} & SxProp;
-declare const FormControlLabel: React.FC<React.PropsWithChildren<{
+};
+declare const FormControlLabel: FCWithSlotMarker<React.PropsWithChildren<{
     htmlFor?: string;
 } & React.ComponentProps<typeof InputLabel> & Props>>;
 export default FormControlLabel;

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;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"}
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAA;AAC5D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,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,CAAA;AAED,QAAA,MAAM,gBAAgB,EAAE,gBAAgB,CACtC,KAAK,CAAC,iBAAiB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG,KAAK,CAAC,CAkC9F,CAAA;AAID,eAAe,gBAAgB,CAAA"}

package/dist/FormControl/FormControlLabel.js

@@ -4,7 +4,7 @@ import { InputLabel } from '../internal/components/InputLabel.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FormControlLabel = t0 => {
-  const $ = c(27);
+  const $ = c(25);
   let as;
   let children;
   let className;
@@ -12,7 +12,6 @@ const FormControlLabel = t0 => {
   let id;
   let props;
   let requiredText;
-  let sx;
   let t1;
   let visuallyHidden;
   if ($[0] !== t0) {
@@ -24,7 +23,6 @@ const FormControlLabel = t0 => {
       visuallyHidden,
       requiredIndicator: t1,
       requiredText,
-      sx,
       className,
       ...props
     } = t0);
@@ -36,9 +34,8 @@ const FormControlLabel = t0 => {
     $[5] = id;
     $[6] = props;
     $[7] = requiredText;
-    $[8] = sx;
-    $[9] = t1;
-    $[10] = visuallyHidden;
+    $[8] = t1;
+    $[9] = visuallyHidden;
   } else {
     as = $[1];
     children = $[2];
@@ -47,9 +44,8 @@ const FormControlLabel = t0 => {
     id = $[5];
     props = $[6];
     requiredText = $[7];
-    sx = $[8];
-    t1 = $[9];
-    visuallyHidden = $[10];
+    t1 = $[8];
+    visuallyHidden = $[9];
   }
   const requiredIndicator = t1 === undefined ? true : t1;
   const {
@@ -58,7 +54,7 @@ const FormControlLabel = t0 => {
     required
   } = useFormControlContext();
   let t2;
-  if ($[11] !== as || $[12] !== className || $[13] !== disabled || $[14] !== formControlId || $[15] !== htmlFor || $[16] !== id || $[17] !== props || $[18] !== required || $[19] !== requiredIndicator || $[20] !== requiredText || $[21] !== sx || $[22] !== visuallyHidden) {
+  if ($[10] !== as || $[11] !== className || $[12] !== disabled || $[13] !== formControlId || $[14] !== htmlFor || $[15] !== id || $[16] !== props || $[17] !== required || $[18] !== requiredIndicator || $[19] !== requiredText || $[20] !== visuallyHidden) {
     t2 = as === "legend" || as === "span" ? {
       as,
       id,
@@ -68,7 +64,6 @@ const FormControlLabel = t0 => {
       requiredText,
       requiredIndicator,
       disabled,
-      sx,
       ...props
     } : {
       as,
@@ -80,39 +75,38 @@ const FormControlLabel = t0 => {
       requiredText,
       requiredIndicator,
       disabled,
-      sx,
       ...props
     };
-    $[11] = as;
-    $[12] = className;
-    $[13] = disabled;
-    $[14] = formControlId;
-    $[15] = htmlFor;
-    $[16] = id;
-    $[17] = props;
-    $[18] = required;
-    $[19] = requiredIndicator;
-    $[20] = requiredText;
-    $[21] = sx;
-    $[22] = visuallyHidden;
-    $[23] = t2;
+    $[10] = as;
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = formControlId;
+    $[14] = htmlFor;
+    $[15] = id;
+    $[16] = props;
+    $[17] = required;
+    $[18] = requiredIndicator;
+    $[19] = requiredText;
+    $[20] = visuallyHidden;
+    $[21] = t2;
   } else {
-    t2 = $[23];
+    t2 = $[21];
   }
   const labelProps = t2;
   let t3;
-  if ($[24] !== children || $[25] !== labelProps) {
+  if ($[22] !== children || $[23] !== labelProps) {
     t3 = /*#__PURE__*/jsx(InputLabel, {
       ...labelProps,
       children: children
     });
-    $[24] = children;
-    $[25] = labelProps;
-    $[26] = t3;
+    $[22] = children;
+    $[23] = labelProps;
+    $[24] = t3;
   } else {
-    t3 = $[26];
+    t3 = $[24];
   }
   return t3;
 };
+FormControlLabel.__SLOT__ = Symbol('FormControl.Label');
 
 export { FormControlLabel as default };

package/dist/FormControl/FormControlLeadingVisual-e217df71.css

@@ -0,0 +1,2 @@
+.prc-FormControl-LeadingVisual-Gycks{--leadingVisual-size:16px;align-items:center;color:var(--fgColor-default,var(--color-fg-default));display:flex}.prc-FormControl-LeadingVisual-Gycks:where([data-control-disabled]){color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.prc-FormControl-LeadingVisual-Gycks>*{min-height:var(--leadingVisual-size);min-width:var(--leadingVisual-size);fill:currentColor}.prc-FormControl-LeadingVisual-Gycks:where([data-has-caption]){--leadingVisual-size:24px}
+/*# sourceMappingURL=FormControlLeadingVisual-e217df71.css.map */

package/dist/FormControl/FormControlLeadingVisual-e217df71.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FormControl/FormControlLeadingVisual.module.css"],"names":[],"mappings":"AAAA,qCACE,yBAA0B,CAI1B,kBAAmB,CAFnB,oDAA6B,CAC7B,YAgBF,CAbE,oEACE,qEACF,CAEA,uCAEE,oCAAqC,CADrC,mCAAoC,CAEpC,iBACF,CAEA,+DACE,yBACF","file":"FormControlLeadingVisual-e217df71.css","sourcesContent":[".LeadingVisual {\n  --leadingVisual-size: 16px;\n\n  color: var(--fgColor-default);\n  display: flex;\n  align-items: center;\n\n  &:where([data-control-disabled]) {\n    color: var(--control-fgColor-disabled);\n  }\n\n  & > * {\n    min-width: var(--leadingVisual-size);\n    min-height: var(--leadingVisual-size);\n    fill: currentColor;\n  }\n\n  &:where([data-has-caption]) {\n    --leadingVisual-size: 24px;\n  }\n}\n"]}

package/dist/FormControl/FormControlLeadingVisual.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-import type { SxProp } from '../sx';
-declare const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp & {
+import type { FCWithSlotMarker } from '../utils/types';
+declare const FormControlLeadingVisual: FCWithSlotMarker<React.PropsWithChildren<{
     style?: React.CSSProperties;
 }>>;
 export default FormControlLeadingVisual;

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,GAAG;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAC,CAAC,CAgBvG,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;AAG9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,QAAA,MAAM,wBAAwB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAC,CAAC,CAetG,CAAA;AAID,eAAe,wBAAwB,CAAA"}

package/dist/FormControl/FormControlLeadingVisual.js

@@ -1,15 +1,12 @@
 import { c } from 'react-compiler-runtime';
-import { get } from '../constants.js';
 import { useFormControlContext } from './_FormControlContext.js';
-import styled from 'styled-components';
-import sx from '../sx.js';
+import classes from './FormControlLeadingVisual.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FormControlLeadingVisual = t0 => {
-  const $ = c(6);
+  const $ = c(5);
   const {
     children,
-    sx,
     style
   } = t0;
   const {
@@ -19,28 +16,24 @@ const FormControlLeadingVisual = t0 => {
   const t1 = disabled ? "" : undefined;
   const t2 = captionId ? "" : undefined;
   let t3;
-  if ($[0] !== children || $[1] !== style || $[2] !== sx || $[3] !== t1 || $[4] !== t2) {
-    t3 = /*#__PURE__*/jsx(StyledLeadingVisual, {
+  if ($[0] !== children || $[1] !== style || $[2] !== t1 || $[3] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      className: classes.LeadingVisual,
       "data-control-disabled": t1,
       style: style,
       "data-has-caption": t2,
-      sx: sx,
       children: children
     });
     $[0] = children;
     $[1] = style;
-    $[2] = sx;
-    $[3] = t1;
-    $[4] = t2;
-    $[5] = t3;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[4];
   }
   return t3;
 };
-const StyledLeadingVisual = styled.div.withConfig({
-  displayName: "FormControlLeadingVisual__StyledLeadingVisual",
-  componentId: "sc-1c26i0t-0"
-})(["--leadingVisual-size:", ";color:var(--fgColor-default);display:flex;align-items:center;&:where([data-control-disabled]){color:var(--control-fgColor-disabled);}& > *{min-width:var(--leadingVisual-size);min-height:var(--leadingVisual-size);fill:currentColor;}&:where([data-has-caption]){--leadingVisual-size:", ";}", ""], get('fontSizes.2'), get('fontSizes.4'), sx);
+FormControlLeadingVisual.__SLOT__ = Symbol('FormControl.LeadingVisual');
 
 export { FormControlLeadingVisual as default };

package/dist/FormControl/FormControlLeadingVisual.module.css.js

@@ -0,0 +1,5 @@
+import './FormControlLeadingVisual-e217df71.css';
+
+var classes = {"LeadingVisual":"prc-FormControl-LeadingVisual-Gycks"};
+
+export { classes as default };

package/dist/FormControl/_FormControlContext.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import { useContext, createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const FormControlContext = /*#__PURE__*/createContext(null);
 const FormControlContextProvider = FormControlContext.Provider;

package/dist/FormControl/_FormControlValidation.d.ts

@@ -1,12 +1,12 @@
 import type React from 'react';
-import type { SxProp } from '../sx';
 import type { FormValidationStatus } from '../utils/types/FormValidationStatus';
+import type { FCWithSlotMarker } from '../utils/types';
 export type FormControlValidationProps = {
     variant: FormValidationStatus;
     id?: string;
     className?: string;
     style?: React.CSSProperties;
-} & SxProp;
-declare const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>>;
+};
+declare const FormControlValidation: FCWithSlotMarker<React.PropsWithChildren<FormControlValidationProps>>;
 export default FormControlValidation;
 //# sourceMappingURL=_FormControlValidation.d.ts.map

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;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"}
+{"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,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,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,CAAA;AAED,QAAA,MAAM,qBAAqB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAkBhG,CAAA;AAID,eAAe,qBAAqB,CAAA"}

package/dist/FormControl/_FormControlValidation.js

@@ -4,12 +4,11 @@ import { useFormControlContext } from './_FormControlContext.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FormControlValidation = t0 => {
-  const $ = c(7);
+  const $ = c(6);
   const {
     children,
     className,
     variant,
-    sx,
     id,
     style
   } = t0;
@@ -18,26 +17,25 @@ const FormControlValidation = t0 => {
   } = useFormControlContext();
   const t1 = id || validationMessageId || "";
   let t2;
-  if ($[0] !== children || $[1] !== className || $[2] !== style || $[3] !== sx || $[4] !== t1 || $[5] !== variant) {
+  if ($[0] !== children || $[1] !== className || $[2] !== style || $[3] !== t1 || $[4] !== variant) {
     t2 = /*#__PURE__*/jsx(InputValidation, {
       className: className,
       validationStatus: variant,
       id: t1,
-      sx: sx,
       style: style,
       children: children
     });
     $[0] = children;
     $[1] = className;
     $[2] = style;
-    $[3] = sx;
-    $[4] = t1;
-    $[5] = variant;
-    $[6] = t2;
+    $[3] = t1;
+    $[4] = variant;
+    $[5] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[5];
   }
   return t2;
 };
+FormControlValidation.__SLOT__ = Symbol('FormControl.Validation');
 
 export { FormControlValidation as default };

package/dist/FormControl/index.d.ts

@@ -1,3 +1,7 @@
 export { useFormControlForwardedProps } from './_FormControlContext';
 export { default } from './FormControl';
+export type { FormControlProps } from './FormControl';
+export type { FormControlCaptionProps } from './FormControlCaption';
+export type { Props as FormControlLabelProps } from './FormControlLabel';
+export type { FormControlValidationProps } from './_FormControlValidation';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AACnD,YAAY,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AACjE,YAAY,EAAC,KAAK,IAAI,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AACtE,YAAY,EAAC,0BAA0B,EAAC,MAAM,0BAA0B,CAAA"}

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

@@ -0,0 +1,2 @@
+.prc-components-Chord-vlqS5{border:var(--borderWidth-thin,.0625rem) solid;border-radius:var(--borderRadius-default,.375rem);box-shadow:none;display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);gap:.5ch;justify-content:center;line-height:10px;overflow:hidden;padding:var(--base-size-4,.25rem);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-d4edcc89.css.map */