@elliemae/ds-legacy-circular-progress-indicator 1.0.13 → 1.0.16

package/dist/cjs/v2/DSCircularIndeterminateIndicator.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_lodash = require("lodash");
+var import_lodash_es = require("lodash-es");
 var import_ds_legacy_tooltip = require("@elliemae/ds-legacy-tooltip");
 var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
 var import_uid = require("uid");
@@ -48,7 +48,7 @@ const DSCircularIndeterminateIndicator = (props) => {
     props,
     import_react_desc_prop_types.defaultProps
   );
-  const globalAttributes = (0, import_lodash.omit)((0, import_ds_legacy_props_helpers.useGetGlobalAttributes)(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
+  const globalAttributes = (0, import_lodash_es.omit)((0, import_ds_legacy_props_helpers.useGetGlobalAttributes)(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
   const xstyledAttributes = (0, import_ds_legacy_props_helpers.useGetXstyledProps)(propsWithDefault);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
   const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_legacy_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);

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

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

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
-import { omit } from "lodash";
+import { omit } from "lodash-es";
 import { DSTooltipV3 } from "@elliemae/ds-legacy-tooltip";
 import {
   describe,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { 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"],
+  "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-es';\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/types/v2/react-desc-prop-types.d.ts

@@ -1,6 +1,5 @@
 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';

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

@@ -1,11 +1,6 @@
-/// <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>;
+export declare const StyledContainer: any;
+export declare const StyledSvg: any;
+export declare const StyledPath: any;
+export declare const StyledRect: any;
+export declare const StyledCircle: any;
+export declare const StyledLabel: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-legacy-circular-progress-indicator",
-  "version": "1.0.13",
+  "version": "1.0.16",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
   "files": [
@@ -53,19 +53,19 @@
   "dependencies": {
     "styled-components": "~5.3.9",
     "uid": "~2.0.1",
-    "@elliemae/ds-legacy-classnames": "1.0.13",
-    "@elliemae/ds-legacy-grid": "1.0.13",
-    "@elliemae/ds-legacy-system": "1.0.13",
-    "@elliemae/ds-legacy-tooltip": "1.0.13",
-    "@elliemae/ds-legacy-props-helpers": "1.0.13",
-    "@elliemae/ds-legacy-utilities": "1.0.13"
+    "@elliemae/ds-legacy-grid": "1.0.16",
+    "@elliemae/ds-legacy-classnames": "1.0.16",
+    "@elliemae/ds-legacy-system": "1.0.16",
+    "@elliemae/ds-legacy-props-helpers": "1.0.16",
+    "@elliemae/ds-legacy-tooltip": "1.0.16",
+    "@elliemae/ds-legacy-utilities": "1.0.16"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
-    "@elliemae/ds-legacy-monorepo-devops": "1.0.13"
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.16"
   },
   "peerDependencies": {
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -75,7 +75,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests",
+    "test": "exit 0",
     "lint": "exit 0",
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
     "dts": "node ../../../scripts/dts.mjs",