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

package/dist/cjs/typescript-testing/slot-props.js

@@ -0,0 +1,43 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+const SlotPropsAsObject = {
+  dsCircularindeterminateindicatorRoot: { "aria-label": "just a typescript test" },
+  dsCircularindeterminateindicatorSvg: { "aria-label": "just a typescript test" },
+  dsCircularindeterminateindicatorLabel: { "aria-label": "just a typescript test" },
+  dsCircularindeterminateindicatorCircle: { "aria-label": "just a typescript test" },
+  dsCircularindeterminateindicatorPath: { "aria-label": "just a typescript test" },
+  dsCircularindeterminateindicatorRect: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsCircularindeterminateindicatorRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsCircularindeterminateindicatorSvg: () => ({ "aria-label": "just a typescript test" }),
+  dsCircularindeterminateindicatorLabel: () => ({ "aria-label": "just a typescript test" }),
+  dsCircularindeterminateindicatorCircle: () => ({ "aria-label": "just a typescript test" }),
+  dsCircularindeterminateindicatorPath: () => ({ "aria-label": "just a typescript test" }),
+  dsCircularindeterminateindicatorRect: () => ({ "aria-label": "just a typescript test" })
+};
+const SlotFunctionsAreValidProps = SlotPropsAsFunctions;
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/cjs/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type {\n  DSCircularIndeterminateIndicatorName,\n  CIRCULAR_INDETERMINATE_INDICATOR_SLOTS,\n} from '../constants/index.js';\nimport type { DSCircularIndeterminateIndicatorT } from '../v2/react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSCircularIndeterminateIndicatorT.Props> = {\n  dsCircularindeterminateindicatorRoot: { 'aria-label': 'just a typescript test' },\n  dsCircularindeterminateindicatorSvg: { 'aria-label': 'just a typescript test' },\n  dsCircularindeterminateindicatorLabel: { 'aria-label': 'just a typescript test' },\n  dsCircularindeterminateindicatorCircle: { 'aria-label': 'just a typescript test' },\n  dsCircularindeterminateindicatorPath: { 'aria-label': 'just a typescript test' },\n  dsCircularindeterminateindicatorRect: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSCircularIndeterminateIndicatorT.SlotFunctionArguments = {\n  dsCircularindeterminateindicatorRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCircularindeterminateindicatorSvg: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCircularindeterminateindicatorLabel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCircularindeterminateindicatorCircle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCircularindeterminateindicatorPath: () => ({ 'aria-label': 'just a typescript test' }),\n  dsCircularindeterminateindicatorRect: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// The function form must also be accepted by the public Props, slot by slot\nconst SlotFunctionsAreValidProps: Partial<DSCircularIndeterminateIndicatorT.Props> = SlotPropsAsFunctions;\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<\n    typeof DSCircularIndeterminateIndicatorName,\n    typeof CIRCULAR_INDETERMINATE_INDICATOR_SLOTS\n  >\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACQvB,MAAM,oBAAsE;AAAA,EAC1E,sCAAsC,EAAE,cAAc,yBAAyB;AAAA,EAC/E,qCAAqC,EAAE,cAAc,yBAAyB;AAAA,EAC9E,uCAAuC,EAAE,cAAc,yBAAyB;AAAA,EAChF,wCAAwC,EAAE,cAAc,yBAAyB;AAAA,EACjF,sCAAsC,EAAE,cAAc,yBAAyB;AAAA,EAC/E,sCAAsC,EAAE,cAAc,yBAAyB;AACjF;AAEA,MAAM,uBAAgF;AAAA,EACpF,sCAAsC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACtF,qCAAqC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrF,uCAAuC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvF,wCAAwC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxF,sCAAsC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACtF,sCAAsC,OAAO,EAAE,cAAc,yBAAyB;AACxF;AAGA,MAAM,6BAA+E;AAGrF,MAAM,6CAKF;",
+  "names": []
+}

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

@@ -0,0 +1,108 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require("../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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularIndeterminateIndicator, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularIndeterminateIndicator, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularIndeterminateIndicator, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.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/cjs/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,YAAuB;AC2FrB;AAzFF,eAAiD;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,4EAEE;AAAA,8CAAC,6CAAkC,GAAG,wBAAwB;AAAA,EAC9D,4CAAC,6CAAkC,GAAG,8BAA8B;AAAA,EACpE,4CAAC,6CAAkC,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/cjs/typescript-testing/typescript-circular-progress-indicator-valid.js

@@ -0,0 +1,74 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require("../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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, { ...testUppercaseSize }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSCircularProgressIndicator, { size: "l", loading: true, showLabel: true, showTooltip: false, waiting: false })
+] });
+//# sourceMappingURL=typescript-circular-progress-indicator-valid.js.map

