@elliemae/ds-legacy-square-indicator 1.0.0-rc.1

package/dist/cjs/DSSquareIndicator.js

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSSquareIndicator_exports = {};
+__export(DSSquareIndicator_exports, {
+  DSSquareIndicator: () => DSSquareIndicator,
+  DSSquareIndicatorWithSchema: () => DSSquareIndicatorWithSchema
+});
+module.exports = __toCommonJS(DSSquareIndicator_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
+var import_ds_legacy_tooltip = require("@elliemae/ds-legacy-tooltip");
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+var import_constants = require("./constants.js");
+const EmptyComp = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
+const DSSquareIndicator = (props) => {
+  const propsWithDefault = (0, import_ds_legacy_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const { height, width, cols, rows, wrap, ...globalAttributes } = (0, import_ds_legacy_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
+  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_legacy_tooltip.DSTooltipV3 : EmptyComp, [withTooltip]);
+  const uniqueId = (0, import_react.useMemo)(() => (0, import_uid.uid)(16), []);
+  const paddedCoordinate = (0, import_react.useMemo)(() => `calc(100% - ${import_constants.sizeToWeight[size]})`, [size]);
+  const hexColor = (0, import_react.useMemo)(() => import_constants.colorToHex[color], [color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_legacy_grid.Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: import_constants.sizeToPx[size],
+        height: import_constants.sizeToPx[size],
+        style: {
+          display: "block",
+          margin: "auto"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg1`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "20%", stopColor: `${hexColor}FF` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "80%", stopColor: `${hexColor}00` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg2`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${hexColor}00` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg3`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "10%", stopColor: `${hexColor}00` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${uniqueId}-lg4`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "50%", stopColor: `${hexColor}FF` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "90%", stopColor: `${hexColor}00` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp1`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: import_constants.sizeToWeight[size], y: 0, width: "100%", height: import_constants.sizeToWeight[size] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp2`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: paddedCoordinate, y: import_constants.sizeToWeight[size], width: import_constants.sizeToWeight[size], height: "100%" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: `${uniqueId}-lcp3`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 0, y: paddedCoordinate, width: paddedCoordinate, height: import_constants.sizeToWeight[size] }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineTop, { size, fill: `url(#${uniqueId}-lg2)`, clipPath: `url(#${uniqueId}-lcp1)` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineRight, { size, fill: `url(#${uniqueId}-lg3)`, clipPath: `url(#${uniqueId}-lcp2)` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineBottom, { size, fill: `url(#${uniqueId}-lg4)`, clipPath: `url(#${uniqueId}-lcp3)` })
+        ]
+      }
+    ),
+    text !== "" && showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: import_constants.colorToHex[color], fontSize: import_constants.sizeToTextSize[size] }, children: text })
+  ] }) });
+};
+DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
+DSSquareIndicator.displayName = "DSSquareIndicator";
+const DSSquareIndicatorWithSchema = (0, import_ds_legacy_props_helpers.describe)(DSSquareIndicator);
+DSSquareIndicatorWithSchema.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
+//# sourceMappingURL=DSSquareIndicator.js.map

package/dist/cjs/DSSquareIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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-legacy-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-legacy-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-legacy-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

@@ -0,0 +1,66 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  colorToHex: () => colorToHex,
+  sizeToPx: () => sizeToPx,
+  sizeToTextSize: () => sizeToTextSize,
+  sizeToWeight: () => sizeToWeight
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("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"
+};
+//# sourceMappingURL=constants.js.map

