@elliemae/ds-side-panel 3.37.0-rc.3 → 3.37.0-rc.5

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n    side?: 'left' | 'right';\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAA0B;AAqBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,kCAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n    side?: 'left' | 'right';\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAqBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,kCAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,kCAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,kCAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,kCAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,kCAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,kCAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,kCAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,kCAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
   "names": []
 }

package/dist/cjs/useDelayedOpen.js

@@ -33,7 +33,8 @@ __export(useDelayedOpen_exports, {
 module.exports = __toCommonJS(useDelayedOpen_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_useSideEffectSyntheticEvent = require("./useSideEffectSyntheticEvent.js");
+var import_useLatestValueReferenciallyStable = require("./useLatestValueReferenciallyStable.js");
 const handleOnIsOpenChange = (latestIsOpen, {
   setIsOpenAnimated,
   dynamicPropIsOpen
@@ -50,12 +51,12 @@ const handleOnIsOpenChange = (latestIsOpen, {
 };
 const useDelayedOpen = (isOpen) => {
   const [isOpenAnimated, setIsOpenAnimated] = import_react.default.useState(isOpen);
-  const dynamicPropIsOpen = (0, import_ds_utilities.useLatestValueReferenciallyStable)(isOpen);
+  const dynamicPropIsOpen = (0, import_useLatestValueReferenciallyStable.useLatestValueReferenciallyStable)(isOpen);
   const cbOpts = import_react.default.useMemo(
     () => ({ setIsOpenAnimated, dynamicPropIsOpen }),
     [setIsOpenAnimated, dynamicPropIsOpen]
   );
-  (0, import_ds_utilities.useSideEffectSyntheticEvent)(isOpen, handleOnIsOpenChange, cbOpts);
+  (0, import_useSideEffectSyntheticEvent.useSideEffectSyntheticEvent)(isOpen, handleOnIsOpenChange, cbOpts);
   return isOpenAnimated;
 };
 //# sourceMappingURL=useDelayedOpen.js.map

package/dist/cjs/useDelayedOpen.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useDelayedOpen.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from '@elliemae/ds-utilities';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAA+E;AAE/E,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAS,MAAM;AACjE,QAAM,wBAAoB,uDAAkC,MAAM;AAClE,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,uDAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport { useSideEffectSyntheticEvent } from './useSideEffectSyntheticEvent.js';\nimport { useLatestValueReferenciallyStable } from './useLatestValueReferenciallyStable.js';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,yCAA4C;AAC5C,+CAAkD;AAElD,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAS,MAAM;AACjE,QAAM,wBAAoB,4EAAkC,MAAM;AAClE,QAAM,SAAS,aAAAA,QAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,sEAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/useLatestValueReferenciallyStable.js

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

package/dist/cjs/useLatestValueReferenciallyStable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useLatestValueReferenciallyStable.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\nexport const useLatestValueReferenciallyStable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAG3B,MAAM,oCAAoD,CAAC,iBAAiB;AACjF,QAAM,cAAU,qBAAO,YAAY;AACnC,8BAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/useSideEffectSyntheticEvent.js

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

package/dist/cjs/useSideEffectSyntheticEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useSideEffectSyntheticEvent.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { useLatestValueReferenciallyStable } from './useLatestValueReferenciallyStable.js';\n/**\n * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.\n * @param {any} dependency - the variable that we want to listen to\n * @param {Function} callback - the callback that we want to execute when the dependency changes\n * @param {object} callbackOpts - the options to be passed to the callback function\n * @returns {void}\n * @invoke useLatestValueReferenciallyStable\n */\nexport const useSideEffectSyntheticEvent = <T, CBOpts>(\n  dependency: T,\n  callback: (latestVal: T, opts: CBOpts) => void,\n  callbackOpts: CBOpts,\n) => {\n  const refCb = useLatestValueReferenciallyStable(callback);\n  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);\n  // this is the useEffect that simulates the event\n  React.useEffect(() => {\n    refCb?.current?.(dependency, refCbOpts.current);\n    // the point of this custom hook is making sure we only listen to the dependency and nothing else\n    //  without violating the rules of hooks/exhaustive-deps rule and making it explicit that we want to simulate an event\n    //  refCb & refCbOpts are forced to be referentially stable, so we can safely put it in the dependency array\n  }, [dependency, refCb, refCbOpts]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+CAAkD;AAS3C,MAAM,8BAA8B,CACzC,YACA,UACA,iBACG;AACH,QAAM,YAAQ,4EAAkC,QAAQ;AACxD,QAAM,gBAAY,4EAAkC,YAAY;AAEhE,eAAAA,QAAM,UAAU,MAAM;AACpB,WAAO,UAAU,YAAY,UAAU,OAAO;AAAA,EAIhD,GAAG,CAAC,YAAY,OAAO,SAAS,CAAC;AACnC;",
+  "names": ["React"]
+}

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.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n    side?: 'left' | 'right';\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,iBAAiB;AAqBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSSidePanelT {\n  export interface IProps {\n    children?: React.ReactNode;\n    isOpen: boolean;\n    footer?: React.ReactNode;\n    header?: React.ReactNode;\n    panelContent?: React.ReactNode;\n    panelWidth: number;\n    widthWhenIsClosed: number;\n    panelContentOverflow: 'auto' | 'hidden';\n    withBorder: boolean;\n    withBoxShadow: boolean;\n    noGridInfluencer?: boolean;\n    side?: 'left' | 'right';\n  }\n\n  export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n  isOpen: false,\n  panelWidth: 300,\n  widthWhenIsClosed: 0,\n  panelContentOverflow: 'auto',\n  withBorder: true,\n  withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n  /**\n   * Main content\n   */\n  children: PropTypes.element.isRequired.description('Main content'),\n  /**\n   * Should show the slide panel or not\n   */\n  isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n  /**\n   * Footer for Slide Panel\n   */\n  footer: PropTypes.element.description('Footer for Slide Panel'),\n  /**\n   * Header for Slide Panel instance of SlidePanelHeader\n   */\n  header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n  /**\n   * Content for Slide Panel\n   */\n  panelContent: PropTypes.element.description('Content for Slide Panel'),\n  /**\n   * Width of the panel open. eg: 300\n   */\n  panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n  widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n  panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n  withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n  withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n  noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n  side: PropTypes.oneOf(['left', 'right'])\n    .description('Wheter to put the side panel on the left or right')\n    .defaultValue('right'),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AAqBnB,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA;AAAA;AAAA;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAAA,EAC9F,MAAM,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EACpC,YAAY,mDAAmD,EAC/D,aAAa,OAAO;AACzB;",
   "names": []
 }

package/dist/esm/useDelayedOpen.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import React2 from "react";
-import { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from "@elliemae/ds-utilities";
+import { useSideEffectSyntheticEvent } from "./useSideEffectSyntheticEvent.js";
+import { useLatestValueReferenciallyStable } from "./useLatestValueReferenciallyStable.js";
 const handleOnIsOpenChange = (latestIsOpen, {
   setIsOpenAnimated,
   dynamicPropIsOpen

package/dist/esm/useDelayedOpen.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useDelayedOpen.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSideEffectSyntheticEvent, useLatestValueReferenciallyStable } from '@elliemae/ds-utilities';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,6BAA6B,yCAAyC;AAE/E,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAS,MAAM;AACjE,QAAM,oBAAoB,kCAAkC,MAAM;AAClE,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,8BAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useSideEffectSyntheticEvent } from './useSideEffectSyntheticEvent.js';\nimport { useLatestValueReferenciallyStable } from './useLatestValueReferenciallyStable.js';\n\nconst handleOnIsOpenChange = (\n  latestIsOpen: boolean,\n  {\n    setIsOpenAnimated,\n    dynamicPropIsOpen,\n  }: {\n    setIsOpenAnimated: React.Dispatch<React.SetStateAction<boolean>>;\n    dynamicPropIsOpen: React.MutableRefObject<boolean>;\n  },\n) => {\n  if (latestIsOpen) {\n    // We are opening the side panel, render the content right now\n    setIsOpenAnimated(true);\n  } else {\n    // We are closing the side panel, wait for 300ms to unmount the content\n    setTimeout(() => {\n      if (!dynamicPropIsOpen.current) {\n        setIsOpenAnimated(false);\n      }\n    }, 300);\n  }\n};\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n  const [isOpenAnimated, setIsOpenAnimated] = React.useState(isOpen);\n  const dynamicPropIsOpen = useLatestValueReferenciallyStable(isOpen);\n  const cbOpts = React.useMemo(\n    () => ({ setIsOpenAnimated, dynamicPropIsOpen }),\n    [setIsOpenAnimated, dynamicPropIsOpen],\n  );\n\n  useSideEffectSyntheticEvent(isOpen, handleOnIsOpenChange, cbOpts);\n\n  return isOpenAnimated;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAC5C,SAAS,yCAAyC;AAElD,MAAM,uBAAuB,CAC3B,cACA;AAAA,EACE;AAAA,EACA;AACF,MAIG;AACH,MAAI,cAAc;AAEhB,sBAAkB,IAAI;AAAA,EACxB,OAAO;AAEL,eAAW,MAAM;AACf,UAAI,CAAC,kBAAkB,SAAS;AAC9B,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AACF;AAEO,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAS,MAAM;AACjE,QAAM,oBAAoB,kCAAkC,MAAM;AAClE,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO,EAAE,mBAAmB,kBAAkB;AAAA,IAC9C,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AAEA,8BAA4B,QAAQ,sBAAsB,MAAM;AAEhE,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/esm/useLatestValueReferenciallyStable.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useRef, useEffect } from "react";
+const useLatestValueReferenciallyStable = (referenceVar) => {
+  const mutable = useRef(referenceVar);
+  useEffect(() => {
+    mutable.current = referenceVar;
+  }, [referenceVar]);
+  return mutable;
+};
+export {
+  useLatestValueReferenciallyStable
+};
+//# sourceMappingURL=useLatestValueReferenciallyStable.js.map

package/dist/esm/useLatestValueReferenciallyStable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useLatestValueReferenciallyStable.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useEffect } from 'react';\ntype UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;\n\nexport const useLatestValueReferenciallyStable: UseMakeMutable = (referenceVar) => {\n  const mutable = useRef(referenceVar);\n  useEffect(() => {\n    mutable.current = referenceVar;\n  }, [referenceVar]);\n  return mutable;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,iBAAiB;AAG3B,MAAM,oCAAoD,CAAC,iBAAiB;AACjF,QAAM,UAAU,OAAO,YAAY;AACnC,YAAU,MAAM;AACd,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,YAAY,CAAC;AACjB,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/useSideEffectSyntheticEvent.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import React2 from "react";
+import { useLatestValueReferenciallyStable } from "./useLatestValueReferenciallyStable.js";
+const useSideEffectSyntheticEvent = (dependency, callback, callbackOpts) => {
+  const refCb = useLatestValueReferenciallyStable(callback);
+  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);
+  React2.useEffect(() => {
+    refCb?.current?.(dependency, refCbOpts.current);
+  }, [dependency, refCb, refCbOpts]);
+};
+export {
+  useSideEffectSyntheticEvent
+};
+//# sourceMappingURL=useSideEffectSyntheticEvent.js.map

package/dist/esm/useSideEffectSyntheticEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useSideEffectSyntheticEvent.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useLatestValueReferenciallyStable } from './useLatestValueReferenciallyStable.js';\n/**\n * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.\n * @param {any} dependency - the variable that we want to listen to\n * @param {Function} callback - the callback that we want to execute when the dependency changes\n * @param {object} callbackOpts - the options to be passed to the callback function\n * @returns {void}\n * @invoke useLatestValueReferenciallyStable\n */\nexport const useSideEffectSyntheticEvent = <T, CBOpts>(\n  dependency: T,\n  callback: (latestVal: T, opts: CBOpts) => void,\n  callbackOpts: CBOpts,\n) => {\n  const refCb = useLatestValueReferenciallyStable(callback);\n  const refCbOpts = useLatestValueReferenciallyStable(callbackOpts);\n  // this is the useEffect that simulates the event\n  React.useEffect(() => {\n    refCb?.current?.(dependency, refCbOpts.current);\n    // the point of this custom hook is making sure we only listen to the dependency and nothing else\n    //  without violating the rules of hooks/exhaustive-deps rule and making it explicit that we want to simulate an event\n    //  refCb & refCbOpts are forced to be referentially stable, so we can safely put it in the dependency array\n  }, [dependency, refCb, refCbOpts]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,yCAAyC;AAS3C,MAAM,8BAA8B,CACzC,YACA,UACA,iBACG;AACH,QAAM,QAAQ,kCAAkC,QAAQ;AACxD,QAAM,YAAY,kCAAkC,YAAY;AAEhE,EAAAA,OAAM,UAAU,MAAM;AACpB,WAAO,UAAU,YAAY,UAAU,OAAO;AAAA,EAIhD,GAAG,CAAC,YAAY,OAAO,SAAS,CAAC;AACnC;",
+  "names": ["React"]
+}

package/dist/types/useLatestValueReferenciallyStable.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+type UseMakeMutable = <T>(referenceVar: T) => React.MutableRefObject<T>;
+export declare const useLatestValueReferenciallyStable: UseMakeMutable;
+export {};

package/dist/types/useSideEffectSyntheticEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is a custom hook that allows us to simulate a synthetic event. This ensure we only trigger a side effect when a specific variable(dependency) changes.
+ * @param {any} dependency - the variable that we want to listen to
+ * @param {Function} callback - the callback that we want to execute when the dependency changes
+ * @param {object} callbackOpts - the options to be passed to the callback function
+ * @returns {void}
+ * @invoke useLatestValueReferenciallyStable
+ */
+export declare const useSideEffectSyntheticEvent: <T, CBOpts>(dependency: T, callback: (latestVal: T, opts: CBOpts) => void, callbackOpts: CBOpts) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-side-panel",
-  "version": "3.37.0-rc.3",
+  "version": "3.37.0-rc.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Side Panel",
   "files": [
@@ -56,18 +56,17 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.37.0-rc.3",
-    "@elliemae/ds-grid": "3.37.0-rc.3",
-    "@elliemae/ds-icons": "3.37.0-rc.3",
-    "@elliemae/ds-props-helpers": "3.37.0-rc.3",
-    "@elliemae/ds-side-panel-header": "3.37.0-rc.3",
-    "@elliemae/ds-system": "3.37.0-rc.3",
-    "@elliemae/ds-utilities": "3.37.0-rc.3"
+    "@elliemae/ds-button-v2": "3.37.0-rc.5",
+    "@elliemae/ds-grid": "3.37.0-rc.5",
+    "@elliemae/ds-icons": "3.37.0-rc.5",
+    "@elliemae/ds-props-helpers": "3.37.0-rc.5",
+    "@elliemae/ds-system": "3.37.0-rc.5",
+    "@elliemae/ds-side-panel-header": "3.37.0-rc.5"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.37.0-rc.3"
+    "@elliemae/ds-monorepo-devops": "3.37.0-rc.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",