@elliemae/ds-circular-progress-indicator 3.80.0-next.56 → 3.80.0-next.58

package/dist/esm/typescript-testing/typescript-circular-indeterminate-indicator-valid.js

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSCircularIndeterminateIndicator } from "../index.js";
+const testRequiredProps = {};
+const testOptionalProps = {
+  dsCircularindeterminateindicatorRoot: { "data-testid": "custom-root" },
+  dsCircularindeterminateindicatorLabel: () => ({ "aria-hidden": true })
+};
+const testPartialDefaults = {
+  text: "Loading...",
+  size: "l"
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  size: "m",
+  color: "dark",
+  text: "",
+  showText: true,
+  withTooltip: false,
+  inline: false,
+  tooltipStartPlacementPreference: "bottom"
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  size: "xs",
+  color: "light",
+  text: "Loading documents...",
+  showText: false,
+  withTooltip: true,
+  inline: true,
+  tooltipStartPlacementPreference: "top",
+  id: "documents-loader",
+  "aria-label": "Loading documents",
+  mt: "xs"
+};
+const testInferedTypeCompatibility = {
+  size: "xl",
+  color: "dark",
+  text: "Loading...",
+  withTooltip: false
+};
+const testDefinitionAsConst = {
+  size: "s",
+  color: "light",
+  text: "Loading...",
+  inline: true
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(
+    DSCircularIndeterminateIndicator,
+    {
+      size: "xxl",
+      color: "dark",
+      text: "Loading...",
+      showText: true,
+      withTooltip: false,
+      inline: false,
+      tooltipStartPlacementPreference: "bottom",
+      dsCircularindeterminateindicatorSvg: { "data-custom": "svg" },
+      dsCircularindeterminateindicatorPath: () => ({ "data-custom": "path" })
+    }
+  )
+] });
+//# sourceMappingURL=typescript-circular-indeterminate-indicator-valid.js.map

package/dist/esm/typescript-testing/typescript-circular-indeterminate-indicator-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-circular-indeterminate-indicator-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSCircularIndeterminateIndicator } from '../index.js';\nimport type { DSCircularIndeterminateIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSCircularIndeterminateIndicatorT.Props;\ntype ComponentPropsInternals = DSCircularIndeterminateIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSCircularIndeterminateIndicatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSCircularIndeterminateIndicatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSCircularIndeterminateIndicatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  dsCircularindeterminateindicatorRoot: { 'data-testid': 'custom-root' },\n  dsCircularindeterminateindicatorLabel: () => ({ 'aria-hidden': true }),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  text: 'Loading...',\n  size: 'l',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  inline: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'xs',\n  color: 'light',\n  text: 'Loading documents...',\n  showText: false,\n  withTooltip: true,\n  inline: true,\n  tooltipStartPlacementPreference: 'top',\n  id: 'documents-loader',\n  'aria-label': 'Loading documents',\n  mt: 'xs',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  size: 'xl',\n  color: 'dark',\n  text: 'Loading...',\n  withTooltip: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 's',\n  color: 'light',\n  text: 'Loading...',\n  inline: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSCircularIndeterminateIndicator {...testExplicitDefinition} />\n    <DSCircularIndeterminateIndicator {...testInferedTypeCompatibility} />\n    <DSCircularIndeterminateIndicator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSCircularIndeterminateIndicator\n      size=\"xxl\"\n      color=\"dark\"\n      text=\"Loading...\"\n      showText\n      withTooltip={false}\n      inline={false}\n      tooltipStartPlacementPreference=\"bottom\"\n      dsCircularindeterminateindicatorSvg={{ 'data-custom': 'svg' }}\n      dsCircularindeterminateindicatorPath={() => ({ 'data-custom': 'path' })}\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2FrB,mBAEE,KAFF;AAzFF,SAAS,wCAAwC;AAUjD,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD;AAAA,EACrD,sCAAsC,EAAE,eAAe,cAAc;AAAA,EACrE,uCAAuC,OAAO,EAAE,eAAe,KAAK;AACtE;AAIA,MAAM,sBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AAAA,EACjC,IAAI;AAAA,EACJ,cAAc;AAAA,EACd,IAAI;AACN;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,aAAa;AACf;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AACV;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,oCAAkC,GAAG,wBAAwB;AAAA,EAC9D,oBAAC,oCAAkC,GAAG,8BAA8B;AAAA,EACpE,oBAAC,oCAAkC,GAAG,uBAAuB;AAAA,EAE7D;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,MAAK;AAAA,MACL,UAAQ;AAAA,MACR,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,iCAAgC;AAAA,MAChC,qCAAqC,EAAE,eAAe,MAAM;AAAA,MAC5D,sCAAsC,OAAO,EAAE,eAAe,OAAO;AAAA;AAAA,EACvE;AAAA,GACF;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-circular-progress-indicator-valid.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSCircularProgressIndicator } from "../index.js";
+const testRequiredProps = {};
+const testOptionalProps = {};
+const testPartialDefaults = {
+  loading: true,
+  showLabel: true
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  size: "m",
+  showLabel: false,
+  showTooltip: false,
+  waiting: false,
+  loading: false
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  size: "xxxl",
+  showLabel: true,
+  showTooltip: true,
+  waiting: false,
+  loading: true
+};
+const testUppercaseSize = { size: "XL", loading: true };
+const testInferedTypeCompatibility = {
+  size: "xs",
+  waiting: true
+};
+const testDefinitionAsConst = {
+  size: "s",
+  loading: true
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, {}),
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, { ...testUppercaseSize }),
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSCircularProgressIndicator, { size: "l", loading: true, showLabel: true, showTooltip: false, waiting: false })
+] });
+//# sourceMappingURL=typescript-circular-progress-indicator-valid.js.map

