@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/Skeleton.js

@@ -3,20 +3,22 @@ import { forwardRef } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 
-import './Skeleton.css';const skeleton = "_skeleton_unbyv_2";
-const shade = "_shade_unbyv_17";
-const pulser = "_pulser_unbyv_1";
-const text = "_text_unbyv_29";
-const body = "_body_unbyv_33";
-const line = "_line_unbyv_33";
-const headline = "_headline_unbyv_40";
-const circle = "_circle_unbyv_44";
-const rectangle = "_rectangle_unbyv_49";
-const pill = "_pill_unbyv_53";
+import './Skeleton.css';const skeleton = "_skeleton_1mtwj_2";
+const shade = "_shade_1mtwj_17";
+const pulser = "_pulser_1mtwj_1";
+const ai = "_ai_1mtwj_29";
+const text = "_text_1mtwj_35";
+const body = "_body_1mtwj_39";
+const line = "_line_1mtwj_39";
+const headline = "_headline_1mtwj_46";
+const circle = "_circle_1mtwj_50";
+const rectangle = "_rectangle_1mtwj_55";
+const pill = "_pill_1mtwj_59";
 const styles = {
 	skeleton: skeleton,
 	shade: shade,
 	pulser: pulser,
+	ai: ai,
 	text: text,
 	body: body,
 	line: line,
@@ -32,6 +34,7 @@ const SkeletonCircle = forwardRef(
     const {
       className,
       diameter,
+      ai,
       "aria-label": ariaLabel = "Loading content",
       style,
       ...rest
@@ -40,6 +43,7 @@ const SkeletonCircle = forwardRef(
       [styles["skeleton"]],
       [styles["circle"]],
       styles["shade"],
+      ai && styles["ai"],
       className
     );
     const styleCombined = {
@@ -70,6 +74,7 @@ const SkeletonPill = forwardRef(
     const {
       className,
       width,
+      ai,
       "aria-label": ariaLabel = "Loading content",
       style,
       ...rest
@@ -78,6 +83,7 @@ const SkeletonPill = forwardRef(
       [styles["skeleton"]],
       [styles["pill"]],
       styles["shade"],
+      ai && styles["ai"],
       className
     );
     const styleCombined = {
@@ -107,6 +113,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   const {
     className,
     height,
+    ai,
     "aria-label": ariaLabel = "Loading content",
     style,
     ...rest
@@ -115,6 +122,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     [styles["skeleton"]],
     [styles["rectangle"]],
     styles["shade"],
+    ai && styles["ai"],
     className
   );
   const styleCombined = {
@@ -145,6 +153,7 @@ const SkeletonText = forwardRef(
       className,
       "aria-label": ariaLabel = "Loading content",
       variant = "body",
+      ai,
       style,
       ...rest
     } = componentProps;
@@ -158,7 +167,11 @@ const SkeletonText = forwardRef(
       ...style,
       ...layoutStyles
     };
-    const ShaderClassName = cx(styles["line"], styles["shade"]);
+    const ShaderClassName = cx(
+      styles["line"],
+      styles["shade"],
+      ai && styles["ai"]
+    );
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/SkeletonCircle.tsx","../src/components/Skeleton/SkeletonPill.tsx","../src/components/Skeleton/SkeletonRectangle.tsx","../src/components/Skeleton/SkeletonText.tsx","../src/components/Skeleton/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonCircle component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonCircleProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The diameter of the circular skeleton in CSS units.\n     * @default 32px\n     */\n    diameter?: string;\n  };\n\n/**\n * SkeletonCircle component for displaying circular loading placeholders.\n *\n * Features:\n * - Circular skeleton placeholder with customizable diameter\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n *\n * @example\n * <Skeleton.Circle diameter=\"40px\" />\n *\n * <Skeleton.Circle\n *   diameter=\"60px\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading avatar\"\n * />\n */\nexport const SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      diameter,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"circle\"]],\n      styles[\"shade\"],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n      \"--diameter\": diameter,\n    };\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-circle\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      />\n    );\n  },\n);\n\nSkeletonCircle.displayName = \"SkeletonCircle\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonPill component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonPillProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The width of the pill skeleton in CSS units.\n     */\n    width?: string;\n  };\n\n/**\n * SkeletonPill component for displaying pill-shaped loading placeholders.\n *\n * Features:\n * - Pill-shaped skeleton placeholder with customizable width\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Large border radius for pill appearance\n * - Fixed height for consistent styling\n *\n * @example\n * <Skeleton.Pill width=\"120px\" />\n *\n * <Skeleton.Pill\n *   width=\"8rem\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading tag\"\n * />\n */\nexport const SkeletonPill = forwardRef<HTMLDivElement, SkeletonPillProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      width,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"pill\"]],\n      styles[\"shade\"],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n      \"--width\": width,\n    };\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-pill\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      />\n    );\n  },\n);\n\nSkeletonPill.displayName = \"SkeletonPill\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonRectangle component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonRectangleProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The height of the rectangular skeleton in CSS units.\n     * @default 56px\n     */\n    height?: string;\n  };\n\n/**\n * SkeletonRectangle component for displaying rectangular loading placeholders.\n *\n * Features:\n * - Rectangular skeleton placeholder with customizable height\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Medium border radius for consistent styling\n *\n * @example\n * <Skeleton.Rectangle height=\"100px\" />\n *\n * <Skeleton.Rectangle\n *   height=\"2rem\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading image\"\n * />\n */\nexport const SkeletonRectangle = forwardRef<\n  HTMLDivElement,\n  SkeletonRectangleProps\n>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const {\n    className,\n    height,\n    \"aria-label\": ariaLabel = \"Loading content\",\n    style,\n    ...rest\n  } = componentProps;\n\n  const SkeletonClassNames = cx(\n    [styles[\"skeleton\"]],\n    [styles[\"rectangle\"]],\n    styles[\"shade\"],\n    className,\n  );\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n    \"--height\": height,\n  };\n\n  return (\n    <div\n      {...rest}\n      data-anv=\"skeleton-rectangle\"\n      role=\"progressbar\"\n      aria-busy=\"true\"\n      className={SkeletonClassNames}\n      style={styleCombined}\n      aria-label={ariaLabel}\n      ref={ref}\n    />\n  );\n});\n\nSkeletonRectangle.displayName = \"SkeletonRectangle\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonText component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonTextProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> &\n  (\n    | {\n        /**\n         * Text variant for body text skeleton.\n         * @default body\n         */\n        variant?: \"body\";\n        /**\n         * Number of text lines to display.\n         * @default 1\n         */\n        rows?: number;\n      }\n    | {\n        /**\n         * Text variant for headline text skeleton.\n         */\n        variant?: \"headline\";\n        /**\n         * Rows prop is not available for headline variant.\n         */\n        rows?: never;\n      }\n  );\n\n/**\n * SkeletonText component for displaying text loading placeholders.\n *\n * Features:\n * - Text skeleton placeholder with body and headline variants\n * - Configurable number of rows for body variant\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Different line heights for body vs headline variants\n * - Last line shorter for body variant to simulate natural text\n *\n * @example\n * <Skeleton.Text variant=\"body\" rows={3} />\n *\n * <Skeleton.Text\n *   variant=\"headline\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading title\"\n * />\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      variant = \"body\",\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"text\"]],\n      [styles[variant]],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    const ShaderClassName = cx(styles[\"line\"], styles[\"shade\"]);\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-text\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      >\n        {\"rows\" in rest ? (\n          Array.from({ length: rest.rows ?? 1 }, (_, i) => i).map((i) => (\n            <div key={`line-${i}`} className={ShaderClassName} />\n          ))\n        ) : (\n          <div className={ShaderClassName} />\n        )}\n      </div>\n    );\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n","import { SkeletonCircle } from \"./SkeletonCircle\";\nimport { SkeletonPill } from \"./SkeletonPill\";\nimport { SkeletonRectangle } from \"./SkeletonRectangle\";\nimport { SkeletonText } from \"./SkeletonText\";\n\nexport * from \"./SkeletonCircle\";\nexport * from \"./SkeletonPill\";\nexport * from \"./SkeletonRectangle\";\nexport * from \"./SkeletonText\";\n\nexport const Skeleton = Object.assign(\n  {},\n  {\n    Circle: SkeletonCircle,\n    Pill: SkeletonPill,\n    Rectangle: SkeletonRectangle,\n    Text: SkeletonText,\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/SkeletonCircle.tsx","../src/components/Skeleton/SkeletonPill.tsx","../src/components/Skeleton/SkeletonRectangle.tsx","../src/components/Skeleton/SkeletonText.tsx","../src/components/Skeleton/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonCircle component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonCircleProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The diameter of the circular skeleton in CSS units.\n     * @default 32px\n     */\n    diameter?: string;\n    /**\n     * Enables the AI visual style with blue gradient colors.\n     */\n    ai?: boolean;\n  };\n\n/**\n * SkeletonCircle component for displaying circular loading placeholders.\n *\n * Features:\n * - Circular skeleton placeholder with customizable diameter\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n *\n * @example\n * <Skeleton.Circle diameter=\"40px\" />\n *\n * <Skeleton.Circle\n *   diameter=\"60px\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading avatar\"\n * />\n */\nexport const SkeletonCircle = forwardRef<HTMLDivElement, SkeletonCircleProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      diameter,\n      ai,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"circle\"]],\n      styles[\"shade\"],\n      ai && styles[\"ai\"],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n      \"--diameter\": diameter,\n    };\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-circle\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      />\n    );\n  },\n);\n\nSkeletonCircle.displayName = \"SkeletonCircle\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonPill component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonPillProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The width of the pill skeleton in CSS units.\n     */\n    width?: string;\n    /**\n     * Enables the AI visual style with blue gradient colors.\n     */\n    ai?: boolean;\n  };\n\n/**\n * SkeletonPill component for displaying pill-shaped loading placeholders.\n *\n * Features:\n * - Pill-shaped skeleton placeholder with customizable width\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Large border radius for pill appearance\n * - Fixed height for consistent styling\n *\n * @example\n * <Skeleton.Pill width=\"120px\" />\n *\n * <Skeleton.Pill\n *   width=\"8rem\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading tag\"\n * />\n */\nexport const SkeletonPill = forwardRef<HTMLDivElement, SkeletonPillProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      width,\n      ai,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"pill\"]],\n      styles[\"shade\"],\n      ai && styles[\"ai\"],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n      \"--width\": width,\n    };\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-pill\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      />\n    );\n  },\n);\n\nSkeletonPill.displayName = \"SkeletonPill\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonRectangle component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonRectangleProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The height of the rectangular skeleton in CSS units.\n     * @default 56px\n     */\n    height?: string;\n    /**\n     * Enables the AI visual style with blue gradient colors.\n     */\n    ai?: boolean;\n  };\n\n/**\n * SkeletonRectangle component for displaying rectangular loading placeholders.\n *\n * Features:\n * - Rectangular skeleton placeholder with customizable height\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Medium border radius for consistent styling\n *\n * @example\n * <Skeleton.Rectangle height=\"100px\" />\n *\n * <Skeleton.Rectangle\n *   height=\"2rem\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading image\"\n * />\n */\nexport const SkeletonRectangle = forwardRef<\n  HTMLDivElement,\n  SkeletonRectangleProps\n>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const {\n    className,\n    height,\n    ai,\n    \"aria-label\": ariaLabel = \"Loading content\",\n    style,\n    ...rest\n  } = componentProps;\n\n  const SkeletonClassNames = cx(\n    [styles[\"skeleton\"]],\n    [styles[\"rectangle\"]],\n    styles[\"shade\"],\n    ai && styles[\"ai\"],\n    className,\n  );\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n    \"--height\": height,\n  };\n\n  return (\n    <div\n      {...rest}\n      data-anv=\"skeleton-rectangle\"\n      role=\"progressbar\"\n      aria-busy=\"true\"\n      className={SkeletonClassNames}\n      style={styleCombined}\n      aria-label={ariaLabel}\n      ref={ref}\n    />\n  );\n});\n\nSkeletonRectangle.displayName = \"SkeletonRectangle\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Skeleton.module.scss\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\n/**\n * Props for the SkeletonText component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type SkeletonTextProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * Enables the AI visual style with blue gradient colors.\n     */\n    ai?: boolean;\n  } & (\n    | {\n        /**\n         * Text variant for body text skeleton.\n         * @default body\n         */\n        variant?: \"body\";\n        /**\n         * Number of text lines to display.\n         * @default 1\n         */\n        rows?: number;\n      }\n    | {\n        /**\n         * Text variant for headline text skeleton.\n         */\n        variant?: \"headline\";\n        /**\n         * Rows prop is not available for headline variant.\n         */\n        rows?: never;\n      }\n  );\n\n/**\n * SkeletonText component for displaying text loading placeholders.\n *\n * Features:\n * - Text skeleton placeholder with body and headline variants\n * - Configurable number of rows for body variant\n * - Animated pulsing effect for loading indication\n * - Accessible with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Customizable styling through className and style props\n * - Progress bar role for screen readers\n * - Different line heights for body vs headline variants\n * - Last line shorter for body variant to simulate natural text\n *\n * @example\n * <Skeleton.Text variant=\"body\" rows={3} />\n *\n * <Skeleton.Text\n *   variant=\"headline\"\n *   className=\"custom-skeleton\"\n *   aria-label=\"Loading title\"\n * />\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      \"aria-label\": ariaLabel = \"Loading content\",\n      variant = \"body\",\n      ai,\n      style,\n      ...rest\n    } = componentProps;\n\n    const SkeletonClassNames = cx(\n      [styles[\"skeleton\"]],\n      [styles[\"text\"]],\n      [styles[variant]],\n      className,\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    const ShaderClassName = cx(\n      styles[\"line\"],\n      styles[\"shade\"],\n      ai && styles[\"ai\"],\n    );\n\n    return (\n      <div\n        {...rest}\n        data-anv=\"skeleton-text\"\n        role=\"progressbar\"\n        aria-busy=\"true\"\n        className={SkeletonClassNames}\n        style={styleCombined}\n        aria-label={ariaLabel}\n        ref={ref}\n      >\n        {\"rows\" in rest ? (\n          Array.from({ length: rest.rows ?? 1 }, (_, i) => i).map((i) => (\n            <div key={`line-${i}`} className={ShaderClassName} />\n          ))\n        ) : (\n          <div className={ShaderClassName} />\n        )}\n      </div>\n    );\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n","import { SkeletonCircle } from \"./SkeletonCircle\";\nimport { SkeletonPill } from \"./SkeletonPill\";\nimport { SkeletonRectangle } from \"./SkeletonRectangle\";\nimport { SkeletonText } from \"./SkeletonText\";\n\nexport * from \"./SkeletonCircle\";\nexport * from \"./SkeletonPill\";\nexport * from \"./SkeletonRectangle\";\nexport * from \"./SkeletonText\";\n\nexport const Skeleton = Object.assign(\n  {},\n  {\n    Circle: SkeletonCircle,\n    Pill: SkeletonPill,\n    Rectangle: SkeletonRectangle,\n    Text: SkeletonText,\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/{Stepper-Dt8_ImvJ.js → Stepper-_27Lmm2K.js}

@@ -7,8 +7,8 @@ import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { e as DurationSlow } from './primitive-C3RFDRA8.js';
 import { Overflow } from './Overflow.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
-import { m as motion } from './proxy-BbFHSE6L.js';
-import { B as Button } from './Button-CVsGhVJz.js';
+import { m as motion } from './proxy-DEehATlA.js';
+import { B as Button } from './Button-a_D7tUgM.js';
 import { useTrackingId } from './useTrackingId.js';
 
 import './Stepper.css';const StepperContext = createContext({
@@ -393,8 +393,8 @@ const styles = {
 	stepper: stepper
 };
 
-const StepperElement = forwardRef(
-  (props, ref) => {
+const Stepper = Object.assign(
+  forwardRef(function StepperInner(props, ref) {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
       defaultIndex,
@@ -470,161 +470,161 @@ const StepperElement = forwardRef(
         children
       }
     ) });
+  }),
+  {
+    /**
+     * Individual step component for the Stepper.
+     *
+     * Features:
+     * - Visual progress indicator with animated bar
+     * - Check icon for completed steps
+     * - Keyboard navigation support
+     * - Accessible with proper ARIA attributes
+     * - Click handling for step navigation
+     * - Visual states for current, completed, and future steps
+     * - Responsive design with mobile-friendly layout
+     * - Focus management for keyboard users
+     * - Custom styling support
+     *
+     * @example
+     * <Stepper.Step controls="step1">
+     *   Personal Information
+     * </Stepper.Step>
+     *
+     * @example
+     * <Stepper.Step
+     *   controls="step2"
+     *   onClick={(e, index) => console.log(`Clicked step ${index}`)}
+     * >
+     *   Contact Details
+     * </Stepper.Step>
+     */
+    Step: StepperStep,
+    /**
+     * Container component for organizing and displaying stepper steps.
+     *
+     * Features:
+     * - Groups multiple stepper steps together
+     * - Displays current step label
+     * - Responsive design with mobile-friendly layout
+     * - Accessible with proper ARIA roles
+     * - Automatic step organization
+     * - Visual step indicators
+     * - Context-based current step display
+     * - Flexible layout with CSS Grid/Flexbox
+     * - Container queries for responsive behavior
+     *
+     * @example
+     * <Stepper.List>
+     *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
+     *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
+     *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
+     * </Stepper.List>
+     */
+    List: StepperList,
+    /**
+     * Content panel component for displaying step content in the Stepper.
+     *
+     * Features:
+     * - Displays content for the current step only
+     * - Smooth fade-in/fade-out animations
+     * - Automatic overflow handling with scroll support
+     * - Accessible with proper ARIA roles
+     * - Layout utilities for positioning and spacing
+     * - Motion animations for smooth transitions
+     * - Focus management for keyboard navigation
+     * - Responsive design with flexible layout
+     * - Context-based visibility control
+     *
+     * @example
+     * <Stepper.Panel id="step1">
+     *   <h2>Personal Information</h2>
+     *   <form>
+     *     <label htmlFor="name">Name:</label>
+     *     <input id="name" type="text" />
+     *   </form>
+     * </Stepper.Panel>
+     */
+    Panel: StepperPanel,
+    /**
+     * Next button component for navigating to the next step in the Stepper.
+     *
+     * Features:
+     * - Automatically advances to the next step
+     * - Changes label to "Complete" on the final step
+     * - Supports async validation with Promise return
+     * - Prevents navigation when validation fails
+     * - Hides when all steps are completed
+     * - Accessible with proper button semantics
+     * - Customizable appearance and styling
+     * - Integration with stepper context
+     * - Automatic completion handling
+     *
+     * @example
+     * <Stepper.NextButton
+     *   nextLabel="Continue"
+     *   completeLabel="Finish"
+     * />
+     *
+     * @example
+     * <Stepper.NextButton
+     *   onClick={async (e) => {
+     *     const isValid = await validateForm();
+     *     return isValid;
+     *   }}
+     *   appearance="primary"
+     * />
+     */
+    NextButton: StepperNextButton,
+    /**
+     * Previous button component for navigating to the previous step in the Stepper.
+     *
+     * Features:
+     * - Navigates to the previous step when available
+     * - Hides when on the first step
+     * - Restores navigation when returning from completion
+     * - Accessible with proper button semantics
+     * - Customizable label and styling
+     * - Integration with stepper context
+     * - Automatic focus management
+     * - Support for completion state handling
+     *
+     * @example
+     * <Stepper.PrevButton label="Go Back" />
+     *
+     * @example
+     * <Stepper.PrevButton
+     *   label="Previous Step"
+     *   appearance="secondary"
+     *   onClick={(e) => console.log('Going back')}
+     * />
+     */
+    PrevButton: StepperPrevButton,
+    /**
+     * Final panel component displayed when all stepper steps are completed.
+     *
+     * Features:
+     * - Displays only when all steps are completed
+     * - Smooth fade-in animation on completion
+     * - Automatic overflow handling with scroll support
+     * - Accessible with proper ARIA roles
+     * - Layout utilities for positioning and spacing
+     * - Motion animations for smooth transitions
+     * - Focus management for keyboard navigation
+     * - Responsive design with flexible layout
+     * - Context-based visibility control
+     *
+     * @example
+     * <Stepper.FinalPanel>
+     *   <h2>Congratulations!</h2>
+     *   <p>You have successfully completed all steps.</p>
+     *   <Button onClick={handleSubmit}>Submit</Button>
+     * </Stepper.FinalPanel>
+     */
+    FinalPanel: StepperFinalPanel
   }
 );
-StepperElement.displayName = "Stepper";
-const Stepper = Object.assign(StepperElement, {
-  /**
-   * Individual step component for the Stepper.
-   *
-   * Features:
-   * - Visual progress indicator with animated bar
-   * - Check icon for completed steps
-   * - Keyboard navigation support
-   * - Accessible with proper ARIA attributes
-   * - Click handling for step navigation
-   * - Visual states for current, completed, and future steps
-   * - Responsive design with mobile-friendly layout
-   * - Focus management for keyboard users
-   * - Custom styling support
-   *
-   * @example
-   * <Stepper.Step controls="step1">
-   *   Personal Information
-   * </Stepper.Step>
-   *
-   * @example
-   * <Stepper.Step
-   *   controls="step2"
-   *   onClick={(e, index) => console.log(`Clicked step ${index}`)}
-   * >
-   *   Contact Details
-   * </Stepper.Step>
-   */
-  Step: StepperStep,
-  /**
-   * Container component for organizing and displaying stepper steps.
-   *
-   * Features:
-   * - Groups multiple stepper steps together
-   * - Displays current step label
-   * - Responsive design with mobile-friendly layout
-   * - Accessible with proper ARIA roles
-   * - Automatic step organization
-   * - Visual step indicators
-   * - Context-based current step display
-   * - Flexible layout with CSS Grid/Flexbox
-   * - Container queries for responsive behavior
-   *
-   * @example
-   * <Stepper.List>
-   *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
-   *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
-   *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
-   * </Stepper.List>
-   */
-  List: StepperList,
-  /**
-   * Content panel component for displaying step content in the Stepper.
-   *
-   * Features:
-   * - Displays content for the current step only
-   * - Smooth fade-in/fade-out animations
-   * - Automatic overflow handling with scroll support
-   * - Accessible with proper ARIA roles
-   * - Layout utilities for positioning and spacing
-   * - Motion animations for smooth transitions
-   * - Focus management for keyboard navigation
-   * - Responsive design with flexible layout
-   * - Context-based visibility control
-   *
-   * @example
-   * <Stepper.Panel id="step1">
-   *   <h2>Personal Information</h2>
-   *   <form>
-   *     <label htmlFor="name">Name:</label>
-   *     <input id="name" type="text" />
-   *   </form>
-   * </Stepper.Panel>
-   */
-  Panel: StepperPanel,
-  /**
-   * Next button component for navigating to the next step in the Stepper.
-   *
-   * Features:
-   * - Automatically advances to the next step
-   * - Changes label to "Complete" on the final step
-   * - Supports async validation with Promise return
-   * - Prevents navigation when validation fails
-   * - Hides when all steps are completed
-   * - Accessible with proper button semantics
-   * - Customizable appearance and styling
-   * - Integration with stepper context
-   * - Automatic completion handling
-   *
-   * @example
-   * <Stepper.NextButton
-   *   nextLabel="Continue"
-   *   completeLabel="Finish"
-   * />
-   *
-   * @example
-   * <Stepper.NextButton
-   *   onClick={async (e) => {
-   *     const isValid = await validateForm();
-   *     return isValid;
-   *   }}
-   *   appearance="primary"
-   * />
-   */
-  NextButton: StepperNextButton,
-  /**
-   * Previous button component for navigating to the previous step in the Stepper.
-   *
-   * Features:
-   * - Navigates to the previous step when available
-   * - Hides when on the first step
-   * - Restores navigation when returning from completion
-   * - Accessible with proper button semantics
-   * - Customizable label and styling
-   * - Integration with stepper context
-   * - Automatic focus management
-   * - Support for completion state handling
-   *
-   * @example
-   * <Stepper.PrevButton label="Go Back" />
-   *
-   * @example
-   * <Stepper.PrevButton
-   *   label="Previous Step"
-   *   appearance="secondary"
-   *   onClick={(e) => console.log('Going back')}
-   * />
-   */
-  PrevButton: StepperPrevButton,
-  /**
-   * Final panel component displayed when all stepper steps are completed.
-   *
-   * Features:
-   * - Displays only when all steps are completed
-   * - Smooth fade-in animation on completion
-   * - Automatic overflow handling with scroll support
-   * - Accessible with proper ARIA roles
-   * - Layout utilities for positioning and spacing
-   * - Motion animations for smooth transitions
-   * - Focus management for keyboard navigation
-   * - Responsive design with flexible layout
-   * - Context-based visibility control
-   *
-   * @example
-   * <Stepper.FinalPanel>
-   *   <h2>Congratulations!</h2>
-   *   <p>You have successfully completed all steps.</p>
-   *   <Button onClick={handleSubmit}>Submit</Button>
-   * </Stepper.FinalPanel>
-   */
-  FinalPanel: StepperFinalPanel
-});
+Stepper.displayName = "Stepper";
 
 export { Stepper as S };
-//# sourceMappingURL=Stepper-Dt8_ImvJ.js.map
+//# sourceMappingURL=Stepper-_27Lmm2K.js.map