@elliemae/ds-square-indicator 3.13.0 → 3.14.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -41,7 +41,7 @@ var import_constants = require("./constants");
|
|
|
41
41
|
const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
|
|
42
42
|
const DSSquareIndicator = (props) => {
|
|
43
43
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
44
|
-
const { height, width, cols, rows, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
44
|
+
const { height, width, cols, rows, wrap, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
45
45
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
46
46
|
const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
47
47
|
const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSquareIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n const { height, width, cols, rows, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADY0B;AAXjD,mBAA+B;AAC/B,qBAAqB;AACrB,wBAA4B;AAC5B,0BAA+E;AAC/E,iBAAoB;AAEpB,mCAAuD;AACvD,oBAAiF;AACjF,uBAAmE;AAGnE,MAAM,YAAgC,CAAC,UAAU,2EAAG,gBAAM,UAAS;AAE5D,MAAM,oBAAmE,CAAC,UAAU;AACzF,QAAM,uBAAmB,kDAAiE,OAAO,yCAAY;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants"
|
|
|
11
11
|
const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
|
|
12
12
|
const DSSquareIndicator = (props) => {
|
|
13
13
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
14
|
-
const { height, width, cols, rows, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
|
|
14
|
+
const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
|
|
15
15
|
const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
|
|
16
16
|
const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
|
|
17
17
|
const uniqueId = useMemo(() => uid(16), []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n const { height, width, cols, rows, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACY0B,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: typeof DSTooltipV3 = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n // eslint-disable-next-line no-unused-vars\n const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(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 const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n const hexColor = useMemo(() => colorToHex[color], [color]);\n\n return (\n <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" aria-label={text || 'Loading...'} {...globalAttributes}>\n <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n <svg\n width={sizeToPx[size]}\n height={sizeToPx[size]}\n style={{\n display: 'block',\n margin: 'auto',\n }}\n >\n <defs>\n <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n </linearGradient>\n <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n </linearGradient>\n <clipPath id={`${uniqueId}-lcp1`}>\n <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp2`}>\n <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n </clipPath>\n <clipPath id={`${uniqueId}-lcp3`}>\n <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n </clipPath>\n </defs>\n <StyledLineLeft size={size} fill={`url(#${uniqueId}-lg1)`} />\n <StyledLineTop size={size} fill={`url(#${uniqueId}-lg2)`} clipPath={`url(#${uniqueId}-lcp1)`} />\n <StyledLineRight size={size} fill={`url(#${uniqueId}-lg3)`} clipPath={`url(#${uniqueId}-lcp2)`} />\n <StyledLineBottom size={size} fill={`url(#${uniqueId}-lg4)`} clipPath={`url(#${uniqueId}-lcp3)`} />\n </svg>\n {text !== '' && showText && (\n <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n )}\n </Wrapper>\n </Grid>\n );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\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-square-indicator",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.14.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
|
|
6
6
|
"files": [
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"styled-components": "~5.3.6",
|
|
47
47
|
"uid": "^2.0.0",
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-utilities": "3.
|
|
48
|
+
"@elliemae/ds-system": "3.14.0-next.1",
|
|
49
|
+
"@elliemae/ds-grid": "3.14.0-next.1",
|
|
50
|
+
"@elliemae/ds-tooltip": "3.14.0-next.1",
|
|
51
|
+
"@elliemae/ds-utilities": "3.14.0-next.1"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"react": "^17.0.2",
|