@elliemae/ds-square-indicator 3.80.0-next.36 → 3.80.0-next.39

package/dist/cjs/DSSquareIndicator.js

@@ -40,12 +40,13 @@ 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.js");
 var import_styled = require("./styled.js");
-var import_constants = require("./constants.js");
+var import_constants = require("./constants/index.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_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const { height, width, cols, rows, wrap, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const { size, color, text, showText, withTooltip, tooltipStartPlacementPreference } = propsWithDefault;
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
   const Wrapper = (0, import_react.useMemo)(() => withTooltip ? import_ds_tooltip_v3.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]);
@@ -57,6 +58,7 @@ const DSSquareIndicator = (props) => {
       justifyContent: "center",
       role: "status",
       "aria-label": text || "Loading...",
+      ...ownerPropsConfig,
       ...globalAttributes,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -91,10 +93,34 @@ const DSSquareIndicator = (props) => {
                 /* @__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)` })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)`, ...ownerPropsConfig }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledLineTop,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg2)`,
+                  clipPath: `url(#${uniqueId}-lcp1)`,
+                  ...ownerPropsConfig
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledLineRight,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg3)`,
+                  clipPath: `url(#${uniqueId}-lcp2)`,
+                  ...ownerPropsConfig
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styled.StyledLineBottom,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg4)`,
+                  clipPath: `url(#${uniqueId}-lcp3)`,
+                  ...ownerPropsConfig
+                }
+              )
             ]
           }
         ),

package/dist/cjs/DSSquareIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSSquareIndicator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, 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: React.ComponentType<React.PropsWithChildren> = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(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 = 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    <StyledContainer\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      {...globalAttributes}\n    >\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          aria-hidden=\"true\"\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    </StyledContainer>\n  );\n};\n\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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",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants/index.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: React.ComponentType<React.PropsWithChildren> = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(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  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n\n  const Wrapper = 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    <StyledContainer\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      {...ownerPropsConfig}\n      {...globalAttributes}\n    >\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          aria-hidden=\"true\"\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)`} {...ownerPropsConfig} />\n          <StyledLineTop\n            size={size}\n            fill={`url(#${uniqueId}-lg2)`}\n            clipPath={`url(#${uniqueId}-lcp1)`}\n            {...ownerPropsConfig}\n          />\n          <StyledLineRight\n            size={size}\n            fill={`url(#${uniqueId}-lg3)`}\n            clipPath={`url(#${uniqueId}-lcp2)`}\n            {...ownerPropsConfig}\n          />\n          <StyledLineBottom\n            size={size}\n            fill={`url(#${uniqueId}-lg4)`}\n            clipPath={`url(#${uniqueId}-lcp3)`}\n            {...ownerPropsConfig}\n          />\n        </svg>\n        {text !== '' && showText && (\n          <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n        )}\n      </Wrapper>\n    </StyledContainer>\n  );\n};\n\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 → constants/index.js}

@@ -28,6 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  DSSquareIndicatorName: () => DSSquareIndicatorName,
+  SQUARE_INDICATOR_DATA_TESTID: () => SQUARE_INDICATOR_DATA_TESTID,
+  SQUARE_INDICATOR_SLOTS: () => SQUARE_INDICATOR_SLOTS,
   colorToHex: () => colorToHex,
   sizeToPx: () => sizeToPx,
   sizeToTextSize: () => sizeToTextSize,
@@ -35,6 +38,16 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const DSSquareIndicatorName = "DSSquareindicator";
+const SQUARE_INDICATOR_SLOTS = {
+  ROOT: "root",
+  LINE_LEFT: "line-left",
+  LINE_TOP: "line-top",
+  LINE_RIGHT: "line-right",
+  LINE_BOTTOM: "line-bottom"
+};
+const SQUARE_INDICATOR_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS);
 const sizeToPx = {
   xs: "16px",
   s: "24px",
@@ -63,4 +76,4 @@ const sizeToTextSize = {
   xl: "14px",
   xxl: "16px"
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSquareIndicatorName = 'DSSquareindicator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SQUARE_INDICATOR_SLOTS = {\n  ROOT: 'root',\n  LINE_LEFT: 'line-left',\n  LINE_TOP: 'line-top',\n  LINE_RIGHT: 'line-right',\n  LINE_BOTTOM: 'line-bottom',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SQUARE_INDICATOR_DATA_TESTID = slotObjectToDataTestIds(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS);\n\nexport 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;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,wBAAwB;AAG9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AACf;AAGO,MAAM,mCAA+B,0CAAwB,uBAAuB,sBAAsB;AAE1G,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

@@ -29,9 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DSSquareIndicator: () => import_DSSquareIndicator.DSSquareIndicator,
-  DSSquareIndicatorWithSchema: () => import_DSSquareIndicator.DSSquareIndicatorWithSchema
+  DSSquareIndicatorName: () => import_constants.DSSquareIndicatorName,
+  DSSquareIndicatorWithSchema: () => import_DSSquareIndicator.DSSquareIndicatorWithSchema,
+  SQUARE_INDICATOR_DATA_TESTID: () => import_constants.SQUARE_INDICATOR_DATA_TESTID,
+  SQUARE_INDICATOR_SLOTS: () => import_constants.SQUARE_INDICATOR_SLOTS
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_DSSquareIndicator = require("./DSSquareIndicator.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;",
+  "sourcesContent": ["export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nexport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, SQUARE_INDICATOR_DATA_TESTID } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;AAE/D,uBAA4F;",
   "names": []
 }

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

@@ -28,12 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
+  DSSquareIndicatorPropTypes: () => DSSquareIndicatorPropTypes,
   SquareIndicatorPropTypes: () => SquareIndicatorPropTypes,
   defaultProps: () => defaultProps
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
 const defaultProps = {
   size: "m",
   color: "dark",
@@ -42,7 +44,8 @@ const defaultProps = {
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom"
 };
-const SquareIndicatorPropTypes = {
+const DSSquareIndicatorPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSSquareIndicatorName, import_constants.SQUARE_INDICATOR_SLOTS),
   ...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"),
@@ -62,6 +65,7 @@ const SquareIndicatorPropTypes = {
     "left-end",
     "left",
     "left-start"
-  ]).description("start placement preference for the tooltip").defaultValue("center")
+  ]).description("start placement preference for the tooltip").defaultValue("bottom")
 };
+const SquareIndicatorPropTypes = DSSquareIndicatorPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +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-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n  export interface DefaultProps {\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  export interface Props extends Partial<DefaultProps> {}\n\n  export interface InternalProps extends DefaultProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;AA8B9C,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,MAAM,2BAA2B;AAAA,EACtC,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;",
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSquareIndicatorT {\n  export type SlotFunctionArguments = {\n    dsSquareindicatorRoot: () => object;\n    dsSquareindicatorLineLeft: () => object;\n    dsSquareindicatorLineTop: () => object;\n    dsSquareindicatorLineRight: () => object;\n    dsSquareindicatorLineBottom: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\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  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSSquareIndicatorName,\n    typeof SQUARE_INDICATOR_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport const DSSquareIndicatorPropTypes: DSPropTypesSchema<DSSquareIndicatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS),\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('bottom'),\n};\n\nexport const SquareIndicatorPropTypes =\n  DSSquareIndicatorPropTypes as unknown as ValidationMap<DSSquareIndicatorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA+E;AAE/E,uBAA8D;AAsDvD,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,MAAM,6BAA0E;AAAA,EACrF,OAAG,kDAAyB,wCAAuB,uCAAsB;AAAA,EACzE,GAAG;AAAA,EACH,MAAM,kCAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,YAAY,uBAAuB,EAAE,aAAa,GAAG;AAAA,EAC/G,OAAO,kCAAU,MAAM,CAAC,SAAS,MAAM,CAAC,EAAE,YAAY,8BAA8B,EAAE,aAAa,MAAM;AAAA,EACzG,MAAM,kCAAU,OAAO,YAAY,2CAA2C,EAAE,aAAa,EAAE;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,IAAI;AAAA,EAClG,aAAa,kCAAU,KACpB,YAAY,oEAAoE,EAChF,aAAa,KAAK;AAAA,EACrB,iCAAiC,kCAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,4CAA4C,EACxD,aAAa,QAAQ;AAC1B;AAEO,MAAM,2BACX;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_constants = require("./constants.js");
+var import_constants = require("./constants/index.js");
 const lineLeftAnimation = import_ds_system.kfrm`
     0% {
         y: 100%;
@@ -95,31 +95,46 @@ const lineBottomAnimation = import_ds_system.kfrm`
         width: 200%;
     }
 `;
-const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+const StyledContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSSquareIndicatorName,
+  slot: import_constants.SQUARE_INDICATOR_SLOTS.ROOT
+})`
   z-index: ${({ theme }) => theme.zIndex.loader};
 `;
-const StyledLineLeft = import_ds_system.styled.rect`
+const StyledLineLeft = (0, import_ds_system.styled)("rect", {
+  name: import_constants.DSSquareIndicatorName,
+  slot: import_constants.SQUARE_INDICATOR_SLOTS.LINE_LEFT
+})`
   x: 0;
   y: 0%;
   width: ${({ size }) => import_constants.sizeToWeight[size]};
   height: 100%;
   animation: ${lineLeftAnimation} 2.5s linear 0s infinite;
 `;
-const StyledLineTop = import_ds_system.styled.rect`
+const StyledLineTop = (0, import_ds_system.styled)("rect", {
+  name: import_constants.DSSquareIndicatorName,
+  slot: import_constants.SQUARE_INDICATOR_SLOTS.LINE_TOP
+})`
   x: -100%;
   y: 0;
   width: 200%;
   height: ${({ size }) => import_constants.sizeToWeight[size]};
   animation: ${lineTopAnimation} 2.5s linear 0s infinite;
 `;
-const StyledLineRight = import_ds_system.styled.rect`
+const StyledLineRight = (0, import_ds_system.styled)("rect", {
+  name: import_constants.DSSquareIndicatorName,
+  slot: import_constants.SQUARE_INDICATOR_SLOTS.LINE_RIGHT
+})`
   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_system.styled.rect`
+const StyledLineBottom = (0, import_ds_system.styled)("rect", {
+  name: import_constants.DSSquareIndicatorName,
+  slot: import_constants.SQUARE_INDICATOR_SLOTS.LINE_BOTTOM
+})`
   x: 0%;
   y: calc(100% - ${({ size }) => import_constants.sizeToWeight[size]});
   width: 200%;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\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 StyledContainer = styled(Grid)`\n  z-index: ${({ theme }) => theme.zIndex.loader};\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;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAC7B,qBAAqB;AAErB,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,sBAAkB,yBAAO,mBAAI;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGxC,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,iBAAiB;AAAA;AAGzB,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA,eAC7B,gBAAgB;AAAA;AAGxB,MAAM,kBAAkB,wBAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,WAExC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,kBAAkB;AAAA;AAG1B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,YAEvC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA,eAC7B,mBAAmB;AAAA;",
+  "sourcesContent": ["import { kfrm, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, sizeToWeight } from './constants/index.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 StyledContainer = styled(Grid, {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.ROOT,\n})`\n  z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledLineLeft = styled('rect', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_LEFT,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_TOP,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_RIGHT,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_BOTTOM,\n})<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;AAAA;ACAA,YAAuB;ADAvB,uBAA6B;AAC7B,qBAAqB;AAErB,uBAA4E;AAM5E,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,sBAAkB,yBAAO,qBAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGxC,MAAM,qBAAiB,yBAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,iBAAiB;AAAA;AAGzB,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,YAIW,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA,eAC7B,gBAAgB;AAAA;AAGxB,MAAM,sBAAkB,yBAAO,QAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,WAExC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,kBAAkB;AAAA;AAG1B,MAAM,uBAAmB,yBAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA,mBAEkB,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA;AAAA,YAEvC,CAAC,EAAE,KAAK,MAAM,8BAAa,IAAI,CAAC;AAAA,eAC7B,mBAAmB;AAAA;",
   "names": []
 }

package/dist/cjs/typescript-testing/slot-props.js

@@ -0,0 +1,41 @@
+"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 __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 React = __toESM(require("react"));
+const SlotPropsAsObject = {
+  dsSquareindicatorRoot: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineLeft: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineTop: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineRight: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineBottom: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsSquareindicatorRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineLeft: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineTop: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineRight: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineBottom: () => ({ "aria-label": "just a typescript test" })
+};
+const SlotFunctionsAreValidProps = SlotPropsAsFunctions;
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/cjs/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from '../constants/index.js';\nimport type { DSSquareIndicatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSSquareIndicatorT.Props> = {\n  dsSquareindicatorRoot: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineLeft: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineTop: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineRight: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineBottom: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSSquareIndicatorT.SlotFunctionArguments = {\n  dsSquareindicatorRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineLeft: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineTop: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineRight: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineBottom: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// The function form must also be accepted by the public Props, slot by slot\nconst SlotFunctionsAreValidProps: Partial<DSSquareIndicatorT.Props> = SlotPropsAsFunctions;\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSSquareIndicatorName, typeof SQUARE_INDICATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACKvB,MAAM,oBAAuD;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AAEA,MAAM,uBAAiE;AAAA,EACrE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AAGA,MAAM,6BAAgE;AAGtE,MAAM,6CAEF;",
+  "names": []
+}

package/dist/cjs/typescript-testing/typescript-square-indicator-valid.js

@@ -73,10 +73,34 @@ const testDefinitionAsConst = {
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom"
 };
+const testGlobalAttributesAndSlots = {
+  text: "Loading",
+  id: "documents-loader",
+  className: "custom-class",
+  "aria-label": "Loading the loan documents",
+  dsSquareindicatorRoot: { "aria-describedby": "loader-help" },
+  dsSquareindicatorLineLeft: () => ({ "data-custom": "left" })
+};
+const testGlobalAttributesAndSlotsAsConst = {
+  id: "documents-loader",
+  "aria-label": "Loading the loan documents",
+  dsSquareindicatorLineBottom: { "data-custom": "bottom" }
+};
 const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testExplicitDefinition }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" })
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testGlobalAttributesAndSlots }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { ...testGlobalAttributesAndSlotsAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSSquareIndicator,
+    {
+      "data-testid": "ds-squareindicator",
+      "aria-label": "Loading the loan documents",
+      dsSquareindicatorRoot: { "aria-describedby": "loader-help" },
+      dsSquareindicatorLineTop: () => ({ "data-custom": "top" })
+    }
+  )
 ] });
 //# sourceMappingURL=typescript-square-indicator-valid.js.map

package/dist/cjs/typescript-testing/typescript-square-indicator-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-square-indicator-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  color: 'dark',\n  size: 'm',\n  text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSquareIndicator {...testExplicitDefinition} />\n    <DSSquareIndicator {...testInferedTypeCompatibility} />\n    <DSSquareIndicator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyErB;AAxEF,eAAkC;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAE9C,4CAAC,8BAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,GACjH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  color: 'dark',\n  size: 'm',\n  text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as const;\n\n// global attributes are forwarded to the root, slot props accept both the object and the function form\nconst testGlobalAttributesAndSlots: ComponentPropsForApp = {\n  text: 'Loading',\n  id: 'documents-loader',\n  className: 'custom-class',\n  'aria-label': 'Loading the loan documents',\n  dsSquareindicatorRoot: { 'aria-describedby': 'loader-help' },\n  dsSquareindicatorLineLeft: () => ({ 'data-custom': 'left' }),\n};\n\nconst testGlobalAttributesAndSlotsAsConst = {\n  id: 'documents-loader',\n  'aria-label': 'Loading the loan documents',\n  dsSquareindicatorLineBottom: { 'data-custom': 'bottom' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSquareIndicator {...testExplicitDefinition} />\n    <DSSquareIndicator {...testInferedTypeCompatibility} />\n    <DSSquareIndicator {...testDefinitionAsConst} />\n    <DSSquareIndicator {...testGlobalAttributesAndSlots} />\n    <DSSquareIndicator {...testGlobalAttributesAndSlotsAsConst} />\n    {/* works with inline values */}\n    <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n    <DSSquareIndicator\n      data-testid=\"ds-squareindicator\"\n      aria-label=\"Loading the loan documents\"\n      dsSquareindicatorRoot={{ 'aria-describedby': 'loader-help' }}\n      dsSquareindicatorLineTop={() => ({ 'data-custom': 'top' })}\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyFrB;AAxFF,eAAkC;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAAqD;AAAA,EACzD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,cAAc;AAAA,EACd,uBAAuB,EAAE,oBAAoB,cAAc;AAAA,EAC3D,2BAA2B,OAAO,EAAE,eAAe,OAAO;AAC5D;AAEA,MAAM,sCAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,cAAc;AAAA,EACd,6BAA6B,EAAE,eAAe,SAAS;AACzD;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAC9C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,qCAAqC;AAAA,EAE5D,4CAAC,8BAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,EAC/G;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,uBAAuB,EAAE,oBAAoB,cAAc;AAAA,MAC3D,0BAA0B,OAAO,EAAE,eAAe,MAAM;AAAA;AAAA,EAC1D;AAAA,GACF;",
   "names": []
 }

package/dist/esm/DSSquareIndicator.js

@@ -2,16 +2,22 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
-import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useMemoMergePropsWithDefault,
+  useOwnerProps
+} from "@elliemae/ds-props-helpers";
 import { uid } from "uid";
 import { defaultProps, SquareIndicatorPropTypes } from "./react-desc-prop-types.js";
 import { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from "./styled.js";
-import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants.js";
+import { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from "./constants/index.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 ownerPropsConfig = useOwnerProps(propsWithDefault);
   const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : EmptyComp, [withTooltip]);
   const uniqueId = useMemo(() => uid(16), []);
   const paddedCoordinate = useMemo(() => `calc(100% - ${sizeToWeight[size]})`, [size]);
@@ -23,6 +29,7 @@ const DSSquareIndicator = (props) => {
       justifyContent: "center",
       role: "status",
       "aria-label": text || "Loading...",
+      ...ownerPropsConfig,
       ...globalAttributes,
       children: /* @__PURE__ */ jsxs(Wrapper, { text, textAlign: "center", startPlacementPreference: tooltipStartPlacementPreference, children: [
         /* @__PURE__ */ jsxs(
@@ -57,10 +64,34 @@ const DSSquareIndicator = (props) => {
                 /* @__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)` })
+              /* @__PURE__ */ jsx(StyledLineLeft, { size, fill: `url(#${uniqueId}-lg1)`, ...ownerPropsConfig }),
+              /* @__PURE__ */ jsx(
+                StyledLineTop,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg2)`,
+                  clipPath: `url(#${uniqueId}-lcp1)`,
+                  ...ownerPropsConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StyledLineRight,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg3)`,
+                  clipPath: `url(#${uniqueId}-lcp2)`,
+                  ...ownerPropsConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StyledLineBottom,
+                {
+                  size,
+                  fill: `url(#${uniqueId}-lg4)`,
+                  clipPath: `url(#${uniqueId}-lcp3)`,
+                  ...ownerPropsConfig
+                }
+              )
             ]
           }
         ),

package/dist/esm/DSSquareIndicator.js.map

@@ -1,7 +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, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, 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: React.ComponentType<React.PropsWithChildren> = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(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 = 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    <StyledContainer\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      {...globalAttributes}\n    >\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          aria-hidden=\"true\"\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    </StyledContainer>\n  );\n};\n\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { defaultProps, SquareIndicatorPropTypes } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledLineLeft, StyledLineTop, StyledLineRight, StyledLineBottom } from './styled.js';\nimport { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight } from './constants/index.js';\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nconst EmptyComp: React.ComponentType<React.PropsWithChildren> = (props) => <>{props.children}</>;\n\nexport const DSSquareIndicator: React.ComponentType<DSSquareIndicatorT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSSquareIndicatorT.InternalProps>(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  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n\n  const Wrapper = 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    <StyledContainer\n      gutter=\"xs\"\n      justifyContent=\"center\"\n      role=\"status\"\n      aria-label={text || 'Loading...'}\n      {...ownerPropsConfig}\n      {...globalAttributes}\n    >\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          aria-hidden=\"true\"\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)`} {...ownerPropsConfig} />\n          <StyledLineTop\n            size={size}\n            fill={`url(#${uniqueId}-lg2)`}\n            clipPath={`url(#${uniqueId}-lcp1)`}\n            {...ownerPropsConfig}\n          />\n          <StyledLineRight\n            size={size}\n            fill={`url(#${uniqueId}-lg3)`}\n            clipPath={`url(#${uniqueId}-lcp2)`}\n            {...ownerPropsConfig}\n          />\n          <StyledLineBottom\n            size={size}\n            fill={`url(#${uniqueId}-lg4)`}\n            clipPath={`url(#${uniqueId}-lcp3)`}\n            {...ownerPropsConfig}\n          />\n        </svg>\n        {text !== '' && showText && (\n          <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n        )}\n      </Wrapper>\n    </StyledContainer>\n  );\n};\n\nDSSquareIndicator.displayName = 'DSSquareIndicator';\nexport const DSSquareIndicatorWithSchema = describe(DSSquareIndicator);\nDSSquareIndicatorWithSchema.propTypes = SquareIndicatorPropTypes;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSSquareIndicatorName = "DSSquareindicator";
+const SQUARE_INDICATOR_SLOTS = {
+  ROOT: "root",
+  LINE_LEFT: "line-left",
+  LINE_TOP: "line-top",
+  LINE_RIGHT: "line-right",
+  LINE_BOTTOM: "line-bottom"
+};
+const SQUARE_INDICATOR_DATA_TESTID = slotObjectToDataTestIds(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS);
+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 {
+  DSSquareIndicatorName,
+  SQUARE_INDICATOR_DATA_TESTID,
+  SQUARE_INDICATOR_SLOTS,
+  colorToHex,
+  sizeToPx,
+  sizeToTextSize,
+  sizeToWeight
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSquareIndicatorName = 'DSSquareindicator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SQUARE_INDICATOR_SLOTS = {\n  ROOT: 'root',\n  LINE_LEFT: 'line-left',\n  LINE_TOP: 'line-top',\n  LINE_RIGHT: 'line-right',\n  LINE_BOTTOM: 'line-bottom',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const SQUARE_INDICATOR_DATA_TESTID = slotObjectToDataTestIds(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS);\n\nexport 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;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,wBAAwB;AAG9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,aAAa;AACf;AAGO,MAAM,+BAA+B,wBAAwB,uBAAuB,sBAAsB;AAE1G,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

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

package/dist/esm/index.js.map

@@ -1,7 +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';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';\nexport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nexport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, SQUARE_INDICATOR_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;AAE/D,SAAS,uBAAuB,wBAAwB,oCAAoC;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from "./constants/index.js";
 const defaultProps = {
   size: "m",
   color: "dark",
@@ -8,7 +9,8 @@ const defaultProps = {
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom"
 };
-const SquareIndicatorPropTypes = {
+const DSSquareIndicatorPropTypes = {
+  ...getPropsPerSlotPropTypes(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS),
   ...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"),
@@ -28,9 +30,11 @@ const SquareIndicatorPropTypes = {
     "left-end",
     "left",
     "left-start"
-  ]).description("start placement preference for the tooltip").defaultValue("center")
+  ]).description("start placement preference for the tooltip").defaultValue("bottom")
 };
+const SquareIndicatorPropTypes = DSSquareIndicatorPropTypes;
 export {
+  DSSquareIndicatorPropTypes,
   SquareIndicatorPropTypes,
   defaultProps
 };

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

@@ -1,7 +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-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSSquareIndicatorT {\n  export interface DefaultProps {\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  export interface Props extends Partial<DefaultProps> {}\n\n  export interface InternalProps extends DefaultProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,iCAAiC;AA8B9C,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,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;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSSquareIndicatorT {\n  export type SlotFunctionArguments = {\n    dsSquareindicatorRoot: () => object;\n    dsSquareindicatorLineLeft: () => object;\n    dsSquareindicatorLineTop: () => object;\n    dsSquareindicatorLineRight: () => object;\n    dsSquareindicatorLineBottom: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\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  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSSquareIndicatorName,\n    typeof SQUARE_INDICATOR_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSSquareIndicatorT.DefaultProps = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nexport const DSSquareIndicatorPropTypes: DSPropTypesSchema<DSSquareIndicatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS),\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('bottom'),\n};\n\nexport const SquareIndicatorPropTypes =\n  DSSquareIndicatorPropTypes as unknown as ValidationMap<DSSquareIndicatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,0BAA0B,iCAAiC;AAE/E,SAAS,uBAAuB,8BAA8B;AAsDvD,MAAM,eAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEO,MAAM,6BAA0E;AAAA,EACrF,GAAG,yBAAyB,uBAAuB,sBAAsB;AAAA,EACzE,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,2BACX;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { kfrm, styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { sizeToWeight } from "./constants.js";
+import { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, sizeToWeight } from "./constants/index.js";
 const lineLeftAnimation = kfrm`
     0% {
         y: 100%;
@@ -58,31 +58,46 @@ const lineBottomAnimation = kfrm`
         width: 200%;
     }
 `;
-const StyledContainer = styled(Grid)`
+const StyledContainer = styled(Grid, {
+  name: DSSquareIndicatorName,
+  slot: SQUARE_INDICATOR_SLOTS.ROOT
+})`
   z-index: ${({ theme }) => theme.zIndex.loader};
 `;
-const StyledLineLeft = styled.rect`
+const StyledLineLeft = styled("rect", {
+  name: DSSquareIndicatorName,
+  slot: SQUARE_INDICATOR_SLOTS.LINE_LEFT
+})`
   x: 0;
   y: 0%;
   width: ${({ size }) => sizeToWeight[size]};
   height: 100%;
   animation: ${lineLeftAnimation} 2.5s linear 0s infinite;
 `;
-const StyledLineTop = styled.rect`
+const StyledLineTop = styled("rect", {
+  name: DSSquareIndicatorName,
+  slot: SQUARE_INDICATOR_SLOTS.LINE_TOP
+})`
   x: -100%;
   y: 0;
   width: 200%;
   height: ${({ size }) => sizeToWeight[size]};
   animation: ${lineTopAnimation} 2.5s linear 0s infinite;
 `;
-const StyledLineRight = styled.rect`
+const StyledLineRight = styled("rect", {
+  name: DSSquareIndicatorName,
+  slot: SQUARE_INDICATOR_SLOTS.LINE_RIGHT
+})`
   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`
+const StyledLineBottom = styled("rect", {
+  name: DSSquareIndicatorName,
+  slot: SQUARE_INDICATOR_SLOTS.LINE_BOTTOM
+})`
   x: 0%;
   y: calc(100% - ${({ size }) => sizeToWeight[size]});
   width: 200%;

package/dist/esm/styled.js.map

@@ -1,7 +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-system';\nimport { Grid } from '@elliemae/ds-grid';\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 StyledContainer = styled(Grid)`\n  z-index: ${({ theme }) => theme.zIndex.loader};\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;AAC7B,SAAS,YAAY;AAErB,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,kBAAkB,OAAO,IAAI;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGxC,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,WAG1B,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,iBAAiB;AAAA;AAGzB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA,YAIxB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA,eAC7B,gBAAgB;AAAA;AAGxB,MAAM,kBAAkB,OAAO;AAAA,mBACnB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,WAExC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,kBAAkB;AAAA;AAG1B,MAAM,mBAAmB,OAAO;AAAA;AAAA,mBAEpB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,YAEvC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA,eAC7B,mBAAmB;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSSquareIndicatorT } from './react-desc-prop-types.js';\nimport { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, sizeToWeight } from './constants/index.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 StyledContainer = styled(Grid, {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.ROOT,\n})`\n  z-index: ${({ theme }) => theme.zIndex.loader};\n`;\n\nexport const StyledLineLeft = styled('rect', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_LEFT,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_TOP,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_RIGHT,\n})<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', {\n  name: DSSquareIndicatorName,\n  slot: SQUARE_INDICATOR_SLOTS.LINE_BOTTOM,\n})<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;AAC7B,SAAS,YAAY;AAErB,SAAS,uBAAuB,wBAAwB,oBAAoB;AAM5E,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,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,aACY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAGxC,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA,WAGU,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,iBAAiB;AAAA;AAGzB,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,YAIW,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA,eAC7B,gBAAgB;AAAA;AAGxB,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA,mBACkB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,WAExC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,eAE5B,kBAAkB;AAAA;AAG1B,MAAM,mBAAmB,OAAO,QAAQ;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAAA;AAAA,mBAEkB,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA;AAAA,YAEvC,CAAC,EAAE,KAAK,MAAM,aAAa,IAAI,CAAC;AAAA,eAC7B,mBAAmB;AAAA;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+const SlotPropsAsObject = {
+  dsSquareindicatorRoot: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineLeft: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineTop: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineRight: { "aria-label": "just a typescript test" },
+  dsSquareindicatorLineBottom: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsSquareindicatorRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineLeft: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineTop: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineRight: () => ({ "aria-label": "just a typescript test" }),
+  dsSquareindicatorLineBottom: () => ({ "aria-label": "just a typescript test" })
+};
+const SlotFunctionsAreValidProps = SlotPropsAsFunctions;
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from '../constants/index.js';\nimport type { DSSquareIndicatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObject: Partial<DSSquareIndicatorT.Props> = {\n  dsSquareindicatorRoot: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineLeft: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineTop: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineRight: { 'aria-label': 'just a typescript test' },\n  dsSquareindicatorLineBottom: { 'aria-label': 'just a typescript test' },\n};\n\nconst SlotPropsAsFunctions: DSSquareIndicatorT.SlotFunctionArguments = {\n  dsSquareindicatorRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineLeft: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineTop: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineRight: () => ({ 'aria-label': 'just a typescript test' }),\n  dsSquareindicatorLineBottom: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// The function form must also be accepted by the public Props, slot by slot\nconst SlotFunctionsAreValidProps: Partial<DSSquareIndicatorT.Props> = SlotPropsAsFunctions;\n\n// Exhaustiveness check \u2014 fails compilation if a slot is missing from SlotFunctionArguments\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSSquareIndicatorName, typeof SQUARE_INDICATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACKvB,MAAM,oBAAuD;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,2BAA2B,EAAE,cAAc,yBAAyB;AAAA,EACpE,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,4BAA4B,EAAE,cAAc,yBAAyB;AAAA,EACrE,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AAEA,MAAM,uBAAiE;AAAA,EACrE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AAGA,MAAM,6BAAgE;AAGtE,MAAM,6CAEF;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-square-indicator-valid.js

@@ -50,10 +50,34 @@ const testDefinitionAsConst = {
   withTooltip: false,
   tooltipStartPlacementPreference: "bottom"
 };
+const testGlobalAttributesAndSlots = {
+  text: "Loading",
+  id: "documents-loader",
+  className: "custom-class",
+  "aria-label": "Loading the loan documents",
+  dsSquareindicatorRoot: { "aria-describedby": "loader-help" },
+  dsSquareindicatorLineLeft: () => ({ "data-custom": "left" })
+};
+const testGlobalAttributesAndSlotsAsConst = {
+  id: "documents-loader",
+  "aria-label": "Loading the loan documents",
+  dsSquareindicatorLineBottom: { "data-custom": "bottom" }
+};
 const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSSquareIndicator, { ...testExplicitDefinition }),
   /* @__PURE__ */ jsx(DSSquareIndicator, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ jsx(DSSquareIndicator, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ jsx(DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" })
+  /* @__PURE__ */ jsx(DSSquareIndicator, { ...testGlobalAttributesAndSlots }),
+  /* @__PURE__ */ jsx(DSSquareIndicator, { ...testGlobalAttributesAndSlotsAsConst }),
+  /* @__PURE__ */ jsx(DSSquareIndicator, { size: "m", color: "dark", text: "", showText: true, withTooltip: true, tooltipStartPlacementPreference: "bottom" }),
+  /* @__PURE__ */ jsx(
+    DSSquareIndicator,
+    {
+      "data-testid": "ds-squareindicator",
+      "aria-label": "Loading the loan documents",
+      dsSquareindicatorRoot: { "aria-describedby": "loader-help" },
+      dsSquareindicatorLineTop: () => ({ "data-custom": "top" })
+    }
+  )
 ] });
 //# sourceMappingURL=typescript-square-indicator-valid.js.map

package/dist/esm/typescript-testing/typescript-square-indicator-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-square-indicator-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  color: 'dark',\n  size: 'm',\n  text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSquareIndicator {...testExplicitDefinition} />\n    <DSSquareIndicator {...testInferedTypeCompatibility} />\n    <DSSquareIndicator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyErB,mBAEE,KAFF;AAxEF,SAAS,yBAAyB;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,qBAAmB,GAAG,wBAAwB;AAAA,EAC/C,oBAAC,qBAAmB,GAAG,8BAA8B;AAAA,EACrD,oBAAC,qBAAmB,GAAG,uBAAuB;AAAA,EAE9C,oBAAC,qBAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,GACjH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSSquareIndicator } from '../index.js';\nimport type { DSSquareIndicatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSSquareIndicatorT.Props;\ntype ComponentPropsInternals = DSSquareIndicatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSSquareIndicatorT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  color: 'dark',\n  size: 'm',\n  text: '',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  size: 'm',\n  color: 'dark',\n  text: '',\n  showText: true,\n  withTooltip: false,\n  tooltipStartPlacementPreference: 'bottom',\n} as const;\n\n// global attributes are forwarded to the root, slot props accept both the object and the function form\nconst testGlobalAttributesAndSlots: ComponentPropsForApp = {\n  text: 'Loading',\n  id: 'documents-loader',\n  className: 'custom-class',\n  'aria-label': 'Loading the loan documents',\n  dsSquareindicatorRoot: { 'aria-describedby': 'loader-help' },\n  dsSquareindicatorLineLeft: () => ({ 'data-custom': 'left' }),\n};\n\nconst testGlobalAttributesAndSlotsAsConst = {\n  id: 'documents-loader',\n  'aria-label': 'Loading the loan documents',\n  dsSquareindicatorLineBottom: { 'data-custom': 'bottom' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSSquareIndicator {...testExplicitDefinition} />\n    <DSSquareIndicator {...testInferedTypeCompatibility} />\n    <DSSquareIndicator {...testDefinitionAsConst} />\n    <DSSquareIndicator {...testGlobalAttributesAndSlots} />\n    <DSSquareIndicator {...testGlobalAttributesAndSlotsAsConst} />\n    {/* works with inline values */}\n    <DSSquareIndicator size=\"m\" color=\"dark\" text=\"\" showText withTooltip tooltipStartPlacementPreference=\"bottom\" />\n    <DSSquareIndicator\n      data-testid=\"ds-squareindicator\"\n      aria-label=\"Loading the loan documents\"\n      dsSquareindicatorRoot={{ 'aria-describedby': 'loader-help' }}\n      dsSquareindicatorLineTop={() => ({ 'data-custom': 'top' })}\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyFrB,mBAEE,KAFF;AAxFF,SAAS,yBAAyB;AAUlC,MAAM,sBAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAA+B;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAEA,MAAM,wBAAwB;AAAA,EAC5B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iCAAiC;AACnC;AAGA,MAAM,+BAAqD;AAAA,EACzD,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,cAAc;AAAA,EACd,uBAAuB,EAAE,oBAAoB,cAAc;AAAA,EAC3D,2BAA2B,OAAO,EAAE,eAAe,OAAO;AAC5D;AAEA,MAAM,sCAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,cAAc;AAAA,EACd,6BAA6B,EAAE,eAAe,SAAS;AACzD;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,qBAAmB,GAAG,wBAAwB;AAAA,EAC/C,oBAAC,qBAAmB,GAAG,8BAA8B;AAAA,EACrD,oBAAC,qBAAmB,GAAG,uBAAuB;AAAA,EAC9C,oBAAC,qBAAmB,GAAG,8BAA8B;AAAA,EACrD,oBAAC,qBAAmB,GAAG,qCAAqC;AAAA,EAE5D,oBAAC,qBAAkB,MAAK,KAAI,OAAM,QAAO,MAAK,IAAG,UAAQ,MAAC,aAAW,MAAC,iCAAgC,UAAS;AAAA,EAC/G;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,uBAAuB,EAAE,oBAAoB,cAAc;AAAA,MAC3D,0BAA0B,OAAO,EAAE,eAAe,MAAM;AAAA;AAAA,EAC1D;AAAA,GACF;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -0,0 +1,43 @@
+export declare const DSSquareIndicatorName = "DSSquareindicator";
+export declare const SQUARE_INDICATOR_SLOTS: {
+    readonly ROOT: "root";
+    readonly LINE_LEFT: "line-left";
+    readonly LINE_TOP: "line-top";
+    readonly LINE_RIGHT: "line-right";
+    readonly LINE_BOTTOM: "line-bottom";
+};
+export declare const SQUARE_INDICATOR_DATA_TESTID: {
+    readonly ROOT: "ds-squareindicator-root";
+    readonly LINE_LEFT: "ds-squareindicator-line-left";
+    readonly LINE_TOP: "ds-squareindicator-line-top";
+    readonly LINE_RIGHT: "ds-squareindicator-line-right";
+    readonly LINE_BOTTOM: "ds-squareindicator-line-bottom";
+};
+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

@@ -1,2 +1,3 @@
 export { DSSquareIndicator, DSSquareIndicatorWithSchema } from './DSSquareIndicator.js';
 export type { DSSquareIndicatorT } from './react-desc-prop-types.js';
+export { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS, SQUARE_INDICATOR_DATA_TESTID } from './constants/index.js';

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

@@ -1,5 +1,16 @@
-import type { WeakValidationMap } from 'react';
+import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSSquareIndicatorName, SQUARE_INDICATOR_SLOTS } from './constants/index.js';
 export declare namespace DSSquareIndicatorT {
+    type SlotFunctionArguments = {
+        dsSquareindicatorRoot: () => object;
+        dsSquareindicatorLineLeft: () => object;
+        dsSquareindicatorLineTop: () => object;
+        dsSquareindicatorLineRight: () => object;
+        dsSquareindicatorLineBottom: () => object;
+    };
+    interface RequiredProps {
+    }
     interface DefaultProps {
         size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
         color: 'light' | 'dark';
@@ -8,10 +19,13 @@ export declare namespace DSSquareIndicatorT {
         withTooltip: boolean;
         tooltipStartPlacementPreference: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
     }
-    interface Props extends Partial<DefaultProps> {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSSquareIndicatorName, typeof SQUARE_INDICATOR_SLOTS> {
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>, RequiredProps {
     }
-    interface InternalProps extends DefaultProps {
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>, RequiredProps {
     }
 }
 export declare const defaultProps: DSSquareIndicatorT.DefaultProps;
-export declare const SquareIndicatorPropTypes: WeakValidationMap<unknown>;
+export declare const DSSquareIndicatorPropTypes: DSPropTypesSchema<DSSquareIndicatorT.Props>;
+export declare const SquareIndicatorPropTypes: ValidationMap<DSSquareIndicatorT.Props>;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@elliemae/ds-square-indicator",
-  "version": "3.80.0-next.36",
+  "version": "3.80.0-next.39",
   "license": "MIT",
-  "description": "ICE MT - Dimsum - Indeterminate Progress Indicator",
+  "description": "ICE MT - Dimsum - Square Indicator",
   "files": [
     "dist"
   ],
@@ -36,16 +36,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.80.0-next.36",
-    "@elliemae/ds-props-helpers": "3.80.0-next.36",
-    "@elliemae/ds-system": "3.80.0-next.36",
-    "@elliemae/ds-tooltip-v3": "3.80.0-next.36",
+    "@elliemae/ds-grid": "3.80.0-next.39",
+    "@elliemae/ds-props-helpers": "3.80.0-next.39",
+    "@elliemae/ds-system": "3.80.0-next.39",
+    "@elliemae/ds-tooltip-v3": "3.80.0-next.39",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.39",
     "styled-components": "~5.3.11",
     "uid": "^2.0.2"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.36",
-    "@elliemae/ds-test-utils": "3.80.0-next.36",
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.39",
+    "@elliemae/ds-test-utils": "3.80.0-next.39",
     "jest": "^30.0.0",
     "styled-components": "~5.3.11"
   },

package/dist/cjs/constants.js.map

@@ -1,7 +0,0 @@
-{
-  "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/esm/constants.js

@@ -1,36 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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/types/constants.d.ts

@@ -1,28 +0,0 @@
-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;
-};