package/dist/esm/typescript-testing/typescript-circular-progress-indicator-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-circular-progress-indicator-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSCircularProgressIndicator } from '../index.js';\nimport type { DSCircularProgressIndicatorT } from '../index.js';\n\n// Legacy component, deprecated in favour of DSCircularIndeterminateIndicator: it only reads these five props.\ntype ComponentPropsForApp = DSCircularProgressIndicatorT.Props;\ntype ComponentPropsInternals = DSCircularProgressIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSCircularProgressIndicatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSCircularProgressIndicatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSCircularProgressIndicatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  loading: true,\n  showLabel: true,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'xxxl',\n  showLabel: true,\n  showTooltip: true,\n  waiting: false,\n  loading: true,\n};\n\n// the size has always been matched case-insensitively\nconst testUppercaseSize: ComponentPropsForApp = { size: 'XL', loading: true };\n\nconst testInferedTypeCompatibility = {\n  size: 'xs',\n  waiting: true,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 's',\n  loading: true,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    <DSCircularProgressIndicator />\n    <DSCircularProgressIndicator {...testExplicitDefinition} />\n    <DSCircularProgressIndicator {...testUppercaseSize} />\n    <DSCircularProgressIndicator {...testInferedTypeCompatibility} />\n    <DSCircularProgressIndicator {...testDefinitionAsConst} />\n    <DSCircularProgressIndicator size=\"l\" loading showLabel showTooltip={false} waiting={false} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+DrB,mBACE,KADF;AA7DF,SAAS,mCAAmC;AAU5C,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD,CAAC;AAExD,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAGA,MAAM,oBAA0C,EAAE,MAAM,MAAM,SAAS,KAAK;AAE5E,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,wBAAwB,MAC5B,iCACE;AAAA,sBAAC,+BAA4B;AAAA,EAC7B,oBAAC,+BAA6B,GAAG,wBAAwB;AAAA,EACzD,oBAAC,+BAA6B,GAAG,mBAAmB;AAAA,EACpD,oBAAC,+BAA6B,GAAG,8BAA8B;AAAA,EAC/D,oBAAC,+BAA6B,GAAG,uBAAuB;AAAA,EACxD,oBAAC,+BAA4B,MAAK,KAAI,SAAO,MAAC,WAAS,MAAC,aAAa,OAAO,SAAS,OAAO;AAAA,GAC9F;",
+  "names": []
+}

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
+import { DSTypography } from "@elliemae/ds-typography";
 import {
   describe,
   useGetGlobalAttributes,
@@ -9,14 +10,15 @@ import {
   useGetXstyledProps
 } from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
-import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types.js";
+import { CircularIndeterminateIndicatorPropTypesSchema, defaultProps } from "./react-desc-prop-types.js";
 import {
   colorToHex,
   sizeToPx,
   sizeToTextSize,
   sizeToWeight,
-  DSCircularIndeterminateIndicatorName
-} from "./constants.js";
+  DSCircularIndeterminateIndicatorName,
+  CIRCULAR_INDETERMINATE_INDICATOR_DATA_TESTID
+} from "../constants/index.js";
 import { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from "./styled.js";
 const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
 EmptyComp.displayName = "EmptyComp";
@@ -41,7 +43,7 @@ const DSCircularIndeterminateIndicator = (props) => {
       justifyContent: "center",
       role: "status",
       "aria-label": text || "Loading...",
-      "data-testid": "ds-circular-indeterminate-indicator-root",
+      "data-testid": CIRCULAR_INDETERMINATE_INDICATOR_DATA_TESTID.ROOT,
       ...globalAttributes,
       ...xstyledAttributes,
       getOwnerProps,
@@ -57,7 +59,17 @@ const DSCircularIndeterminateIndicator = (props) => {
             "aria-hidden": "true",
             children: [
               /* @__PURE__ */ jsxs("defs", { children: [
-                /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
+                /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(
+                  StyledRect,
+                  {
+                    x: "0%",
+                    y: "0%",
+                    width: "52%",
+                    height: "100%",
+                    getOwnerProps,
+                    getOwnerPropsArguments
+                  }
+                ) }),
                 /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
                   /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
                   /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${colorToHex[color]}FF` })
@@ -72,7 +84,9 @@ const DSCircularIndeterminateIndicator = (props) => {
                   strokeWidth: sizeToWeight[size],
                   stroke: colorToHex[color],
                   strokeLinecap: "round",
-                  clipPath: `url(#not-gradient-clip-${uniqueId})`
+                  clipPath: `url(#not-gradient-clip-${uniqueId})`,
+                  getOwnerProps,
+                  getOwnerPropsArguments
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -85,7 +99,9 @@ const DSCircularIndeterminateIndicator = (props) => {
                   fill: "transparent",
                   stroke: `url(#gradient-color-${uniqueId})`,
                   strokeLinecap: "round",
-                  r: circleRadius
+                  r: circleRadius,
+                  getOwnerProps,
+                  getOwnerPropsArguments
                 }
               )
             ]
@@ -97,7 +113,7 @@ const DSCircularIndeterminateIndicator = (props) => {
             style: { color: color === "light" ? "#FFFFFF" : "#353C46", fontSize: sizeToTextSize[size] },
             getOwnerProps,
             getOwnerPropsArguments,
-            children: text
+            children: /* @__PURE__ */ jsx(DSTypography, { component: "span", variant: "b2", children: text })
           }
         )
       ] })
