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

package/dist/cjs/DSSquareIndicator.js

@@ -0,0 +1,175 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __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_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_uid = require("uid");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+var import_styled = require("./styled");
+var import_constants = require("./constants");
+const DSSquareIndicator = (props) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;
+  const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip.DSTooltipV3 : ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children), [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__ */ import_react.default.createElement(import_ds_grid.Grid, __spreadValues({
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, globalAttributes), /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, /* @__PURE__ */ import_react.default.createElement("svg", {
+    width: import_constants.sizeToPx[size],
+    height: import_constants.sizeToPx[size],
+    style: {
+      display: "block",
+      margin: "auto"
+    }
+  }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: `${uniqueId}-lg1`,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "100%"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "20%",
+    stopColor: `${hexColor}FF`
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "80%",
+    stopColor: `${hexColor}00`
+  })), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: `${uniqueId}-lg2`,
+    x1: "0",
+    y1: "0",
+    x2: "100%",
+    y2: "0"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "10%",
+    stopColor: `${hexColor}00`
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  })), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: `${uniqueId}-lg3`,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "100%"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "10%",
+    stopColor: `${hexColor}00`
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  })), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: `${uniqueId}-lg4`,
+    x1: "0",
+    y1: "0",
+    x2: "100%",
+    y2: "0"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "50%",
+    stopColor: `${hexColor}FF`
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "90%",
+    stopColor: `${hexColor}00`
+  })), /* @__PURE__ */ import_react.default.createElement("clipPath", {
+    id: `${uniqueId}-lcp1`
+  }, /* @__PURE__ */ import_react.default.createElement("rect", {
+    x: import_constants.sizeToWeight[size],
+    y: 0,
+    width: "100%",
+    height: import_constants.sizeToWeight[size]
+  })), /* @__PURE__ */ import_react.default.createElement("clipPath", {
+    id: `${uniqueId}-lcp2`
+  }, /* @__PURE__ */ import_react.default.createElement("rect", {
+    x: paddedCoordinate,
+    y: import_constants.sizeToWeight[size],
+    width: import_constants.sizeToWeight[size],
+    height: "100%"
+  })), /* @__PURE__ */ import_react.default.createElement("clipPath", {
+    id: `${uniqueId}-lcp3`
+  }, /* @__PURE__ */ import_react.default.createElement("rect", {
+    x: 0,
+    y: paddedCoordinate,
+    width: paddedCoordinate,
+    height: import_constants.sizeToWeight[size]
+  }))), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineLeft, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg1)`
+  }), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineTop, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg2)`,
+    clipPath: `url(#${uniqueId}-lcp1)`
+  }), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineRight, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg3)`,
+    clipPath: `url(#${uniqueId}-lcp2)`
+  }), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledLineBottom, {
+    size,
+    __duration,
+    fill: `url(#${uniqueId}-lg4)`,
+    clipPath: `url(#${uniqueId}-lcp3)`
+  })), text !== "" && showText && /* @__PURE__ */ import_react.default.createElement("span", {
+    style: { color: import_constants.colorToHex[color], fontSize: import_constants.sizeToTextSize[size] }
+  }, text)));
+};
+DSSquareIndicator.propTypes = import_react_desc_prop_types.SquareIndicatorPropTypes;
+const DSSquareIndicatorWithSchema = (0, import_ds_props_helpers.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": ["/* eslint-disable @typescript-eslint/naming-convention */\nimport React, { PropsWithChildren, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { defaultProps, DSSquareIndicatorT, SquareIndicatorPropTypes } from './react-desc-prop-types';\nimport { StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants';\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSSquareIndicatorT.Props>>(props, defaultProps);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference, __duration } = propsWithDefault;\n\n  const Wrapper: typeof DSTooltipV3 = useMemo(\n    () => (withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>),\n    [withTooltip],\n  );\n\n  const uniqueId = useMemo(() => uid(16), []);\n  const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);\n\n  const hexColor = useMemo(() => colorToHex[color], [color]);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\" {...globalAttributes}>\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <svg\n          width={sizeToPx[size]}\n          height={sizeToPx[size]}\n          style={{\n            display: 'block',\n            margin: 'auto',\n          }}\n        >\n          <defs>\n            <linearGradient id={`${uniqueId}-lg1`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n              <stop offset=\"20%\" stopColor={`${hexColor}FF`} />\n              <stop offset=\"80%\" stopColor={`${hexColor}00`} />\n            </linearGradient>\n            <linearGradient id={`${uniqueId}-lg2`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n              <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n              <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n            </linearGradient>\n            <linearGradient id={`${uniqueId}-lg3`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n              <stop offset=\"10%\" stopColor={`${hexColor}00`} />\n              <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n            </linearGradient>\n            <linearGradient id={`${uniqueId}-lg4`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n              <stop offset=\"50%\" stopColor={`${hexColor}FF`} />\n              <stop offset=\"90%\" stopColor={`${hexColor}00`} />\n            </linearGradient>\n            <clipPath id={`${uniqueId}-lcp1`}>\n              <rect x={sizeToWeight[size]} y={0} width=\"100%\" height={sizeToWeight[size]} />\n            </clipPath>\n            <clipPath id={`${uniqueId}-lcp2`}>\n              <rect x={paddedCoordinate} y={sizeToWeight[size]} width={sizeToWeight[size]} height=\"100%\" />\n            </clipPath>\n            <clipPath id={`${uniqueId}-lcp3`}>\n              <rect x={0} y={paddedCoordinate} width={paddedCoordinate} height={sizeToWeight[size]} />\n            </clipPath>\n          </defs>\n          <StyledLineLeft size={size} __duration={__duration} fill={`url(#${uniqueId}-lg1)`} />\n          <StyledLineTop\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg2)`}\n            clipPath={`url(#${uniqueId}-lcp1)`}\n          />\n          <StyledLineRight\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg3)`}\n            clipPath={`url(#${uniqueId}-lcp2)`}\n          />\n          <StyledLineBottom\n            size={size}\n            __duration={__duration}\n            fill={`url(#${uniqueId}-lg4)`}\n            clipPath={`url(#${uniqueId}-lcp3)`}\n          />\n        </svg>\n        {text !== '' && showText && (\n          <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSSquareIndicator.propTypes = SquareIndicatorPropTypes;\n\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/constants.js

@@ -0,0 +1,65 @@
+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 constants_exports = {};
+__export(constants_exports, {
+  colorToHex: () => colorToHex,
+  sizeToPx: () => sizeToPx,
+  sizeToTextSize: () => sizeToTextSize,
+  sizeToWeight: () => sizeToWeight
+});
+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"
+};
+module.exports = __toCommonJS(constants_exports);
+//# 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;ACAA,YAAuB;ADAhB,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,eAAe;AAAA,EAC1B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,MAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;",
+  "names": []
+}

package/dist/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,83 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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,
+  defaultProps: () => defaultProps
+});
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const SquareIndicatorPropTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
+  size: import_ds_props_helpers.PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: import_ds_props_helpers.PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: import_ds_props_helpers.PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: import_ds_props_helpers.PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: import_ds_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",
+  __duration: 2.5
+};
+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, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const SquareIndicatorPropTypes = {\n  ...globalAttributesPropTypes,\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSSquareIndicatorT.Props = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n  __duration: 2.5,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAqD;AA2B9C,MAAM,2BAA2B,iCACnC,oDADmC;AAAA,EAEtC,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,kCAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,kCAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,kCAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;AAGX,MAAM,eAAyC;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AAAA,EACjC,YAAY;AAAA;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,124 @@
+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 styled_exports = {};
+__export(styled_exports, {
+  StyledLineBottom: () => StyledLineBottom,
+  StyledLineLeft: () => StyledLineLeft,
+  StyledLineRight: () => StyledLineRight,
+  StyledLineTop: () => StyledLineTop
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("./constants");
+const lineLeftAnimation = import_ds_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_system.kfrm`
+    0% {
+        x: -100%;
+        width: 0%;
+    }
+    25%, 50% {
+        x: -100%;
+        width: 200%;
+    }
+    75%, 100% {
+        x: 100%;
+        width: 200%;
+    }
+`;
+const lineRightAnimation = import_ds_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_system.kfrm`
+    0%, 25% {
+        x: 200%;
+        width: 200%;
+    }
+    50%, 75% {
+        x: 0%;
+        width: 200%;
+    }
+    100% {
+        x: -200%;
+        width: 200%;
+    }
+`;
+const StyledLineLeft = import_styled_components.default.rect`
+  x: 0;
+  y: 0%;
+  width: ${({ size }) => import_constants.sizeToWeight[size]};
+  height: 100%;
+  animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineTop = import_styled_components.default.rect`
+  x: -100%;
+  y: 0;
+  width: 200%;
+  height: ${({ size }) => import_constants.sizeToWeight[size]};
+  animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineRight = import_styled_components.default.rect`
+  x: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
+  y: -100%;
+  width: ${({ size }) => import_constants.sizeToWeight[size]};
+  height: 200%;
+  animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+const StyledLineBottom = import_styled_components.default.rect`
+  x: 0%;
+  y: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
+  width: 200%;
+  height: ${({ size }) => import_constants.sizeToWeight[size]};
+  animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;
+`;
+module.exports = __toCommonJS(styled_exports);
+//# 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 styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { DSSquareIndicatorT } from './react-desc-prop-types';\nimport { sizeToWeight } from './constants';\n\ninterface RectProps {\n  size: Required<DSSquareIndicatorT.Props>['size'];\n  __duration: number;\n}\n\nconst lineLeftAnimation = kfrm`\n    0% {\n        y: 100%;\n        height: 100%;\n    }\n    12.5%, 50% {\n        y: 0;\n        height: 100%;\n    }\n    62.5%, 100% {\n        y: -100%;\n        height: 100%;\n    }\n`;\n\nconst lineTopAnimation = kfrm`\n    0% {\n        x: -100%;\n        width: 0%;\n    }\n    25%, 50% {\n        x: -100%;\n        width: 200%;\n    }\n    75%, 100% {\n        x: 100%;\n        width: 200%;\n    }\n`;\n\nconst lineRightAnimation = kfrm`\n    0%, 12.5% {\n        y: -100%;\n        height: 0%;\n    }\n    37.5%, 62.5% {\n        y: -100%;\n        height: 200%;\n    }\n    87.5%, 100% {\n        y: 100%;\n        height: 200%;\n    }\n`;\n\nconst lineBottomAnimation = kfrm`\n    0%, 25% {\n        x: 200%;\n        width: 200%;\n    }\n    50%, 75% {\n        x: 0%;\n        width: 200%;\n    }\n    100% {\n        x: -200%;\n        width: 200%;\n    }\n`;\n\nexport const StyledLineLeft = styled.rect<RectProps>`\n  x: 0;\n  y: 0%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 100%;\n  animation: ${lineLeftAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineTop = styled.rect<RectProps>`\n  x: -100%;\n  y: 0;\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineTopAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineRight = styled.rect<RectProps>`\n  x: calc(100% - ${({ size }) => sizeToWeight[size]});\n  y: -100%;\n  width: ${({ size }) => sizeToWeight[size]};\n  height: 200%;\n  animation: ${lineRightAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n\nexport const StyledLineBottom = styled.rect<RectProps>`\n  x: 0%;\n  y: calc(100% - ${({ size }) => sizeToWeight[size]});\n  width: 200%;\n  height: ${({ size }) => sizeToWeight[size]};\n  animation: ${lineBottomAnimation} ${({ __duration }) => __duration}s linear 0s infinite;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAAqB;AAErB,uBAA6B;AAO7B,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,iCAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,eAEvB,qBAAqB,CAAC,EAAE,iBAAiB;AAAA;AAGjD,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,WAAW,8BAAa;AAAA,eACxB,oBAAoB,CAAC,EAAE,iBAAiB;AAAA;AAGhD,MAAM,kBAAkB,iCAAO;AAAA,mBACnB,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,WAEnC,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,eAEvB,sBAAsB,CAAC,EAAE,iBAAiB;AAAA;AAGlD,MAAM,mBAAmB,iCAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,WAAW,8BAAa;AAAA;AAAA,YAElC,CAAC,EAAE,WAAW,8BAAa;AAAA,eACxB,uBAAuB,CAAC,EAAE,iBAAiB;AAAA;",
+  "names": []
+}