@primer/react 38.0.0-rc.6 → 38.0.0-rc.8

package/dist/experimental/IssueLabel/IssueLabel.js

@@ -1,12 +1,11 @@
 import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
-import { useTheme } from '../../ThemeProvider.js';
 import { getColorsFromHex } from './getColorFromHex.js';
 import classes from './IssueLabel.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 
 function IssueLabel(t0) {
-  const $ = c(42);
+  const $ = c(36);
   let children;
   let className;
   let fillColor;
@@ -38,139 +37,122 @@ function IssueLabel(t0) {
     t1 = $[6];
   }
   const variant = t1 === undefined ? "gray" : t1;
-  const {
-    resolvedColorScheme
-  } = useTheme();
-  const mode = resolvedColorScheme !== null && resolvedColorScheme !== void 0 && resolvedColorScheme.startsWith("dark") ? "dark" : "light";
   let t2;
-  let t3;
+  if ($[7] !== className) {
+    t2 = clsx(className, classes.IssueLabel);
+    $[7] = className;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const t3 = fillColor ? undefined : variant;
   let t4;
-  if ($[7] !== className || $[8] !== fillColor || $[9] !== mode || $[10] !== resolvedColorScheme || $[11] !== style || $[12] !== variant) {
-    const bgColors = {
-      light: "#ffffff",
-      dark: "#0d1117"
-    };
-    if ($[16] !== className) {
-      t2 = clsx(className, classes.IssueLabel);
-      $[16] = className;
-      $[17] = t2;
-    } else {
-      t2 = $[17];
-    }
-    t3 = fillColor ? undefined : variant;
+  if ($[9] !== fillColor || $[10] !== style) {
     t4 = fillColor ? {
       ...style,
-      ...getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode])
+      ...getColorsFromHex(fillColor)
     } : style;
-    $[7] = className;
-    $[8] = fillColor;
-    $[9] = mode;
-    $[10] = resolvedColorScheme;
-    $[11] = style;
-    $[12] = variant;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = t4;
+    $[9] = fillColor;
+    $[10] = style;
+    $[11] = t4;
   } else {
-    t2 = $[13];
-    t3 = $[14];
-    t4 = $[15];
+    t4 = $[11];
   }
   let t5;
-  if ($[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
+  if ($[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
     t5 = {
       className: t2,
       "data-variant": t3,
       style: t4
     };
-    $[18] = t2;
-    $[19] = t3;
-    $[20] = t4;
-    $[21] = t5;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t5 = $[21];
+    t5 = $[15];
   }
   const sharedProps = t5;
   if ("as" in props && props.as) {
     let BaseComponent;
     let rest;
-    if ($[22] !== props) {
+    if ($[16] !== props) {
       ({
         as: BaseComponent,
         ...rest
       } = props);
-      $[22] = props;
-      $[23] = BaseComponent;
-      $[24] = rest;
+      $[16] = props;
+      $[17] = BaseComponent;
+      $[18] = rest;
     } else {
-      BaseComponent = $[23];
-      rest = $[24];
+      BaseComponent = $[17];
+      rest = $[18];
     }
     let t6;
-    if ($[25] !== BaseComponent || $[26] !== children || $[27] !== rest || $[28] !== sharedProps) {
+    if ($[19] !== BaseComponent || $[20] !== children || $[21] !== rest || $[22] !== sharedProps) {
       t6 = /*#__PURE__*/jsx(BaseComponent, {
         ...rest,
         ...sharedProps,
         children: children
       });
-      $[25] = BaseComponent;
-      $[26] = children;
-      $[27] = rest;
-      $[28] = sharedProps;
-      $[29] = t6;
+      $[19] = BaseComponent;
+      $[20] = children;
+      $[21] = rest;
+      $[22] = sharedProps;
+      $[23] = t6;
     } else {
-      t6 = $[29];
+      t6 = $[23];
     }
     return t6;
   }
   if ("href" in props) {
     let t6;
-    if ($[30] !== children || $[31] !== props || $[32] !== sharedProps) {
+    if ($[24] !== children || $[25] !== props || $[26] !== sharedProps) {
       t6 = /*#__PURE__*/jsx("a", {
         ...props,
         ...sharedProps,
         children: children
       });
-      $[30] = children;
-      $[31] = props;
-      $[32] = sharedProps;
-      $[33] = t6;
+      $[24] = children;
+      $[25] = props;
+      $[26] = sharedProps;
+      $[27] = t6;
     } else {
-      t6 = $[33];
+      t6 = $[27];
     }
     return t6;
   }
   if ("onClick" in props) {
     let t6;
-    if ($[34] !== children || $[35] !== props || $[36] !== sharedProps) {
+    if ($[28] !== children || $[29] !== props || $[30] !== sharedProps) {
       t6 = /*#__PURE__*/jsx("button", {
         type: "button",
         ...props,
         ...sharedProps,
         children: children
       });
-      $[34] = children;
-      $[35] = props;
-      $[36] = sharedProps;
-      $[37] = t6;
+      $[28] = children;
+      $[29] = props;
+      $[30] = sharedProps;
+      $[31] = t6;
     } else {
-      t6 = $[37];
+      t6 = $[31];
     }
     return t6;
   }
   let t6;
-  if ($[38] !== children || $[39] !== props || $[40] !== sharedProps) {
+  if ($[32] !== children || $[33] !== props || $[34] !== sharedProps) {
     t6 = /*#__PURE__*/jsx("span", {
       ...props,
       ...sharedProps,
       children: children
     });
-    $[38] = children;
-    $[39] = props;
-    $[40] = sharedProps;
-    $[41] = t6;
+    $[32] = children;
+    $[33] = props;
+    $[34] = sharedProps;
+    $[35] = t6;
   } else {
-    t6 = $[41];
+    t6 = $[35];
   }
   return t6;
 }

package/dist/experimental/IssueLabel/IssueLabel.module.css.js

@@ -1,4 +1,4 @@
-import './IssueLabel-6581d1bd.css';
+import './IssueLabel-d9c2c5cf.css';
 
 var classes = {"IssueLabel":"prc-IssueLabel-IssueLabel-WJ5y-"};
 

package/dist/experimental/IssueLabel/getColorFromHex.d.ts

@@ -2,9 +2,7 @@ import type { Hex } from './IssueLabel';
 /**
  * transforms a hex color provided by the user into a color object with background and text colors
  * @param colorHex — the hex color provided by the user
- * @param colorScheme — the color scheme the user has currently set
- * @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
  * @returns
  */
-export declare const getColorsFromHex: (colorHex: Hex, colorScheme: string | undefined, bgColor: Hex) => React.CSSProperties | undefined;
+export declare const getColorsFromHex: (colorHex: Hex) => React.CSSProperties | undefined;
 //# sourceMappingURL=getColorFromHex.d.ts.map

package/dist/experimental/IssueLabel/getColorFromHex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getColorFromHex.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/getColorFromHex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,GAAG,EACb,+BAAqB,EACrB,SAAS,GAAG,KACX,KAAK,CAAC,aAAa,GAAG,SA0DxB,CAAA"}
+{"version":3,"file":"getColorFromHex.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/getColorFromHex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAErC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,GAAG,KAAG,KAAK,CAAC,aAAa,GAAG,SA+EtE,CAAA"}

package/dist/experimental/IssueLabel/getColorFromHex.js

@@ -4,21 +4,16 @@ import { Hsluv } from 'hsluv';
 /**
  * transforms a hex color provided by the user into a color object with background and text colors
  * @param colorHex — the hex color provided by the user
- * @param colorScheme — the color scheme the user has currently set
- * @param bgColor — the background color from the selected theme, needed to calc the contrast for the colors
  * @returns
  */
-const getColorsFromHex = (colorHex, colorScheme = 'light', bgColor) => {
+const getColorsFromHex = colorHex => {
   // start values for light mode
-  let bgLightness = 96;
-  let lightnessIncrement = -1;
-  let ratio = 4.5;
-  // start values for dark mode
-  if (colorScheme.startsWith('dark')) {
-    bgLightness = 16;
-    lightnessIncrement = 1;
-    ratio = 5.5;
-  }
+  const lightBgLightness = 96;
+  const lightLightnessIncrement = -1;
+  const lightRatio = 4.5;
+  const darkBgLightness = 16;
+  const darkLightnessIncrement = 1;
+  const darkRatio = 5.5;
 
   // get hue and saturation value from hex color
   // eslint-disable-next-line prefer-const
@@ -41,13 +36,29 @@ const getColorsFromHex = (colorHex, colorScheme = 'light', bgColor) => {
    * creating a background color from the provided hex color
    */
   const {
-    colorHex: backgroundColor,
-    lightness: currentBgLightness
+    colorHex: darkBackgroundColor,
+    lightness: darkCurrentBgLightness
+  } = getColorWithContrast(hsluvToHex({
+    h,
+    s,
+    l: darkBgLightness
+  }), '#0d1117',
+  // dark mode background color
+  1.2, darkLightnessIncrement);
+
+  /**
+   * creating a background color from the provided hex color
+   */
+  const {
+    colorHex: lightBackgroundColor,
+    lightness: lightCurrentBgLightness
   } = getColorWithContrast(hsluvToHex({
     h,
     s,
-    l: bgLightness
-  }), bgColor, 1.2, lightnessIncrement);
+    l: lightBgLightness
+  }), '#ffffff',
+  // light mode background color
+  1.2, lightLightnessIncrement);
 
   // avoid intense bright colors
   if (h >= 58 && h <= 316 && s > 80) {
@@ -57,27 +68,48 @@ const getColorsFromHex = (colorHex, colorScheme = 'light', bgColor) => {
    * creating a text color from with a contrast ratio of at least 4.5 to the generated background color
    */
   const {
-    colorHex: textColor
+    colorHex: darkTextColor
+  } = getColorWithContrast(hsluvToHex({
+    h,
+    s,
+    l: 50
+  }), darkBackgroundColor, darkRatio, darkLightnessIncrement);
+  const {
+    colorHex: lightTextColor
   } = getColorWithContrast(hsluvToHex({
     h,
     s,
     l: 50
-  }), backgroundColor, ratio, lightnessIncrement);
+  }), lightBackgroundColor, lightRatio, lightLightnessIncrement);
   return {
-    '--label-bgColor-rest': backgroundColor,
-    '--label-bgColor-hover': hsluvToHex({
+    '--label-bgColor-light-rest': lightBackgroundColor,
+    '--label-bgColor-light-hover': hsluvToHex({
+      h,
+      s,
+      l: lightCurrentBgLightness + 4 * lightLightnessIncrement
+    }),
+    '--label-bgColor-light-active': hsluvToHex({
+      h,
+      s,
+      l: lightCurrentBgLightness + 8 * lightLightnessIncrement
+    }),
+    '--label-fgColor-light': lightTextColor,
+    '--label-fgColor-light-hover': lightTextColor,
+    '--label-fgColor-light-active': lightTextColor,
+    '--label-bgColor-dark-rest': darkBackgroundColor,
+    '--label-bgColor-dark-hover': hsluvToHex({
       h,
       s,
-      l: currentBgLightness + 4 * lightnessIncrement
+      l: darkCurrentBgLightness + 4 * darkLightnessIncrement
     }),
-    '--label-bgColor-active': hsluvToHex({
+    '--label-bgColor-dark-active': hsluvToHex({
       h,
       s,
-      l: currentBgLightness + 8 * lightnessIncrement
+      l: darkCurrentBgLightness + 8 * darkLightnessIncrement
     }),
-    '--label-fgColor': textColor,
-    '--label-fgColor-hover': textColor,
-    '--label-fgColor-active': textColor
+    '--label-fgColor-dark': darkTextColor,
+    '--label-fgColor-dark-hover': darkTextColor,
+    '--label-fgColor-dark-active': darkTextColor
   };
 };
 /**

package/dist/experimental/SelectPanel2/SelectPanel.d.ts

@@ -3,6 +3,7 @@ import type { ButtonProps, TextInputProps, LinkProps, CheckboxProps } from '../.
 import type { OverlayProps } from '../../Overlay/Overlay';
 import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
 import type { PositionSettings } from '@primer/behaviors';
+import type { FCWithSlotMarker, WithSlotMarker } from '../../utils/types';
 export type SelectPanelProps = {
     title: string;
     description?: string;
@@ -44,7 +45,7 @@ export type SelectPanelMessageProps = {
     variant: 'warning' | 'error';
 });
 export declare const SelectPanel: React.FC<SelectPanelProps> & {
-    Button: React.ForwardRefExoticComponent<{
+    Button: WithSlotMarker<React.ForwardRefExoticComponent<{
         alignContent?: import("../../Button/types").AlignContent;
         icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement | null;
         leadingVisual?: React.ElementType | React.ReactElement | null;
@@ -61,14 +62,17 @@ export declare const SelectPanel: React.FC<SelectPanelProps> & {
         loadingAnnouncement?: string;
         inactive?: boolean;
         labelWrap?: boolean;
-    } & import("../../sx").SxProp & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-    Header: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>>;
+    Header: FCWithSlotMarker<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         onBack?: () => void;
     }>;
-    SearchInput: React.FC<TextInputProps>;
-    Footer: ({ ...props }: {
-        [x: string]: any;
-    }) => React.JSX.Element | null;
+    SearchInput: FCWithSlotMarker<TextInputProps>;
+    Footer: {
+        ({ ...props }: {
+            [x: string]: any;
+        }): React.JSX.Element | null;
+        __SLOT__: symbol;
+    };
     Loading: ({ children }: React.PropsWithChildren) => React.JSX.Element;
     Message: React.FC<SelectPanelMessageProps>;
     SecondaryAction: React.FC<SelectPanelSecondaryActionProps>;

package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC9C,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6cD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAuCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAlR4D,MAAM,IAAI;;;;;;4BAuNhC,KAAK,CAAC,iBAAiB;;;CAmEnF,CAAA"}
+{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC9C,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAqdD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAuCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAxRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAmEnF,CAAA"}

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -9,6 +9,7 @@ import { invariant } from '../../utils/invariant.js';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue.js';
 import { clsx } from 'clsx';
 import classes from './SelectPanel.module.css.js';
+import { isSlot } from '../../utils/is-slot.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
 import { useId } from '../../hooks/useId.js';
@@ -83,7 +84,7 @@ const Panel = ({
     if (!internalOpen) setInternalOpen(true);else onInternalCancel();
   };
   const contents = React.Children.map(props.children, child => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === SelectPanelButton) {
+    if (/*#__PURE__*/React.isValidElement(child) && (child.type === SelectPanelButton || isSlot(child, SelectPanelButton))) {
       // eslint-disable-next-line react-compiler/react-compiler
       Anchor = /*#__PURE__*/React.cloneElement(child, {
         // @ts-ignore TODO
@@ -282,6 +283,7 @@ const SelectPanelButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
     });
   }
 });
+SelectPanelButton.__SLOT__ = Symbol('SelectPanel.Button');
 const SelectPanelHeader = t0 => {
   const $ = c(42);
   let children;
@@ -478,6 +480,7 @@ const SelectPanelHeader = t0 => {
   }
   return t17;
 };
+SelectPanelHeader.__SLOT__ = Symbol('SelectPanel.Header');
 const SelectPanelSearchInput = t0 => {
   const $ = c(22);
   let className;
@@ -604,6 +607,7 @@ const SelectPanelSearchInput = t0 => {
   }
   return t6;
 };
+SelectPanelSearchInput.__SLOT__ = Symbol('SelectPanel.SearchInput');
 const FooterContext = /*#__PURE__*/React.createContext(false);
 const SelectPanelFooter = t0 => {
   const $ = c(13);
@@ -683,6 +687,7 @@ const SelectPanelFooter = t0 => {
   }
   return t5;
 };
+SelectPanelFooter.__SLOT__ = Symbol('SelectPanel.Footer');
 const SecondaryButton = props => {
   const $ = c(3);
   const size = useResponsiveValue(responsiveButtonSizes, "small");

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts

@@ -1,6 +1,6 @@
 import React, { type FC, type PropsWithChildren } from 'react';
 import type { IconProps } from '@primer/octicons-react';
-import { type SxProp } from '../../sx';
+import type { FCWithSlotMarker } from '../../utils/types';
 export type UnderlinePanelsProps = {
     /**
      * Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render
@@ -26,7 +26,7 @@ export type UnderlinePanelsProps = {
      * Class name for custom styling
      */
     className?: string;
-} & SxProp;
+};
 export type TabProps = PropsWithChildren<{
     /**
      * Whether this is the selected tab
@@ -44,11 +44,11 @@ export type TabProps = PropsWithChildren<{
      *  Icon rendered before the tab text label
      */
     icon?: FC<IconProps>;
-}> & SxProp;
+}>;
 export type PanelProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.FC<UnderlinePanelsProps> & {
-    Panel: React.FC<PanelProps>;
-    Tab: React.FC<TabProps>;
+declare const _default: React.FC<UnderlinePanelsProps> & import("../..").SlotMarker & {
+    Panel: FCWithSlotMarker<PanelProps>;
+    Tab: FCWithSlotMarker<TabProps>;
 };
 export default _default;
 //# sourceMappingURL=UnderlinePanels.d.ts.map

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAUrD,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,UAAU,CAAA;AAMpC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,GACA,MAAM,CAAA;AAER,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8J7D,wBAA2D"}
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8J7D,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -8,6 +8,7 @@ import { useResizeObserver } from '../../hooks/useResizeObserver.js';
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
 import classes from './UnderlinePanels.module.css.js';
 import { clsx } from 'clsx';
+import { isSlot } from '../../utils/is-slot.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '../../hooks/useId.js';
 
@@ -36,14 +37,14 @@ const UnderlinePanels = ({
     let tabIndex = 0;
     let panelIndex = 0;
     const childrenWithProps = Children.map(children, child => {
-      if (/*#__PURE__*/isValidElement(child) && child.type === Tab) {
+      if (/*#__PURE__*/isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
         return /*#__PURE__*/cloneElement(child, {
           id: `${parentId}-tab-${tabIndex++}`,
           loadingCounters,
           iconsVisible
         });
       }
-      if (/*#__PURE__*/isValidElement(child) && child.type === Panel) {
+      if (/*#__PURE__*/isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
         const childPanel = child;
         return /*#__PURE__*/cloneElement(childPanel, {
           'aria-labelledby': `${parentId}-tab-${panelIndex++}`
@@ -52,9 +53,9 @@ const UnderlinePanels = ({
       return child;
     });
     const newTabs = Children.toArray(childrenWithProps).filter(child_0 => {
-      return /*#__PURE__*/isValidElement(child_0) && child_0.type === Tab;
+      return /*#__PURE__*/isValidElement(child_0) && (child_0.type === Tab || isSlot(child_0, Tab));
     });
-    const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && child_1.type === Panel);
+    const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && (child_1.type === Panel || isSlot(child_1, Panel)));
     setTabs(newTabs);
     setTabPanels(newTabPanels);
   }, [children, parentId, loadingCounters, iconsVisible]);
@@ -212,5 +213,8 @@ var UnderlinePanels$1 = Object.assign(UnderlinePanels, {
   Panel,
   Tab
 });
+UnderlinePanels.__SLOT__ = Symbol('UnderlinePanels');
+Tab.__SLOT__ = Symbol('UnderlinePanels.Tab');
+Panel.__SLOT__ = Symbol('UnderlinePanels.Panel');
 
 export { UnderlinePanels$1 as default };

package/dist/hooks/useSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSlots.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEhD,KAAK,wBAAwB,GAAG,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;AAE7E,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,wBAAwB,CAAC,CAAA;AAIpF,KAAK,KAAK,GAAG,GAAG,CAAA;AAEhB,KAAK,YAAY,CAAC,MAAM,SAAS,UAAU,IAAI;KAC5C,QAAQ,IAAI,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC;CACxD,CAAA;AAED,KAAK,SAAS,CAAC,MAAM,EAAE,QAAQ,SAAS,MAAM,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,KAAK,CAAC,WAAW,GAC9F,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,GACtF,MAAM,CAAC,QAAQ,CAAC,SAAS,SAAS;IAC9B,MAAM,WAAW,SAAS,KAAK,CAAC,WAAW;IAE3C,MAAM,OAAO;CACd,GACD,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,wBAAwB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,GAC5E,KAAK,CAAA;AAEX;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,MAAM,SAAS,UAAU,EAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,MAAM,EAAE,MAAM,GACb,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CA8CpD"}
+{"version":3,"file":"useSlots.d.ts","sourceRoot":"","sources":["../../src/hooks/useSlots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,KAAK,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAEhD,KAAK,wBAAwB,GAAG,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAA;AAE7E,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,GAAG,wBAAwB,CAAC,CAAA;AAIpF,KAAK,KAAK,GAAG,GAAG,CAAA;AAEhB,KAAK,YAAY,CAAC,MAAM,SAAS,UAAU,IAAI;KAC5C,QAAQ,IAAI,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC;CACxD,CAAA;AAED,KAAK,SAAS,CAAC,MAAM,EAAE,QAAQ,SAAS,MAAM,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,KAAK,CAAC,WAAW,GAC9F,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,GACtF,MAAM,CAAC,QAAQ,CAAC,SAAS,SAAS;IAC9B,MAAM,WAAW,SAAS,KAAK,CAAC,WAAW;IAE3C,MAAM,OAAO;CACd,GACD,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,wBAAwB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,GAC5E,KAAK,CAAA;AAEX;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,MAAM,SAAS,UAAU,EAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,MAAM,EAAE,MAAM,GACb,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CA8CpD"}

package/dist/hooks/useSlots.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { warning } from '../utils/warning.js';
+import { isSlot } from '../utils/is-slot.js';
 
 // slot config allows 2 options:
 // 1. Component to match, example: { leadingVisual: LeadingVisual }
@@ -34,9 +35,9 @@ function useSlots(children, config) {
     const index = values.findIndex(value => {
       if (Array.isArray(value)) {
         const [component, testFn] = value;
-        return child.type === component && testFn(child.props);
+        return (child.type === component || isSlot(child, component)) && testFn(child.props);
       } else {
-        return child.type === value;
+        return child.type === value || isSlot(child, value);
       }
     });
 

package/dist/hooks/useSyncedState.js

@@ -17,7 +17,7 @@ const useSyncedState = (initialValue, t0) => {
   const {
     isPropUpdateDisabled: t1,
     isEqual: t2
-  } = {} ;
+  } = t0 === undefined ? {} : t0;
   const isPropUpdateDisabled = t1 === undefined ? false : t1;
   const isEqual = t2 === undefined ? Object.is : t2;
   const [state, setState] = useState(initialValue);

package/dist/index.d.ts

@@ -4,8 +4,6 @@ export { default as BaseStyles } from './BaseStyles';
 export type { BaseStylesProps } from './BaseStyles';
 export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
 export type { ThemeProviderProps } from './ThemeProvider';
-export { default as Box } from './Box';
-export type { BoxProps } from './Box';
 export * from './Button';
 export { PageLayout } from './PageLayout';
 export type { PageLayoutProps, PageLayoutHeaderProps, PageLayoutContentProps, PageLayoutPaneProps, PageLayoutFooterProps, } from './PageLayout';
@@ -28,7 +26,10 @@ export { useResizeObserver } from './hooks/useResizeObserver';
 export { useResponsiveValue, type ResponsiveValue } from './hooks/useResponsiveValue';
 export { default as useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect';
 export { useProvidedRefOrCreate } from './hooks/useProvidedRefOrCreate';
+export { useId } from './hooks/useId';
+export { useSyncedState } from './hooks/useSyncedState';
 export { createComponent } from './utils/create-component';
+export type { SlotMarker } from './utils/types';
 export { default as Radio } from './Radio';
 export type { RadioProps } from './Radio';
 export { ActionList } from './ActionList';
@@ -66,6 +67,7 @@ export { ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
 export { default as Flash } from './Flash';
 export type { FlashProps } from './Flash';
 export { default as FormControl } from './FormControl';
+export type { FormControlProps, FormControlCaptionProps, FormControlLabelProps, FormControlValidationProps, } from './FormControl';
 export { useFormControlForwardedProps } from './FormControl';
 export { default as Header } from './Header';
 export type { HeaderProps, HeaderItemProps, HeaderLinkProps } from './Header';
@@ -110,7 +112,7 @@ export type { SubNavProps, SubNavLinkProps, SubNavLinksProps } from './SubNav';
 export { default as ToggleSwitch } from './ToggleSwitch';
 export type { ToggleSwitchProps } from './ToggleSwitch';
 export { default as TextInput } from './TextInput';
-export type { TextInputProps } from './TextInput';
+export type { TextInputProps, TextInputActionProps } from './TextInput';
 export { default as TextInputWithTokens } from './TextInputWithTokens';
 export type { TextInputWithTokensProps } from './TextInputWithTokens';
 export { default as Text } from './Text';