@elliemae/ds-square-indicator 3.22.0-next.8 → 3.22.0-rc.1

package/dist/cjs/DSSquareIndicator.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/DSSquareIndicator.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/DSSquareIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "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-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\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"],
   "mappings": "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",
   "names": []

package/dist/cjs/constants.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/constants.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\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: '#FFFFFF',\n  dark: '#0F364A',\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", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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;",
   "names": []

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\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}\n\nexport const SquareIndicatorPropTypes = {\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\nexport const defaultProps: DSSquareIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;AA0B9C,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,kCAAU,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;AAEO,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
   "names": []

package/dist/cjs/styled.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n  size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n    0% {\n        y: 100%;\n        height: 100%;\n    }\n    12.5%, 50% {\n        y: 0;\n        height: 100%;\n    }\n    62.5%, 100% {\n        y: -100%;\n        height: 100%;\n    }\n`;\n\nconst lineTopAnimation = kfrm`\n    0% {\n        x: -100%;\n        width: 0%;\n    }\n    25%, 50% {\n        x: -100%;\n        width: 200%;\n    }\n    75%, 100% {\n        x: 100%;\n        width: 200%;\n    }\n`;\n\nconst lineRightAnimation = kfrm`\n    0%, 12.5% {\n        y: -100%;\n        height: 0%;\n    }\n    37.5%, 62.5% {\n        y: -100%;\n        height: 200%;\n    }\n    87.5%, 100% {\n        y: 100%;\n        height: 200%;\n    }\n`;\n\nconst lineBottomAnimation = kfrm`\n    0%, 25% {\n        x: 200%;\n        width: 200%;\n    }\n    50%, 75% {\n        x: 0%;\n        width: 200%;\n    }\n    100% {\n        x: -200%;\n        width: 200%;\n    }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n  x: 0;\n  y: 0%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 100%;\n  animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n  x: -100%;\n  y: 0;\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n  x: calc(100% - ${({ size }) => sizeToWeight[size]});\n  y: -100%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 200%;\n  animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n  x: 0%;\n  y: calc(100% - ${({ size }) => sizeToWeight[size]});\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAE7B,uBAA6B;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA,eAC5B;AAAA;AAGR,MAAM,kBAAkB,wBAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,WAEvC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,mBAAmB,wBAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,YAEtC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA,eAC5B;AAAA;",
   "names": []

package/dist/esm/DSSquareIndicator.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSquareIndicator.tsx"],
   "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-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants.js';\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"],
   "mappings": "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",
   "names": []

package/dist/esm/constants.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\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: '#FFFFFF',\n  dark: '#0F364A',\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"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,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;",
   "names": []

package/dist/esm/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;",
   "names": []

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\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}\n\nexport const SquareIndicatorPropTypes = {\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\nexport const defaultProps: DSSquareIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;AA0B9C,MAAM,2BAA2B;AAAA,EACtC,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;AAEO,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;",
   "names": []

package/dist/esm/styled.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, styled } from '@elliemae/ds-system';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { sizeToWeight } from './constants.js';\n\ninterface RectProps {\n  size: Required<DSSquareIndicatorT.Props>['size'];\n}\n\nconst lineLeftAnimation = kfrm`\n    0% {\n        y: 100%;\n        height: 100%;\n    }\n    12.5%, 50% {\n        y: 0;\n        height: 100%;\n    }\n    62.5%, 100% {\n        y: -100%;\n        height: 100%;\n    }\n`;\n\nconst lineTopAnimation = kfrm`\n    0% {\n        x: -100%;\n        width: 0%;\n    }\n    25%, 50% {\n        x: -100%;\n        width: 200%;\n    }\n    75%, 100% {\n        x: 100%;\n        width: 200%;\n    }\n`;\n\nconst lineRightAnimation = kfrm`\n    0%, 12.5% {\n        y: -100%;\n        height: 0%;\n    }\n    37.5%, 62.5% {\n        y: -100%;\n        height: 200%;\n    }\n    87.5%, 100% {\n        y: 100%;\n        height: 200%;\n    }\n`;\n\nconst lineBottomAnimation = kfrm`\n    0%, 25% {\n        x: 200%;\n        width: 200%;\n    }\n    50%, 75% {\n        x: 0%;\n        width: 200%;\n    }\n    100% {\n        x: -200%;\n        width: 200%;\n    }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n  x: 0;\n  y: 0%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 100%;\n  animation: ${lineLeftAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n  x: -100%;\n  y: 0;\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineTopAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n  x: calc(100% - ${({ size }) => sizeToWeight[size]});\n  y: -100%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 200%;\n  animation: ${lineRightAnimation} 2.5s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n  x: 0%;\n  y: calc(100% - ${({ size }) => sizeToWeight[size]});\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineBottomAnimation} 2.5s linear 0s infinite;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,MAAM,cAAc;AAE7B,SAAS,oBAAoB;AAM7B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe1B,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA,eAC5B;AAAA;AAGR,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,WAEvC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA;AAAA,YAEtC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI;AAAA,eAC5B;AAAA;",
   "names": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-square-indicator",
-  "version": "3.22.0-next.8",
+  "version": "3.22.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
   "files": [
@@ -45,14 +45,18 @@
   "dependencies": {
     "styled-components": "~5.3.9",
     "uid": "^2.0.1",
-    "@elliemae/ds-props-helpers": "3.22.0-next.8",
-    "@elliemae/ds-grid": "3.22.0-next.8",
-    "@elliemae/ds-system": "3.22.0-next.8",
-    "@elliemae/ds-tooltip": "3.22.0-next.8"
+    "@elliemae/ds-grid": "3.22.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.22.0-rc.1",
+    "@elliemae/ds-system": "3.22.0-rc.1",
+    "@elliemae/ds-tooltip": "3.22.0-rc.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "~9.0.0-next.17",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.8"
+    "@elliemae/pui-cli": "~9.0.0-next.22",
+    "@testing-library/jest-dom": "~5.16.5",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.22.0-rc.1"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -63,14 +67,14 @@
     "typeSafety": false
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "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",
+    "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 ../ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }
 }