@@ -106,7 +122,7 @@ const DSCircularIndeterminateIndicator = (props) => {
 };
 DSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;
 const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
-DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypesSchema;
 export {
   DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema

package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n  colorToHex,\n  sizeToPx,\n  sizeToTextSize,\n  sizeToWeight,\n  DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\nEmptyComp.displayName = 'EmptyComp';\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = useGetGlobalAttributes<\n    DSCircularIndeterminateIndicatorT.InternalProps,\n    HTMLDivElement,\n    DSGridT.Props\n  >(propsWithDefault);\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, inline, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledContainer\n      inline={inline}\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      data-testid=\"ds-circular-indeterminate-indicator-root\"\n      {...globalAttributes}\n      {...xstyledAttributes}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg\n          width={sizeToPx[size]}\n          height={sizeToPx[size]}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect x=\"0%\" y=\"0%\" width=\"52%\" height=\"100%\" />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <StyledLabel\n            style={{ color: color === 'light' ? '#FFFFFF' : '#353C46', fontSize: sizeToTextSize[size] }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            {text}\n          </StyledLabel>\n        )}\n      </Wrapper>\n    </StyledContainer>\n  );\n};\n\nDSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSGridT } from '@elliemae/ds-grid';\n\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport {\n  colorToHex,\n  sizeToPx,\n  sizeToTextSize,\n  sizeToWeight,\n  DSCircularIndeterminateIndicatorName,\n  CIRCULAR_INDETERMINATE_INDICATOR_DATA_TESTID,\n} from '../constants/index.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\nEmptyComp.displayName = 'EmptyComp';\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = (\n  props,\n) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSCircularIndeterminateIndicatorT.InternalProps>(\n    props,\n    defaultProps,\n  );\n  const globalAttributes = useGetGlobalAttributes<\n    DSCircularIndeterminateIndicatorT.InternalProps,\n    HTMLDivElement,\n    DSGridT.Props\n  >(propsWithDefault);\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, inline, tooltipStartPlacementPreference } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(() => (withTooltip ? DSTooltipV3 : EmptyComp), [withTooltip]);\n\n  const uniqueId = useMemo(() => uid(16), []);\n\n  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledContainer\n      inline={inline}\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={CIRCULAR_INDETERMINATE_INDICATOR_DATA_TESTID.ROOT}\n      {...globalAttributes}\n      {...xstyledAttributes}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg\n          width={sizeToPx[size]}\n          height={sizeToPx[size]}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <clipPath id={`not-gradient-clip-${uniqueId}`}>\n              <StyledRect\n                x=\"0%\"\n                y=\"0%\"\n                width=\"52%\"\n                height=\"100%\"\n                getOwnerProps={getOwnerProps}\n                getOwnerPropsArguments={getOwnerPropsArguments}\n              />\n            </clipPath>\n            <linearGradient id={`gradient-color-${uniqueId}`} x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${colorToHex[color]}00`} />\n              <stop offset=\"90%\" stopColor={`${colorToHex[color]}FF`} />\n            </linearGradient>\n          </defs>\n          <StyledCircle\n            cx=\"50%\"\n            cy=\"50%\"\n            r={circleRadius}\n            strokeWidth={sizeToWeight[size]}\n            stroke={colorToHex[color]}\n            strokeLinecap=\"round\"\n            clipPath={`url(#not-gradient-clip-${uniqueId})`}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n          {/* \n            Here we are using a path because:\n            - Flexible enough to build a circle\n            - When rotating, the gradient follows the rotation!!! (This is key)\n            - We can use the rotation with keyframes, allowing for custom timing\n            \n            Using a circle does not pass point 2.\n            Animating the gradient is not posible with custom timings.\n            This is the best solution without using a custom library.\n          */}\n          <StyledPath\n            d={`M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}\n                m ${circleRadius}, 0\n                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`}\n            strokeWidth={sizeToWeight[size]}\n            fill=\"transparent\"\n            stroke={`url(#gradient-color-${uniqueId})`}\n            strokeLinecap=\"round\"\n            r={circleRadius}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        </StyledSvg>\n        {text !== '' && showText && (\n          <StyledLabel\n            style={{ color: color === 'light' ? '#FFFFFF' : '#353C46', fontSize: sizeToTextSize[size] }}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          >\n            <DSTypography component=\"span\" variant=\"b2\">\n              {text}\n            </DSTypography>\n          </StyledLabel>\n        )}\n      </Wrapper>\n    </StyledContainer>\n  );\n};\n\nDSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypesSchema;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/v2/index.js

@@ -3,7 +3,6 @@ import {
   DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema
 } from "./DSCircularIndeterminateIndicator.js";
-export * from "./constants.js";
 export {
   DSCircularIndeterminateIndicator,
   DSCircularIndeterminateIndicatorWithSchema

package/dist/esm/v2/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport * from './constants.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport { type DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/esm/v2/react-desc-prop-types.js

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS } from "../constants/index.js";
 const defaultProps = {
   size: "m",
   color: "dark",
@@ -10,7 +16,9 @@ const defaultProps = {
   tooltipStartPlacementPreference: "bottom"
 };
 const CircularIndeterminateIndicatorPropTypes = {
+  ...getPropsPerSlotPropTypes(DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS),
   ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
   color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
   text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
@@ -30,10 +38,12 @@ const CircularIndeterminateIndicatorPropTypes = {
     "left-end",
     "left",
     "left-start"
-  ]).description("start placement preference for the tooltip").defaultValue("center")
+  ]).description("start placement preference for the tooltip").defaultValue("bottom")
 };