package/dist/cjs/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,YAAuB;AC+DrB;AA7DF,eAA4C;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,4EACE;AAAA,8CAAC,wCAA4B;AAAA,EAC7B,4CAAC,wCAA6B,GAAG,wBAAwB;AAAA,EACzD,4CAAC,wCAA6B,GAAG,mBAAmB;AAAA,EACpD,4CAAC,wCAA6B,GAAG,8BAA8B;AAAA,EAC/D,4CAAC,wCAA6B,GAAG,uBAAuB;AAAA,EACxD,4CAAC,wCAA4B,MAAK,KAAI,SAAO,MAAC,WAAS,MAAC,aAAa,OAAO,SAAS,OAAO;AAAA,GAC9F;",
+  "names": []
+}

package/dist/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -36,10 +36,11 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_uid = require("uid");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-var import_constants = require("./constants.js");
+var import_constants = require("../constants/index.js");
 var import_styled = require("./styled.js");
 const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
 EmptyComp.displayName = "EmptyComp";
@@ -64,7 +65,7 @@ const DSCircularIndeterminateIndicator = (props) => {
       justifyContent: "center",
       role: "status",
       "aria-label": text || "Loading...",
-      "data-testid": "ds-circular-indeterminate-indicator-root",
+      "data-testid": import_constants.CIRCULAR_INDETERMINATE_INDICATOR_DATA_TESTID.ROOT,
       ...globalAttributes,
       ...xstyledAttributes,
       getOwnerProps,
@@ -80,7 +81,17 @@ const DSCircularIndeterminateIndicator = (props) => {
             "aria-hidden": "true",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_styled.StyledRect,
+                  {
+                    x: "0%",
+                    y: "0%",
+                    width: "52%",
+                    height: "100%",
+                    getOwnerProps,
+                    getOwnerPropsArguments
+                  }
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${import_constants.colorToHex[color]}00` }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${import_constants.colorToHex[color]}FF` })
@@ -95,7 +106,9 @@ const DSCircularIndeterminateIndicator = (props) => {
                   strokeWidth: import_constants.sizeToWeight[size],
                   stroke: import_constants.colorToHex[color],
                   strokeLinecap: "round",
-                  clipPath: `url(#not-gradient-clip-${uniqueId})`
+                  clipPath: `url(#not-gradient-clip-${uniqueId})`,
+                  getOwnerProps,
+                  getOwnerPropsArguments
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -108,7 +121,9 @@ const DSCircularIndeterminateIndicator = (props) => {
                   fill: "transparent",
                   stroke: `url(#gradient-color-${uniqueId})`,
                   strokeLinecap: "round",
-                  r: circleRadius
+                  r: circleRadius,
+                  getOwnerProps,
+                  getOwnerPropsArguments
                 }
               )
             ]
@@ -120,7 +135,7 @@ const DSCircularIndeterminateIndicator = (props) => {
             style: { color: color === "light" ? "#FFFFFF" : "#353C46", fontSize: import_constants.sizeToTextSize[size] },
             getOwnerProps,
             getOwnerPropsArguments,
-            children: text
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { component: "span", variant: "b2", children: text })
           }
         )
       ] })
@@ -129,5 +144,5 @@ const DSCircularIndeterminateIndicator = (props) => {
 };
 DSCircularIndeterminateIndicator.displayName = import_constants.DSCircularIndeterminateIndicatorName;
 const DSCircularIndeterminateIndicatorWithSchema = (0, import_ds_props_helpers.describe)(DSCircularIndeterminateIndicator);
-DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypes;
+DSCircularIndeterminateIndicatorWithSchema.propTypes = import_react_desc_prop_types.CircularIndeterminateIndicatorPropTypesSchema;
 //# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/v2/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -35,5 +34,4 @@ __export(v2_exports, {
 module.exports = __toCommonJS(v2_exports);
 var React = __toESM(require("react"));
 var import_DSCircularIndeterminateIndicator = require("./DSCircularIndeterminateIndicator.js");
-__reExport(v2_exports, require("./constants.js"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport * from './constants.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;AACP,uBAAc,2BAJd;",
+  "sourcesContent": ["export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator.js';\nexport { type DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8CAGO;",
   "names": []
 }

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

@@ -29,11 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
   CircularIndeterminateIndicatorPropTypes: () => CircularIndeterminateIndicatorPropTypes,
+  CircularIndeterminateIndicatorPropTypesSchema: () => CircularIndeterminateIndicatorPropTypesSchema,
   defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("../constants/index.js");
 const defaultProps = {
   size: "m",
   color: "dark",
@@ -44,7 +46,9 @@ const defaultProps = {
   tooltipStartPlacementPreference: "bottom"
 };
 const CircularIndeterminateIndicatorPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSCircularIndeterminateIndicatorName, import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS),
   ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
   size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
   color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
   text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
@@ -64,6 +68,7 @@ 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;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;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,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,kCAAU,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAGP,uBAA6F;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,OAAG,kDAAyB,uDAAsC,uDAAsC;AAAA,EACxG,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACpG,iCAAiC,kCAAU,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/cjs/v2/styled.js

@@ -39,7 +39,7 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("./constants.js");
+var import_constants = require("../constants/index.js");
 const { PI } = Math;
 const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
 const svgRotateAnimation = import_ds_system.kfrm`
@@ -126,13 +126,13 @@ const dashAnimation = (r) => {
 };
 const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   name: import_constants.DSCircularIndeterminateIndicatorName,
-  slot: import_constants.DSCircularIndeterminateIndicatorSlots.ROOT
+  slot: import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.ROOT
 })`
   ${({ inline, theme }) => !inline ? `z-index: ${theme.zIndex.loader}` : ``}
 `;
 const StyledSvg = (0, import_ds_system.styled)("svg", {
   name: import_constants.DSCircularIndeterminateIndicatorName,
-  slot: import_constants.DSCircularIndeterminateIndicatorSlots.SVG
+  slot: import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.SVG
 })`
   display: block;
   margin: auto;
@@ -140,25 +140,47 @@ const StyledSvg = (0, import_ds_system.styled)("svg", {
   transform: rotate(-90deg);
   animation: ${svgRotateAnimation} 2.5s linear infinite;
 `;
-const StyledPath = import_ds_system.styled.path`
+const StyledPath = (0, import_ds_system.styled)("path", {
+  name: import_constants.DSCircularIndeterminateIndicatorName,
+  slot: import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.PATH
+})`
   transform-origin: center center;
   animation:
     ${rotateAnimation} 10s linear infinite,
     ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;
 `;
-const StyledRect = import_ds_system.styled.rect`
+const StyledRect = (0, import_ds_system.styled)("rect", {
+  name: import_constants.DSCircularIndeterminateIndicatorName,
+  slot: import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.RECT
+})`
   transform-origin: center center;
   animation: ${rotateAnimation} 10s linear infinite;
 `;
-const StyledCircle = import_ds_system.styled.circle`
+const StyledCircle = (0, import_ds_system.styled)("circle", {
+  name: import_constants.DSCircularIndeterminateIndicatorName,
+  slot: import_constants.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 = import_ds_system.css`
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  white-space: inherit;
+  overflow-wrap: inherit;
+  margin: 0;
+  padding: 0;
+`;
 const StyledLabel = (0, import_ds_system.styled)("span", {
   name: import_constants.DSCircularIndeterminateIndicatorName,
-  slot: import_constants.DSCircularIndeterminateIndicatorSlots.LABEL
-})``;
+  slot: import_constants.CIRCULAR_INDETERMINATE_INDICATOR_SLOTS.LABEL
+})`
+  && > * {
+    ${inheritedTypography}
+  }
+`;
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,qBAAqB;AACrB,uBAA6B;AAC7B,uBAA4F;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,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA,IACG,CAAC,EAAE,QAAQ,MAAM,MAAO,CAAC,SAAS,YAAY,MAAM,OAAO,MAAM,KAAK,EAAG;AAAA;AAGtE,MAAM,gBAAY,yBAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc,kBAAkB;AAAA;AAG1B,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA,MAG3B,eAAe;AAAA,MACf,CAAC,UAAU,oBAAoB,MAAM,CAAC,CAAC;AAAA;AAGtC,MAAM,aAAa,wBAAO;AAAA;AAAA,eAElB,eAAe;AAAA;AAGvB,MAAM,eAAe,wBAAO;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,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uDAAsC;AAC9C,CAAC;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }