@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.4

package/dist/SelectPanel/SelectPanel.module.css.js

@@ -0,0 +1,5 @@
+import './SelectPanel-3ac7e8d0.css';
+
+var classes = {"Overlay":"prc-SelectPanel-Overlay-arLk6","Wrapper":"prc-SelectPanel-Wrapper-43Iz8","Header":"prc-SelectPanel-Header-4dLqk","Title":"prc-SelectPanel-Title--CZN1","Subtitle":"prc-SelectPanel-Subtitle-tMSzu","Notice":"prc-SelectPanel-Notice-xDTd4","Footer":"prc-SelectPanel-Footer-78rgp","FilteredActionList":"prc-SelectPanel-FilteredActionList-wzS7m","Message":"prc-SelectPanel-Message-CSpwI","MessageTitle":"prc-SelectPanel-MessageTitle-o6PpS","MessageBody":"prc-SelectPanel-MessageBody-89DEz","MessageIcon":"prc-SelectPanel-MessageIcon-GS8ry","MessageAction":"prc-SelectPanel-MessageAction-qwola","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-3mdX2","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-e-JSD","SecondaryAction":"prc-SelectPanel-SecondaryAction-aWzLU","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-kk2cT","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-Ooz4Y","Backdrop":"prc-SelectPanel-Backdrop-7XJa-","TextInput":"prc-SelectPanel-TextInput-TjXuJ"};
+
+export { classes as default };

package/dist/SelectPanel/SelectPanelMessage.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import { type IconProps } from '@primer/octicons-react';
+export type SelectPanelMessageProps = {
+    children: React.ReactNode;
+    title: string;
+    variant: 'empty' | 'error' | 'warning';
+    className?: string;
+    /**
+     * Custom icon to display above the title.
+     * When not provided, uses AlertIcon for error/warning states and no icon for empty state.
+     */
+    icon?: React.ComponentType<IconProps>;
+    /**
+     * Custom action element to display below the message body.
+     * This can be used to render interactive elements like buttons or links.
+     * Ensure the action element is accessible by providing appropriate ARIA attributes
+     * and making it keyboard-navigable.
+     */
+    action?: React.ReactElement;
+};
+export declare const SelectPanelMessage: React.FC<SelectPanelMessageProps>;
+//# sourceMappingURL=SelectPanelMessage.d.ts.map

package/dist/SelectPanel/SelectPanelMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPanelMessage.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanelMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAIhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkBhE,CAAA"}

package/dist/SelectPanel/SelectPanelMessage.js

@@ -0,0 +1,37 @@
+import { AlertIcon } from '@primer/octicons-react';
+import classes from './SelectPanel.module.css.js';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Octicon from '../Octicon/Octicon.js';
+import Text from '../Text/Text.js';
+
+const SelectPanelMessage = ({
+  variant,
+  title,
+  children,
+  className,
+  icon: CustomIcon,
+  action
+}) => {
+  const IconComponent = CustomIcon || (variant !== 'empty' ? AlertIcon : undefined);
+  return /*#__PURE__*/jsxs("div", {
+    className: clsx(classes.Message, className),
+    children: [IconComponent && /*#__PURE__*/jsx(Octicon, {
+      icon: IconComponent,
+      className: classes.MessageIcon,
+      "data-variant": variant
+    }), /*#__PURE__*/jsx(Text, {
+      className: classes.MessageTitle,
+      children: title
+    }), /*#__PURE__*/jsx(Text, {
+      className: classes.MessageBody,
+      children: children
+    }), action && /*#__PURE__*/jsx("div", {
+      className: classes.MessageAction,
+      children: action
+    })]
+  });
+};
+SelectPanelMessage.displayName = "SelectPanelMessage";
+
+export { SelectPanelMessage };

package/dist/SelectPanel/index.d.ts

@@ -0,0 +1,4 @@
+export { SelectPanel } from './SelectPanel';
+export type { SelectPanelProps } from './SelectPanel';
+export type { ItemProps, ItemInput, GroupedListProps, ListPropsBase } from '../FilteredActionList';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAA"}

package/dist/SideNav.d.ts