+const CircularIndeterminateIndicatorPropTypesSchema = CircularIndeterminateIndicatorPropTypes;
 export {
   CircularIndeterminateIndicatorPropTypes,
+  CircularIndeterminateIndicatorPropTypesSchema,
   defaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/v2/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  inline: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    inline: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  inline: PropTypes.bool.description('Whether to show the indicator inline or not').defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as ValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;AAG9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AACnC;AAkCO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-tooltip-v3';\nimport { DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS } from '../constants/index.js';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n  type SupportedColors = 'light' | 'dark';\n\n  export type SlotFunctionArguments = {\n    dsCircularindeterminateindicatorRoot: () => object;\n    dsCircularindeterminateindicatorSvg: () => object;\n    dsCircularindeterminateindicatorLabel: () => object;\n    dsCircularindeterminateindicatorCircle: () => object;\n    dsCircularindeterminateindicatorPath: () => object;\n    dsCircularindeterminateindicatorRect: () => object;\n  };\n\n  export interface DefaultProps {\n    size: TShirtSizes;\n    color: SupportedColors;\n    text: string;\n    showText: boolean;\n    withTooltip: boolean;\n    inline: boolean;\n    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSCircularIndeterminateIndicatorName,\n    typeof CIRCULAR_INDETERMINATE_INDICATOR_SLOTS\n  > {}\n\n  export interface RequiredProps {}\n\n  // `HTMLButtonElement` predates this remediation (the root is a div): narrowing it would change the event handler\n  // types consumers already compile against, so it stays \u2014 see KNOWN_INTENTIONAL_DEVIATIONS.md\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  inline: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport const CircularIndeterminateIndicatorPropTypes: DSPropTypesSchema<DSCircularIndeterminateIndicatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  inline: PropTypes.bool.description('Whether to show the indicator inline or not').defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('bottom'),\n};\n\nexport const CircularIndeterminateIndicatorPropTypesSchema =\n  CircularIndeterminateIndicatorPropTypes as unknown as ValidationMap<DSCircularIndeterminateIndicatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,sCAAsC,8CAA8C;AAmDtF,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iCAAiC;AACnC;AAEO,MAAM,0CAAsG;AAAA,EACjH,GAAG,yBAAyB,sCAAsC,sCAAsC;AAAA,EACxG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,gDACX;",
   "names": []
 }

package/dist/esm/v2/styled.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { kfrm, styled } from "@elliemae/ds-system";
-import { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from "./constants.js";
+import { css, kfrm, styled } from "@elliemae/ds-system";
+import { DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS } from "../constants/index.js";
 const { PI } = Math;
 const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
 const svgRotateAnimation = kfrm`
@@ -88,13 +88,13 @@ const dashAnimation = (r) => {
 };
 const StyledContainer = styled(Grid, {
   name: DSCircularIndeterminateIndicatorName,
-  slot: DSCircularIndeterminateIndicatorSlots.ROOT
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.ROOT
 })`
   ${({ inline, theme }) => !inline ? `z-index: ${theme.zIndex.loader}` : ``}
 `;
 const StyledSvg = styled("svg", {
   name: DSCircularIndeterminateIndicatorName,
-  slot: DSCircularIndeterminateIndicatorSlots.SVG
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.SVG
 })`
   display: block;
   margin: auto;
@@ -102,27 +102,49 @@ const StyledSvg = styled("svg", {
   transform: rotate(-90deg);
   animation: ${svgRotateAnimation} 2.5s linear infinite;
 `;
-const StyledPath = styled.path`
+const StyledPath = styled("path", {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.PATH
+})`
   transform-origin: center center;
   animation:
     ${rotateAnimation} 10s linear infinite,
     ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;
 `;
-const StyledRect = styled.rect`
+const StyledRect = styled("rect", {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.RECT
+})`
   transform-origin: center center;
   animation: ${rotateAnimation} 10s linear infinite;
 `;
-const StyledCircle = styled.circle`
+const StyledCircle = styled("circle", {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.CIRCLE
+})`
   stroke-dashoffset: 0;
   fill: none;
   animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;
   clip-path: ${(props) => props.clipPath};
   -webkit-clip-path: ${(props) => props.clipPath};
 `;
+const inheritedTypography = css`
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  white-space: inherit;
+  overflow-wrap: inherit;
+  margin: 0;
+  padding: 0;
+`;
 const StyledLabel = styled("span", {
   name: DSCircularIndeterminateIndicatorName,
-  slot: DSCircularIndeterminateIndicatorSlots.LABEL
-})``;
+  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.LABEL
+})`
+  && > * {
+    ${inheritedTypography}
+  }
+`;
 export {
   StyledCircle,
   StyledContainer,

package/dist/esm/v2/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { kfrm, styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from './constants.js';\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n    0% {\n        transform: rotate(0);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledContainer = styled(Grid, {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: DSCircularIndeterminateIndicatorSlots.ROOT,\n})<{ inline: boolean }>`\n  ${({ inline, theme }) => (!inline ? `z-index: ${theme.zIndex.loader}` : ``)}\n`;\n\nexport const StyledSvg = styled('svg', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: DSCircularIndeterminateIndicatorSlots.SVG,\n})`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n  animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n  transform-origin: center center;\n  animation:\n    ${rotateAnimation} 10s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n  transform-origin: center center;\n  animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: DSCircularIndeterminateIndicatorSlots.LABEL,\n})``;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;AAC7B,SAAS,sCAAsC,6CAA6C;AAC5F,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAAA,4BAGR,QAAQ;AAAA;AAAA;AAGpC;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,MAAM,gBAAgB,CAAC,MAAc;AACnC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC;AAC9D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,CAAC,IAAI,aAAa,IAAI,CAAC,CAAC;AAE9D,SAAO;AAAA;AAAA,4BAEmB,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIR,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGrB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,4BAGtB,QAAQ;AAAA,6BACP,aAAa,MAAM,CAAC,CAAC;AAAA;AAAA;AAGlD;AAEO,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAO,CAAC,SAAS,YAAY,MAAM,OAAO,MAAM,KAAK,EAAG;AAAA;AAGtE,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,kBAAkB;AAAA;AAG1B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA,MAG3B,eAAe;AAAA,MACf,CAAC,UAAU,oBAAoB,MAAM,CAAC,CAAC;AAAA;AAGtC,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB,eAAe;AAAA;AAGvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC,CAAC;AAAA,eACjC,CAAC,UAAU,MAAM,QAAQ;AAAA,uBACjB,CAAC,UAAU,MAAM,QAAQ;AAAA;AAGzC,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, kfrm, styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicatorName, CIRCULAR_INDETERMINATE_INDICATOR_SLOTS } from '../constants/index.js';\nconst { PI } = Math;\n\nconst getArcLength = (percentage: number, radius: number) => ((2 * PI * radius) / 100) * percentage;\n\nconst svgRotateAnimation = kfrm`\n    0% {\n        transform: rotate(0);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n`;\n\nconst strokeTailAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n    }\n    50% {\n        stroke-dasharray: ${fullDash};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n    }\n`;\n};\n\nconst rotateAnimation = kfrm`\n    0%, 12.5% {\n        transform: rotate(0);\n    }\n    25%, 37.5% {\n        transform: rotate(270deg);\n    }\n    50%, 62.5% {\n        transform: rotate(540deg);\n    }\n    75%, 87.5% {\n        transform: rotate(810deg);\n    }\n    100% {\n        transform: rotate(1080deg);\n    }\n`;\n\nconst dashAnimation = (r: number) => {\n  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;\n  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;\n\n  return kfrm`\n    0% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: 0;\n    }\n    12.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: 0;\n    }\n    25% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    37.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-75, r)};\n    }\n    50% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    62.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-150, r)};\n    }\n    75% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    87.5% {\n        stroke-dasharray: ${fullDash};\n        stroke-dashoffset: ${getArcLength(-225, r)};\n    }\n    100% {\n        stroke-dasharray: ${miniDash};\n        stroke-dashoffset: ${getArcLength(-300, r)};\n    }\n`;\n};\n\nexport const StyledContainer = styled(Grid, {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.ROOT,\n})<{ inline: boolean }>`\n  ${({ inline, theme }) => (!inline ? `z-index: ${theme.zIndex.loader}` : ``)}\n`;\n\nexport const StyledSvg = styled('svg', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.SVG,\n})`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n  animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled('path', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.PATH,\n})<{ r: number }>`\n  transform-origin: center center;\n  animation:\n    ${rotateAnimation} 10s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled('rect', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.RECT,\n})`\n  transform-origin: center center;\n  animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled('circle', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.CIRCLE,\n})<{ r: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n\n// ============================================================================================================\n// Typography (PUI-18946)\n// ============================================================================================================\n// The label text renders through DSTypography, nested inside the LABEL slot rather than being the slot: making\n// DSTypography the slot would let the nested-slot mechanism rewrite `data-dimsum-slot` to `dsTypographyRoot` and\n// demote ours to `data-dimsum-parent-slot`.\n//\n// No visual change: the label takes its font family, weight and style from where the indicator is placed, and its\n// size and color from the inline style the component sets on the slot. DSTypography's own metrics (the variant's\n// size, line-height, font-family, `white-space: pre-wrap`) would change that, so the child inherits everything from\n// the slot. `&& > *` gives 0-2-0, which beats DSTypography's single class whatever the injection order, and it targets\n// the child only, so the theme's `styleOverrides` for the slot (0-1-0) still reach the text.\n//\n// Deliberately neutral: adopting the variant's metrics is a UX decision, not a side effect of this change.\nconst inheritedTypography = css`\n  font: inherit;\n  line-height: inherit;\n  color: inherit;\n  white-space: inherit;\n  overflow-wrap: inherit;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.LABEL,\n})`\n  && > * {\n    ${inheritedTypography}\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/DSCircularProgressIndicator.d.ts

@@ -1,26 +1,6 @@
-declare const CircularProgressIndicator: {
-    ({ size, showLabel, showTooltip, waiting, loading }: {
-        size: any;
-        showLabel: any;
-        showTooltip: any;
-        waiting: any;
-        loading: any;
-    }): import("react").JSX.Element;
-    defaultProps: {
-        size: string;
-        showLabel: boolean;
-        showTooltip: boolean;
-        waiting: boolean;
-        loading: boolean;
-    };
-    displayName: string;
-};
-declare const CircularProgressIndicatorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
-    size: any;
-    showLabel: any;
-    showTooltip: any;
-    waiting: any;
-    loading: any;
-}>;
-export { CircularProgressIndicatorWithSchema };
-export default CircularProgressIndicator;
+import React from 'react';
+import { type DSCircularProgressIndicatorT } from './react-desc-prop-types.js';
+declare const DSCircularProgressIndicator: React.ComponentType<DSCircularProgressIndicatorT.Props>;
+declare const CircularProgressIndicatorWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSCircularProgressIndicatorT.Props>;
+export { DSCircularProgressIndicator, CircularProgressIndicatorWithSchema };
+export default DSCircularProgressIndicator;