@elliemae/ds-progress-indicator 3.80.0-next.4 → 3.80.0-next.40

package/dist/esm/ProgressBar.js

@@ -1,32 +1,84 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { ProgressBarProgress, ProgressBarStatusBar } from "./classedComponents.js";
-import { getPercentage } from "./utils.js";
-function useProgressTrait({ now = 0, min = 0, max = 0 }) {
+import { legacyBarClassName, legacyProgressClassName, StyledProgress, StyledProgressBar } from "./styled.js";
+import { clamp, getPercentage, hasValidRange } from "./utils.js";
+function useProgressTrait({
+  now = 0,
+  min = 0,
+  max = 0,
+  labelledBy,
+  label,
+  valueTextRenderer
+}) {
+  const rangeIsValid = hasValidRange(min, max);
   const percentage = getPercentage(now, min, max);
+  const valueText = valueTextRenderer?.({ now, min, max });
+  const hasTextualValue = typeof valueText === "string" || typeof valueText === "number";
   return {
     role: "progressbar",
-    "aria-valuenow": now,
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-label": "progress bar",
+    // An invalid range — `max` omitted, or 0 while data loads — is an indeterminate progress, and WAI-ARIA says an
+    // indeterminate progressbar omits aria-valuenow. AT then announces "busy" instead of the invalid "0 of 0"
+    // range this used to emit. When the range is valid, aria-valuenow is clamped so it never leaves [min, max].
+    ...rangeIsValid ? { "aria-valuenow": clamp(now, min, max), "aria-valuemin": min, "aria-valuemax": max } : {},
+    // Mirrors the visible counter so screen readers hear the same formatted value sighted users see, not just
+    // the raw number. Uses the same renderer as the counter, applied to this bar's own values — for a segment
+    // that is the segment's range, which is what its aria-valuenow describes.
+    ...rangeIsValid && hasTextualValue ? { "aria-valuetext": String(valueText) } : {},
+    // Precedence: a per-segment label wins, because it is the only thing that tells two segments apart
+    // once they share the indicator title. Then the visible title. `aria-label` is the last-resort fallback
+    // for a titleless indicator, which would otherwise have no accessible name at all.
+    ...label ? { "aria-label": label } : {},
+    ...!label && labelledBy ? { "aria-labelledby": labelledBy } : {},
+    ...!label && !labelledBy ? { "aria-label": "progress bar" } : {},
     style: {
       width: `${percentage}%`
     }
   };
 }
 const Progress = (props) => {
-  const { variant = "default" } = props;
+  const { variant = "default", getOwnerProps, getOwnerPropsArguments } = props;
   const progressTraitProps = useProgressTrait(props);
-  return /* @__PURE__ */ jsx(ProgressBarProgress, { classProps: { variant }, ...progressTraitProps });
+  return /* @__PURE__ */ jsx(
+    StyledProgress,
+    {
+      className: legacyProgressClassName(variant),
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ...progressTraitProps
+    }
+  );
 };
 const ProgressBar = ({
   variant = "default",
   now = void 0,
   min = void 0,
   max = void 0,
-  children: progressSegments
-}) => /* @__PURE__ */ jsx(ProgressBarStatusBar, { children: progressSegments || /* @__PURE__ */ jsx(Progress, { max, min, now, variant }) });
+  labelledBy = void 0,
+  valueTextRenderer = void 0,
+  children: progressSegments,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => /* @__PURE__ */ jsx(
+  StyledProgressBar,
+  {
+    className: legacyBarClassName(),
+    getOwnerProps,
+    getOwnerPropsArguments,
+    children: progressSegments || /* @__PURE__ */ jsx(
+      Progress,
+      {
+        max,
+        min,
+        now,
+        variant,
+        labelledBy,
+        valueTextRenderer,
+        getOwnerProps,
+        getOwnerPropsArguments
+      }
+    )
+  }
+);
 ProgressBar.Segment = Progress;
 var ProgressBar_default = ProgressBar;
 export {

package/dist/esm/ProgressBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ProgressBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ProgressBarProgress, ProgressBarStatusBar } from './classedComponents.js';\nimport { getPercentage } from './utils.js';\n\nfunction useProgressTrait({ now = 0, min = 0, max = 0 }: { now?: number; min?: number; max?: number }) {\n  const percentage = getPercentage(now, min, max);\n  return {\n    role: 'progressbar',\n    'aria-valuenow': now,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-label': 'progress bar',\n    style: {\n      width: `${percentage}%`,\n    },\n  };\n}\n\nconst Progress = (props: { variant: string; now?: number; min?: number; max?: number }) => {\n  const { variant = 'default' } = props;\n\n  const progressTraitProps = useProgressTrait(props);\n\n  return <ProgressBarProgress classProps={{ variant }} {...progressTraitProps} />;\n};\n\nconst ProgressBar = ({\n  variant = 'default',\n  now = undefined,\n  min = undefined,\n  max = undefined,\n  children: progressSegments,\n}: {\n  variant?: string;\n  now?: number;\n  min?: number;\n  max?: number;\n  children?: React.ReactNode;\n}) => (\n  <ProgressBarStatusBar>\n    {progressSegments || <Progress max={max} min={min} now={now} variant={variant} />}\n  </ProgressBarStatusBar>\n);\n\nProgressBar.Segment = Progress;\n\nexport default ProgressBar;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBd;AAtBT,SAAS,qBAAqB,4BAA4B;AAC1D,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAiD;AACrG,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,OAAO,GAAG,UAAU;AAAA,IACtB;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,UAAyE;AACzF,QAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,QAAM,qBAAqB,iBAAiB,KAAK;AAEjD,SAAO,oBAAC,uBAAoB,YAAY,EAAE,QAAQ,GAAI,GAAG,oBAAoB;AAC/E;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AACZ,MAOE,oBAAC,wBACE,8BAAoB,oBAAC,YAAS,KAAU,KAAU,KAAU,SAAkB,GACjF;AAGF,YAAY,UAAU;AAEtB,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { legacyBarClassName, legacyProgressClassName, StyledProgress, StyledProgressBar } from './styled.js';\nimport { clamp, getPercentage, hasValidRange } from './utils.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\ntype OwnerPropsPassthrough = {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n};\n\nfunction useProgressTrait({\n  now = 0,\n  min = 0,\n  max = 0,\n  labelledBy,\n  label,\n  valueTextRenderer,\n}: {\n  now?: number;\n  min?: number;\n  max?: number;\n  labelledBy?: string;\n  label?: string;\n  valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n}) {\n  const rangeIsValid = hasValidRange(min, max);\n  const percentage = getPercentage(now, min, max);\n  // Only text is a valid aria-valuetext. The renderer type says string, but a JS consumer can return JSX for\n  // a styled counter \u2014 React would then set the attribute to \"[object Object]\", which is worse than omitting\n  // it and letting AT fall back to the numeric range, exactly as it did before aria-valuetext existed.\n  const valueText = valueTextRenderer?.({ now, min, max }) as unknown;\n  const hasTextualValue = typeof valueText === 'string' || typeof valueText === 'number';\n  return {\n    role: 'progressbar',\n    // An invalid range \u2014 `max` omitted, or 0 while data loads \u2014 is an indeterminate progress, and WAI-ARIA says an\n    // indeterminate progressbar omits aria-valuenow. AT then announces \"busy\" instead of the invalid \"0 of 0\"\n    // range this used to emit. When the range is valid, aria-valuenow is clamped so it never leaves [min, max].\n    ...(rangeIsValid ? { 'aria-valuenow': clamp(now, min, max), 'aria-valuemin': min, 'aria-valuemax': max } : {}),\n    // Mirrors the visible counter so screen readers hear the same formatted value sighted users see, not just\n    // the raw number. Uses the same renderer as the counter, applied to this bar's own values \u2014 for a segment\n    // that is the segment's range, which is what its aria-valuenow describes.\n    ...(rangeIsValid && hasTextualValue ? { 'aria-valuetext': String(valueText) } : {}),\n    // Precedence: a per-segment label wins, because it is the only thing that tells two segments apart\n    // once they share the indicator title. Then the visible title. `aria-label` is the last-resort fallback\n    // for a titleless indicator, which would otherwise have no accessible name at all.\n    ...(label ? { 'aria-label': label } : {}),\n    ...(!label && labelledBy ? { 'aria-labelledby': labelledBy } : {}),\n    ...(!label && !labelledBy ? { 'aria-label': 'progress bar' } : {}),\n    style: {\n      width: `${percentage}%`,\n    },\n  };\n}\n\nconst Progress = (\n  props: {\n    variant: string;\n    now?: number;\n    min?: number;\n    max?: number;\n    labelledBy?: string;\n    label?: string;\n    valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n  } & OwnerPropsPassthrough,\n) => {\n  const { variant = 'default', getOwnerProps, getOwnerPropsArguments } = props;\n\n  const progressTraitProps = useProgressTrait(props);\n\n  return (\n    <StyledProgress\n      className={legacyProgressClassName(variant)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...progressTraitProps}\n    />\n  );\n};\n\nconst ProgressBar = ({\n  variant = 'default',\n  now = undefined,\n  min = undefined,\n  max = undefined,\n  labelledBy = undefined,\n  valueTextRenderer = undefined,\n  children: progressSegments,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: {\n  variant?: string;\n  now?: number;\n  min?: number;\n  max?: number;\n  labelledBy?: string;\n  children?: React.ReactNode;\n  valueTextRenderer?: DSProgressIndicatorT.DefaultRendererT;\n} & OwnerPropsPassthrough) => (\n  <StyledProgressBar\n    className={legacyBarClassName()}\n    getOwnerProps={getOwnerProps}\n    getOwnerPropsArguments={getOwnerPropsArguments}\n  >\n    {progressSegments || (\n      <Progress\n        max={max}\n        min={min}\n        now={now}\n        variant={variant}\n        labelledBy={labelledBy}\n        valueTextRenderer={valueTextRenderer}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    )}\n  </StyledProgressBar>\n);\n\nProgressBar.Segment = Progress;\n\nexport default ProgressBar;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsEnB;AArEJ,SAAS,oBAAoB,yBAAyB,gBAAgB,yBAAyB;AAC/F,SAAS,OAAO,eAAe,qBAAqB;AAQpD,SAAS,iBAAiB;AAAA,EACxB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,eAAe,cAAc,KAAK,GAAG;AAC3C,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAI9C,QAAM,YAAY,oBAAoB,EAAE,KAAK,KAAK,IAAI,CAAC;AACvD,QAAM,kBAAkB,OAAO,cAAc,YAAY,OAAO,cAAc;AAC9E,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA,IAIN,GAAI,eAAe,EAAE,iBAAiB,MAAM,KAAK,KAAK,GAAG,GAAG,iBAAiB,KAAK,iBAAiB,IAAI,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAI5G,GAAI,gBAAgB,kBAAkB,EAAE,kBAAkB,OAAO,SAAS,EAAE,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjF,GAAI,QAAQ,EAAE,cAAc,MAAM,IAAI,CAAC;AAAA,IACvC,GAAI,CAAC,SAAS,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;AAAA,IAChE,GAAI,CAAC,SAAS,CAAC,aAAa,EAAE,cAAc,eAAe,IAAI,CAAC;AAAA,IAChE,OAAO;AAAA,MACL,OAAO,GAAG,UAAU;AAAA,IACtB;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CACf,UASG;AACH,QAAM,EAAE,UAAU,WAAW,eAAe,uBAAuB,IAAI;AAEvE,QAAM,qBAAqB,iBAAiB,KAAK;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,wBAAwB,OAAO;AAAA,MAC1C;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV;AAAA,EACA;AACF,MASE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,mBAAmB;AAAA,IAC9B;AAAA,IACA;AAAA,IAEC,8BACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA;AAEJ;AAGF,YAAY,UAAU;AAEtB,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/ProgressCounter.js

@@ -1,22 +1,32 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { getPercentage } from "./utils.js";
-import { ProgressIndicatorCounter } from "./classedComponents.js";
-const defaultRenderer = ({ now, max, min }) => `${min || now} of ${max}`;
+import { DSTypography, TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
+import { defaultCounterRenderer, getPercentage } from "./utils.js";
+import { legacyCounterClassName, StyledProgressIndicatorCounter } from "./styled.js";
 const percentageRenderer = ({ now, max, min }) => {
   const percentage = getPercentage(now, min, max);
   return `${percentage}%`;
 };
 const renderers = {
-  default: defaultRenderer,
+  default: defaultCounterRenderer,
   percentage: percentageRenderer
 };
 const ProgressCounter = ({
-  now,
-  max,
-  min,
-  renderer = renderers.default
-}) => /* @__PURE__ */ jsx(ProgressIndicatorCounter, { children: renderer({ now, max, min }) });
+  now = 0,
+  max = 0,
+  min = 0,
+  renderer = renderers.default,
+  getOwnerProps,
+  getOwnerPropsArguments
+}) => /* @__PURE__ */ jsx(
+  StyledProgressIndicatorCounter,
+  {
+    className: legacyCounterClassName(),
+    getOwnerProps,
+    getOwnerPropsArguments,
+    children: /* @__PURE__ */ jsx(DSTypography, { component: "span", variant: TYPOGRAPHY_VARIANTS.B4, children: renderer({ now, max, min }) })
+  }
+);
 var ProgressCounter_default = ProgressCounter;
 export {
   ProgressCounter_default as default

package/dist/esm/ProgressCounter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ProgressCounter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getPercentage } from './utils.js';\nimport { ProgressIndicatorCounter } from './classedComponents.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst defaultRenderer: DSProgressIndicatorT.DefaultRendererT = ({ now, max, min }) => `${min || now} of ${max}`;\n\nconst percentageRenderer = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => {\n  const percentage = getPercentage(now, min, max);\n  return `${percentage}%`;\n};\n\nconst renderers = {\n  default: defaultRenderer,\n  percentage: percentageRenderer,\n};\n\nconst ProgressCounter = ({\n  now,\n  max,\n  min,\n  renderer = renderers.default,\n}: DSProgressIndicatorT.PercentageT & { renderer?: DSProgressIndicatorT.DefaultRendererT }) => (\n  <ProgressIndicatorCounter>{renderer({ now, max, min })}</ProgressIndicatorCounter>\n);\n\nexport default ProgressCounter;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBrB;AAtBF,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAGzC,MAAM,kBAAyD,CAAC,EAAE,KAAK,KAAK,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG;AAE7G,MAAM,qBAAqB,CAAC,EAAE,KAAK,KAAK,IAAI,MAAwC;AAClF,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO,GAAG,UAAU;AACtB;AAEA,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AACvB,MACE,oBAAC,4BAA0B,mBAAS,EAAE,KAAK,KAAK,IAAI,CAAC,GAAE;AAGzD,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTypography, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { defaultCounterRenderer, getPercentage } from './utils.js';\nimport { legacyCounterClassName, StyledProgressIndicatorCounter } from './styled.js';\nimport type { DSProgressIndicatorT } from './react-desc-prop-types.js';\n\nconst percentageRenderer = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => {\n  const percentage = getPercentage(now, min, max);\n  return `${percentage}%`;\n};\n\nconst renderers = {\n  default: defaultCounterRenderer,\n  percentage: percentageRenderer,\n};\n\nconst ProgressCounter = ({\n  now = 0,\n  max = 0,\n  min = 0,\n  renderer = renderers.default,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: Partial<DSProgressIndicatorT.PercentageT> & {\n  renderer?: DSProgressIndicatorT.DefaultRendererT;\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}) => (\n  <StyledProgressIndicatorCounter\n    className={legacyCounterClassName()}\n    getOwnerProps={getOwnerProps}\n    getOwnerPropsArguments={getOwnerPropsArguments}\n  >\n    {/* span, not the variant's default <p>: this sits inside an inline slot and must stay phrasing content */}\n    <DSTypography component=\"span\" variant={TYPOGRAPHY_VARIANTS.B4}>\n      {renderer({ now, max, min })}\n    </DSTypography>\n  </StyledProgressIndicatorCounter>\n);\n\nexport default ProgressCounter;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCnB;AAjCJ,SAAS,cAAc,2BAA2B;AAClD,SAAS,wBAAwB,qBAAqB;AACtD,SAAS,wBAAwB,sCAAsC;AAGvE,MAAM,qBAAqB,CAAC,EAAE,KAAK,KAAK,IAAI,MAAwC;AAClF,QAAM,aAAa,cAAc,KAAK,KAAK,GAAG;AAC9C,SAAO,GAAG,UAAU;AACtB;AAEA,MAAM,YAAY;AAAA,EAChB,SAAS;AAAA,EACT,YAAY;AACd;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AACF,MAKE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,uBAAuB;AAAA,IAClC;AAAA,IACA;AAAA,IAGA,8BAAC,gBAAa,WAAU,QAAO,SAAS,oBAAoB,IACzD,mBAAS,EAAE,KAAK,KAAK,IAAI,CAAC,GAC7B;AAAA;AACF;AAGF,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/config/useProgressIndicator.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import React2 from "react";
+import { useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { DSProgressIndicatorPropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { hasValidRange } from "../utils.js";
+import { DSProgressIndicatorName } from "../constants/index.js";
+const useProgressIndicator = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    propsFromUser,
+    defaultProps
+  );
+  useValidateProps(propsWithDefault, DSProgressIndicatorPropTypes);
+  const { title, style, min, max, disabled, ...globalPropsWithoutConsumedKeywords } = propsWithDefault;
+  const globalProps = useGetGlobalAttributes(globalPropsWithoutConsumedKeywords);
+  const reactId = React2.useId();
+  const titleId = `ds-progress-indicator-title-${reactId}`;
+  React2.useEffect(() => {
+    if (!hasValidRange(min, max)) {
+      console.warn(
+        `Warning: ${DSProgressIndicatorName}:: "max" must be a finite number greater than "min" (received min=${String(min)}, max=${String(max)}). A determinate progress cannot be computed, so the progressbar is rendered as indeterminate.`
+      );
+    }
+  }, [min, max]);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      globalProps,
+      titleId
+    }),
+    [propsWithDefault, globalProps, titleId]
+  );
+};
+export {
+  useProgressIndicator
+};
+//# sourceMappingURL=useProgressIndicator.js.map

