@elliemae/ds-square-indicator 2.3.1 → 3.0.0-alpha.3

package/dist/esm/DSSquareIndicator.js

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { uid } from "uid";
+import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types";
+import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled";
+import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants";
+const DSSquareIndicator = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
+  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children), [withTooltip]);
+  const uniqueId = useMemo(() => uid(16), []);
+  const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
+  const hexColor = useMemo(() => colorToHex[color], [color]);
+  return /* @__PURE__ */ React2.createElement(Grid, __spreadValues({
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, globalAttributes), /* @__PURE__ */ React2.createElement(Wrapper, {
+    text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, /* @__PURE__ */ React2.createElement("svg", {
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: {
+      display: "block",
+      margin: "auto"
+    }
+  }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: `${uniqueId}-lg1`,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "100%"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "20%",
+    stopColor: `${hexColor}FF`
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "80%",
+    stopColor: `${hexColor}00`
+  })), /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: `${uniqueId}-lg2`,
+    x1: "0",
+    y1: "0",
+    x2: "100%",
+    y2: "0"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "10%",
+    stopColor: `${hexColor}00`
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  })), /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: `${uniqueId}-lg3`,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "100%"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "10%",
+    stopColor: `${hexColor}00`
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  })), /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: `${uniqueId}-lg4`,
+    x1: "0",
+    y1: "0",
+    x2: "100%",
+    y2: "0"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "90%",
+    stopColor: `${hexColor}00`
+  })), /* @__PURE__ */ React2.createElement("clipPath", {
+    id: `${uniqueId}-lcp1`
+  }, /* @__PURE__ */ React2.createElement("rect", {
+    x: sizeToWeight[size],
+    y: 0,
+    width: "100%",
+    height: sizeToWeight[size]
+  })), /* @__PURE__ */ React2.createElement("clipPath", {
+    id: `${uniqueId}-lcp2`
+  }, /* @__PURE__ */ React2.createElement("rect", {
+    x: paddedCoordinate,
+    y: sizeToWeight[size],
+    width: sizeToWeight[size],
+    height: "100%"
+  })), /* @__PURE__ */ React2.createElement("clipPath", {
+    id: `${uniqueId}-lcp3`
+  }, /* @__PURE__ */ React2.createElement("rect", {
+    x: 0,
+    y: paddedCoordinate,
+    width: paddedCoordinate,
+    height: sizeToWeight[size]
+  }))), /* @__PURE__ */ React2.createElement(StyledLineLeft, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg1)`
+  }), /* @__PURE__ */ React2.createElement(StyledLineTop, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg2)`,
+    clipPath: `url(#${uniqueId}-lcp1)`
+  }), /* @__PURE__ */ React2.createElement(StyledLineRight, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg3)`,
+    clipPath: `url(#${uniqueId}-lcp2)`
+  }), /* @__PURE__ */ React2.createElement(StyledLineBottom, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg4)`,
+    clipPath: `url(#${uniqueId}-lcp3)`
+  })), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
+    style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
+  }, text)));
+};
+DSSquareIndicator.propTypes = SquareIndicatorPropTypes;
+const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);
+DSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;
+export {
+  DSSquareIndicator,
+  DSSquareIndicatorWithSchema
+};
+//# sourceMappingURL=DSSquareIndicator.js.map