package/dist/cjs/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  DSSquareIndicator: () => import_DSSquareIndicator.DSSquareIndicator,
+  DSSquareIndicatorWithSchema: () => import_DSSquareIndicator.DSSquareIndicatorWithSchema
+});
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+var import_DSSquareIndicator = require("./DSSquareIndicator.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  SquareIndicatorPropTypes: () => SquareIndicatorPropTypes,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_props_helpers = require("@elliemae/ds-legacy-props-helpers");
+const SquareIndicatorPropTypes = {
+  ...import_ds_legacy_props_helpers.globalAttributesPropTypes,
+  size: import_ds_legacy_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: import_ds_legacy_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: import_ds_legacy_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: import_ds_legacy_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: import_ds_legacy_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: import_ds_legacy_props_helpers.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"
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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-legacy-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,qCAAqD;AA0B9C,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,yCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,yCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,yCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,yCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,yCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,yCAAU,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

@@ -0,0 +1,124 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledLineBottom: () => StyledLineBottom,
+  StyledLineLeft: () => StyledLineLeft,
+  StyledLineRight: () => StyledLineRight,
+  StyledLineTop: () => StyledLineTop
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+var import_constants = require("./constants.js");
+const lineLeftAnimation = import_ds_legacy_system.kfrm`
+    0% {
+        y: 100%;
+        height: 100%;
+    }
+    12.5%, 50% {
+        y: 0;
+        height: 100%;
+    }
+    62.5%, 100% {
+        y: -100%;
+        height: 100%;
+    }
+`;
+const lineTopAnimation = import_ds_legacy_system.kfrm`
+    0% {
+        x: -100%;
+        width: 0%;
+    }
+    25%, 50% {
+        x: -100%;
+        width: 200%;
+    }
+    75%, 100% {
+        x: 100%;
+        width: 200%;
+    }
+`;
+const lineRightAnimation = import_ds_legacy_system.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 = import_ds_legacy_system.kfrm`
+    0%, 25% {
+        x: 200%;
+        width: 200%;
+    }
+    50%, 75% {
+        x: 0%;
+        width: 200%;
+    }
+    100% {
+        x: -200%;
+        width: 200%;
+    }
+`;
+const StyledLineLeft = import_ds_legacy_system.styled.rect`
+  x: 0;
+  y: 0%;
+  width: ${({ size }) => import_constants.sizeToWeight[size]};
+  height: 100%;
+  animation: ${lineLeftAnimation} 2.5s linear 0s infinite;
+`;
+const StyledLineTop = import_ds_legacy_system.styled.rect`
+  x: -100%;
+  y: 0;
+  width: 200%;
+  height: ${({ size }) => import_constants.sizeToWeight[size]};
+  animation: ${lineTopAnimation} 2.5s linear 0s infinite;
+`;
+const StyledLineRight = import_ds_legacy_system.styled.rect`
+  x: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
+  y: -100%;
+  width: ${({ size }) => import_constants.sizeToWeight[size]};
+  height: 200%;
+  animation: ${lineRightAnimation} 2.5s linear 0s infinite;
+`;
+const StyledLineBottom = import_ds_legacy_system.styled.rect`
+  x: 0%;
+  y: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
+  width: 200%;
+  height: ${({ size }) => import_constants.sizeToWeight[size]};
+  animation: ${lineBottomAnimation} 2.5s linear 0s infinite;
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-legacy-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,8BAA6B;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,+BAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,gBAAgB,+BAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA,eAC5B;AAAA;AAGR,MAAM,kBAAkB,+BAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,WAEvC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI;AAAA;AAAA,eAE3B;AAAA;AAGR,MAAM,mBAAmB,+BAAO;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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import { DSTooltipV3 } from "@elliemae/ds-legacy-tooltip";
+import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-legacy-props-helpers";
+import { uid } from "uid";
+import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types.js";
+import { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled.js";
+import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants.js";
+const EmptyComp = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
+const DSSquareIndicator = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const { height, width, cols, rows, wrap, ...globalAttributes } = useGetGlobalAttributes(propsWithDefault);
+  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
+  const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
+  const uniqueId = useMemo(() => uid(16), []);
+  const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
+  const hexColor = useMemo(() => colorToHex[color], [color]);
+  return /* @__PURE__ */ jsx(Grid, { gutter: "xs", justifyContent: "center", role: "status", "aria-label": text || "Loading...", ...globalAttributes, children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: sizeToPx[size],
+        height: sizeToPx[size],
+        style: {
+          display: "block",
+          margin: "auto"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg1`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "20%", stopColor: `${hexColor}FF` }),
+              /* @__PURE__ */ jsx("stop", { offset: "80%", stopColor: `${hexColor}00` })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg2`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${hexColor}00` }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg3`, x1: "0", y1: "0", x2: "0", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "10%", stopColor: `${hexColor}00` }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${uniqueId}-lg4`, x1: "0", y1: "0", x2: "100%", y2: "0", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: `${hexColor}FF` }),
+              /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: `${hexColor}00` })
+            ] }),
+            /* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp1`, children: /* @__PURE__ */ jsx("rect", { x: sizeToWeight[size], y: 0, width: "100%", height: sizeToWeight[size] }) }),
+            /* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp2`, children: /* @__PURE__ */ jsx("rect", { x: paddedCoordinate, y: sizeToWeight[size], width: sizeToWeight[size], height: "100%" }) }),
+            /* @__PURE__ */ jsx("clipPath", { id: `${uniqueId}-lcp3`, children: /* @__PURE__ */ jsx("rect", { x: 0, y: paddedCoordinate, width: paddedCoordinate, height: sizeToWeight[size] }) })
+          ] }),
+          /* @__PURE__ */ jsx(StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)` }),
+          /* @__PURE__ */ jsx(StyledLineTop, { size, fill: `url(#${uniqueId}-lg2)`, clipPath: `url(#${uniqueId}-lcp1)` }),
+          /* @__PURE__ */ jsx(StyledLineRight, { size, fill: `url(#${uniqueId}-lg3)`, clipPath: `url(#${uniqueId}-lcp2)` }),
+          /* @__PURE__ */ jsx(StyledLineBottom, { size, fill: `url(#${uniqueId}-lg4)`, clipPath: `url(#${uniqueId}-lcp3)` })
+        ]
+      }
+    ),
+    text !== "" && showText && /* @__PURE__ */ jsx("span", { style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }, children: text })
+  ] }) });
+};
+DSSquareIndicator.propTypes = SquareIndicatorPropTypes;
+DSSquareIndicator.displayName = "DSSquareIndicator";
+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, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-legacy-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-legacy-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

