@elliemae/ds-square-indicator 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/cjs/DSSquareIndicator.js

@@ -0,0 +1,111 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DSSquareIndicator_exports = {};
+__export(DSSquareIndicator_exports, {
+  DSSquareIndicator: () => DSSquareIndicator,
+  DSSquareIndicatorWithSchema: () => DSSquareIndicatorWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_tooltip = require("@elliemae/ds-tooltip");
+var import_react_desc = require("react-desc");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+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"
+};
+const DSSquareIndicator = ({
+  size = "m",
+  color = "dark",
+  text = "",
+  showText = true,
+  withTooltip = false,
+  tooltipStartPlacementPreference = "bottom",
+  __duration = 2.5
+}) => {
+  const Wrapper = withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, /* @__PURE__ */ import_react.default.createElement("svg", {
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: { display: "block", margin: "auto" }
+  }, /* @__PURE__ */ import_react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "transparent",
+    strokeWidth: sizeToWeight[size],
+    strokeDasharray: "400% 400%",
+    stroke: colorToHex[color]
+  }, /* @__PURE__ */ import_react.default.createElement("animate", {
+    attributeName: "stroke-dashoffset",
+    values: "800%;0",
+    keyTimes: "0;1",
+    dur: `${__duration}s`,
+    repeatCount: "indefinite",
+    restart: "always"
+  }))), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
+    style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
+  }, text)));
+};
+DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
+const DSSquareIndicatorWithSchema = (0, import_react_desc.describe)(DSSquareIndicator);
+DSSquareIndicatorWithSchema.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
+module.exports = __toCommonJS(DSSquareIndicator_exports);
+//# 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": ["import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport { DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\n\nconst sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\n};\n\nconst sizeToWeight = {\n  xs: '3px',\n  s: '3px',\n  m: '3px',\n  l: '4px',\n  xl: '5px',\n  xxl: '6px',\n};\n\nconst colorToHex = {\n  light: '#FFFFFF',\n  dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n\nexport const DSSquareIndicator: React.ComponentType<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  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <svg width={sizeToPx[size]} height={sizeToPx[size]} style={{ display: 'block', margin: 'auto' }}>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"transparent\"\n            strokeWidth={sizeToWeight[size]}\n            strokeDasharray=\"400% 400%\"\n            stroke={colorToHex[color]}\n          >\n            <animate\n              attributeName=\"stroke-dashoffset\"\n              values=\"800%;0\"\n              keyTimes=\"0;1\"\n              dur={`${__duration}s`}\n              repeatCount=\"indefinite\"\n              restart=\"always\"\n            />\n          </rect>\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 as WeakValidationMap<unknown>;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,qBAAqB;AACrB,wBAA4B;AAC5B,wBAAyB;AACzB,mCAA6D;AAE7D,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,oBAAmE,CAAC;AAAA,EAC/E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,gCAAc,CAAC,EAAE,eAA2C,wFAAG;AAE7F,SACE,mDAAC,qBAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,mDAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,mDAAC,OAAD;AAAA,IAAK,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,KACrF,mDAAC,QAAD;AAAA,IACE,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAa,aAAa;AAAA,IAC1B,iBAAgB;AAAA,IAChB,QAAQ,WAAW;AAAA,KAEnB,mDAAC,WAAD;AAAA,IACE,eAAc;AAAA,IACd,QAAO;AAAA,IACP,UAAS;AAAA,IACT,KAAK,GAAG;AAAA,IACR,aAAY;AAAA,IACZ,SAAQ;AAAA,QAIb,SAAS,MAAM,YACd,mDAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,kBAAkB,YAAY;AAEvB,MAAM,8BAA8B,gCAAS;AACpD,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  DSSquareIndicator: () => import_DSSquareIndicator.DSSquareIndicator,
+  DSSquareIndicatorWithSchema: () => import_DSSquareIndicator.DSSquareIndicatorWithSchema
+});
+var React = __toESM(require("react"));
+var import_DSSquareIndicator = require("./DSSquareIndicator");
+module.exports = __toCommonJS(src_exports);
+//# 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';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
+  "names": []
+}

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

@@ -0,0 +1,56 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  SquareIndicatorPropTypes: () => SquareIndicatorPropTypes
+});
+var React = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+const SquareIndicatorPropTypes = {
+  size: import_react_desc.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: import_react_desc.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: import_react_desc.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: import_react_desc.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: import_react_desc.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: import_react_desc.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")
+};
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+//# 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 */\nimport { PropTypes } from 'react-desc';\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  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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,wBAA0B;AA0BnB,MAAM,2BAA2B;AAAA,EACtC,MAAM,4BAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,4BAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,4BAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,4BAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,4BAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,4BAAU,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;",
+  "names": []
+}

package/dist/esm/DSSquareIndicator.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { describe } from "react-desc";
+import { SquareIndicatorPropTypes } from "./react-desc-prop-types";
+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"
+};
+const DSSquareIndicator = ({
+  size = "m",
+  color = "dark",
+  text = "",
+  showText = true,
+  withTooltip = false,
+  tooltipStartPlacementPreference = "bottom",
+  __duration = 2.5
+}) => {
+  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, /* @__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("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "transparent",
+    strokeWidth: sizeToWeight[size],
+    strokeDasharray: "400% 400%",
+    stroke: colorToHex[color]
+  }, /* @__PURE__ */ React2.createElement("animate", {
+    attributeName: "stroke-dashoffset",
+    values: "800%;0",
+    keyTimes: "0;1",
+    dur: `${__duration}s`,
+    repeatCount: "indefinite",
+    restart: "always"
+  }))), 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", "import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport { DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\n\nconst sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\n};\n\nconst sizeToWeight = {\n  xs: '3px',\n  s: '3px',\n  m: '3px',\n  l: '4px',\n  xl: '5px',\n  xxl: '6px',\n};\n\nconst colorToHex = {\n  light: '#FFFFFF',\n  dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n\nexport const DSSquareIndicator: React.ComponentType<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  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <svg width={sizeToPx[size]} height={sizeToPx[size]} style={{ display: 'block', margin: 'auto' }}>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"transparent\"\n            strokeWidth={sizeToWeight[size]}\n            strokeDasharray=\"400% 400%\"\n            stroke={colorToHex[color]}\n          >\n            <animate\n              attributeName=\"stroke-dashoffset\"\n              values=\"800%;0\"\n              keyTimes=\"0;1\"\n              dur={`${__duration}s`}\n              repeatCount=\"indefinite\"\n              restart=\"always\"\n            />\n          </rect>\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 as WeakValidationMap<unknown>;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,oBAAmE,CAAC;AAAA,EAC/E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,cAAc,CAAC,EAAE,eAA2C,4DAAG;AAE7F,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,OAAD;AAAA,IAAK,OAAO,SAAS;AAAA,IAAO,QAAQ,SAAS;AAAA,IAAO,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,KACrF,qCAAC,QAAD;AAAA,IACE,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAa,aAAa;AAAA,IAC1B,iBAAgB;AAAA,IAChB,QAAQ,WAAW;AAAA,KAEnB,qCAAC,WAAD;AAAA,IACE,eAAc;AAAA,IACd,QAAO;AAAA,IACP,UAAS;AAAA,IACT,KAAK,GAAG;AAAA,IACR,aAAY;AAAA,IACZ,SAAQ;AAAA,QAIb,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,kBAAkB,YAAY;AAEvB,MAAM,8BAA8B,SAAS;AACpD,4BAA4B,YAAY;",
+  "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,27 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const SquareIndicatorPropTypes = {
+  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")
+};
+export {
+  SquareIndicatorPropTypes
+};
+//# 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 } from 'react-desc';\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  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};\n"],
+  "mappings": "AAAA;ACCA;AA0BO,MAAM,2BAA2B;AAAA,EACtC,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;",
+  "names": []
+}

package/{esm/index.js → dist/types/index.d.ts}

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

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@elliemae/ds-square-indicator",
-  "version": "2.3.0-next.3",
+  "version": "3.0.0-alpha.0",
   "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"
+      "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"
+      "import": "./dist/esm/DSSquareIndicator.js",
+      "require": "./dist/cjs/DSSquareIndicator.js"
     }
   },
   "sideEffects": [
@@ -29,18 +32,19 @@
     "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.0-next.3",
+    "@elliemae/ds-grid": "3.0.0-alpha.0",
+    "@elliemae/ds-tooltip": "3.0.0-alpha.0",
     "react-desc": "~4.1.3"
   },
   "peerDependencies": {
@@ -49,7 +53,12 @@
   },
   "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",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSSquareIndicator.js

@@ -1,103 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx2 = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsGrid = require('@elliemae/ds-grid');
-var dsTooltip = require('@elliemae/ds-tooltip');
-var reactDesc = require('react-desc');
-var reactDescPropTypes = require('./react-desc-prop-types.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
-
-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'
-};
-const DSSquareIndicator = _ref => {
-  let {
-    size = 'm',
-    color = 'dark',
-    text = '',
-    showText = true,
-    withTooltip = false,
-    tooltipStartPlacementPreference = 'bottom',
-    __duration = 2.5
-  } = _ref;
-  const Wrapper = withTooltip ? dsTooltip.DSTooltipV3 : _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: children
-    });
-  };
-  return /*#__PURE__*/_jsx2__default["default"](dsGrid.Grid, {
-    gutter: "xs",
-    justifyContent: "center",
-    role: "status"
-  }, void 0, /*#__PURE__*/_jsx2__default["default"](Wrapper, {
-    text: text,
-    textAlign: "center",
-    startPlacementPreference: tooltipStartPlacementPreference
-  }, void 0, /*#__PURE__*/_jsx2__default["default"]("svg", {
-    width: sizeToPx[size],
-    height: sizeToPx[size],
-    style: {
-      display: 'block',
-      margin: 'auto'
-    }
-  }, void 0, /*#__PURE__*/_jsx2__default["default"]("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "transparent",
-    strokeWidth: sizeToWeight[size],
-    strokeDasharray: "400% 400%",
-    stroke: colorToHex[color]
-  }, void 0, /*#__PURE__*/_jsx2__default["default"]("animate", {
-    attributeName: "stroke-dashoffset",
-    values: "800%;0",
-    keyTimes: "0;1",
-    dur: "".concat(__duration, "s"),
-    repeatCount: "indefinite",
-    restart: "always"
-  }))), text !== '' && showText && /*#__PURE__*/_jsx2__default["default"]("span", {
-    style: {
-      color: colorToHex[color],
-      fontSize: sizeToTextSize[size]
-    }
-  }, void 0, text)));
-};
-const DSSquareIndicatorWithSchema = reactDesc.describe(DSSquareIndicator);
-DSSquareIndicatorWithSchema.propTypes = reactDescPropTypes.SquareIndicatorPropTypes;
-
-exports.DSSquareIndicator = DSSquareIndicator;
-exports.DSSquareIndicatorWithSchema = DSSquareIndicatorWithSchema;

package/cjs/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSSquareIndicator = require('./DSSquareIndicator.js');
-
-
-
-exports.DSSquareIndicator = DSSquareIndicator.DSSquareIndicator;
-exports.DSSquareIndicatorWithSchema = DSSquareIndicator.DSSquareIndicatorWithSchema;

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

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-/* eslint-disable max-lines */
-const SquareIndicatorPropTypes = {
-  size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
-  color: reactDesc.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
-  text: reactDesc.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
-  showText: reactDesc.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
-  withTooltip: reactDesc.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
-  tooltipStartPlacementPreference: reactDesc.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')
-};
-
-exports.SquareIndicatorPropTypes = SquareIndicatorPropTypes;

package/esm/DSSquareIndicator.js

@@ -1,94 +0,0 @@
-import _jsx2 from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { Grid } from '@elliemae/ds-grid';
-import { DSTooltipV3 } from '@elliemae/ds-tooltip';
-import { describe } from 'react-desc';
-import { SquareIndicatorPropTypes } from './react-desc-prop-types.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-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'
-};
-const DSSquareIndicator = _ref => {
-  let {
-    size = 'm',
-    color = 'dark',
-    text = '',
-    showText = true,
-    withTooltip = false,
-    tooltipStartPlacementPreference = 'bottom',
-    __duration = 2.5
-  } = _ref;
-  const Wrapper = withTooltip ? DSTooltipV3 : _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/jsx(Fragment, {
-      children: children
-    });
-  };
-  return /*#__PURE__*/_jsx2(Grid, {
-    gutter: "xs",
-    justifyContent: "center",
-    role: "status"
-  }, void 0, /*#__PURE__*/_jsx2(Wrapper, {
-    text: text,
-    textAlign: "center",
-    startPlacementPreference: tooltipStartPlacementPreference
-  }, void 0, /*#__PURE__*/_jsx2("svg", {
-    width: sizeToPx[size],
-    height: sizeToPx[size],
-    style: {
-      display: 'block',
-      margin: 'auto'
-    }
-  }, void 0, /*#__PURE__*/_jsx2("rect", {
-    width: "100%",
-    height: "100%",
-    fill: "transparent",
-    strokeWidth: sizeToWeight[size],
-    strokeDasharray: "400% 400%",
-    stroke: colorToHex[color]
-  }, void 0, /*#__PURE__*/_jsx2("animate", {
-    attributeName: "stroke-dashoffset",
-    values: "800%;0",
-    keyTimes: "0;1",
-    dur: "".concat(__duration, "s"),
-    repeatCount: "indefinite",
-    restart: "always"
-  }))), text !== '' && showText && /*#__PURE__*/_jsx2("span", {
-    style: {
-      color: colorToHex[color],
-      fontSize: sizeToTextSize[size]
-    }
-  }, void 0, text)));
-};
-const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);
-DSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;
-
-export { DSSquareIndicator, DSSquareIndicatorWithSchema };

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

@@ -1,13 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-/* eslint-disable max-lines */
-const SquareIndicatorPropTypes = {
-  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')
-};
-
-export { SquareIndicatorPropTypes };

package/types/index.d.ts

@@ -1 +0,0 @@
-export * from './DSSquareIndicator';