@@ -0,0 +1,34 @@
+import type { To } from 'history';
+import type { ComponentProps } from './utils/types';
+import { type LinkProps } from './Link';
+import type React from 'react';
+import { type PropsWithChildren } from 'react';
+type SideNavBaseProps = {
+    as?: React.ElementType;
+    variant?: 'lightweight' | 'normal';
+    bordered?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    'aria-label'?: string;
+};
+declare function SideNav({ as: Component, variant, className, bordered, children, 'aria-label': ariaLabel, }: SideNavBaseProps): React.JSX.Element;
+type StyledSideNavLinkProps = PropsWithChildren<{
+    to?: To;
+    selected?: boolean;
+    variant?: 'full' | 'normal';
+}> & LinkProps;
+declare const SideNavLink: {
+    ({ selected, to, variant, className, children, ...rest }: StyledSideNavLinkProps): React.JSX.Element;
+    displayName: string;
+};
+export type SideNavProps = ComponentProps<typeof SideNav>;
+export type SideNavLinkProps = ComponentProps<typeof SideNavLink>;
+/** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
+declare const _default: typeof SideNav & {
+    Link: {
+        ({ selected, to, variant, className, children, ...rest }: StyledSideNavLinkProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=SideNav.d.ts.map

package/dist/SideNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../src/SideNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAA;AACjD,OAAa,EAAC,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,SAAiB,EACrB,OAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,qBAkBlB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC;IAC9C,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC5B,CAAC,GACA,SAAS,CAAA;AAEX,QAAA,MAAM,WAAW;8DAA2D,sBAAsB;;CAUjG,CAAA;AAID,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,4EAA4E;;;kEAjBA,sBAAsB;;;;AAkBlG,wBAA0D"}

package/dist/SideNav.js

@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+import classes from './SideNav.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+import Link from './Link/Link.js';
+
+function SideNav({
+  as: Component = 'nav',
+  variant = 'normal',
+  className,
+  bordered,
+  children,
+  'aria-label': ariaLabel
+}) {
+  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
+  const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
+    [classes.SideNavBordered]: bordered
+  });
+  return /*#__PURE__*/jsx(Component, {
+    className: newClassName,
+    "aria-label": ariaLabel,
+    children: children
+  });
+}
+SideNav.displayName = "SideNav";
+const SideNavLink = ({
+  selected,
+  to,
+  variant,
+  className,
+  children,
+  ...rest
+}) => {
+  const isReactRouter = typeof to === 'string';
+  const newClassName = clsx(classes.SideNavLink, className, {
+    [classes.SideNavLinkFull]: variant === 'full'
+  });
+  // according to their docs, NavLink supports aria-current:
+  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
+  return /*#__PURE__*/jsx(Link, {
+    "aria-current": isReactRouter || selected ? 'page' : undefined,
+    className: newClassName,
+    ...rest,
+    children: children
+  });
+};
+SideNavLink.displayName = "SideNavLink";
+SideNavLink.displayName = 'SideNav.Link';
+/** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
+var SideNav$1 = Object.assign(SideNav, {
+  Link: SideNavLink
+});
+
+export { SideNav$1 as default };

package/dist/Skeleton/SkeletonBox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type CSSProperties, type HTMLProps } from 'react';
+export type SkeletonBoxProps = {
+    /** Height of the skeleton "box". Accepts any valid CSS `height` value. */
+    height?: CSSProperties['height'];
+    /** Width of the skeleton "box". Accepts any valid CSS `width` value. */
+    width?: CSSProperties['width'];
+    /** The className of the skeleton box */
+    className?: string;
+} & HTMLProps<HTMLElement>;
+export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=SkeletonBox.d.ts.map

package/dist/Skeleton/SkeletonBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../src/Skeleton/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKxD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGAkBtB,CAAA"}

package/dist/Skeleton/SkeletonBox.js