@@ -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,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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DSSquareIndicator, DSSquareIndicatorWithSchema } from "./DSSquareIndicator.js";
+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.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-legacy-props-helpers";
+const SquareIndicatorPropTypes = {
+  ...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"
+};
+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 */\n\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-legacy-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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { kfrm, styled } from "@elliemae/ds-legacy-system";
+import { sizeToWeight } from "./constants.js";
+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} 2.5s linear 0s infinite;
+`;
+const StyledLineTop = styled.rect`
+  x: -100%;
+  y: 0;
+  width: 200%;
+  height: ${({ size }) => sizeToWeight[size]};
+  animation: ${lineTopAnimation} 2.5s linear 0s infinite;
+`;
+const StyledLineRight = styled.rect`
+  x: calc(100% - ${({ size }) => sizeToWeight[size]});
+  y: -100%;
+  width: ${({ size }) => sizeToWeight[size]};
+  height: 200%;
+  animation: ${lineRightAnimation} 2.5s linear 0s infinite;
+`;
+const StyledLineBottom = styled.rect`
+  x: 0%;
+  y: calc(100% - ${({ size }) => sizeToWeight[size]});
+  width: 200%;
+  height: ${({ size }) => sizeToWeight[size]};
+  animation: ${lineBottomAnimation} 2.5s 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 { kfrm, styled } from '@elliemae/ds-legacy-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/dist/types/DSSquareIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DSSquareIndicatorT } from './react-desc-prop-types.js';
+export declare const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props>;
+export declare const DSSquareIndicatorWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSquareIndicatorT.Props>;

package/dist/types/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const sizeToPx: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+export declare const sizeToWeight: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};
+export declare const colorToHex: {
+    light: string;
+    dark: string;
+};
+export declare const sizeToTextSize: {
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,13 @@
+import type { WeakValidationMap } from 'react';
+export declare namespace DSSquareIndicatorT {
+    interface Props {
+        size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+        color?: 'light' | 'dark';
+        text?: string;
+        showText?: boolean;
+        withTooltip: boolean;
+        tooltipStartPlacementPreference?: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+    }
+}
+export declare const SquareIndicatorPropTypes: WeakValidationMap<unknown>;
+export declare const defaultProps: DSSquareIndicatorT.Props;

package/dist/types/styled.d.ts

@@ -0,0 +1,9 @@
+import type { DSSquareIndicatorT } from './react-desc-prop-types.js';
+interface RectProps {
+    size: Required<DSSquareIndicatorT.Props>['size'];
+}
+export declare const StyledLineLeft: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-legacy-system").Theme, RectProps & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledLineTop: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-legacy-system").Theme, RectProps & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledLineRight: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-legacy-system").Theme, RectProps & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledLineBottom: import("styled-components").StyledComponent<"rect", import("@elliemae/ds-legacy-system").Theme, RectProps & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export {};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@elliemae/ds-legacy-square-indicator",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./react-desc-prop-types": {
+      "import": "./dist/esm/react-desc-prop-types.js",
+      "require": "./dist/cjs/react-desc-prop-types.js"
+    },
+    "./DSSquareIndicator": {
+      "import": "./dist/esm/DSSquareIndicator.js",
+      "require": "./dist/cjs/DSSquareIndicator.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "styled-components": "~5.3.9",
+    "uid": "^2.0.1",
+    "@elliemae/ds-legacy-grid": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tooltip": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "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",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}