package/dist/esm/config/useProgressIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useProgressIndicator.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSProgressIndicatorT, DSProgressIndicatorPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { hasValidRange } from '../utils.js';\nimport { DSProgressIndicatorName } from '../constants/index.js';\n\nexport interface ProgressIndicatorCTX {\n  propsWithDefault: DSProgressIndicatorT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  titleId: string;\n}\n\nexport const useProgressIndicator = (propsFromUser: DSProgressIndicatorT.Props): ProgressIndicatorCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSProgressIndicatorT.InternalProps>(\n    propsFromUser,\n    defaultProps as unknown as Partial<DSProgressIndicatorT.InternalProps>,\n  );\n  useValidateProps(propsWithDefault, DSProgressIndicatorPropTypes as unknown as ValidationMap<unknown>);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  // These five props are consumed by this component but are also HTML global attributes, so spreading them\n  // onto the root would emit attributes the component has never rendered: `title` would add a native browser\n  // tooltip, `min`/`max`/`disabled` are not even valid on a div, and `style` is forwarded explicitly further\n  // down. Everything else still flows through so consumers can reach the root with id/className/data-*/aria-*.\n  const { title, style, min, max, disabled, ...globalPropsWithoutConsumedKeywords } = propsWithDefault;\n  const globalProps = useGetGlobalAttributes(globalPropsWithoutConsumedKeywords);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // The progressbar takes its accessible name from the visible title via aria-labelledby, which needs a\n  // stable unique id per instance. See the Accessibility Expert Validation doc for this component.\n  const reactId = React.useId();\n  const titleId = `ds-progress-indicator-title-${reactId}`;\n\n  // `max` is functionally required for a determinate progress but stays optional in the public contract \u2014 making\n  // it required would break every consumer that omits it today, at compile time for TS users and at render time\n  // for JS users (PropTypes `isRequired` throws). So an invalid range renders safely as an indeterminate\n  // progressbar, and this is the signal the consumer gets instead: a dev-only warning, once per range. It is\n  // step 1 of the breaking-change protocol should `max` ever become required. PUI-18672.\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production' && !hasValidRange(min, max)) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `Warning: ${DSProgressIndicatorName}:: \"max\" must be a finite number greater than \"min\" (received min=${String(min)}, max=${String(max)}). A determinate progress cannot be computed, so the progressbar is rendered as indeterminate.`,\n      );\n    }\n  }, [min, max]);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      titleId,\n    }),\n    [propsWithDefault, globalProps, titleId],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,wBAAwB,oCAAoC;AAErE,SAAoC,8BAA8B,oBAAoB;AACtF,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AAQjC,MAAM,uBAAuB,CAAC,kBAAoE;AAIvG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,4BAAiE;AAQpG,QAAM,EAAE,OAAO,OAAO,KAAK,KAAK,UAAU,GAAG,mCAAmC,IAAI;AACpF,QAAM,cAAc,uBAAuB,kCAAkC;AAM7E,QAAM,UAAUA,OAAM,MAAM;AAC5B,QAAM,UAAU,+BAA+B,OAAO;AAOtD,EAAAA,OAAM,UAAU,MAAM;AACpB,QAA6C,CAAC,cAAc,KAAK,GAAG,GAAG;AAErE,cAAQ;AAAA,QACN,YAAY,uBAAuB,qEAAqE,OAAO,GAAG,CAAC,SAAS,OAAO,GAAG,CAAC;AAAA,MACzI;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,GAAG,CAAC;AAEb,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,OAAO;AAAA,EACzC;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSProgressIndicatorName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSProgressIndicatorName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSProgressIndicatorT } from '../react-desc-prop-types.js';\nimport { DSProgressIndicatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSProgressIndicatorT.InternalProps,\n  propTypes: ValidationMap<unknown>,\n): void => {\n  useValidateTypescriptPropTypes(props, propTypes, DSProgressIndicatorName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB,CAC9B,OACA,cACS;AACT,iCAA+B,OAAO,WAAW,uBAAuB;AAC1E;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSProgressIndicatorName = "DSProgressindicator";
+const PROGRESS_INDICATOR_SLOTS = {
+  ROOT: "root",
+  TITLE: "title",
+  COUNTER: "counter",
+  PROGRESS_BAR: "progress-bar",
+  PROGRESS: "progress"
+};
+const PROGRESS_INDICATOR_DATA_TESTID = slotObjectToDataTestIds(
+  DSProgressIndicatorName,
+  PROGRESS_INDICATOR_SLOTS
+);
+export {
+  DSProgressIndicatorName,
+  PROGRESS_INDICATOR_DATA_TESTID,
+  PROGRESS_INDICATOR_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSProgressIndicatorName = 'DSProgressindicator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PROGRESS_INDICATOR_SLOTS = {\n  ROOT: 'root',\n  TITLE: 'title',\n  COUNTER: 'counter',\n  PROGRESS_BAR: 'progress-bar',\n  PROGRESS: 'progress',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PROGRESS_INDICATOR_DATA_TESTID = slotObjectToDataTestIds(\n  DSProgressIndicatorName,\n  PROGRESS_INDICATOR_SLOTS,\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,0BAA0B;AAGhC,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,UAAU;AACZ;AAGO,MAAM,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,3 +1,15 @@
 import * as React from "react";
-export * from "./DSProgressIndicator.js";
+import { DSProgressIndicator, ProgressIndicatorWithSchema } from "./DSProgressIndicator.js";
+import {
+  DSProgressIndicatorName,
+  PROGRESS_INDICATOR_SLOTS,
+  PROGRESS_INDICATOR_DATA_TESTID
+} from "./constants/index.js";
+export {
+  DSProgressIndicator,
+  DSProgressIndicatorName,
+  PROGRESS_INDICATOR_DATA_TESTID,
+  PROGRESS_INDICATOR_SLOTS,
+  ProgressIndicatorWithSchema
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSProgressIndicator.js';\nexport { type DSProgressIndicatorT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSProgressIndicator, ProgressIndicatorWithSchema } from './DSProgressIndicator.js';\nexport { type DSProgressIndicatorT } from './react-desc-prop-types.js';\nexport {\n  DSProgressIndicatorName,\n  PROGRESS_INDICATOR_SLOTS,\n  PROGRESS_INDICATOR_DATA_TESTID,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB,mCAAmC;AAEjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

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

@@ -1,2 +1,50 @@
 import * as React from "react";
+import { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from "./constants/index.js";
+const defaultProps = {
+  containerProps: {},
+  title: "",
+  now: 0,
+  min: 0,
+  max: 0,
+  disabled: false,
+  segments: [],
+  style: {}
+};
+const variants = ["default", "success", "warning", "info", "error"];
+const DSProgressIndicatorPropTypes = {
+  ...getPropsPerSlotPropTypes(DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS),
+  ...globalAttributesPropTypes,
+  containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
+  innerRef: PropTypes.object.description("ref to the components container"),
+  title: PropTypes.string.description("components title"),
+  variant: PropTypes.oneOf(variants).description(
+    "Progress intent variation of the fill in single-bar mode. Ignored when segments are given; each segment sets its own variant."
+  ),
+  now: PropTypes.number.description("Total current value"),
+  min: PropTypes.number.description("min value"),
+  max: PropTypes.number.description(
+    'max value. Functionally required for a determinate progress: it must be a finite number greater than "min". Without it the progressbar renders as indeterminate and a dev-only warning is logged.'
+  ),
+  disabled: PropTypes.bool.description("Whether the progress indicator disabled or not").defaultValue(false),
+  counterRenderer: PropTypes.func.description("Render a custom counter"),
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({
+      min: PropTypes.number,
+      max: PropTypes.number,
+      now: PropTypes.number,
+      variant: PropTypes.oneOf(variants),
+      label: PropTypes.string
+    })
+  ).description(
+    'An array of multiple progress objects. Give each segment a "label" when its "variant" colour carries meaning \u2014 without one every segment reports the same accessible name and can only be told apart by colour.'
+  ),
+  style: PropTypes.object.description("css inline style")
+};
+const DSProgressIndicatorPropTypesSchema = DSProgressIndicatorPropTypes;
+export {
+  DSProgressIndicatorPropTypes,
+  DSProgressIndicatorPropTypesSchema,
+  defaultProps
+};
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA,YAAY,WAAW;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSProgressIndicatorT {\n  export type PercentageT = {\n    min: number;\n    max: number;\n    now: number;\n  };\n\n  export type DefaultRendererT = ({ now, max, min }: DSProgressIndicatorT.PercentageT) => string;\n\n  export type VariantT = 'default' | 'success' | 'warning' | 'info' | 'error';\n\n  export type SegmentsT = {\n    length?: number;\n    min: number;\n    max: number;\n    now: number;\n    variant: VariantT;\n    /**\n     * Accessible name for this specific segment. Without it every segment inherits the same name from the\n     * indicator title, so segments are told apart only by their variant colour. See PUI-18942.\n     */\n    label?: string;\n  };\n\n  export type SlotFunctionArguments = {\n    dsProgressindicatorRoot: () => object;\n    dsProgressindicatorTitle: () => object;\n    dsProgressindicatorCounter: () => object;\n    dsProgressindicatorProgressBar: () => object;\n    dsProgressindicatorProgress: () => object;\n  };\n\n  export interface DefaultProps {\n    title: string;\n    innerRef: React.MutableRefObject<unknown>;\n    counterRenderer: DefaultRendererT;\n    min: number;\n    disabled: boolean;\n    segments: SegmentsT[] | readonly SegmentsT[];\n    style: object;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSProgressIndicatorName,\n    typeof PROGRESS_INDICATOR_SLOTS\n  > {\n    // deliberately wide: this has accepted arbitrary keys since PUI-12598 and consumers pass data-* through\n    // it. Narrowing it to React.HTMLAttributes rejects data-* in object position \u2014 a breaking type change.\n    containerProps?: { [key: string]: string };\n    now?: number;\n    max?: number;\n    /**\n     * Colour intent of the fill in single-bar mode. Ignored when `segments` are given \u2014 each segment carries its\n     * own `variant`. Colour alone does not convey the intent to every user; say it in `title` or the counter too.\n     */\n    variant?: VariantT;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps> {}\n}\n\nexport const defaultProps = {\n  containerProps: {},\n  title: '',\n  now: 0,\n  min: 0,\n  max: 0,\n  disabled: false,\n  segments: [],\n  style: {},\n};\n\nconst variants: DSProgressIndicatorT.VariantT[] = ['default', 'success', 'warning', 'info', 'error'];\n\nexport const DSProgressIndicatorPropTypes: DSPropTypesSchema<DSProgressIndicatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS),\n  ...globalAttributesPropTypes,\n\n  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n  innerRef: PropTypes.object.description('ref to the components container'),\n  title: PropTypes.string.description('components title'),\n  variant: PropTypes.oneOf(variants).description(\n    'Progress intent variation of the fill in single-bar mode. Ignored when segments are given; each segment sets its own variant.',\n  ),\n  now: PropTypes.number.description('Total current value'),\n  min: PropTypes.number.description('min value'),\n  max: PropTypes.number.description(\n    'max value. Functionally required for a determinate progress: it must be a finite number greater than \"min\". Without it the progressbar renders as indeterminate and a dev-only warning is logged.',\n  ),\n  disabled: PropTypes.bool.description('Whether the progress indicator disabled or not').defaultValue(false),\n  counterRenderer: PropTypes.func.description('Render a custom counter'),\n  segments: PropTypes.arrayOf(\n    PropTypes.shape({\n      min: PropTypes.number,\n      max: PropTypes.number,\n      now: PropTypes.number,\n      variant: PropTypes.oneOf(variants),\n      label: PropTypes.string,\n    }),\n  ).description(\n    'An array of multiple progress objects. Give each segment a \"label\" when its \"variant\" colour carries meaning \u2014 without one every segment reports the same accessible name and can only be told apart by colour.',\n  ),\n  style: PropTypes.object.description('css inline style'),\n};\n\nexport const DSProgressIndicatorPropTypesSchema =\n  DSProgressIndicatorPropTypes as unknown as ValidationMap<DSProgressIndicatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,0BAA0B,iCAAiC;AAE/E,SAAS,yBAAyB,gCAAgC;AAyE3D,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AACV;AAEA,MAAM,WAA4C,CAAC,WAAW,WAAW,WAAW,QAAQ,OAAO;AAE5F,MAAM,+BAA8E;AAAA,EACzF,GAAG,yBAAyB,yBAAyB,wBAAwB;AAAA,EAC7E,GAAG;AAAA,EAEH,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,UAAU,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACxE,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EACtD,SAAS,UAAU,MAAM,QAAQ,EAAE;AAAA,IACjC;AAAA,EACF;AAAA,EACA,KAAK,UAAU,OAAO,YAAY,qBAAqB;AAAA,EACvD,KAAK,UAAU,OAAO,YAAY,WAAW;AAAA,EAC7C,KAAK,UAAU,OAAO;AAAA,IACpB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EACzG,iBAAiB,UAAU,KAAK,YAAY,yBAAyB;AAAA,EACrE,UAAU,UAAU;AAAA,IAClB,UAAU,MAAM;AAAA,MACd,KAAK,UAAU;AAAA,MACf,KAAK,UAAU;AAAA,MACf,KAAK,UAAU;AAAA,MACf,SAAS,UAAU,MAAM,QAAQ;AAAA,MACjC,OAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,EAAE;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AACxD;AAEO,MAAM,qCACX;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,9 +1,82 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-const Title = styled.span`
+import { css, styled } from "@elliemae/ds-system";
+import { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from "./constants/index.js";
+const LEGACY_ROOT_BLOCK = "em-ds-determinate-progress-indicator";
+const LEGACY_BAR_BLOCK = "em-ds-progress-bar";
+const joinClasses = (...classes) => [...new Set(classes.filter(Boolean))].join(" ");
+const legacyRootClassName = (disabled, ...consumerClasses) => joinClasses(
+  LEGACY_ROOT_BLOCK,
+  `${LEGACY_ROOT_BLOCK}--default`,
+  disabled && `${LEGACY_ROOT_BLOCK}--disabled`,
+  ...consumerClasses
+);
+const legacyCounterClassName = (...consumerClasses) => joinClasses(`${LEGACY_ROOT_BLOCK}__counter`, ...consumerClasses);
+const legacyBarClassName = (...consumerClasses) => joinClasses(LEGACY_BAR_BLOCK, ...consumerClasses);
+const legacyProgressClassName = (variant, ...consumerClasses) => joinClasses(
+  `${LEGACY_BAR_BLOCK}__progress`,
+  `${LEGACY_BAR_BLOCK}__progress--default`,
+  variant && `${LEGACY_BAR_BLOCK}__progress--${variant}`,
+  ...consumerClasses
+);
+const legacyProofStyleOverrides = (slot) => ({ theme }) => {
+  const overrides = theme?.components?.[DSProgressIndicatorName]?.styleOverrides?.[slot];
+  return overrides ? css`
+          &&& {
+            ${overrides}
+          }
+        ` : "";
+};
+const inheritTypographyFromSlot = css`
+  && > * {
+    font: inherit;
+    line-height: inherit;
+    color: inherit;
+    white-space: inherit;
+    overflow-wrap: inherit;
+    margin: 0;
+    padding: 0;
+  }
+`;
+const StyledProgressIndicatorRoot = styled("div", {
+  name: DSProgressIndicatorName,
+  slot: PROGRESS_INDICATOR_SLOTS.ROOT
+})``;
+const Title = styled("span", {
+  name: DSProgressIndicatorName,
+  slot: PROGRESS_INDICATOR_SLOTS.TITLE
+})`
   grid-area: title;
+  ${inheritTypographyFromSlot}
+  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.TITLE)}
+`;
+const StyledProgressIndicatorCounter = styled("span", {
+  name: DSProgressIndicatorName,
+  slot: PROGRESS_INDICATOR_SLOTS.COUNTER
+})`
+  ${inheritTypographyFromSlot}
+  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.COUNTER)}
+`;
+const StyledProgressBar = styled("div", {
+  name: DSProgressIndicatorName,
+  slot: PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR
+})`
+  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR)}
+`;
+const StyledProgress = styled("div", {
+  name: DSProgressIndicatorName,
+  slot: PROGRESS_INDICATOR_SLOTS.PROGRESS
+})`
+  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.PROGRESS)}
 `;
 export {
-  Title
+  StyledProgress,
+  StyledProgressBar,
+  StyledProgressIndicatorCounter,
+  StyledProgressIndicatorRoot,
+  Title,
+  legacyBarClassName,
+  legacyCounterClassName,
+  legacyProgressClassName,
+  legacyRootClassName
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const Title = styled.span`\n  grid-area: title;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,QAAQ,OAAO;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { css, styled } from '@elliemae/ds-system';\nimport type { CSSObject, DefaultTheme } from 'styled-components';\nimport { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from './constants/index.js';\n\n// ============================================================================================================\n// Legacy BEM class contract\n// ============================================================================================================\n// This component carries no CSS of its own: its entire visual layer is the\n// `em-ds-determinate-progress-indicator` / `em-ds-progress-bar` SCSS compiled into `@elliemae/ds-basic`'s\n// dimsum.css, which is frozen. Consumers may also hold stylesheet overrides and QA selectors against these\n// exact names, so the class strings are a compatibility contract, not an implementation detail.\n//\n// They used to be produced by `aggregatedClasses` from the sunsetted `@elliemae/ds-classnames`. They are\n// reproduced verbatim here so that dependency could be dropped and the slot system put in its place without\n// a visual or breaking change. `DSProgressIndicator.api.test.js` locks the resulting class set per state.\n//\n// `--default` is reproduced deliberately and is not a typo: the legacy layout modifier pipeline emitted a\n// `--default` modifier unconditionally on every element that received `classProps`, which is why the root and\n// the progress fill carry it while the counter and the bar (which received none) do not.\n//\n// These are applied as an explicit `className` prop rather than through `.attrs()`, because `.attrs()` on\n// ds-system's `styled` is silently a no-op \u2014 it calls styled-components' immutable `.attrs()` and discards\n// the new resolver it returns (`styledFunction.tsx:173`). Do not \"simplify\" this back to `.attrs()`.\nconst LEGACY_ROOT_BLOCK = 'em-ds-determinate-progress-indicator';\nconst LEGACY_BAR_BLOCK = 'em-ds-progress-bar';\n\n// `aggregatedClasses` appended any consumer-supplied className after its own, so a className arriving through\n// containerProps adds to the contract rather than replacing it. That ordering is preserved.\nconst joinClasses = (...classes: (string | false | undefined)[]) =>\n  [...new Set(classes.filter(Boolean) as string[])].join(' ');\n\nexport const legacyRootClassName = (disabled?: boolean, ...consumerClasses: (string | undefined)[]) =>\n  joinClasses(\n    LEGACY_ROOT_BLOCK,\n    `${LEGACY_ROOT_BLOCK}--default`,\n    disabled && `${LEGACY_ROOT_BLOCK}--disabled`,\n    ...consumerClasses,\n  );\n\nexport const legacyCounterClassName = (...consumerClasses: (string | undefined)[]) =>\n  joinClasses(`${LEGACY_ROOT_BLOCK}__counter`, ...consumerClasses);\n\nexport const legacyBarClassName = (...consumerClasses: (string | undefined)[]) =>\n  joinClasses(LEGACY_BAR_BLOCK, ...consumerClasses);\n\nexport const legacyProgressClassName = (variant?: string, ...consumerClasses: (string | undefined)[]) =>\n  joinClasses(\n    `${LEGACY_BAR_BLOCK}__progress`,\n    `${LEGACY_BAR_BLOCK}__progress--default`,\n    variant && `${LEGACY_BAR_BLOCK}__progress--${variant}`,\n    ...consumerClasses,\n  );\n\n// ============================================================================================================\n// styleOverrides vs the legacy cascade\n// ============================================================================================================\n// ds-system emits `theme.components.DSProgressindicator.styleOverrides[slot]` inside the slot's own generated\n// class \u2014 specificity 0-1-0. Four of the retained legacy rules are descendant selectors:\n//\n//   .em-ds-determinate-progress-indicator .em-ds-progress-bar                       0-2-0  (track)\n//   .em-ds-determinate-progress-indicator .em-ds-progress-bar__progress             0-2-0  (fill)\n//   .em-ds-determinate-progress-indicator .em-ds-progress-bar__progress:not(:first-child)  0-3-0\n//   .em-ds-determinate-progress-indicator--disabled .em-ds-\u2026__title / __counter / __progress  0-2-0\n//\n// so any property they set (the track's background most visibly \u2014 found by QA while writing SlotsTest) beats\n// the consumer's override. Re-emitting the same override under `&&&` gives it 0-3-0: it ties the strongest\n// legacy rule and wins on source order, because styled-components injects after dimsum.css. The root slot is\n// left alone \u2014 its legacy rules are single-class and already lose to the override on that same source order.\n//\n// This is a consequence of deviation 1 (the legacy SCSS is frozen and still ships) and goes away with it.\ntype ThemeWithComponents = DefaultTheme & {\n  components?: Record<string, { styleOverrides?: Record<string, CSSObject> }>;\n};\n\nconst legacyProofStyleOverrides =\n  (slot: (typeof PROGRESS_INDICATOR_SLOTS)[keyof typeof PROGRESS_INDICATOR_SLOTS]) =>\n  ({ theme }: { theme: ThemeWithComponents }) => {\n    const overrides = theme?.components?.[DSProgressIndicatorName]?.styleOverrides?.[slot];\n    return overrides\n      ? css`\n          &&& {\n            ${overrides}\n          }\n        `\n      : '';\n  };\n\n// ============================================================================================================\n// Text slots carry a DSTypography child\n// ============================================================================================================\n// The title and counter text render through DSTypography (typography remediation, PUI-18942), nested inside the\n// slot element rather than being the slot element. Making DSTypography the slot itself would let the nested-slot\n// mechanism rewrite `data-dimsum-slot` to `dsTypographyRoot` and demote ours to `data-dimsum-parent-slot` \u2014\n// verified by probe \u2014 breaking a slot value that shipped in 3.80 and the E2E `getSlot()` lookups against it.\n//\n// DSTypography brings its own metrics (B4: 0.85rem / 1rem line-height, `white-space: pre-wrap`, font-family,\n// margin/padding). Today the counter takes its metrics from the frozen legacy SCSS and the title inherits the\n// body's, so those must win for the render to stay identical: the child inherits everything from its slot. That\n// keeps consumer `styleOverrides` on the slot flowing into the text too. `&& > *` is 0-2-0, so it beats\n// DSTypography's single class regardless of which rule styled-components happens to inject first.\n//\n// Deliberately neutral: whether the title should finally adopt the counter's micro-text metrics (the SCSS\n// always intended both to share them \u2014 deviation 4) is a UX decision, not a side effect of this change. When\n// it is taken, drop `font` / `line-height` from this block and let the variant apply.\nconst inheritTypographyFromSlot = css`\n  && > * {\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`;\n\n// ============================================================================================================\n// Slots\n// ============================================================================================================\n\nexport const StyledProgressIndicatorRoot = styled('div', {\n  name: DSProgressIndicatorName,\n  slot: PROGRESS_INDICATOR_SLOTS.ROOT,\n})``;\n\nexport const Title = styled('span', {\n  name: DSProgressIndicatorName,\n  slot: PROGRESS_INDICATOR_SLOTS.TITLE,\n})`\n  grid-area: title;\n  ${inheritTypographyFromSlot}\n  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.TITLE)}\n`;\n\nexport const StyledProgressIndicatorCounter = styled('span', {\n  name: DSProgressIndicatorName,\n  slot: PROGRESS_INDICATOR_SLOTS.COUNTER,\n})`\n  ${inheritTypographyFromSlot}\n  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.COUNTER)}\n`;\n\nexport const StyledProgressBar = styled('div', {\n  name: DSProgressIndicatorName,\n  slot: PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR,\n})`\n  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.PROGRESS_BAR)}\n`;\n\nexport const StyledProgress = styled('div', {\n  name: DSProgressIndicatorName,\n  slot: PROGRESS_INDICATOR_SLOTS.PROGRESS,\n})`\n  ${legacyProofStyleOverrides(PROGRESS_INDICATOR_SLOTS.PROGRESS)}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAE5B,SAAS,yBAAyB,gCAAgC;AAqBlE,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAIzB,MAAM,cAAc,IAAI,YACtB,CAAC,GAAG,IAAI,IAAI,QAAQ,OAAO,OAAO,CAAa,CAAC,EAAE,KAAK,GAAG;AAErD,MAAM,sBAAsB,CAAC,aAAuB,oBACzD;AAAA,EACE;AAAA,EACA,GAAG,iBAAiB;AAAA,EACpB,YAAY,GAAG,iBAAiB;AAAA,EAChC,GAAG;AACL;AAEK,MAAM,yBAAyB,IAAI,oBACxC,YAAY,GAAG,iBAAiB,aAAa,GAAG,eAAe;AAE1D,MAAM,qBAAqB,IAAI,oBACpC,YAAY,kBAAkB,GAAG,eAAe;AAE3C,MAAM,0BAA0B,CAAC,YAAqB,oBAC3D;AAAA,EACE,GAAG,gBAAgB;AAAA,EACnB,GAAG,gBAAgB;AAAA,EACnB,WAAW,GAAG,gBAAgB,eAAe,OAAO;AAAA,EACpD,GAAG;AACL;AAuBF,MAAM,4BACJ,CAAC,SACD,CAAC,EAAE,MAAM,MAAsC;AAC7C,QAAM,YAAY,OAAO,aAAa,uBAAuB,GAAG,iBAAiB,IAAI;AACrF,SAAO,YACH;AAAA;AAAA,cAEM,SAAS;AAAA;AAAA,YAGf;AACN;AAmBF,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB3B,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,yBAAyB;AACjC,CAAC;AAEM,MAAM,QAAQ,OAAO,QAAQ;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,yBAAyB;AACjC,CAAC;AAAA;AAAA,IAEG,yBAAyB;AAAA,IACzB,0BAA0B,yBAAyB,KAAK,CAAC;AAAA;AAGtD,MAAM,iCAAiC,OAAO,QAAQ;AAAA,EAC3D,MAAM;AAAA,EACN,MAAM,yBAAyB;AACjC,CAAC;AAAA,IACG,yBAAyB;AAAA,IACzB,0BAA0B,yBAAyB,OAAO,CAAC;AAAA;AAGxD,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yBAAyB;AACjC,CAAC;AAAA,IACG,0BAA0B,yBAAyB,YAAY,CAAC;AAAA;AAG7D,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,yBAAyB;AACjC,CAAC;AAAA,IACG,0BAA0B,yBAAyB,QAAQ,CAAC;AAAA;",
   "names": []
 }

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+const SlotPropsAsObject = {
+  dsProgressindicatorRoot: { "aria-label": "just a typescript test" },
+  dsProgressindicatorTitle: { "aria-label": "just a typescript test" },
+  dsProgressindicatorCounter: { "aria-label": "just a typescript test" },
+  dsProgressindicatorProgressBar: { "aria-label": "just a typescript test" },
+  dsProgressindicatorProgress: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsProgressindicatorRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsProgressindicatorTitle: () => ({ "aria-label": "just a typescript test" }),
+  dsProgressindicatorCounter: () => ({ "aria-label": "just a typescript test" }),
+  dsProgressindicatorProgressBar: () => ({ "aria-label": "just a typescript test" }),
+  dsProgressindicatorProgress: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/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 { DSProgressIndicatorName, PROGRESS_INDICATOR_SLOTS } from '../constants/index.js';\nimport type { DSProgressIndicatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSProgressIndicatorT.Props> = {\n  dsProgressindicatorRoot: { 'aria-label': 'just a typescript test' },\n  dsProgressindicatorTitle: { 'aria-label': 'just a typescript test' },\n  dsProgressindicatorCounter: { 'aria-label': 'just a typescript test' },\n  dsProgressindicatorProgressBar: { 'aria-label': 'just a typescript test' },\n  dsProgressindicatorProgress: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSProgressIndicatorT.SlotFunctionArguments = {\n  dsProgressindicatorRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsProgressindicatorTitle: () => ({ 'aria-label': 'just a typescript test' }),\n  dsProgressindicatorCounter: () => ({ 'aria-label': 'just a typescript test' }),\n  dsProgressindicatorProgressBar: () => ({ 'aria-label': 'just a typescript test' }),\n  dsProgressindicatorProgress: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSProgressIndicatorName, typeof PROGRESS_INDICATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,MAAM,oBAAyD;AAAA,EAC7D,yBAAyB,EAAE,cAAc,yBAAyB;AAAA,EAClE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,gCAAgC,EAAE,cAAc,yBAAyB;AAAA,EACzE,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AAEA,MAAM,uBAAmE;AAAA,EACvE,yBAAyB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACzE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,gCAAgC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAChF,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AAGA,MAAM,6CAEF;",
+  "names": []
+}

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

@@ -5,7 +5,8 @@ import { DSProgressIndicator } from "../index.js";
 const testOptionalProps = {
   containerProps: { "data-testid": "" },
   max: 100,
-  now: 10
+  now: 10,
+  variant: "success"
 };
 const ref = React2.createRef();
 const testPartialDefaults = {
@@ -90,7 +91,8 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
       title: "",
       containerProps: {},
       max: 100,
-      now: 20
+      now: 20,
+      variant: "success"
     }
   )
 ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-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 { DSProgressIndicator } from '../index.js';\nimport type { DSProgressIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSProgressIndicatorT.Props;\ntype ComponentPropsInternals = DSProgressIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSProgressIndicatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSProgressIndicatorT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  containerProps: { 'data-testid': '' },\n  max: 100,\n  now: 10,\n};\n\nconst ref = React.createRef();\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  disabled: false,\n  min: 0,\n  style: { border: '1px solid red' },\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\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  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\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  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSProgressIndicator {...testExplicitDefinition} />\n    <DSProgressIndicator {...testInferedTypeCompatibility} />\n    <DSProgressIndicator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSProgressIndicator\n      counterRenderer={() => ''}\n      disabled\n      innerRef={ref}\n      min={0}\n      segments={[]}\n      style={{}}\n      title=\"\"\n      containerProps={{}}\n      max={100}\n      now={20}\n    />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoGrB,mBAEE,KAFF;AAnGF,OAAOA,YAAW;AAClB,SAAS,2BAA2B;AASpC,MAAM,oBAAiD;AAAA,EACrD,gBAAgB,EAAE,eAAe,GAAG;AAAA,EACpC,KAAK;AAAA,EACL,KAAK;AACP;AAEA,MAAM,MAAMA,OAAM,UAAU;AAI5B,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO,EAAE,QAAQ,gBAAgB;AACnC;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AACT;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAGA,MAAM,+BAA+B;AAAA,EACnC,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAEA,MAAM,wBAAwB;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,uBAAqB,GAAG,wBAAwB;AAAA,EACjD,oBAAC,uBAAqB,GAAG,8BAA8B;AAAA,EACvD,oBAAC,uBAAqB,GAAG,uBAAuB;AAAA,EAEhD;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB,MAAM;AAAA,MACvB,UAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU,CAAC;AAAA,MACX,OAAO,CAAC;AAAA,MACR,OAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AAAA;AAAA,EACP;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSProgressIndicator } from '../index.js';\nimport type { DSProgressIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSProgressIndicatorT.Props;\ntype ComponentPropsInternals = DSProgressIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSProgressIndicatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSProgressIndicatorT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  containerProps: { 'data-testid': '' },\n  max: 100,\n  now: 10,\n  variant: 'success',\n};\n\nconst ref = React.createRef();\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  disabled: false,\n  min: 0,\n  style: { border: '1px solid red' },\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\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  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\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  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  counterRenderer: () => '',\n  disabled: false,\n  innerRef: ref,\n  min: 0,\n  segments: [],\n  style: {},\n  title: '',\n  containerProps: {},\n  max: 100,\n  now: 20,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSProgressIndicator {...testExplicitDefinition} />\n    <DSProgressIndicator {...testInferedTypeCompatibility} />\n    <DSProgressIndicator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSProgressIndicator\n      counterRenderer={() => ''}\n      disabled\n      innerRef={ref}\n      min={0}\n      segments={[]}\n      style={{}}\n      title=\"\"\n      containerProps={{}}\n      max={100}\n      now={20}\n      variant=\"success\"\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqGrB,mBAEE,KAFF;AApGF,OAAOA,YAAW;AAClB,SAAS,2BAA2B;AASpC,MAAM,oBAAiD;AAAA,EACrD,gBAAgB,EAAE,eAAe,GAAG;AAAA,EACpC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,MAAMA,OAAM,UAAU;AAI5B,MAAM,sBAA2D;AAAA,EAC/D,UAAU;AAAA,EACV,KAAK;AAAA,EACL,OAAO,EAAE,QAAQ,gBAAgB;AACnC;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AACT;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAGA,MAAM,+BAA+B;AAAA,EACnC,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAEA,MAAM,wBAAwB;AAAA,EAC5B,iBAAiB,MAAM;AAAA,EACvB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU,CAAC;AAAA,EACX,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAAC;AAAA,EACjB,KAAK;AAAA,EACL,KAAK;AACP;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,uBAAqB,GAAG,wBAAwB;AAAA,EACjD,oBAAC,uBAAqB,GAAG,8BAA8B;AAAA,EACvD,oBAAC,uBAAqB,GAAG,uBAAuB;AAAA,EAEhD;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB,MAAM;AAAA,MACvB,UAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU,CAAC;AAAA,MACX,OAAO,CAAC;AAAA,MACR,OAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,SAAQ;AAAA;AAAA,EACV;AAAA,GACF;",
   "names": ["React"]
 }