@@ -0,0 +1,79 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { clsx } from 'clsx';
+import classes from './SkeletonBox.module.css.js';
+import '@styled-system/css';
+import merge from 'deepmerge';
+import { jsx } from 'react/jsx-runtime';
+
+const SkeletonBox = /*#__PURE__*/React.forwardRef(function SkeletonBox(t0, ref) {
+  const $ = c(17);
+  let className;
+  let height;
+  let props;
+  let style;
+  let width;
+  if ($[0] !== t0) {
+    ({
+      height,
+      width,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = height;
+    $[3] = props;
+    $[4] = style;
+    $[5] = width;
+  } else {
+    className = $[1];
+    height = $[2];
+    props = $[3];
+    style = $[4];
+    width = $[5];
+  }
+  const t1 = ref;
+  let t2;
+  if ($[6] !== className) {
+    t2 = clsx(className, classes.SkeletonBox);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = style;
+  let t4;
+  if ($[8] !== height || $[9] !== t3 || $[10] !== width) {
+    t4 = merge(t3, {
+      height,
+      width
+    });
+    $[8] = height;
+    $[9] = t3;
+    $[10] = width;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
+      ref: t1,
+      className: t2,
+      style: t4,
+      ...props
+    });
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+});
+
+export { SkeletonBox };

package/dist/SkeletonAvatar/SkeletonAvatar-e00fff32.css

@@ -0,0 +1,2 @@
+.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-component=SkeletonAvatar]){border-radius:50%;display:inline-block;height:var(--avatarSize-regular);line-height:1;width:var(--avatarSize-regular)}.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-square]){border-radius:clamp(4px,var(--avatarSize-regular) - 24px,var(--borderRadius-medium,.375rem))}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-narrow);width:var(--avatarSize-narrow)}}@media screen and (min-width:48rem){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-regular);width:var(--avatarSize-regular)}}@media screen and (min-width:87.5rem){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-wide);width:var(--avatarSize-wide)}}
+/*# sourceMappingURL=SkeletonAvatar-e00fff32.css.map */

package/dist/SkeletonAvatar/SkeletonAvatar-e00fff32.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonAvatar/SkeletonAvatar.module.css"],"names":[],"mappings":"AACE,gFAME,iBAAkB,CALlB,oBAAqB,CAErB,gCAAiC,CAEjC,aAAc,CAHd,+BAKF,CAEA,8DAEE,4FACF,CAGE,mDADF,kEAGI,+BAAgC,CADhC,8BAaJ,CAXE,CAEA,oCANF,kEAQI,gCAAiC,CADjC,+BAQJ,CANE,CAEA,sCAXF,kEAaI,6BAA8B,CAD9B,4BAGJ,CADE","file":"SkeletonAvatar-e00fff32.css","sourcesContent":[".SkeletonAvatar {\n  &:where([data-component='SkeletonAvatar']) {\n    display: inline-block;\n    width: var(--avatarSize-regular);\n    height: var(--avatarSize-regular);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: 1;\n    border-radius: 50%;\n  }\n\n  &:where([data-square]) {\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium));\n  }\n\n  &:where([data-responsive]) {\n    @media screen and (--viewportRange-narrow) {\n      width: var(--avatarSize-narrow);\n      height: var(--avatarSize-narrow);\n    }\n\n    @media screen and (--viewportRange-regular) {\n      width: var(--avatarSize-regular);\n      height: var(--avatarSize-regular);\n    }\n\n    @media screen and (--viewportRange-wide) {\n      width: var(--avatarSize-wide);\n      height: var(--avatarSize-wide);\n    }\n  }\n}\n"]}

package/dist/SkeletonAvatar/SkeletonAvatar.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { AvatarProps } from '../Avatar';
+interface SkeletonAvatarProps extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
+    /** Class name for custom styling */
+    className?: string;
+    size?: AvatarProps['size'];
+    square?: AvatarProps['square'];
+}
+declare function SkeletonAvatar({ size, square, className, style, ...rest }: SkeletonAvatarProps): React.JSX.Element;
+export { SkeletonAvatar };
+export type { SkeletonAvatarProps };
+//# sourceMappingURL=SkeletonAvatar.d.ts.map

package/dist/SkeletonAvatar/SkeletonAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../src/SkeletonAvatar/SkeletonAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAO1C,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9E,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;CAC/B;AAED,iBAAS,cAAc,CAAC,EAAC,IAA0B,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,mBAAmB,qBAsB3G;AAED,OAAO,EAAC,cAAc,EAAC,CAAA;AACvB,YAAY,EAAC,mBAAmB,EAAC,CAAA"}

package/dist/SkeletonAvatar/SkeletonAvatar.js

@@ -0,0 +1,124 @@
+import { c } from 'react-compiler-runtime';
+import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { DEFAULT_AVATAR_SIZE } from '../Avatar/Avatar.js';
+import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
+import classes from './SkeletonAvatar.module.css.js';
+import { clsx } from 'clsx';
+import '@styled-system/css';
+import merge from 'deepmerge';
+import { jsx } from 'react/jsx-runtime';
+
+function SkeletonAvatar(t0) {
+  const $ = c(31);
+  let className;
+  let rest;
+  let square;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      square,
+      className,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = rest;
+    $[3] = square;
+    $[4] = style;
+    $[5] = t1;
+  } else {
+    className = $[1];
+    rest = $[2];
+    square = $[3];
+    style = $[4];
+    t1 = $[5];
+  }
+  const size = t1 === undefined ? DEFAULT_AVATAR_SIZE : t1;
+  let t2;
+  if ($[6] !== size) {
+    t2 = isResponsiveValue(size);
+    $[6] = size;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const responsive = t2;
+  let T0;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  if ($[8] !== className || $[9] !== responsive || $[10] !== rest || $[11] !== size || $[12] !== square || $[13] !== style) {
+    const cssSizeVars = {};
+    if (responsive) {
+      for (const [key, value] of Object.entries(size)) {
+        cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
+      }
+    } else {
+      cssSizeVars["--avatarSize-regular"] = `${size}px`;
+    }
+    T0 = SkeletonBox;
+    if ($[21] !== className) {
+      t3 = clsx(className, classes.SkeletonAvatar);
+      $[21] = className;
+      $[22] = t3;
+    } else {
+      t3 = $[22];
+    }
+    t4 = rest;
+    t5 = "SkeletonAvatar";
+    t6 = responsive ? "" : undefined;
+    t7 = square ? "" : undefined;
+    t8 = merge(style, cssSizeVars);
+    $[8] = className;
+    $[9] = responsive;
+    $[10] = rest;
+    $[11] = size;
+    $[12] = square;
+    $[13] = style;
+    $[14] = T0;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    T0 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+    t8 = $[20];
+  }
+  let t9;
+  if ($[23] !== T0 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8) {
+    t9 = /*#__PURE__*/jsx(T0, {
+      className: t3,
+      ...t4,
+      "data-component": t5,
+      "data-responsive": t6,
+      "data-square": t7,
+      style: t8
+    });
+    $[23] = T0;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
+    $[28] = t7;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  return t9;
+}
+
+export { SkeletonAvatar };

package/dist/SkeletonAvatar/SkeletonAvatar.module.css.js

@@ -0,0 +1,5 @@
+import './SkeletonAvatar-e00fff32.css';
+
+var classes = {"SkeletonAvatar":"prc-SkeletonAvatar-SkeletonAvatar-inefu"};
+
+export { classes as default };

package/dist/SkeletonAvatar/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonAvatar } from './SkeletonAvatar';
+export type { SkeletonAvatarProps } from './SkeletonAvatar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SkeletonAvatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA"}

package/dist/SkeletonText/SkeletonText-5cf908c1.css

@@ -0,0 +1,2 @@
+.prc-SkeletonText-SkeletonText-tW5nH{--font-size:var(--text-body-size-medium,0.875rem);--line-height:var(--text-body-lineHeight-medium,1.4285);--leading:calc(var(--font-size)*var(--line-height) - var(--font-size))}@supports (margin-block:mod(1px,1px)){.prc-SkeletonText-SkeletonText-tW5nH{--leading:mod(var(--font-size) * var(--line-height),var(--font-size))}}.prc-SkeletonText-SkeletonText-tW5nH{border-radius:var(--borderRadius-small,.1875rem);height:var(--font-size);margin-block:calc(var(--leading)/2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]){margin-block-end:calc(var(--leading)*2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]):last-child{margin-bottom:0;max-width:65%;min-width:50px}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]),.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){border-radius:var(--borderRadius-medium,.375rem)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]){--font-size:var(--text-display-size,2.5rem);--line-height:var(--text-display-lineHeight,1.4)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){--font-size:var(--text-title-size-large,2rem);--line-height:var(--text-title-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleMedium]){--font-size:var(--text-title-size-medium,1.25rem);--line-height:var(--text-title-lineHeight-medium,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleSmall]){--font-size:var(--text-title-size-small,1rem);--line-height:var(--text-title-lineHeight-small,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=subtitle]){--font-size:var(--text-subtitle-size,1.25rem);--line-height:var(--text-subtitle-lineHeight,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodyLarge]){--font-size:var(--text-body-size-large,1rem);--line-height:var(--text-body-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodySmall]){--font-size:var(--text-body-size-small,0.75rem);--line-height:var(--text-body-lineHeight-small,1.6666)}.prc-SkeletonText-SkeletonTextWrapper-3Z0sU{padding-block:.1px}
+/*# sourceMappingURL=SkeletonText-5cf908c1.css.map */

package/dist/SkeletonText/SkeletonText-5cf908c1.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonText/SkeletonText.module.css"],"names":[],"mappings":"AAAA,qCACE,iDAAyC,CACzC,uDAAiD,CACjD,sEA6DF,CA3DE,sCALF,qCAMI,qEA0DJ,CAzDE,CAPF,qCAUE,gDAAwC,CADxC,uBAAwB,CAGxB,mCAoDF,CAlDE,gEAEE,uCAOF,CALE,2EAGE,eAAgB,CADhB,aAAc,CADd,cAGF,CAGF,+JAEE,gDACF,CAEA,8EACE,2CAAqC,CACrC,gDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,kFACE,iDAA0C,CAC1C,qDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,+EACE,6CAAsC,CACtC,iDACF,CAEA,gFACE,4CAAwC,CACxC,mDACF,CAEA,gFACE,+CAAwC,CACxC,sDACF,CAGF,4CAEE,kBACF","file":"SkeletonText-5cf908c1.css","sourcesContent":[".SkeletonText {\n  --font-size: var(--text-body-size-medium);\n  --line-height: var(--text-body-lineHeight-medium);\n  --leading: calc(var(--font-size) * var(--line-height) - var(--font-size));\n\n  @supports (margin-block: mod(1px, 1px)) {\n    --leading: mod(var(--font-size) * var(--line-height), var(--font-size));\n  }\n\n  height: var(--font-size);\n  border-radius: var(--borderRadius-small);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block: calc(var(--leading) / 2);\n\n  &:where([data-in-multiline]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-end: calc(var(--leading) * 2);\n\n    &:last-child {\n      min-width: 50px;\n      max-width: 65%;\n      margin-bottom: 0;\n    }\n  }\n\n  &:where([data-text-skeleton-size='display']),\n  &:where([data-text-skeleton-size='titleLarge']) {\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &:where([data-text-skeleton-size='display']) {\n    --font-size: var(--text-display-size);\n    --line-height: var(--text-display-lineHeight);\n  }\n\n  &:where([data-text-skeleton-size='titleLarge']) {\n    --font-size: var(--text-title-size-large);\n    --line-height: var(--text-title-lineHeight-large);\n  }\n\n  &:where([data-text-skeleton-size='titleMedium']) {\n    --font-size: var(--text-title-size-medium);\n    --line-height: var(--text-title-lineHeight-medium);\n  }\n\n  &:where([data-text-skeleton-size='titleSmall']) {\n    --font-size: var(--text-title-size-small);\n    --line-height: var(--text-title-lineHeight-small);\n  }\n\n  &:where([data-text-skeleton-size='subtitle']) {\n    --font-size: var(--text-subtitle-size);\n    --line-height: var(--text-subtitle-lineHeight);\n  }\n\n  &:where([data-text-skeleton-size='bodyLarge']) {\n    --font-size: var(--text-body-size-large);\n    --line-height: var(--text-body-lineHeight-large);\n  }\n\n  &:where([data-text-skeleton-size='bodySmall']) {\n    --font-size: var(--text-body-size-small);\n    --line-height: var(--text-body-lineHeight-small);\n  }\n}\n\n.SkeletonTextWrapper {\n  /* stylelint-disable-next-line primer/spacing */\n  padding-block: 0.1px;\n}\n"]}

package/dist/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { type HTMLProps } from 'react';
+interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
+    /** Size of the text that the skeleton is replacing. */
+    size?: 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle';
+    /** Number of lines of skeleton text to render. */
+    lines?: number;
+    /** Maximum width that the line(s) of skeleton text can take up.  Accepts any valid CSS `max-width` value. */
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /** Class name for custom styling */
+    className?: string;
+}
+declare function SkeletonText({ lines, maxWidth, size, className, style, ...rest }: SkeletonTextProps): React.JSX.Element;
+export { SkeletonText };
+export type { SkeletonTextProps };
+//# sourceMappingURL=SkeletonText.d.ts.map

package/dist/SkeletonText/SkeletonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../src/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,UAAU,iBAAkB,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IACtE,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAAA;IACtH,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EAAC,KAAS,EAAE,QAAQ,EAAE,IAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAsC7G;AAED,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAC,CAAA"}

package/dist/SkeletonText/SkeletonText.js

@@ -0,0 +1,140 @@
+import { c } from 'react-compiler-runtime';
+import classes from './SkeletonText.module.css.js';
+import { clsx } from 'clsx';
+import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SkeletonText(t0) {
+  const $ = c(32);
+  let className;
+  let maxWidth;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      lines: t1,
+      maxWidth,
+      size: t2,
+      className,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = maxWidth;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    className = $[1];
+    maxWidth = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const lines = t1 === undefined ? 1 : t1;
+  const size = t2 === undefined ? "bodyMedium" : t2;
+  if (lines < 2) {
+    let t3;
+    if ($[7] !== className) {
+      t3 = clsx(className, classes.SkeletonText);
+      $[7] = className;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    let t4;
+    if ($[9] !== maxWidth || $[10] !== style) {
+      t4 = {
+        ...style,
+        maxWidth
+      };
+      $[9] = maxWidth;
+      $[10] = style;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] !== rest || $[13] !== size || $[14] !== t3 || $[15] !== t4) {
+      t5 = /*#__PURE__*/jsx(SkeletonBox, {
+        "data-component": "SkeletonText",
+        "data-text-skeleton-size": size,
+        width: "100%",
+        className: t3,
+        style: t4,
+        ...rest
+      });
+      $[12] = rest;
+      $[13] = size;
+      $[14] = t3;
+      $[15] = t4;
+      $[16] = t5;
+    } else {
+      t5 = $[16];
+    }
+    return t5;
+  }
+  let t3;
+  if ($[17] !== maxWidth || $[18] !== style) {
+    t3 = {
+      ...style,
+      maxWidth
+    };
+    $[17] = maxWidth;
+    $[18] = style;
+    $[19] = t3;
+  } else {
+    t3 = $[19];
+  }
+  let t4;
+  if ($[20] !== className || $[21] !== lines || $[22] !== rest || $[23] !== size) {
+    let t5;
+    if ($[25] !== className || $[26] !== rest || $[27] !== size) {
+      t5 = (_, index) => /*#__PURE__*/jsx(SkeletonBox, {
+        "data-component": "SkeletonText",
+        "data-in-multiline": "true",
+        "data-text-skeleton-size": size,
+        className: clsx(className, classes.SkeletonText),
+        ...rest
+      }, index);
+      $[25] = className;
+      $[26] = rest;
+      $[27] = size;
+      $[28] = t5;
+    } else {
+      t5 = $[28];
+    }
+    t4 = Array.from({
+      length: lines
+    }, t5);
+    $[20] = className;
+    $[21] = lines;
+    $[22] = rest;
+    $[23] = size;
+    $[24] = t4;
+  } else {
+    t4 = $[24];
+  }
+  let t5;
+  if ($[29] !== t3 || $[30] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
+      "data-component": "multilineContainer",
+      className: classes.SkeletonTextWrapper,
+      style: t3,
+      children: t4
+    });
+    $[29] = t3;
+    $[30] = t4;
+    $[31] = t5;
+  } else {
+    t5 = $[31];
+  }
+  return t5;
+}
+
+export { SkeletonText };

package/dist/SkeletonText/SkeletonText.module.css.js

@@ -0,0 +1,5 @@
+import './SkeletonText-5cf908c1.css';
+
+var classes = {"SkeletonText":"prc-SkeletonText-SkeletonText-tW5nH","SkeletonTextWrapper":"prc-SkeletonText-SkeletonTextWrapper-3Z0sU"};
+
+export { classes as default };

package/dist/SkeletonText/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonText } from './SkeletonText';
+export type { SkeletonTextProps } from './SkeletonText';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SkeletonText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAA;AAC3C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA"}

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+import type { HTMLDataAttributes } from '../internal/internal-types';
+declare const sizeMap: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export type SpinnerProps = {
+    /** Sets the width and height of the spinner. */
+    size?: keyof typeof sizeMap;
+    /** Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page. */
+    srText?: string | null;
+    /** @deprecated Use `srText` instead. */
+    'aria-label'?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & HTMLDataAttributes;
+declare function Spinner({ size: sizeKey, srText, 'aria-label': ariaLabel, className, style, ...props }: SpinnerProps): React.JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAKlE,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,0KAA0K;IAC1K,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,GAAG,kBAAkB,CAAA;AAEtB,iBAAS,OAAO,CAAC,EACf,IAAI,EAAE,OAAkB,EACxB,MAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,qBAwCd;kBA/CQ,OAAO;;;AAmDhB,eAAe,OAAO,CAAA"}