package/dist/esm/DSSquareIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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, { PropsWithChildren, 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 { defaultProps, DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(\n    () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n    [withTooltip],\n  );\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\" {...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} __duration={__duration} fill={`url(#${uniqueId}-lg1)`} />\n          <StyledLineTop\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg2)`}\n            clipPath={`url(#${uniqueId}-lcp1)`}\n          />\n          <StyledLineRight\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg3)`}\n            clipPath={`url(#${uniqueId}-lcp2)`}\n          />\n          <StyledLineBottom\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg4)`}\n            clipPath={`url(#${uniqueId}-lcp3)`}\n          />\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;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/constants.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+const sizeToPx = {
+  xs: "16px",
+  s: "24px",
+  m: "32px",
+  l: "48px",
+  xl: "56px",
+  xxl: "64px"
+};
+const sizeToWeight = {
+  xs: "3px",
+  s: "3px",
+  m: "3px",
+  l: "4px",
+  xl: "5px",
+  xxl: "6px"
+};
+const colorToHex = {
+  light: "#FFFFFF",
+  dark: "#0F364A"
+};
+const sizeToTextSize = {
+  xs: "12px",
+  s: "12px",
+  m: "12px",
+  l: "13px",
+  xl: "14px",
+  xxl: "16px"
+};
+export {
+  colorToHex,
+  sizeToPx,
+  sizeToTextSize,
+  sizeToWeight
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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;ACAO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DSSquareIndicator, DSSquareIndicatorWithSchema } from "./DSSquareIndicator";
+export {
+  DSSquareIndicator,
+  DSSquareIndicatorWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

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

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+const SquareIndicatorPropTypes = __spreadProps(__spreadValues({}, globalAttributesPropTypes), {
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ]).description("start placement preference for the tooltip").defaultValue("center")
+});
+const defaultProps = {
+  size: "m",
+  color: "dark",
+  text: "",
+  showText: true,
+  withTooltip: false,
+  tooltipStartPlacementPreference: "bottom",
+  __duration: 2.5
+};
+export {
+  SquareIndicatorPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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 */\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { 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    __duration: number;\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  __duration: 2.5,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AA2BO,MAAM,2BAA2B,iCACnC,4BADmC;AAAA,EAEtC,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,UAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,UAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,UAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,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,KAEC,YAAY,8CACZ,aAAa;AAAA;AAGX,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import styled from "styled-components";
+import { kfrm } from "@elliemae/ds-system";
+import { sizeToWeight } from "./constants";
+const lineLeftAnimation = kfrm`
+    0% {
+        y: 100%;
+        height: 100%;
+    }
+    12.5%, 50% {
+        y: 0;
+        height: 100%;
+    }
+    62.5%, 100% {
+        y: -100%;
+        height: 100%;
+    }
+`;
+const lineTopAnimation = kfrm`
+    0% {
+        x: -100%;
+        width: 0%;
+    }
+    25%, 50% {
+        x: -100%;
+        width: 200%;
+    }
+    75%, 100% {
+        x: 100%;
+        width: 200%;
+    }
+`;
+const lineRightAnimation = kfrm`
+    0%, 12.5% {
+        y: -100%;
+        height: 0%;
+    }
+    37.5%, 62.5% {
+        y: -100%;
+        height: 200%;
+    }
+    87.5%, 100% {
+        y: 100%;
+        height: 200%;
+    }
+`;
+const lineBottomAnimation = kfrm`
+    0%, 25% {
+        x: 200%;
+        width: 200%;
+    }
+    50%, 75% {
+        x: 0%;
+        width: 200%;
+    }
+    100% {
+        x: -200%;
+        width: 200%;
+    }
+`;
+const StyledLineLeft = styled.rect`
+  x: 0;
+  y: 0%;
+  width: ${({ size }) => sizeToWeight[size]};
+  height: 100%;
+  animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineTop = styled.rect`
+  x: -100%;
+  y: 0;
+  width: 200%;
+  height: ${({ size }) => sizeToWeight[size]};
+  animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineRight = styled.rect`
+  x: calc(100% - ${({ size }) => sizeToWeight[size]});
+  y: -100%;
+  width: ${({ size }) => sizeToWeight[size]};
+  height: 200%;
+  animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineBottom = styled.rect`
+  x: 0%;
+  y: calc(100% - ${({ size }) => sizeToWeight[size]});
+  width: 200%;
+  height: ${({ size }) => sizeToWeight[size]};
+  animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+export {
+  StyledLineBottom,
+  StyledLineLeft,
+  StyledLineRight,
+  StyledLineTop
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n  size: Required<DSSquareIndicatorT.Props>['size'];\n  __duration: number;\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} ${({ __duration }) => __duration}s 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} ${({ __duration }) => __duration}s 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} ${({ __duration }) => __duration}s 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} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AAOA,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,WAAW,aAAa;AAAA;AAAA,eAEvB,qBAAqB,CAAC,EAAE,iBAAiB;AAAA;AAGjD,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,WAAW,aAAa;AAAA,eACxB,oBAAoB,CAAC,EAAE,iBAAiB;AAAA;AAGhD,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,eAEvB,sBAAsB,CAAC,EAAE,iBAAiB;AAAA;AAGlD,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,YAElC,CAAC,EAAE,WAAW,aAAa;AAAA,eACxB,uBAAuB,CAAC,EAAE,iBAAiB;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,31 +1,26 @@
 {
   "name": "@elliemae/ds-square-indicator",
-  "version": "2.3.1",
+  "version": "3.0.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
-    },
-    "./styled": {
-      "import": "./esm/styled.js",
-      "require": "./cjs/styled.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./react-desc-prop-types": {
-      "import": "./esm/react-desc-prop-types.js",
-      "require": "./cjs/react-desc-prop-types.js"
+      "import": "./dist/esm/react-desc-prop-types.js",
+      "require": "./dist/cjs/react-desc-prop-types.js"
     },
     "./DSSquareIndicator": {
-      "import": "./esm/DSSquareIndicator.js",
-      "require": "./cjs/DSSquareIndicator.js"
-    },
-    "./constants": {
-      "import": "./esm/constants.js",
-      "require": "./cjs/constants.js"
+      "import": "./dist/esm/DSSquareIndicator.js",
+      "require": "./dist/cjs/DSSquareIndicator.js"
     }
   },
   "sideEffects": [
@@ -37,31 +32,35 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "2.3.1",
-    "@elliemae/ds-props-helpers": "2.3.1",
-    "@elliemae/ds-system": "2.3.1",
-    "@elliemae/ds-tooltip": "2.3.1",
-    "uid": "~2.0.0"
+    "@elliemae/ds-grid": "3.0.0-alpha.3",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.3",
+    "@elliemae/ds-tooltip": "3.0.0-alpha.3",
+    "react-desc": "~4.1.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "react-dom": "^17.0.2"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }