@elliemae/ds-legacy-circular-progress-indicator 1.0.0-rc.1

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { omit } from "lodash";
+import { DSTooltipV3 } from "@elliemae/ds-legacy-tooltip";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useMemoMergePropsWithDefault,
+  useGetXstyledProps
+} from "@elliemae/ds-legacy-props-helpers";
+import { uid } from "uid";
+import { CircularIndeterminateIndicatorPropTypes, defaultProps } from "./react-desc-prop-types.js";
+import {
+  colorToHex,
+  sizeToPx,
+  sizeToTextSize,
+  sizeToWeight,
+  DSCircularIndeterminateIndicatorName
+} from "./constants.js";
+import { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from "./styled.js";
+const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
+const DSCircularIndeterminateIndicator = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    props,
+    defaultProps
+  );
+  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
+  const xstyledAttributes = useGetXstyledProps(propsWithDefault);
+  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
+  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
+  const uniqueId = useMemo(() => uid(16), []);
+  const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
+  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = useCallback(() => ({}), []);
+  return /* @__PURE__ */ jsx(
+    StyledContainer,
+    {
+      gutter: "xs",
+      justifyContent: "center",
+      role: "status",
+      "aria-label": text || "Loading...",
+      "data-testid": "ds-circular-indeterminate-indicator-root",
+      ...globalAttributes,
+      ...xstyledAttributes,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
+        /* @__PURE__ */ jsxs(
+          StyledSvg,
+          {
+            width: sizeToPx[size],
+            height: sizeToPx[size],
+            getOwnerProps,
+            getOwnerPropsArguments,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsx("clipPath", { id: `not-gradient-clip-${uniqueId}`, children: /* @__PURE__ */ jsx(StyledRect, { x: "0%", y: "0%", width: "52%", height: "100%" }) }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-color-${uniqueId}`, x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${colorToHex[color]}00` }),
+                  /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${colorToHex[color]}FF` })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                StyledCircle,
+                {
+                  cx: "50%",
+                  cy: "50%",
+                  r: circleRadius,
+                  strokeWidth: sizeToWeight[size],
+                  stroke: colorToHex[color],
+                  strokeLinecap: "round",
+                  clipPath: `url(#not-gradient-clip-${uniqueId})`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StyledPath,
+                {
+                  d: `M ${sizeToPx[size] / 2} ${sizeToPx[size] / 2}
+                m ${circleRadius}, 0
+                a ${circleRadius}, ${circleRadius} 0 0, 1 -${circleRadius}, ${circleRadius}`,
+                  strokeWidth: sizeToWeight[size],
+                  fill: "transparent",
+                  stroke: `url(#gradient-color-${uniqueId})`,
+                  strokeLinecap: "round",
+                  r: circleRadius
+                }
+              )
+            ]
+          }
+        ),
+        text !== "" && showText && /* @__PURE__ */ jsx(
+          StyledLabel,
+          {
+            style: { color: color === "light" ? "#FFFFFF" : "#353C46", fontSize: sizeToTextSize[size] },
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: text
+          }
+        )
+      ] })
+    }
+  );
+};
+DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
+DSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;
+const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-legacy-tooltip';\n\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useGetXstyledProps,\n} from '@elliemae/ds-legacy-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}</>;\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 = omit(useGetGlobalAttributes(propsWithDefault), ['height', 'width', 'rows', 'cols', 'wrap']);\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, 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      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.propTypes = CircularIndeterminateIndicatorPropTypes;\nDSCircularIndeterminateIndicator.displayName = DSCircularIndeterminateIndicatorName;\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/v2/constants.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-legacy-system";
+const DSCircularIndeterminateIndicatorName = "DSCircularIndeterminateIndicator";
+const DSCircularIndeterminateIndicatorSlots = {
+  ROOT: "root",
+  SVG: "svg",
+  LABEL: "label"
+};
+const sizeToPx = {
+  xs: 16,
+  s: 24,
+  m: 32,
+  l: 48,
+  xl: 56,
+  xxl: 64
+};
+const sizeToWeight = {
+  xs: "3px",
+  s: "3px",
+  m: "3px",
+  l: "4px",
+  xl: "5px",
+  xxl: "6px"
+};
+const colorToHex = {
+  light: "#EBF6FF",
+  dark: "#1394E5"
+};
+const sizeToTextSize = {
+  xs: "12px",
+  s: "12px",
+  m: "12px",
+  l: "13px",
+  xl: "14px",
+  xxl: "16px"
+};
+const DSCircularIndeterminateIndicatorDataTestIds = slotObjectToDataTestIds(
+  DSCircularIndeterminateIndicatorName,
+  DSCircularIndeterminateIndicatorSlots
+);
+export {
+  DSCircularIndeterminateIndicatorDataTestIds,
+  DSCircularIndeterminateIndicatorName,
+  DSCircularIndeterminateIndicatorSlots,
+  colorToHex,
+  sizeToPx,
+  sizeToTextSize,
+  sizeToWeight
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-legacy-system';\n\nexport const DSCircularIndeterminateIndicatorName = 'DSCircularIndeterminateIndicator';\n\nexport const DSCircularIndeterminateIndicatorSlots = {\n  ROOT: 'root',\n  SVG: 'svg',\n  LABEL: 'label',\n};\n\nexport const sizeToPx = {\n  xs: 16,\n  s: 24,\n  m: 32,\n  l: 48,\n  xl: 56,\n  xxl: 64,\n};\n\nexport const sizeToWeight = {\n  xs: '3px',\n  s: '3px',\n  m: '3px',\n  l: '4px',\n  xl: '5px',\n  xxl: '6px',\n};\n\nexport const colorToHex = {\n  light: '#EBF6FF',\n  dark: '#1394E5',\n};\n\nexport const sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicatorDataTestIds = slotObjectToDataTestIds(\n  DSCircularIndeterminateIndicatorName,\n  DSCircularIndeterminateIndicatorSlots,\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uCAAuC;AAE7C,MAAM,wCAAwC;AAAA,EACnD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,MAAM,8CAA8C;AAAA,EACzD;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist/esm/v2/index.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+} from "./DSCircularIndeterminateIndicator.js";
+export * from "./constants.js";
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-legacy-props-helpers";
+const defaultProps = {
+  size: "m",
+  color: "dark",
+  text: "",
+  showText: true,
+  withTooltip: false,
+  tooltipStartPlacementPreference: "bottom"
+};
+const CircularIndeterminateIndicatorPropTypes = {
+  ...globalAttributesPropTypes,
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ]).description("start placement preference for the tooltip").defaultValue("center")
+};
+export {
+  CircularIndeterminateIndicatorPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable max-lines */\nimport type {} from '@elliemae/ds-legacy-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-legacy-props-helpers';\nimport { type DSTooltipV3T } from '@elliemae/ds-legacy-tooltip';\nimport type { WeakValidationMap } from 'react';\n\nexport const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: 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    tooltipStartPlacementPreference: DSTooltipV3T.Placement;\n  }\n  export interface OptionalProps {}\n  export interface RequiredProps {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>,\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  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 WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,iCAAiC;AAI9C,MAAM,eAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AA+BO,MAAM,0CAA0C;AAAA,EACrD,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,UAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,UAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,UAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
+  "names": []
+}

package/dist/esm/v2/styled.js

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { kfrm, styled } from "@elliemae/ds-legacy-system";
+import { DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots } from "./constants.js";
+const { PI } = Math;
+const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
+const svgRotateAnimation = kfrm`
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+const strokeTailAnimation = (r) => {
+  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
+  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
+  return kfrm`
+    0% {
+        stroke-dasharray: ${miniDash};
+    }
+    50% {
+        stroke-dasharray: ${fullDash};
+    }
+    100% {
+        stroke-dasharray: ${miniDash};
+    }
+`;
+};
+const rotateAnimation = kfrm`
+    0%, 12.5% {
+        transform: rotate(0);
+    }
+    25%, 37.5% {
+        transform: rotate(270deg);
+    }
+    50%, 62.5% {
+        transform: rotate(540deg);
+    }
+    75%, 87.5% {
+        transform: rotate(810deg);
+    }
+    100% {
+        transform: rotate(1080deg);
+    }
+`;
+const dashAnimation = (r) => {
+  const miniDash = `${getArcLength(0, r)} ${getArcLength(100, r)}`;
+  const fullDash = `${getArcLength(75, r)} ${getArcLength(25, r)}`;
+  return kfrm`
+    0% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: 0;
+    }
+    12.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: 0;
+    }
+    25% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-75, r)};
+    }
+    37.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-75, r)};
+    }
+    50% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-150, r)};
+    }
+    62.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-150, r)};
+    }
+    75% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-225, r)};
+    }
+    87.5% {
+        stroke-dasharray: ${fullDash};
+        stroke-dashoffset: ${getArcLength(-225, r)};
+    }
+    100% {
+        stroke-dasharray: ${miniDash};
+        stroke-dashoffset: ${getArcLength(-300, r)};
+    }
+`;
+};
+const StyledContainer = styled(Grid, {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: DSCircularIndeterminateIndicatorSlots.ROOT
+})`
+  z-index: ${({ theme }) => theme.zIndex.loader};
+`;
+const StyledSvg = styled("svg", {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: DSCircularIndeterminateIndicatorSlots.SVG
+})`
+  display: block;
+  margin: auto;
+  transform-origin: center center;
+  transform: rotate(-90deg);
+  animation: ${svgRotateAnimation} 2.5s linear infinite;
+`;
+const StyledPath = styled.path`
+  transform-origin: center center;
+  animation:
+    ${rotateAnimation} 10s linear infinite,
+    ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;
+`;
+const StyledRect = styled.rect`
+  transform-origin: center center;
+  animation: ${rotateAnimation} 10s linear infinite;
+`;
+const StyledCircle = styled.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 StyledLabel = styled("span", {
+  name: DSCircularIndeterminateIndicatorName,
+  slot: DSCircularIndeterminateIndicatorSlots.LABEL
+})``;
+export {
+  StyledCircle,
+  StyledContainer,
+  StyledLabel,
+  StyledPath,
+  StyledRect,
+  StyledSvg
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { kfrm, styled } from '@elliemae/ds-legacy-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})`\n  z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledSvg = styled('svg', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: DSCircularIndeterminateIndicatorSlots.SVG,\n})`\n  display: block;\n  margin: auto;\n  transform-origin: center center;\n  transform: rotate(-90deg);\n  animation: ${svgRotateAnimation} 2.5s linear infinite;\n`;\n\nexport const StyledPath = styled.path<{ r: number }>`\n  transform-origin: center center;\n  animation:\n    ${rotateAnimation} 10s linear infinite,\n    ${(props) => strokeTailAnimation(props.r)} 2.5s linear infinite;\n`;\n\nexport const StyledRect = styled.rect`\n  transform-origin: center center;\n  animation: ${rotateAnimation} 10s linear infinite;\n`;\n\nexport const StyledCircle = styled.circle<{ r: number }>`\n  stroke-dashoffset: 0;\n  fill: none;\n  animation: ${(props) => dashAnimation(props.r)} 10s linear infinite;\n  clip-path: ${(props) => props.clipPath};\n  -webkit-clip-path: ${(props) => props.clipPath};\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSCircularIndeterminateIndicatorName,\n  slot: DSCircularIndeterminateIndicatorSlots.LABEL,\n})``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;AAC7B,SAAS,sCAAsC,6CAA6C;AAC5F,MAAM,EAAE,GAAG,IAAI;AAEf,MAAM,eAAe,CAAC,YAAoB,WAAqB,IAAI,KAAK,SAAU,MAAO;AAEzF,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,sBAAsB,CAAC,MAAc;AACzC,QAAM,WAAW,GAAG,aAAa,GAAG,CAAC,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAAA,4BAGA;AAAA;AAAA;AAG5B;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,KAAK,aAAa,KAAK,CAAC;AAC7D,QAAM,WAAW,GAAG,aAAa,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC;AAE7D,SAAO;AAAA;AAAA,4BAEmB;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA;AAAA;AAAA;AAAA,4BAIA;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGpB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAAA,4BAGrB;AAAA,6BACC,aAAa,MAAM,CAAC;AAAA;AAAA;AAGjD;AAEO,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKc;AAAA;AAGR,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA,MAG3B;AAAA,MACA,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAAA;AAGrC,MAAM,aAAa,OAAO;AAAA;AAAA,eAElB;AAAA;AAGR,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA,eAGpB,CAAC,UAAU,cAAc,MAAM,CAAC;AAAA,eAChC,CAAC,UAAU,MAAM;AAAA,uBACT,CAAC,UAAU,MAAM;AAAA;AAGjC,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,sCAAsC;AAC9C,CAAC;",
+  "names": []
+}

package/dist/types/DSCircularProgressIndicator.d.ts

@@ -0,0 +1,33 @@
+declare const CircularProgressIndicator: {
+    ({ size, showLabel, showTooltip, waiting, loading }: {
+        size: any;
+        showLabel: any;
+        showTooltip: any;
+        waiting: any;
+        loading: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        size: string;
+        showLabel: boolean;
+        showTooltip: boolean;
+        waiting: boolean;
+        loading: boolean;
+    };
+    propTypes: {
+        size: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").ReactDescT;
+        showLabel: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").ReactDescT;
+        showTooltip: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").ReactDescT;
+        waiting: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").ReactDescT;
+        loading: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").ReactDescT;
+    };
+    displayName: string;
+};
+declare const CircularProgressIndicatorWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
+    size: any;
+    showLabel: any;
+    showTooltip: any;
+    waiting: any;
+    loading: any;
+}>;
+export { CircularProgressIndicatorWithSchema };
+export default CircularProgressIndicator;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator.js';
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema, DSCircularIndeterminateIndicatorName, DSCircularIndeterminateIndicatorSlots, DSCircularIndeterminateIndicatorDataTestIds, } from './v2/index.js';

package/dist/types/tests/DSCircularIndeterminateIndicator.axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSCircularIndeterminateIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSCircularProgressIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/v2/DSCircularIndeterminateIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';
+export declare const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props>;
+export declare const DSCircularIndeterminateIndicatorWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSCircularIndeterminateIndicatorT.Props>;

package/dist/types/v2/constants.d.ts

@@ -0,0 +1,35 @@
+export declare const DSCircularIndeterminateIndicatorName = "DSCircularIndeterminateIndicator";
+export declare const DSCircularIndeterminateIndicatorSlots: {
+    ROOT: string;
+    SVG: string;
+    LABEL: string;
+};
+export declare const sizeToPx: {
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};
+export declare const sizeToWeight: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+export declare const colorToHex: {
+    light: string;
+    dark: string;
+};
+export declare const sizeToTextSize: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+export declare const DSCircularIndeterminateIndicatorDataTestIds: Record<string, string>;

package/dist/types/v2/index.d.ts

@@ -0,0 +1,2 @@
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema, } from './DSCircularIndeterminateIndicator.js';
+export * from './constants.js';

package/dist/types/v2/react-desc-prop-types.d.ts

@@ -0,0 +1,25 @@
+import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';
+import { type DSTooltipV3T } from '@elliemae/ds-legacy-tooltip';
+import type { WeakValidationMap } from 'react';
+export declare const defaultProps: DSCircularIndeterminateIndicatorT.DefaultProps;
+export declare namespace DSCircularIndeterminateIndicatorT {
+    type TShirtSizes = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    type SupportedColors = 'light' | 'dark';
+    interface DefaultProps {
+        size: TShirtSizes;
+        color: SupportedColors;
+        text: string;
+        showText: boolean;
+        withTooltip: boolean;
+        tooltipStartPlacementPreference: DSTooltipV3T.Placement;
+    }
+    interface OptionalProps {
+    }
+    interface RequiredProps {
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps, RequiredProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps, RequiredProps {
+    }
+}
+export declare const CircularIndeterminateIndicatorPropTypes: WeakValidationMap<unknown>;

package/dist/types/v2/styled.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-legacy-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledSvg: import("styled-components").StyledComponent<"svg", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledPath: import("styled-components").StyledComponent<"path", import("@elliemae/ds-legacy-system").Theme, {
+    r: number;
+} & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledRect: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledCircle: import("styled-components").StyledComponent<"circle", import("@elliemae/ds-legacy-system").Theme, {
+    r: number;
+} & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@elliemae/ds-legacy-circular-progress-indicator",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Circular progress indicator",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./v2/react-desc-prop-types": {
+      "import": "./dist/esm/v2/react-desc-prop-types.js",
+      "require": "./dist/cjs/v2/react-desc-prop-types.js"
+    },
+    "./v2": {
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/cjs/v2/index.js"
+    },
+    "./v2/DSCircularIndeterminateIndicator": {
+      "import": "./dist/esm/v2/DSCircularIndeterminateIndicator.js",
+      "require": "./dist/cjs/v2/DSCircularIndeterminateIndicator.js"
+    },
+    "./DSCircularProgressIndicator": {
+      "import": "./dist/esm/DSCircularProgressIndicator.js",
+      "require": "./dist/cjs/DSCircularProgressIndicator.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "styled-components": "~5.3.9",
+    "uid": "~2.0.1",
+    "@elliemae/ds-legacy-classnames": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-grid": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tooltip": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-utilities": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}