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

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js

@@ -9,8 +9,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 const CheckboxOrRadioGroupLabel = ({
   children,
   className,
-  visuallyHidden = false,
-  sx
+  visuallyHidden = false
 }) => {
   const {
     required,
@@ -21,7 +20,6 @@ const CheckboxOrRadioGroupLabel = ({
     isVisible: !visuallyHidden,
     title: required ? 'required field' : undefined,
     "data-label-disabled": disabled ? '' : undefined,
-    sx: sx,
     children: required ? /*#__PURE__*/jsxs(Stack, {
       direction: "horizontal",
       gap: "none",

package/dist/internal/components/ConditionalWrapper.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { BoxProps } from '../../Box/Box';
-export declare const ConditionalWrapper: React.FC<React.PropsWithChildren<{
+export declare const ConditionalWrapper: React.FC<React.PropsWithChildren<React.ComponentPropsWithoutRef<'div'> & {
     if: boolean;
-} & BoxProps>>;
+}>>;
 //# sourceMappingURL=ConditionalWrapper.d.ts.map

package/dist/internal/components/ConditionalWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionalWrapper.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ConditionalWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,EAAE,EAAE,OAAO,CAAA;CAAC,GAAG,QAAQ,CAAC,CAK1F,CAAA"}
+{"version":3,"file":"ConditionalWrapper.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ConditionalWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAAC,EAAE,EAAE,OAAO,CAAA;CAAC,CAAC,CAM/E,CAAA"}

package/dist/internal/components/ConditionalWrapper.js

@@ -1,47 +1,50 @@
 import { c } from 'react-compiler-runtime';
-import Box from '../../Box/Box.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const ConditionalWrapper = props => {
-  const $ = c(8);
+  const $ = c(9);
+  let children;
   let condition;
   let rest;
   if ($[0] !== props) {
     ({
       if: condition,
+      children,
       ...rest
     } = props);
     $[0] = props;
-    $[1] = condition;
-    $[2] = rest;
+    $[1] = children;
+    $[2] = condition;
+    $[3] = rest;
   } else {
-    condition = $[1];
-    rest = $[2];
+    children = $[1];
+    condition = $[2];
+    rest = $[3];
   }
   if (condition) {
     let t0;
-    if ($[3] !== props.children || $[4] !== rest) {
-      t0 = /*#__PURE__*/jsx(Box, {
+    if ($[4] !== children || $[5] !== rest) {
+      t0 = /*#__PURE__*/jsx("div", {
         ...rest,
-        children: props.children
+        children: children
       });
-      $[3] = props.children;
-      $[4] = rest;
-      $[5] = t0;
+      $[4] = children;
+      $[5] = rest;
+      $[6] = t0;
     } else {
-      t0 = $[5];
+      t0 = $[6];
     }
     return t0;
   } else {
     let t0;
-    if ($[6] !== props.children) {
+    if ($[7] !== children) {
       t0 = /*#__PURE__*/jsx(Fragment, {
-        children: props.children
+        children: children
       });
-      $[6] = props.children;
-      $[7] = t0;
+      $[7] = children;
+      $[8] = t0;
     } else {
-      t0 = $[7];
+      t0 = $[8];
     }
     return t0;
   }

package/dist/internal/components/{InputValidation-057236a4.css → InputValidation-dddeaafd.css}

@@ -1,2 +1,2 @@
-.prc-components-InputValidation-GjS0D{color:var(--inputValidation-fgColor);display:flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.prc-components-InputValidation-GjS0D :where(a){color:currentColor;-webkit-text-decoration:underline;text-decoration:underline}.prc-components-InputValidation-GjS0D:where([data-validation-status=success]){--inputValidation-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-components-InputValidation-GjS0D:where([data-validation-status=error]){--inputValidation-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-components-ValidationIcon-Kdbbr{align-items:center;display:flex;margin-inline-end:var(--base-size-4,.25rem);min-height:var(--inputValidation-iconSize)}.prc-components-ValidationText-jjsBp{line-height:var(--inputValidation-lineHeight)}
-/*# sourceMappingURL=InputValidation-057236a4.css.map */
+.prc-components-InputValidation-GjS0D{color:var(--inputValidation-fgColor);display:flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.prc-components-InputValidation-GjS0D :where(a){color:currentColor;-webkit-text-decoration:underline;text-decoration:underline}.prc-components-InputValidation-GjS0D:where([data-validation-status=success]){--inputValidation-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-components-InputValidation-GjS0D:where([data-validation-status=error]){--inputValidation-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-components-ValidationIcon-Kdbbr{display:flex;margin-top:var(--base-size-2,.125rem);margin-inline-end:var(--base-size-4,.25rem);min-height:var(--inputValidation-iconSize)}.prc-components-ValidationText-jjsBp{line-height:var(--inputValidation-lineHeight)}
+/*# sourceMappingURL=InputValidation-dddeaafd.css.map */

package/dist/internal/components/{InputValidation-057236a4.css.map → InputValidation-dddeaafd.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/internal/components/InputValidation.module.css"],"names":[],"mappings":"AAAA,sCAKE,oCAAqC,CAJrC,YAAa,CACb,4CAAsC,CACtC,gDAgBF,CAZE,gDACE,kBAAmB,CACnB,iCAA0B,CAA1B,yBACF,CAEA,8EACE,wEACF,CAEA,4EACE,sEACF,CAGF,qCACE,kBAAmB,CACnB,YAAa,CACb,2CAAqC,CACrC,0CACF,CAEA,qCAEE,6CACF","file":"InputValidation-057236a4.css","sourcesContent":[".InputValidation {\n  display: flex;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--inputValidation-fgColor);\n\n  & :where(a) {\n    color: currentColor;\n    text-decoration: underline;\n  }\n\n  &:where([data-validation-status='success']) {\n    --inputValidation-fgColor: var(--fgColor-success);\n  }\n\n  &:where([data-validation-status='error']) {\n    --inputValidation-fgColor: var(--fgColor-danger);\n  }\n}\n\n.ValidationIcon {\n  align-items: center;\n  display: flex;\n  margin-inline-end: var(--base-size-4);\n  min-height: var(--inputValidation-iconSize);\n}\n\n.ValidationText {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--inputValidation-lineHeight);\n}\n"]}
+{"version":3,"sources":["../../src/internal/components/InputValidation.module.css"],"names":[],"mappings":"AAAA,sCAKE,oCAAqC,CAJrC,YAAa,CACb,4CAAsC,CACtC,gDAgBF,CAZE,gDACE,kBAAmB,CACnB,iCAA0B,CAA1B,yBACF,CAEA,8EACE,wEACF,CAEA,4EACE,sEACF,CAGF,qCACE,YAAa,CACb,qCAA8B,CAC9B,2CAAqC,CACrC,0CACF,CAEA,qCAEE,6CACF","file":"InputValidation-dddeaafd.css","sourcesContent":[".InputValidation {\n  display: flex;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--inputValidation-fgColor);\n\n  & :where(a) {\n    color: currentColor;\n    text-decoration: underline;\n  }\n\n  &:where([data-validation-status='success']) {\n    --inputValidation-fgColor: var(--fgColor-success);\n  }\n\n  &:where([data-validation-status='error']) {\n    --inputValidation-fgColor: var(--fgColor-danger);\n  }\n}\n\n.ValidationIcon {\n  display: flex;\n  margin-top: var(--base-size-2);\n  margin-inline-end: var(--base-size-4);\n  min-height: var(--inputValidation-iconSize);\n}\n\n.ValidationText {\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--inputValidation-lineHeight);\n}\n"]}

package/dist/internal/components/InputValidation.d.ts

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

package/dist/internal/components/InputValidation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputValidation.d.ts","sourceRoot":"","sources":["../../../src/internal/components/InputValidation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAIhF,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,MAAM,CAAA;AAUV,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAiC7D,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"InputValidation.d.ts","sourceRoot":"","sources":["../../../src/internal/components/InputValidation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAIhF,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,MAAM,CAAA;AAUV,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAuC7D,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/internal/components/InputValidation.js

@@ -16,7 +16,7 @@ const InputValidation = t0 => {
     className,
     id,
     validationStatus,
-    sx
+    style
   } = t0;
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;
   let t1;
@@ -69,14 +69,14 @@ const InputValidation = t0 => {
     t4 = $[7];
   }
   let t5;
-  if ($[8] !== sx || $[9] !== t1 || $[10] !== t2 || $[11] !== t4 || $[12] !== validationStatus) {
+  if ($[8] !== style || $[9] !== t1 || $[10] !== t2 || $[11] !== t4 || $[12] !== validationStatus) {
     t5 = /*#__PURE__*/jsxs(Text, {
       className: t1,
       "data-validation-status": validationStatus,
-      sx: sx,
+      style: style,
       children: [t2, t4]
     });
-    $[8] = sx;
+    $[8] = style;
     $[9] = t1;
     $[10] = t2;
     $[11] = t4;

package/dist/internal/components/InputValidation.module.css.js

@@ -1,4 +1,4 @@
-import './InputValidation-057236a4.css';
+import './InputValidation-dddeaafd.css';
 
 var classes = {"InputValidation":"prc-components-InputValidation-GjS0D","ValidationIcon":"prc-components-ValidationIcon-Kdbbr","ValidationText":"prc-components-ValidationText-jjsBp"};
 

package/dist/internal/components/TextInputInnerAction.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { IconProps } from '@primer/octicons-react';
 import type { ButtonProps } from '../../Button';
 import type { SxProp } from '../../sx';
-declare const TextInputAction: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-label" | "tooltipDirection"> & {
+declare const TextInputAction: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "size" | "tooltipDirection"> & {
     /** @deprecated Text input action buttons should only use icon buttons */
     children?: React.ReactNode;
     /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */

package/dist/internal/components/UnderlineTabbedInterface.d.ts

@@ -1,20 +1,19 @@
-import type React from 'react';
-import { type FC } from 'react';
+import React from 'react';
+import { type FC, type ElementType } from 'react';
 import type { IconProps } from '@primer/octicons-react';
-import { type SxProp } from '../../sx';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../../utils/polymorphic';
 export declare const GAP = 8;
-type UnderlineWrapperProps = {
+type UnderlineWrapperProps<As extends React.ElementType> = {
     slot?: string;
-    as?: React.ElementType;
+    as?: As;
     className?: string;
-    ref?: React.Ref<unknown>;
-} & SxProp;
-export declare const UnderlineWrapper: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<UnderlineWrapperProps>, "ref"> & React.RefAttributes<unknown>>;
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const UnderlineWrapper: PolymorphicForwardRefComponent<ElementType, UnderlineWrapperProps<ElementType>>;
 export declare const UnderlineItemList: PolymorphicForwardRefComponent<"ul">;
 export declare const LoadingCounter: () => React.JSX.Element;
-export type UnderlineItemProps = {
-    as?: React.ElementType | 'a' | 'button';
+export type UnderlineItemProps<As extends React.ElementType> = {
+    as?: As | 'a' | 'button';
     className?: string;
     iconsVisible?: boolean;
     loadingCounters?: boolean;
@@ -22,7 +21,7 @@ export type UnderlineItemProps = {
     icon?: FC<IconProps> | React.ReactElement;
     id?: string;
     ref?: React.Ref<unknown>;
-} & SxProp;
-export declare const UnderlineItem: PolymorphicForwardRefComponent<"a", UnderlineItemProps>;
+} & React.ComponentPropsWithoutRef<As extends 'a' ? 'a' : As extends 'button' ? 'button' : As>;
+export declare const UnderlineItem: PolymorphicForwardRefComponent<ElementType, UnderlineItemProps<ElementType>>;
 export {};
 //# sourceMappingURL=UnderlineTabbedInterface.d.ts.map

package/dist/internal/components/UnderlineTabbedInterface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAa,KAAK,EAAE,EAAyB,MAAM,OAAO,CAAA;AAEjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAOlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAEpB,KAAK,qBAAqB,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,MAAM,CAAA;AAEV,eAAO,MAAM,gBAAgB,6HAQ5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,GAAG,QAAQ,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IACzC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,MAAM,CAAA;AAEV,eAAO,MAAM,aAAa,EAoCrB,8BAA8B,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAA"}
+{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAA0B,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAEpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAWvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IACzC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAuBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}

package/dist/internal/components/UnderlineTabbedInterface.js

@@ -1,58 +1,64 @@
 import { c } from 'react-compiler-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { isElement } from 'react-is';
 import classes from './UnderlineTabbedInterface.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from './BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CounterLabel from '../../CounterLabel/CounterLabel.js';
 
 const GAP = 8;
-const UnderlineWrapper = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(11);
+const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
+  const $ = c(13);
   let children;
   let className;
   let rest;
-  if ($[0] !== t0) {
+  let t0;
+  if ($[0] !== props) {
     ({
       children,
       className,
+      as: t0,
       ...rest
-    } = t0);
-    $[0] = t0;
+    } = props);
+    $[0] = props;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
+    $[4] = t0;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
+    t0 = $[4];
   }
+  const Component = t0 === undefined ? "nav" : t0;
   let t1;
-  if ($[4] !== className) {
+  if ($[5] !== className) {
     t1 = clsx(classes.UnderlineWrapper, className);
-    $[4] = className;
-    $[5] = t1;
+    $[5] = className;
+    $[6] = t1;
   } else {
-    t1 = $[5];
+    t1 = $[6];
   }
-  let t2;
-  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
-    t2 = /*#__PURE__*/jsx(BoxWithFallback, {
+  const t2 = ref;
+  let t3;
+  if ($[7] !== Component || $[8] !== children || $[9] !== rest || $[10] !== t1 || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsx(Component, {
       className: t1,
-      ref: forwardedRef,
+      ref: t2,
       ...rest,
       children: children
     });
-    $[6] = children;
-    $[7] = forwardedRef;
-    $[8] = rest;
-    $[9] = t1;
-    $[10] = t2;
+    $[7] = Component;
+    $[8] = children;
+    $[9] = rest;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t2 = $[10];
+    t3 = $[12];
   }
-  return t2;
+  return t3;
 });
 const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(7);
@@ -100,7 +106,7 @@ const LoadingCounter = () => {
   }
   return t0;
 };
-const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const $ = c(27);
   let Icon;
   let children;
@@ -109,10 +115,10 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   let iconsVisible;
   let loadingCounters;
   let rest;
-  let t1;
-  if ($[0] !== t0) {
+  let t0;
+  if ($[0] !== props) {
     ({
-      as: t1,
+      as: t0,
       children,
       counter,
       icon: Icon,
@@ -120,8 +126,8 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       loadingCounters,
       className,
       ...rest
-    } = t0);
-    $[0] = t0;
+    } = props);
+    $[0] = props;
     $[1] = Icon;
     $[2] = children;
     $[3] = className;
@@ -129,7 +135,7 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[5] = iconsVisible;
     $[6] = loadingCounters;
     $[7] = rest;
-    $[8] = t1;
+    $[8] = t0;
   } else {
     Icon = $[1];
     children = $[2];
@@ -138,44 +144,44 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     iconsVisible = $[5];
     loadingCounters = $[6];
     rest = $[7];
-    t1 = $[8];
+    t0 = $[8];
   }
-  const as = t1 === undefined ? "a" : t1;
-  let t2;
+  const Component = t0 === undefined ? "a" : t0;
+  let t1;
   if ($[9] !== className) {
-    t2 = clsx(classes.UnderlineItem, className);
+    t1 = clsx(classes.UnderlineItem, className);
     $[9] = className;
-    $[10] = t2;
+    $[10] = t1;
   } else {
-    t2 = $[10];
+    t1 = $[10];
   }
-  let t3;
+  let t2;
   if ($[11] !== Icon || $[12] !== iconsVisible) {
-    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
+    t2 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
       "data-component": "icon",
       children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
     });
     $[11] = Icon;
     $[12] = iconsVisible;
-    $[13] = t3;
+    $[13] = t2;
   } else {
-    t3 = $[13];
+    t2 = $[13];
   }
-  let t4;
+  let t3;
   if ($[14] !== children) {
-    t4 = children && /*#__PURE__*/jsx("span", {
+    t3 = children && /*#__PURE__*/jsx("span", {
       "data-component": "text",
       "data-content": children,
       children: children
     });
     $[14] = children;
-    $[15] = t4;
+    $[15] = t3;
   } else {
-    t4 = $[15];
+    t3 = $[15];
   }
-  let t5;
+  let t4;
   if ($[16] !== counter || $[17] !== loadingCounters) {
-    t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
+    t4 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsx(LoadingCounter, {})
     }) : /*#__PURE__*/jsx("span", {
@@ -186,31 +192,30 @@ const UnderlineItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     }) : null;
     $[16] = counter;
     $[17] = loadingCounters;
-    $[18] = t5;
+    $[18] = t4;
   } else {
-    t5 = $[18];
+    t4 = $[18];
   }
-  let t6;
-  if ($[19] !== as || $[20] !== forwardedRef || $[21] !== rest || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
-    t6 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      ref: forwardedRef,
-      as: as,
-      className: t2,
+  let t5;
+  if ($[19] !== Component || $[20] !== ref || $[21] !== rest || $[22] !== t1 || $[23] !== t2 || $[24] !== t3 || $[25] !== t4) {
+    t5 = /*#__PURE__*/jsxs(Component, {
       ...rest,
-      children: [t3, t4, t5]
+      ref: ref,
+      className: t1,
+      children: [t2, t3, t4]
     });
-    $[19] = as;
-    $[20] = forwardedRef;
+    $[19] = Component;
+    $[20] = ref;
     $[21] = rest;
-    $[22] = t2;
-    $[23] = t3;
-    $[24] = t4;
-    $[25] = t5;
-    $[26] = t6;
+    $[22] = t1;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
   } else {
-    t6 = $[26];
+    t5 = $[26];
   }
-  return t6;
+  return t5;
 });
 
 export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };

package/dist/internal/components/ValidationAnimationContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationAnimationContainer.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ValidationAnimationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,KAAM,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAmBD,QAAA,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAkB1E,CAAA;AAED,eAAe,4BAA4B,CAAA"}
+{"version":3,"file":"ValidationAnimationContainer.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ValidationAnimationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,KAAM,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAmBD,QAAA,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAkB1E,CAAA;AAED,eAAe,4BAA4B,CAAA"}

package/dist/internal/components/ValidationAnimationContainer.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { useState, useEffect } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-import Box from '../../Box/Box.js';
 
 const fadeIn = keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]);
 // using easeOutQuint easing fn https://easings.net/#easeOutQuint
@@ -49,9 +48,11 @@ const ValidationAnimationContainer = t0 => {
   const onAnimationEnd = t3;
   let t4;
   if ($[5] !== children || $[6] !== onAnimationEnd || $[7] !== shouldRender || $[8] !== show) {
-    t4 = shouldRender ? /*#__PURE__*/jsx(Box, {
-      height: show ? "auto" : 0,
-      overflow: "hidden",
+    t4 = shouldRender ? /*#__PURE__*/jsx("div", {
+      style: {
+        height: show ? "auto" : 0,
+        overflow: "hidden"
+      },
       children: /*#__PURE__*/jsx(AnimatedElement, {
         show: show,
         onAnimationEnd: onAnimationEnd,

package/dist/live-region/Announce.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-import type { PolymorphicProps } from '../utils/polymorphic2';
-export type AnnounceProps<As extends React.ElementType> = PolymorphicProps<'div', As, {
+import type { PolymorphicProps } from '../utils/modern-polymorphic';
+export type AnnounceProps<As extends React.ElementType> = PolymorphicProps<As, 'div', {
     /**
      * Specify if the content of the element should be announced when this
      * component is rendered and is not hidden

package/dist/live-region/Announce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Announce.d.ts","sourceRoot":"","sources":["../../src/live-region/Announce.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AAE3D,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,gBAAgB,CACxE,KAAK,EACL,EAAE,EACF;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACpC,CACF,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,qBAgGtF"}
+{"version":3,"file":"Announce.d.ts","sourceRoot":"","sources":["../../src/live-region/Announce.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAEjE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,gBAAgB,CACxE,EAAE,EACF,KAAK,EACL;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACpC,CACF,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,qBAgGtF"}

package/dist/live-region/AriaAlert.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { type ElementType } from 'react';
-import type { PolymorphicProps } from '../utils/polymorphic2';
-export type AriaAlertProps<As extends ElementType> = PolymorphicProps<'div', As, {
+import type { PolymorphicProps } from '../utils/modern-polymorphic';
+export type AriaAlertProps<As extends ElementType> = PolymorphicProps<As, 'div', {
     /**
      * Specify if the content of the element should be announced when this
      * component is rendered and is not hidden
@@ -14,5 +14,5 @@ export type AriaAlertProps<As extends ElementType> = PolymorphicProps<'div', As,
      */
     hidden?: boolean;
 }>;
-export declare function AriaAlert<As extends ElementType = 'div'>({ announceOnShow, children, ...rest }: AriaAlertProps<As>): React.JSX.Element;
+export declare function AriaAlert<As extends ElementType = 'div'>(props: AriaAlertProps<As>): React.JSX.Element;
 //# sourceMappingURL=AriaAlert.d.ts.map

package/dist/live-region/AriaAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAlert.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AAE3D,MAAM,MAAM,cAAc,CAAC,EAAE,SAAS,WAAW,IAAI,gBAAgB,CACnE,KAAK,EACL,EAAE,EACF;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,EACxD,cAAqB,EACrB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,EAAE,CAAC,qBAMpB"}
+{"version":3,"file":"AriaAlert.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAEjE,MAAM,MAAM,cAAc,CAAC,EAAE,SAAS,WAAW,IAAI,gBAAgB,CACnE,EAAE,EACF,KAAK,EACL;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,EAAE,CAAC,qBAElF"}

package/dist/live-region/AriaAlert.js

@@ -2,43 +2,24 @@ import { c } from 'react-compiler-runtime';
 import { Announce } from './Announce.js';
 import { jsx } from 'react/jsx-runtime';
 
-function AriaAlert(t0) {
-  const $ = c(8);
-  let children;
-  let rest;
+function AriaAlert(props) {
+  var _props$announceOnShow;
+  const $ = c(3);
+  const t0 = (_props$announceOnShow = props.announceOnShow) !== null && _props$announceOnShow !== void 0 ? _props$announceOnShow : true;
   let t1;
-  if ($[0] !== t0) {
-    ({
-      announceOnShow: t1,
-      children,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = rest;
-    $[3] = t1;
-  } else {
-    children = $[1];
-    rest = $[2];
-    t1 = $[3];
-  }
-  const announceOnShow = t1 === undefined ? true : t1;
-  let t2;
-  if ($[4] !== announceOnShow || $[5] !== children || $[6] !== rest) {
-    t2 = /*#__PURE__*/jsx(Announce, {
-      ...rest,
-      announceOnShow: announceOnShow,
-      politeness: "assertive",
-      children: children
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = /*#__PURE__*/jsx(Announce, {
+      ...props,
+      announceOnShow: t0,
+      politeness: "assertive"
     });
-    $[4] = announceOnShow;
-    $[5] = children;
-    $[6] = rest;
-    $[7] = t2;
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
   } else {
-    t2 = $[7];
+    t1 = $[2];
   }
-  return t2;
+  return t1;
 }
 
 export { AriaAlert };

package/dist/live-region/AriaStatus.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { type ElementType } from 'react';
-import type { PolymorphicProps } from '../utils/polymorphic2';
-export type AriaStatusProps<As extends ElementType> = PolymorphicProps<'div', As, {
+import type { PolymorphicProps } from '../utils/modern-polymorphic';
+export type AriaStatusProps<As extends ElementType = 'div'> = PolymorphicProps<As, 'div', {
     /**
      * Specify if the content of the element should be announced when this
      * component is rendered and is not hidden
@@ -18,5 +18,5 @@ export type AriaStatusProps<As extends ElementType> = PolymorphicProps<'div', As
      */
     delayMs?: number;
 }>;
-export declare function AriaStatus<As extends ElementType = 'div'>({ announceOnShow, children, ...rest }: AriaStatusProps<As>): React.JSX.Element;
+export declare function AriaStatus<As extends ElementType = 'div'>(props: AriaStatusProps<As>): React.JSX.Element;
 //# sourceMappingURL=AriaStatus.d.ts.map

package/dist/live-region/AriaStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaStatus.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,uBAAuB,CAAA;AAE3D,MAAM,MAAM,eAAe,CAAC,EAAE,SAAS,WAAW,IAAI,gBAAgB,CACpE,KAAK,EACL,EAAE,EACF;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,EACzD,cAAsB,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,CAAC,EAAE,CAAC,qBAMrB"}
+{"version":3,"file":"AriaStatus.d.ts","sourceRoot":"","sources":["../../src/live-region/AriaStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAEjE,MAAM,MAAM,eAAe,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC5E,EAAE,EACF,KAAK,EACL;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CACF,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,EAAE,CAAC,qBAEpF"}