@elliemae/ds-circular-progress-indicator 3.33.0-next.0 → 3.33.0-next.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -35,7 +35,6 @@ module.exports = __toCommonJS(DSCircularIndeterminateIndicator_exports);
35
35
  var React = __toESM(require("react"));
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
37
  var import_react = require("react");
38
- var import_lodash = require("lodash");
39
38
  var import_ds_tooltip = require("@elliemae/ds-tooltip");
40
39
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
41
40
  var import_uid = require("uid");
@@ -48,7 +47,7 @@ const DSCircularIndeterminateIndicator = (props) => {
48
47
  props,
49
48
  import_react_desc_prop_types.defaultProps
50
49
  );
51
- const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
50
+ const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
52
51
  const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
53
52
  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
54
53
  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/v2/DSCircularIndeterminateIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useMemo, useCallback } from "react";
4
- import { omit } from "lodash";
5
4
  import { DSTooltipV3 } from "@elliemae/ds-tooltip";
6
5
  import {
7
6
  describe,
@@ -25,7 +24,7 @@ const DSCircularIndeterminateIndicator = (props) => {
25
24
  props,
26
25
  defaultProps
27
26
  );
28
- const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), ["height", "width", "rows", "cols", "wrap"]);
27
+ const globalAttributes = useGetGlobalAttributes(propsWithDefault);
29
28
  const xstyledAttributes = useGetXstyledProps(propsWithDefault);
30
29
  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
31
30
  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
4
- "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-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport {\n describe,\n useGetGlobalAttributes,\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types.js';\nimport { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';\nimport {\n colorToHex,\n sizeToPx,\n sizeToTextSize,\n sizeToWeight,\n DSCircularIndeterminateIndicatorName,\n} from './constants.js';\nimport { StyledCircle, StyledContainer, StyledPath, StyledRect, StyledSvg, StyledLabel } from './styled.js';\nimport type { DSGridT } from '@elliemae/ds-grid';\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 = useGetGlobalAttributes<\n DSCircularIndeterminateIndicatorT.InternalProps,\n HTMLDivElement,\n DSGridT.Props\n >(propsWithDefault);\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "3.33.0-next.0",
3
+ "version": "3.33.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "files": [
@@ -53,16 +53,16 @@
53
53
  "dependencies": {
54
54
  "styled-components": "~5.3.9",
55
55
  "uid": "~2.0.1",
56
- "@elliemae/ds-classnames": "3.33.0-next.0",
57
- "@elliemae/ds-props-helpers": "3.33.0-next.0",
58
- "@elliemae/ds-system": "3.33.0-next.0",
59
- "@elliemae/ds-tooltip": "3.33.0-next.0",
60
- "@elliemae/ds-utilities": "3.33.0-next.0",
61
- "@elliemae/ds-grid": "3.33.0-next.0"
56
+ "@elliemae/ds-classnames": "3.33.0-next.2",
57
+ "@elliemae/ds-grid": "3.33.0-next.2",
58
+ "@elliemae/ds-props-helpers": "3.33.0-next.2",
59
+ "@elliemae/ds-system": "3.33.0-next.2",
60
+ "@elliemae/ds-tooltip": "3.33.0-next.2",
61
+ "@elliemae/ds-utilities": "3.33.0-next.2"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@elliemae/pui-cli": "~9.0.0-next.31",
65
- "@elliemae/ds-monorepo-devops": "3.33.0-next.0"
65
+ "@elliemae/ds-monorepo-devops": "3.33.0-next.2"
66
66
  },
67
67
  "peerDependencies": {
68
68
  "lodash": "^4.17.21",