@elliemae/ds-mini-toolbar 3.16.0-next.2 → 3.16.0-next.21

package/dist/cjs/Components/MiniToolbar.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -31,12 +35,12 @@ module.exports = __toCommonJS(MiniToolbar_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_styles = require("../styles");
-var import_propTypes = require("../propTypes");
-var import_useGenerateItems = require("../hooks/useGenerateItems");
+var import_styles = require("../styles.js");
+var import_propTypes = require("../propTypes.js");
+var import_useGenerateItems = require("../hooks/useGenerateItems.js");
 const Elipsis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MoreOptionsVert, { color: ["brand-primary", "600"], size: "m" });
 const MiniToolbar = ({ items, overflowButtonProps }) => {
   const [shortcutItems, dropdownMenuItems] = (0, import_useGenerateItems.useGenerateItems)(items);
@@ -78,6 +82,6 @@ const MiniToolbar = ({ items, overflowButtonProps }) => {
 };
 MiniToolbar.propTypes = import_propTypes.miniToolbarProps;
 MiniToolbar.displayName = "MiniToolbar";
-const MiniToolbarWithSchema = (0, import_ds_utilities.describe)(MiniToolbar);
+const MiniToolbarWithSchema = (0, import_ds_props_helpers.describe)(MiniToolbar);
 MiniToolbarWithSchema.propTypes = import_propTypes.miniToolbarProps;
 //# sourceMappingURL=MiniToolbar.js.map

package/dist/cjs/Components/MiniToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Components/MiniToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles';\nimport { miniToolbarProps } from '../propTypes';\nimport { useGenerateItems } from '../hooks/useGenerateItems';\nimport type { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n  const openDropdownMenuKeyPress = useCallback((e) => {\n    if (e.key === ' ') {\n      setIsDropdownMenuOpen(true);\n    }\n  }, []);\n\n  const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n  return (\n    <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n      {shortcutItems}\n      <DSDropdownMenu\n        data-testid=\"ds-mini-toolbar__dropdown-menu\"\n        isOpen={isDropdownMenuOpen}\n        onSelectMenuItem={closeDropdownMenu}\n        onClickOutsideMenu={closeDropdownMenu}\n        options={dropdownMenuItems}\n        triggerComponent={\n          <StyledButton\n            aria-label={ariaLabel}\n            data-testid=\"ds-mini-toolbar__elipsis\"\n            size=\"m\"\n            style={style}\n            buttonType={buttonType}\n            onClick={openDropdownMenu}\n            onKeyPress={openDropdownMenuKeyPress}\n            leftIcon={Elipsis}\n          />\n        }\n      />\n    </Container>\n  );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSP;AAThB,mBAA6C;AAC7C,0BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,4CAAC,mCAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,QAAI,0CAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAE3E,QAAM,wBAAoB,0BAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,uBAAmB,0BAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,+BAA2B,0BAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,6CAAC,2BAAU,MAAK,WAAU,eAAY,mBACnC;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,eAAY;AAAA,YACZ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles.js';\nimport { miniToolbarProps } from '../propTypes.js';\nimport { useGenerateItems } from '../hooks/useGenerateItems.js';\nimport type { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n  const openDropdownMenuKeyPress = useCallback((e) => {\n    if (e.key === ' ') {\n      setIsDropdownMenuOpen(true);\n    }\n  }, []);\n\n  const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n  return (\n    <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n      {shortcutItems}\n      <DSDropdownMenu\n        data-testid=\"ds-mini-toolbar__dropdown-menu\"\n        isOpen={isDropdownMenuOpen}\n        onSelectMenuItem={closeDropdownMenu}\n        onClickOutsideMenu={closeDropdownMenu}\n        options={dropdownMenuItems}\n        triggerComponent={\n          <StyledButton\n            aria-label={ariaLabel}\n            data-testid=\"ds-mini-toolbar__elipsis\"\n            size=\"m\"\n            style={style}\n            buttonType={buttonType}\n            onClick={openDropdownMenu}\n            onKeyPress={openDropdownMenuKeyPress}\n            leftIcon={Elipsis}\n          />\n        }\n      />\n    </Container>\n  );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSP;AAThB,mBAA6C;AAC7C,8BAAyB;AACzB,6BAA+B;AAC/B,sBAAgC;AAChC,oBAAwC;AACxC,uBAAiC;AACjC,8BAAiC;AAGjC,MAAM,UAAU,4CAAC,mCAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,QAAI,0CAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAkB,KAAK;AAE3E,QAAM,wBAAoB,0BAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,uBAAmB,0BAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,+BAA2B,0BAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,6CAAC,2BAAU,MAAK,WAAU,eAAY,mBACnC;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,eAAY;AAAA,YACZ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/Components/ToolbarShortcut.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,7 +34,7 @@ module.exports = __toCommonJS(ToolbarShortcut_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styles = require("../styles");
+var import_styles = require("../styles.js");
 const ToolbarShortcut = (props) => {
   const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;
   const leftRef = (0, import_react.useRef)(null);

package/dist/cjs/Components/ToolbarShortcut.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Components/ToolbarShortcut.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles';\nimport type { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n  const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n  const leftRef = useRef<HTMLElement | null>(null);\n  const rightRef = useRef<HTMLElement | null>(null);\n  const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const { position = 'left', isOpen = false } = contextualRegionProps || {};\n  const { style } = shortcutProps || {};\n\n  const mergedProps = {\n    ...sharedProps,\n    ...shortcutProps,\n  };\n\n  useEffect(() => {\n    if (isOpen && leftRef.current) {\n      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n    }\n    if (isOpen && rightRef.current) {\n      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n    }\n\n    return () => {\n      clearTimeout(timerLeft.current);\n      clearTimeout(timerRight.current);\n    };\n  }, [isOpen, leftRef, rightRef]);\n\n  return (\n    <>\n      {isOpen && position === 'left' && (\n        <Item>\n          <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n        </Item>\n      )}\n      {Component && (\n        <Item style={style}>\n          <Component {...mergedProps} />\n        </Item>\n      )}\n      {isOpen && position === 'right' && (\n        <Item>\n          <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n        </Item>\n      )}\n    </>\n  );\n};\n\nexport { ToolbarShortcut };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,mBAAyC;AACzC,oBAAqB;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,cAAU,qBAA2B,IAAI;AAC/C,QAAM,eAAW,qBAA2B,IAAI;AAChD,QAAM,gBAAY,qBAA8C,IAAI;AACpE,QAAM,iBAAa,qBAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE,4EACG;AAAA,cAAU,aAAa,UACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,SAAU,GAAG,uBAAuB,GAClE;AAAA,IAED,aACC,4CAAC,sBAAK,OACJ,sDAAC,aAAW,GAAG,aAAa,GAC9B;AAAA,IAED,UAAU,aAAa,WACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,UAAW,GAAG,uBAAuB,GACnE;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles.js';\nimport type { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n  const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n  const leftRef = useRef<HTMLElement | null>(null);\n  const rightRef = useRef<HTMLElement | null>(null);\n  const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const { position = 'left', isOpen = false } = contextualRegionProps || {};\n  const { style } = shortcutProps || {};\n\n  const mergedProps = {\n    ...sharedProps,\n    ...shortcutProps,\n  };\n\n  useEffect(() => {\n    if (isOpen && leftRef.current) {\n      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n    }\n    if (isOpen && rightRef.current) {\n      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n    }\n\n    return () => {\n      clearTimeout(timerLeft.current);\n      clearTimeout(timerRight.current);\n    };\n  }, [isOpen, leftRef, rightRef]);\n\n  return (\n    <>\n      {isOpen && position === 'left' && (\n        <Item>\n          <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n        </Item>\n      )}\n      {Component && (\n        <Item style={style}>\n          <Component {...mergedProps} />\n        </Item>\n      )}\n      {isOpen && position === 'right' && (\n        <Item>\n          <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n        </Item>\n      )}\n    </>\n  );\n};\n\nexport { ToolbarShortcut };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCnB;AAlCJ,mBAAyC;AACzC,oBAAqB;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,cAAU,qBAA2B,IAAI;AAC/C,QAAM,eAAW,qBAA2B,IAAI;AAChD,QAAM,gBAAY,qBAA8C,IAAI;AACpE,QAAM,iBAAa,qBAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE,4EACG;AAAA,cAAU,aAAa,UACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,SAAU,GAAG,uBAAuB,GAClE;AAAA,IAED,aACC,4CAAC,sBAAK,OACJ,sDAAC,aAAW,GAAG,aAAa,GAC9B;AAAA,IAED,UAAU,aAAa,WACtB,4CAAC,sBACC,sDAAC,oBAAiB,UAAU,UAAW,GAAG,uBAAuB,GACnE;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/Button.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/Components/outOfTheBox/Button.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/Button.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst MiniToolbarButton = (props: Record<string, unknown>): React.ReactElement => (\n  <DSButton {...props} aria-label={props.ariaLabel} data-testid=\"ds-mini-toolbar__shortcut\" />\n);\n\nexport { MiniToolbarButton };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,uBAAyB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,4CAAC,6BAAU,GAAG,OAAO,cAAY,MAAM,WAAW,eAAY,6BAA4B;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIrB;AAHF,uBAAyB;AAEzB,MAAM,oBAAoB,CAAC,UACzB,4CAAC,6BAAU,GAAG,OAAO,cAAY,MAAM,WAAW,eAAY,6BAA4B;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/ComboBox.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/Components/outOfTheBox/ComboBox.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/ComboBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { DSComboBox2 } from '@elliemae/ds-form';\n\nconst MiniToolbarComboBox = (props: Record<string, unknown>): React.ReactElement => <DSComboBox2 {...props} />;\n\nexport { MiniToolbarComboBox };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADG6D;AAFpF,qBAA4B;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,4CAAC,8BAAa,GAAG,OAAO;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADG6D;AAFpF,qBAA4B;AAE5B,MAAM,sBAAsB,CAAC,UAAuD,4CAAC,8BAAa,GAAG,OAAO;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/IconItem.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,7 +33,7 @@ __export(IconItem_exports, {
 module.exports = __toCommonJS(IconItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_styles = require("../../styles");
+var import_styles = require("../../styles.js");
 const MiniToolbarIcon = (props) => {
   const { Icon, size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/Components/outOfTheBox/IconItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/IconItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { StyledButton } from '../../styles';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { Icon, size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Icon size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nexport { MiniToolbarIcon };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaP;AAZhB,oBAA6B;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,QAAK,MAAY,OAAc;AAAA,MAC1C,eAAY;AAAA;AAAA,EACd;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { StyledButton } from '../../styles.js';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { Icon, size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Icon size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nexport { MiniToolbarIcon };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaP;AAZhB,oBAA6B;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,QAAK,MAAY,OAAc;AAAA,MAC1C,eAAY;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/SearchBox.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -32,7 +36,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_form = require("@elliemae/ds-form");
-var import_styles = require("../../styles");
+var import_styles = require("../../styles.js");
 const MiniToolbarSearchButton = (props) => {
   const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/Components/outOfTheBox/SearchBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/SearchBox.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Search size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n  <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBP;AAdhB,sBAAuB;AACvB,qBAA4B;AAC5B,oBAA6B;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,0BAAO,MAAY,OAAc;AAAA,MAC5C,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,4CAAC,8BAAY,WAAS,MAAC,UAAU,OAAQ,GAAG,OAAO;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles.js';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Search size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n  <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBP;AAdhB,sBAAuB;AACvB,qBAA4B;AAC5B,oBAA6B;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,4CAAC,0BAAO,MAAY,OAAc;AAAA,MAC5C,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,4CAAC,8BAAY,WAAS,MAAC,UAAU,OAAQ,GAAG,OAAO;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/Separator.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,6 +33,6 @@ __export(Separator_exports, {
 module.exports = __toCommonJS(Separator_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_styles = require("../../styles");
+var import_styles = require("../../styles.js");
 const MiniToolbarSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Separator, { "data-testid": "ds-mini-toolbar__separator" });
 //# sourceMappingURL=Separator.js.map

package/dist/cjs/Components/outOfTheBox/Separator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/Separator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Separator } from '../../styles';\n\nconst MiniToolbarSeparator = (): React.ReactElement => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGgC;AAFvD,oBAA0B;AAE1B,MAAM,uBAAuB,MAA0B,4CAAC,2BAAU,eAAY,8BAA6B;",
+  "sourcesContent": ["import React from 'react';\nimport { Separator } from '../../styles.js';\n\nconst MiniToolbarSeparator = (): React.ReactElement => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGgC;AAFvD,oBAA0B;AAE1B,MAAM,uBAAuB,MAA0B,4CAAC,2BAAU,eAAY,8BAA6B;",
   "names": []
 }

package/dist/cjs/Components/outOfTheBox/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -37,11 +41,11 @@ __export(outOfTheBox_exports, {
 });
 module.exports = __toCommonJS(outOfTheBox_exports);
 var React = __toESM(require("react"));
-var import_Button = require("./Button");
-var import_IconItem = require("./IconItem");
-var import_SearchBox = require("./SearchBox");
-var import_Separator = require("./Separator");
-var import_ComboBox = require("./ComboBox");
+var import_Button = require("./Button.js");
+var import_IconItem = require("./IconItem.js");
+var import_SearchBox = require("./SearchBox.js");
+var import_Separator = require("./Separator.js");
+var import_ComboBox = require("./ComboBox.js");
 const ICON_ITEM = "ds-icon-item";
 const SEPARATOR = "ds-separator";
 const BUTTON = "ds-button";

package/dist/cjs/Components/outOfTheBox/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Components/outOfTheBox/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { MiniToolbarButton } from './Button';\nexport { MiniToolbarIcon } from './IconItem';\nexport { MiniToolbarSearchBox } from './SearchBox';\nexport { MiniToolbarSeparator } from './Separator';\nexport { MiniToolbarComboBox } from './ComboBox';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAkC;AAClC,sBAAgC;AAChC,uBAAqC;AACrC,uBAAqC;AACrC,sBAAoC;AAE7B,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
+  "sourcesContent": ["export { MiniToolbarButton } from './Button.js';\nexport { MiniToolbarIcon } from './IconItem.js';\nexport { MiniToolbarSearchBox } from './SearchBox.js';\nexport { MiniToolbarSeparator } from './Separator.js';\nexport { MiniToolbarComboBox } from './ComboBox.js';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAkC;AAClC,sBAAgC;AAChC,uBAAqC;AACrC,uBAAqC;AACrC,sBAAoC;AAE7B,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
   "names": []
 }

package/dist/cjs/hooks/useGenerateItems.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -32,9 +36,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_uid = require("uid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_outOfTheBox = require("../Components/outOfTheBox");
-var import_ToolbarShortcut = require("../Components/ToolbarShortcut");
-var import_SearchBox = require("../Components/outOfTheBox/SearchBox");
+var import_outOfTheBox = require("../Components/outOfTheBox/index.js");
+var import_ToolbarShortcut = require("../Components/ToolbarShortcut.js");
+var import_SearchBox = require("../Components/outOfTheBox/SearchBox.js");
 const useGenerateItems = (items) => {
   const instanceUID = (0, import_react.useMemo)(() => (0, import_uid.uid)(6), []);
   const shortcutItems = (0, import_react.useMemo)(

package/dist/cjs/hooks/useGenerateItems.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useGenerateItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  ICON_ITEM,\n  SEPARATOR,\n  BUTTON,\n  SEARCH_BOX,\n  COMBO_BOX,\n  MiniToolbarButton,\n  MiniToolbarSeparator,\n  MiniToolbarSearchBox,\n  MiniToolbarIcon,\n  MiniToolbarComboBox,\n} from '../Components/outOfTheBox';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox';\nimport type { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const shortcutItems = useMemo(\n    () =>\n      items\n        .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n        .map((item, index) => {\n          const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n            item;\n\n          let Component;\n          let ContextualRegion;\n\n          if (component === SEPARATOR) return <MiniToolbarSeparator />;\n          if (component === BUTTON) Component = MiniToolbarButton;\n          else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n          else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n          else if (component === SEARCH_BOX) {\n            if (item.hasShortcut) {\n              Component = MiniToolbarSearchButton;\n            }\n            ContextualRegion = MiniToolbarSearchBox;\n          }\n          if (!ContextualRegion) {\n            ContextualRegion = contextualRegion;\n          }\n          if (!Component) {\n            Component = shortcutComponent;\n          }\n\n          return (\n            <ToolbarShortcut\n              key={`${instanceUID}-shortcut-${index}`}\n              Component={Component}\n              shortcutProps={shortcutProps}\n              sharedProps={sharedProps}\n              ContextualRegion={ContextualRegion}\n              contextualRegionProps={contextualRegionProps}\n            />\n          );\n        }),\n    [instanceUID, items],\n  );\n\n  const dropdownMenuItems = useMemo(\n    () =>\n      items.map((item, index) => {\n        const { component, sharedProps, dropdownComponentProps } = item;\n        const dropdownItem: GeneratedDropdownItemT = {};\n\n        const { Icon, color, label, onClick } = {\n          ...sharedProps,\n          ...dropdownComponentProps,\n        };\n\n        if (component === SEPARATOR) dropdownItem.type = 'separator';\n        else {\n          dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n          dropdownItem.onClick = () => onClick(item);\n          dropdownItem.label = label;\n          dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              onClick(item);\n            }\n          };\n        }\n\n        if (component === ICON_ITEM) {\n          dropdownItem.leftAddon = <Icon color={color} />;\n        } else if (component === SEARCH_BOX) {\n          dropdownItem.leftAddon = <Search color={color} />;\n        } else if (component === COMBO_BOX) {\n          dropdownItem.type = 'subMenu';\n          dropdownItem.label = label;\n          dropdownItem.subItems = sharedProps.options.map((option, index) => {\n            option.id = `${instanceUID}-option-${index}`;\n            option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n            option.onKeyDown = (e: React.KeyboardEvent) => {\n              if (e.key === ' ' || e.key === 'Enter') {\n                dropdownComponentProps.onSelectMenuItem(option);\n              }\n            };\n            return option;\n          });\n        }\n\n        return dropdownItem;\n      }),\n    [instanceUID, items],\n  );\n\n  return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCuB;AAjC9C,mBAA+B;AAC/B,iBAAoB;AACpB,sBAAuB;AACvB,yBAWO;AACP,6BAAgC;AAChC,uBAAwC;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,oBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,iCAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,4CAAC,2CAAqB;AAC1D,UAAI,cAAc;AAAQ,oBAAY;AAAA,eAC7B,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc,+BAAY;AACjC,YAAI,KAAK,aAAa;AACpB,sBAAY;AAAA,QACd;AACA,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,kBAAkB;AACrB,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,WAAW;AACd,oBAAY;AAAA,MACd;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,GAAG,wBAAwB;AAAA,MAMlC;AAAA,IAEJ,CAAC;AAAA,IACL,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,QAAM,wBAAoB;AAAA,IACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,YAAM,EAAE,WAAW,aAAa,uBAAuB,IAAI;AAC3D,YAAM,eAAuC,CAAC;AAE9C,YAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAEA,UAAI,cAAc;AAAW,qBAAa,OAAO;AAAA,WAC5C;AACH,qBAAa,KAAK,GAAG,wBAAwB;AAC7C,qBAAa,UAAU,MAAM,QAAQ,IAAI;AACzC,qBAAa,QAAQ;AACrB,qBAAa,YAAY,CAAC,MAA2B;AACnD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc,8BAAW;AAC3B,qBAAa,YAAY,4CAAC,QAAK,OAAc;AAAA,MAC/C,WAAW,cAAc,+BAAY;AACnC,qBAAa,YAAY,4CAAC,0BAAO,OAAc;AAAA,MACjD,WAAW,cAAc,8BAAW;AAClC,qBAAa,OAAO;AACpB,qBAAa,QAAQ;AACrB,qBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQA,WAAU;AACjE,iBAAO,KAAK,GAAG,sBAAsBA;AACrC,iBAAO,UAAU,MAAM,uBAAuB,iBAAiB,MAAM;AACrE,iBAAO,YAAY,CAAC,MAA2B;AAC7C,gBAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,qCAAuB,iBAAiB,MAAM;AAAA,YAChD;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,SAAO,CAAC,eAAe,iBAAiB;AAC1C;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  ICON_ITEM,\n  SEPARATOR,\n  BUTTON,\n  SEARCH_BOX,\n  COMBO_BOX,\n  MiniToolbarButton,\n  MiniToolbarSeparator,\n  MiniToolbarSearchBox,\n  MiniToolbarIcon,\n  MiniToolbarComboBox,\n} from '../Components/outOfTheBox/index.js';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut.js';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox.js';\nimport type { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const shortcutItems = useMemo(\n    () =>\n      items\n        .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n        .map((item, index) => {\n          const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n            item;\n\n          let Component;\n          let ContextualRegion;\n\n          if (component === SEPARATOR) return <MiniToolbarSeparator />;\n          if (component === BUTTON) Component = MiniToolbarButton;\n          else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n          else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n          else if (component === SEARCH_BOX) {\n            if (item.hasShortcut) {\n              Component = MiniToolbarSearchButton;\n            }\n            ContextualRegion = MiniToolbarSearchBox;\n          }\n          if (!ContextualRegion) {\n            ContextualRegion = contextualRegion;\n          }\n          if (!Component) {\n            Component = shortcutComponent;\n          }\n\n          return (\n            <ToolbarShortcut\n              key={`${instanceUID}-shortcut-${index}`}\n              Component={Component}\n              shortcutProps={shortcutProps}\n              sharedProps={sharedProps}\n              ContextualRegion={ContextualRegion}\n              contextualRegionProps={contextualRegionProps}\n            />\n          );\n        }),\n    [instanceUID, items],\n  );\n\n  const dropdownMenuItems = useMemo(\n    () =>\n      items.map((item, index) => {\n        const { component, sharedProps, dropdownComponentProps } = item;\n        const dropdownItem: GeneratedDropdownItemT = {};\n\n        const { Icon, color, label, onClick } = {\n          ...sharedProps,\n          ...dropdownComponentProps,\n        };\n\n        if (component === SEPARATOR) dropdownItem.type = 'separator';\n        else {\n          dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n          dropdownItem.onClick = () => onClick(item);\n          dropdownItem.label = label;\n          dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              onClick(item);\n            }\n          };\n        }\n\n        if (component === ICON_ITEM) {\n          dropdownItem.leftAddon = <Icon color={color} />;\n        } else if (component === SEARCH_BOX) {\n          dropdownItem.leftAddon = <Search color={color} />;\n        } else if (component === COMBO_BOX) {\n          dropdownItem.type = 'subMenu';\n          dropdownItem.label = label;\n          dropdownItem.subItems = sharedProps.options.map((option, index) => {\n            option.id = `${instanceUID}-option-${index}`;\n            option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n            option.onKeyDown = (e: React.KeyboardEvent) => {\n              if (e.key === ' ' || e.key === 'Enter') {\n                dropdownComponentProps.onSelectMenuItem(option);\n              }\n            };\n            return option;\n          });\n        }\n\n        return dropdownItem;\n      }),\n    [instanceUID, items],\n  );\n\n  return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCuB;AAjC9C,mBAA+B;AAC/B,iBAAoB;AACpB,sBAAuB;AACvB,yBAWO;AACP,6BAAgC;AAChC,uBAAwC;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,oBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,iCAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,4CAAC,2CAAqB;AAC1D,UAAI,cAAc;AAAQ,oBAAY;AAAA,eAC7B,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc,+BAAY;AACjC,YAAI,KAAK,aAAa;AACpB,sBAAY;AAAA,QACd;AACA,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,kBAAkB;AACrB,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,WAAW;AACd,oBAAY;AAAA,MACd;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,GAAG,wBAAwB;AAAA,MAMlC;AAAA,IAEJ,CAAC;AAAA,IACL,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,QAAM,wBAAoB;AAAA,IACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,YAAM,EAAE,WAAW,aAAa,uBAAuB,IAAI;AAC3D,YAAM,eAAuC,CAAC;AAE9C,YAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAEA,UAAI,cAAc;AAAW,qBAAa,OAAO;AAAA,WAC5C;AACH,qBAAa,KAAK,GAAG,wBAAwB;AAC7C,qBAAa,UAAU,MAAM,QAAQ,IAAI;AACzC,qBAAa,QAAQ;AACrB,qBAAa,YAAY,CAAC,MAA2B;AACnD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc,8BAAW;AAC3B,qBAAa,YAAY,4CAAC,QAAK,OAAc;AAAA,MAC/C,WAAW,cAAc,+BAAY;AACnC,qBAAa,YAAY,4CAAC,0BAAO,OAAc;AAAA,MACjD,WAAW,cAAc,8BAAW;AAClC,qBAAa,OAAO;AACpB,qBAAa,QAAQ;AACrB,qBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQA,WAAU;AACjE,iBAAO,KAAK,GAAG,sBAAsBA;AACrC,iBAAO,UAAU,MAAM,uBAAuB,iBAAiB,MAAM;AACrE,iBAAO,YAAY,CAAC,MAA2B;AAC7C,gBAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,qCAAuB,iBAAiB,MAAM;AAAA,YAChD;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,SAAO,CAAC,eAAe,iBAAiB;AAC1C;",
   "names": ["index"]
 }

package/dist/cjs/index.d.js

@@ -14,6 +14,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type React from 'react';\n\ntype SvgIconSizeType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\ntype SvgIconColorType =\n  | ['neutral', '900']\n  | ['neutral', '500']\n  | ['neutral', '0']\n  | ['danger', '900']\n  | ['warning', '600']\n  | ['success', '900']\n  | ['brand-primary', '600'];\n\ntype SharedProps = {\n  options?: Record<string, unknown>[];\n  onClick?: (item: MiniToolbarItemT) => void;\n  Icon?: React.ComponentType<Record<string, unknown>>;\n  label?: string;\n} & Record<string, unknown>;\n\ntype ShortcutProps = {\n  style?: React.CSSProperties;\n} & Record<string, unknown>;\n\ntype ContextualRegionProps = {\n  position?: 'left' | 'right';\n  isOpen: boolean;\n} & Record<string, unknown>;\n\ntype DropdownComponentProps = {\n  onClick?: (item: MiniToolbarItemT) => void;\n  label?: string;\n  Icon?: React.ComponentType<Record<string, unknown>>;\n  color?: SvgIconColorType;\n  onSelectMenuItem: (option: Record<string, unknown>) => void;\n} & Record<string, unknown>;\n\ntype OverflowButtonProps = {\n  ariaLabel?: string;\n  style?: React.CSSProperties;\n  buttonType?: 'secondary' | 'text';\n};\ninterface DefaultIconItemProps {\n  Icon: React.ComponentType<{ size: SvgIconSizeType; color: SvgIconColorType }>;\n  size?: SvgIconSizeType;\n  color?: SvgIconColorType;\n  onClick?: (item: MiniToolbarItemT) => void;\n  ariaLabel?: string;\n  style?: React.CSSProperties;\n}\n\ntype MiniToolbarIconItemPropsT = DefaultIconItemProps & Record<string, unknown>;\n\ntype MiniToolbarButtonPropsT = { ariaLabel: string } & Record<string, unknown>;\n\ninterface MiniToolbarItemT {\n  component: 'ds-button' | 'ds-icon-item' | 'ds-separator' | 'ds-search-box' | 'ds-combo-box' | React.ReactElement;\n  hasShortcut?: boolean;\n  shortcutComponent?: React.ReactElement;\n  shortcutProps?: ShortcutProps;\n  dropdownComponentProps?: DropdownComponentProps;\n  sharedProps?: SharedProps;\n  contextualRegion?: React.ReactElement;\n  contextualRegionProps?: ContextualRegionProps;\n  [key: string]: unknown;\n}\n\ninterface ToolbarShortcutPropsT {\n  Component: React.ComponentType<Record<string, unknown>>;\n  shortcutProps: ShortcutProps;\n  sharedProps: SharedProps;\n  ContextualRegion: React.ComponentType<Record<string, unknown>>;\n  contextualRegionProps: ContextualRegionProps;\n}\n\ninterface MiniToolbarPropsT {\n  items: MiniToolbarItemT[];\n  overflowButtonProps?: OverflowButtonProps;\n}\n\ntype GeneratedDropdownItemT = {\n  id?: string;\n  label?: string;\n  onClick?: (item: MiniToolbarItemT) => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  leftAddon?: React.ReactElement;\n  subItems?: Record<string, unknown>[];\n  type?: 'separator' | 'subMenu';\n};\n\nexport type {\n  MiniToolbarIconItemPropsT,\n  MiniToolbarButtonPropsT,\n  MiniToolbarItemT,\n  ToolbarShortcutPropsT,\n  MiniToolbarPropsT,\n  GeneratedDropdownItemT,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -30,6 +34,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_MiniToolbar = require("./Components/MiniToolbar");
-var import_propTypes = require("./propTypes");
+var import_MiniToolbar = require("./Components/MiniToolbar.js");
+var import_propTypes = require("./propTypes.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 { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar';\nexport { ToolbarItemWithSchema } from './propTypes';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAmD;AACnD,uBAAsC;",
+  "sourcesContent": ["export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar.js';\nexport { ToolbarItemWithSchema } from './propTypes.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAmD;AACnD,uBAAsC;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "sideEffects": false
+}

package/dist/cjs/propTypes.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,8 +33,8 @@ __export(propTypes_exports, {
 });
 module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-const outOfTheBoxType = import_ds_utilities.PropTypes.oneOf([
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const outOfTheBoxType = import_ds_props_helpers.PropTypes.oneOf([
   "ds-button",
   "ds-icon-item",
   "ds-separator",
@@ -38,29 +42,29 @@ const outOfTheBoxType = import_ds_utilities.PropTypes.oneOf([
   "ds-combo-box"
 ]).description("out-of-the-box toolbar components");
 const toolbarItemProps = {
-  component: import_ds_utilities.PropTypes.oneOfType([outOfTheBoxType, import_ds_utilities.PropTypes.element]).description("Main component").isRequired,
-  hasShortcut: import_ds_utilities.PropTypes.bool.description("Whether to include the component as a shortcut in the toolbar or not").defaultValue(false),
-  shortcutComponent: import_ds_utilities.PropTypes.element.description("Component to render as a shortcut in the toolbar"),
-  shortcutProps: import_ds_utilities.PropTypes.object.description("Shortcut component props"),
-  dropdownComponentProps: import_ds_utilities.PropTypes.object.description("Dropdown component props"),
-  sharedProps: import_ds_utilities.PropTypes.object.description("Props shared by shortcut component and dropdown component"),
-  contextualRegion: import_ds_utilities.PropTypes.element.description(
+  component: import_ds_props_helpers.PropTypes.oneOfType([outOfTheBoxType, import_ds_props_helpers.PropTypes.element]).description("Main component").isRequired,
+  hasShortcut: import_ds_props_helpers.PropTypes.bool.description("Whether to include the component as a shortcut in the toolbar or not").defaultValue(false),
+  shortcutComponent: import_ds_props_helpers.PropTypes.element.description("Component to render as a shortcut in the toolbar"),
+  shortcutProps: import_ds_props_helpers.PropTypes.object.description("Shortcut component props"),
+  dropdownComponentProps: import_ds_props_helpers.PropTypes.object.description("Dropdown component props"),
+  sharedProps: import_ds_props_helpers.PropTypes.object.description("Props shared by shortcut component and dropdown component"),
+  contextualRegion: import_ds_props_helpers.PropTypes.element.description(
     "Component that can be rendered as an adjacent region to the shortcut component"
   ),
-  contextualRegionProps: import_ds_utilities.PropTypes.object.description("Contextual region component props")
+  contextualRegionProps: import_ds_props_helpers.PropTypes.object.description("Contextual region component props")
 };
-const itemPropTypes = import_ds_utilities.PropTypes.shape(toolbarItemProps).description("Items props");
+const itemPropTypes = import_ds_props_helpers.PropTypes.shape(toolbarItemProps).description("Items props");
 const overflowButtonPropTypes = {
-  ariaLabel: import_ds_utilities.PropTypes.string,
-  buttonType: import_ds_utilities.PropTypes.oneOf(["secondary", "text"]),
-  style: import_ds_utilities.PropTypes.object
+  ariaLabel: import_ds_props_helpers.PropTypes.string,
+  buttonType: import_ds_props_helpers.PropTypes.oneOf(["secondary", "text"]),
+  style: import_ds_props_helpers.PropTypes.object
 };
 const miniToolbarProps = {
-  items: import_ds_utilities.PropTypes.arrayOf(itemPropTypes).description("Array of items").isRequired,
-  overflowButtonProps: import_ds_utilities.PropTypes.shape(overflowButtonPropTypes).description("Overflow button props")
+  items: import_ds_props_helpers.PropTypes.arrayOf(itemPropTypes).description("Array of items").isRequired,
+  overflowButtonProps: import_ds_props_helpers.PropTypes.shape(overflowButtonPropTypes).description("Overflow button props")
 };
 const ToolbarItem = () => null;
 ToolbarItem.displayName = "ToolbarItem";
-const ToolbarItemWithSchema = (0, import_ds_utilities.describe)(ToolbarItem);
+const ToolbarItemWithSchema = (0, import_ds_props_helpers.describe)(ToolbarItem);
 ToolbarItemWithSchema.propTypes = toolbarItemProps;
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-utilities';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n  'ds-button',\n  'ds-icon-item',\n  'ds-separator',\n  'ds-search-box',\n  'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n  component: PropTypes.oneOfType([outOfTheBoxType, PropTypes.element]).description('Main component').isRequired,\n  hasShortcut: PropTypes.bool\n    .description('Whether to include the component as a shortcut in the toolbar or not')\n    .defaultValue(false),\n  shortcutComponent: PropTypes.element.description('Component to render as a shortcut in the toolbar'),\n  shortcutProps: PropTypes.object.description('Shortcut component props'),\n  dropdownComponentProps: PropTypes.object.description('Dropdown component props'),\n  sharedProps: PropTypes.object.description('Props shared by shortcut component and dropdown component'),\n  contextualRegion: PropTypes.element.description(\n    'Component that can be rendered as an adjacent region to the shortcut component',\n  ),\n  contextualRegionProps: PropTypes.object.description('Contextual region component props'),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description('Items props');\n\nconst overflowButtonPropTypes = {\n  ariaLabel: PropTypes.string,\n  buttonType: PropTypes.oneOf(['secondary', 'text']),\n  style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n  items: PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,\n  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description('Overflow button props'),\n};\n\nconst ToolbarItem = () => null;\nToolbarItem.displayName = 'ToolbarItem';\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAoC;AAEpC,MAAM,kBAAkB,8BAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,EAAE,YAAY,mCAAmC;AAElD,MAAM,mBAAmB;AAAA,EACvB,WAAW,8BAAU,UAAU,CAAC,iBAAiB,8BAAU,OAAO,CAAC,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACnG,aAAa,8BAAU,KACpB,YAAY,sEAAsE,EAClF,aAAa,KAAK;AAAA,EACrB,mBAAmB,8BAAU,QAAQ,YAAY,kDAAkD;AAAA,EACnG,eAAe,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,wBAAwB,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EAC/E,aAAa,8BAAU,OAAO,YAAY,2DAA2D;AAAA,EACrG,kBAAkB,8BAAU,QAAQ;AAAA,IAClC;AAAA,EACF;AAAA,EACA,uBAAuB,8BAAU,OAAO,YAAY,mCAAmC;AACzF;AAEA,MAAM,gBAAgB,8BAAU,MAAM,gBAAgB,EAAE,YAAY,aAAa;AAEjF,MAAM,0BAA0B;AAAA,EAC9B,WAAW,8BAAU;AAAA,EACrB,YAAY,8BAAU,MAAM,CAAC,aAAa,MAAM,CAAC;AAAA,EACjD,OAAO,8BAAU;AACnB;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,8BAAU,QAAQ,aAAa,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACtE,qBAAqB,8BAAU,MAAM,uBAAuB,EAAE,YAAY,uBAAuB;AACnG;AAEA,MAAM,cAAc,MAAM;AAC1B,YAAY,cAAc;AAC1B,MAAM,4BAAwB,8BAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-props-helpers';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n  'ds-button',\n  'ds-icon-item',\n  'ds-separator',\n  'ds-search-box',\n  'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n  component: PropTypes.oneOfType([outOfTheBoxType, PropTypes.element]).description('Main component').isRequired,\n  hasShortcut: PropTypes.bool\n    .description('Whether to include the component as a shortcut in the toolbar or not')\n    .defaultValue(false),\n  shortcutComponent: PropTypes.element.description('Component to render as a shortcut in the toolbar'),\n  shortcutProps: PropTypes.object.description('Shortcut component props'),\n  dropdownComponentProps: PropTypes.object.description('Dropdown component props'),\n  sharedProps: PropTypes.object.description('Props shared by shortcut component and dropdown component'),\n  contextualRegion: PropTypes.element.description(\n    'Component that can be rendered as an adjacent region to the shortcut component',\n  ),\n  contextualRegionProps: PropTypes.object.description('Contextual region component props'),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description('Items props');\n\nconst overflowButtonPropTypes = {\n  ariaLabel: PropTypes.string,\n  buttonType: PropTypes.oneOf(['secondary', 'text']),\n  style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n  items: PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,\n  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description('Overflow button props'),\n};\n\nconst ToolbarItem = () => null;\nToolbarItem.displayName = 'ToolbarItem';\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAoC;AAEpC,MAAM,kBAAkB,kCAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,EAAE,YAAY,mCAAmC;AAElD,MAAM,mBAAmB;AAAA,EACvB,WAAW,kCAAU,UAAU,CAAC,iBAAiB,kCAAU,OAAO,CAAC,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACnG,aAAa,kCAAU,KACpB,YAAY,sEAAsE,EAClF,aAAa,KAAK;AAAA,EACrB,mBAAmB,kCAAU,QAAQ,YAAY,kDAAkD;AAAA,EACnG,eAAe,kCAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,wBAAwB,kCAAU,OAAO,YAAY,0BAA0B;AAAA,EAC/E,aAAa,kCAAU,OAAO,YAAY,2DAA2D;AAAA,EACrG,kBAAkB,kCAAU,QAAQ;AAAA,IAClC;AAAA,EACF;AAAA,EACA,uBAAuB,kCAAU,OAAO,YAAY,mCAAmC;AACzF;AAEA,MAAM,gBAAgB,kCAAU,MAAM,gBAAgB,EAAE,YAAY,aAAa;AAEjF,MAAM,0BAA0B;AAAA,EAC9B,WAAW,kCAAU;AAAA,EACrB,YAAY,kCAAU,MAAM,CAAC,aAAa,MAAM,CAAC;AAAA,EACjD,OAAO,kCAAU;AACnB;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,kCAAU,QAAQ,aAAa,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACtE,qBAAqB,kCAAU,MAAM,uBAAuB,EAAE,YAAY,uBAAuB;AACnG;AAEA,MAAM,cAAc,MAAM;AAC1B,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));

package/dist/cjs/styles.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\n\nconst Container = styled.ul`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  padding: 0 6px;\n`;\n\nconst Separator = styled.span`\n  height: 24px;\n  width: 1px;\n  margin: 6px;\n  border-left: 1px solid #bbb;\n`;\n\nconst Item = styled.li`\n  display: flex;\n  margin: 6px;\n  cursor: pointer;\n`;\n\nconst StyledButton = styled(DSButton)`\n  &:not(:focus) {\n    border-color: transparent;\n  }\n`;\n\nexport { Container, Separator, Item, StyledButton };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAyB;AAEzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,mBAAe,yBAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAyB;AAEzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,OAAO,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,mBAAe,yBAAO,yBAAQ;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/Components/MiniToolbar.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { describe } from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-props-helpers";
 import { DSDropdownMenu } from "@elliemae/ds-dropdownmenu";
 import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { StyledButton, Container } from "../styles";
-import { miniToolbarProps } from "../propTypes";
-import { useGenerateItems } from "../hooks/useGenerateItems";
+import { StyledButton, Container } from "../styles.js";
+import { miniToolbarProps } from "../propTypes.js";
+import { useGenerateItems } from "../hooks/useGenerateItems.js";
 const Elipsis = /* @__PURE__ */ jsx(MoreOptionsVert, { color: ["brand-primary", "600"], size: "m" });
 const MiniToolbar = ({ items, overflowButtonProps }) => {
   const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);

package/dist/esm/Components/MiniToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/MiniToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles';\nimport { miniToolbarProps } from '../propTypes';\nimport { useGenerateItems } from '../hooks/useGenerateItems';\nimport type { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n  const openDropdownMenuKeyPress = useCallback((e) => {\n    if (e.key === ' ') {\n      setIsDropdownMenuOpen(true);\n    }\n  }, []);\n\n  const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n  return (\n    <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n      {shortcutItems}\n      <DSDropdownMenu\n        data-testid=\"ds-mini-toolbar__dropdown-menu\"\n        isOpen={isDropdownMenuOpen}\n        onSelectMenuItem={closeDropdownMenu}\n        onClickOutsideMenu={closeDropdownMenu}\n        options={dropdownMenuItems}\n        triggerComponent={\n          <StyledButton\n            aria-label={ariaLabel}\n            data-testid=\"ds-mini-toolbar__elipsis\"\n            size=\"m\"\n            style={style}\n            buttonType={buttonType}\n            onClick={openDropdownMenu}\n            onKeyPress={openDropdownMenuKeyPress}\n            leftIcon={Elipsis}\n          />\n        }\n      />\n    </Container>\n  );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { StyledButton, Container } from '../styles.js';\nimport { miniToolbarProps } from '../propTypes.js';\nimport { useGenerateItems } from '../hooks/useGenerateItems.js';\nimport type { MiniToolbarPropsT } from '../index.d';\n\nconst Elipsis = <MoreOptionsVert color={['brand-primary', '600']} size=\"m\" />;\n\nconst MiniToolbar = ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement => {\n  const [shortcutItems, dropdownMenuItems] = useGenerateItems(items);\n  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState<boolean>(false);\n\n  const closeDropdownMenu = useCallback(() => setIsDropdownMenuOpen(false), []);\n  const openDropdownMenu = useCallback(() => setIsDropdownMenuOpen(true), []);\n  const openDropdownMenuKeyPress = useCallback((e) => {\n    if (e.key === ' ') {\n      setIsDropdownMenuOpen(true);\n    }\n  }, []);\n\n  const { ariaLabel, style, buttonType = 'secondary' } = overflowButtonProps || {};\n\n  return (\n    <Container role=\"toolbar\" data-testid=\"ds-mini-toolbar\">\n      {shortcutItems}\n      <DSDropdownMenu\n        data-testid=\"ds-mini-toolbar__dropdown-menu\"\n        isOpen={isDropdownMenuOpen}\n        onSelectMenuItem={closeDropdownMenu}\n        onClickOutsideMenu={closeDropdownMenu}\n        options={dropdownMenuItems}\n        triggerComponent={\n          <StyledButton\n            aria-label={ariaLabel}\n            data-testid=\"ds-mini-toolbar__elipsis\"\n            size=\"m\"\n            style={style}\n            buttonType={buttonType}\n            onClick={openDropdownMenu}\n            onKeyPress={openDropdownMenuKeyPress}\n            leftIcon={Elipsis}\n          />\n        }\n      />\n    </Container>\n  );\n};\n\nMiniToolbar.propTypes = miniToolbarProps;\nMiniToolbar.displayName = 'MiniToolbar';\nconst MiniToolbarWithSchema = describe(MiniToolbar);\nMiniToolbarWithSchema.propTypes = miniToolbarProps;\n\nexport { MiniToolbar, MiniToolbarWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACSP,cAiBZ,YAjBY;AAThB,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAAc,iBAAiB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAGjC,MAAM,UAAU,oBAAC,mBAAgB,OAAO,CAAC,iBAAiB,KAAK,GAAG,MAAK,KAAI;AAE3E,MAAM,cAAc,CAAC,EAAE,OAAO,oBAAoB,MAA6C;AAC7F,QAAM,CAAC,eAAe,iBAAiB,IAAI,iBAAiB,KAAK;AACjE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAkB,KAAK;AAE3E,QAAM,oBAAoB,YAAY,MAAM,sBAAsB,KAAK,GAAG,CAAC,CAAC;AAC5E,QAAM,mBAAmB,YAAY,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAC1E,QAAM,2BAA2B,YAAY,CAAC,MAAM;AAClD,QAAI,EAAE,QAAQ,KAAK;AACjB,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,WAAW,OAAO,aAAa,YAAY,IAAI,uBAAuB,CAAC;AAE/E,SACE,qBAAC,aAAU,MAAK,WAAU,eAAY,mBACnC;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,SAAS;AAAA,QACT,kBACE;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,eAAY;AAAA,YACZ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/esm/Components/ToolbarShortcut.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { Item } from "../styles";
+import { Item } from "../styles.js";
 const ToolbarShortcut = (props) => {
   const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;
   const leftRef = useRef(null);

package/dist/esm/Components/ToolbarShortcut.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Components/ToolbarShortcut.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles';\nimport type { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n  const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n  const leftRef = useRef<HTMLElement | null>(null);\n  const rightRef = useRef<HTMLElement | null>(null);\n  const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const { position = 'left', isOpen = false } = contextualRegionProps || {};\n  const { style } = shortcutProps || {};\n\n  const mergedProps = {\n    ...sharedProps,\n    ...shortcutProps,\n  };\n\n  useEffect(() => {\n    if (isOpen && leftRef.current) {\n      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n    }\n    if (isOpen && rightRef.current) {\n      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n    }\n\n    return () => {\n      clearTimeout(timerLeft.current);\n      clearTimeout(timerRight.current);\n    };\n  }, [isOpen, leftRef, rightRef]);\n\n  return (\n    <>\n      {isOpen && position === 'left' && (\n        <Item>\n          <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n        </Item>\n      )}\n      {Component && (\n        <Item style={style}>\n          <Component {...mergedProps} />\n        </Item>\n      )}\n      {isOpen && position === 'right' && (\n        <Item>\n          <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n        </Item>\n      )}\n    </>\n  );\n};\n\nexport { ToolbarShortcut };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect } from 'react';\nimport { Item } from '../styles.js';\nimport type { ToolbarShortcutPropsT } from '../index.d';\n\nconst ToolbarShortcut = (props: ToolbarShortcutPropsT): React.ReactElement => {\n  const { Component, shortcutProps, sharedProps, ContextualRegion, contextualRegionProps } = props;\n  const leftRef = useRef<HTMLElement | null>(null);\n  const rightRef = useRef<HTMLElement | null>(null);\n  const timerLeft = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timerRight = useRef<ReturnType<typeof setInterval> | null>(null);\n\n  const { position = 'left', isOpen = false } = contextualRegionProps || {};\n  const { style } = shortcutProps || {};\n\n  const mergedProps = {\n    ...sharedProps,\n    ...shortcutProps,\n  };\n\n  useEffect(() => {\n    if (isOpen && leftRef.current) {\n      timerLeft.current = setTimeout(() => leftRef.current.focus(), 200);\n    }\n    if (isOpen && rightRef.current) {\n      timerRight.current = setTimeout(() => rightRef.current.focus(), 200);\n    }\n\n    return () => {\n      clearTimeout(timerLeft.current);\n      clearTimeout(timerRight.current);\n    };\n  }, [isOpen, leftRef, rightRef]);\n\n  return (\n    <>\n      {isOpen && position === 'left' && (\n        <Item>\n          <ContextualRegion innerRef={leftRef} {...contextualRegionProps} />\n        </Item>\n      )}\n      {Component && (\n        <Item style={style}>\n          <Component {...mergedProps} />\n        </Item>\n      )}\n      {isOpen && position === 'right' && (\n        <Item>\n          <ContextualRegion innerRef={rightRef} {...contextualRegionProps} />\n        </Item>\n      )}\n    </>\n  );\n};\n\nexport { ToolbarShortcut };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkCnB,mBAGM,KAHN;AAlCJ,SAAgB,QAAQ,iBAAiB;AACzC,SAAS,YAAY;AAGrB,MAAM,kBAAkB,CAAC,UAAqD;AAC5E,QAAM,EAAE,WAAW,eAAe,aAAa,kBAAkB,sBAAsB,IAAI;AAC3F,QAAM,UAAU,OAA2B,IAAI;AAC/C,QAAM,WAAW,OAA2B,IAAI;AAChD,QAAM,YAAY,OAA8C,IAAI;AACpE,QAAM,aAAa,OAA8C,IAAI;AAErE,QAAM,EAAE,WAAW,QAAQ,SAAS,MAAM,IAAI,yBAAyB,CAAC;AACxE,QAAM,EAAE,MAAM,IAAI,iBAAiB,CAAC;AAEpC,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,QAAQ,SAAS;AAC7B,gBAAU,UAAU,WAAW,MAAM,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAAA,IACnE;AACA,QAAI,UAAU,SAAS,SAAS;AAC9B,iBAAW,UAAU,WAAW,MAAM,SAAS,QAAQ,MAAM,GAAG,GAAG;AAAA,IACrE;AAEA,WAAO,MAAM;AACX,mBAAa,UAAU,OAAO;AAC9B,mBAAa,WAAW,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SACE,iCACG;AAAA,cAAU,aAAa,UACtB,oBAAC,QACC,8BAAC,oBAAiB,UAAU,SAAU,GAAG,uBAAuB,GAClE;AAAA,IAED,aACC,oBAAC,QAAK,OACJ,8BAAC,aAAW,GAAG,aAAa,GAC9B;AAAA,IAED,UAAU,aAAa,WACtB,oBAAC,QACC,8BAAC,oBAAiB,UAAU,UAAW,GAAG,uBAAuB,GACnE;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/IconItem.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { StyledButton } from "../../styles";
+import { StyledButton } from "../../styles.js";
 const MiniToolbarIcon = (props) => {
   const { Icon, size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
   return /* @__PURE__ */ jsx(

package/dist/esm/Components/outOfTheBox/IconItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/IconItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton } from '../../styles';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { Icon, size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Icon size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nexport { MiniToolbarIcon };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledButton } from '../../styles.js';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarIcon = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { Icon, size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Icon size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nexport { MiniToolbarIcon };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACaP;AAZhB,SAAS,oBAAoB;AAG7B,MAAM,kBAAkB,CAAC,UAAyD;AAChF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,oBAAC,QAAK,MAAY,OAAc;AAAA,MAC1C,eAAY;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/SearchBox.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Search } from "@elliemae/ds-icons";
 import { DSSearchBox } from "@elliemae/ds-form";
-import { StyledButton } from "../../styles";
+import { StyledButton } from "../../styles.js";
 const MiniToolbarSearchButton = (props) => {
   const { size, color, onClick, ariaLabel, style, buttonType = "secondary" } = props;
   return /* @__PURE__ */ jsx(

package/dist/esm/Components/outOfTheBox/SearchBox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/SearchBox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Search size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n  <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { StyledButton } from '../../styles.js';\nimport type { MiniToolbarIconItemPropsT } from '../../index.d';\n\nconst MiniToolbarSearchButton = (props: MiniToolbarIconItemPropsT): React.ReactElement => {\n  const { size, color, onClick, ariaLabel, style, buttonType = 'secondary' } = props;\n\n  return (\n    <StyledButton\n      aria-label={ariaLabel}\n      buttonType={buttonType}\n      onClick={onClick}\n      style={style}\n      leftIcon={<Search size={size} color={color} />}\n      data-testid=\"ds-mini-toolbar__shortcut\"\n    />\n  );\n};\n\nconst MiniToolbarSearchBox = (props: Record<string, unknown>): JSX.Element => (\n  <DSSearchBox clearable showIcon={false} {...props} />\n);\n\nexport { MiniToolbarSearchButton, MiniToolbarSearchBox };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBP;AAdhB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAG7B,MAAM,0BAA0B,CAAC,UAAyD;AACxF,QAAM,EAAE,MAAM,OAAO,SAAS,WAAW,OAAO,aAAa,YAAY,IAAI;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,oBAAC,UAAO,MAAY,OAAc;AAAA,MAC5C,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,MAAM,uBAAuB,CAAC,UAC5B,oBAAC,eAAY,WAAS,MAAC,UAAU,OAAQ,GAAG,OAAO;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/Separator.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { Separator } from "../../styles";
+import { Separator } from "../../styles.js";
 const MiniToolbarSeparator = () => /* @__PURE__ */ jsx(Separator, { "data-testid": "ds-mini-toolbar__separator" });
 export {
   MiniToolbarSeparator

package/dist/esm/Components/outOfTheBox/Separator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/Separator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Separator } from '../../styles';\n\nconst MiniToolbarSeparator = (): React.ReactElement => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Separator } from '../../styles.js';\n\nconst MiniToolbarSeparator = (): React.ReactElement => <Separator data-testid=\"ds-mini-toolbar__separator\" />;\n\nexport { MiniToolbarSeparator };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACGgC;AAFvD,SAAS,iBAAiB;AAE1B,MAAM,uBAAuB,MAA0B,oBAAC,aAAU,eAAY,8BAA6B;",
   "names": []
 }

package/dist/esm/Components/outOfTheBox/index.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { MiniToolbarButton } from "./Button";
-import { MiniToolbarIcon } from "./IconItem";
-import { MiniToolbarSearchBox } from "./SearchBox";
-import { MiniToolbarSeparator } from "./Separator";
-import { MiniToolbarComboBox } from "./ComboBox";
+import { MiniToolbarButton } from "./Button.js";
+import { MiniToolbarIcon } from "./IconItem.js";
+import { MiniToolbarSearchBox } from "./SearchBox.js";
+import { MiniToolbarSeparator } from "./Separator.js";
+import { MiniToolbarComboBox } from "./ComboBox.js";
 const ICON_ITEM = "ds-icon-item";
 const SEPARATOR = "ds-separator";
 const BUTTON = "ds-button";

package/dist/esm/Components/outOfTheBox/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/Components/outOfTheBox/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbarButton } from './Button';\nexport { MiniToolbarIcon } from './IconItem';\nexport { MiniToolbarSearchBox } from './SearchBox';\nexport { MiniToolbarSeparator } from './Separator';\nexport { MiniToolbarComboBox } from './ComboBox';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbarButton } from './Button.js';\nexport { MiniToolbarIcon } from './IconItem.js';\nexport { MiniToolbarSearchBox } from './SearchBox.js';\nexport { MiniToolbarSeparator } from './Separator.js';\nexport { MiniToolbarComboBox } from './ComboBox.js';\n\nexport const ICON_ITEM = 'ds-icon-item';\nexport const SEPARATOR = 'ds-separator';\nexport const BUTTON = 'ds-button';\nexport const SEARCH_BOX = 'ds-search-box';\nexport const COMBO_BOX = 'ds-combo-box';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAE7B,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,SAAS;AACf,MAAM,aAAa;AACnB,MAAM,YAAY;",
   "names": []
 }

package/dist/esm/hooks/useGenerateItems.js

@@ -14,9 +14,9 @@ import {
   MiniToolbarSearchBox,
   MiniToolbarIcon,
   MiniToolbarComboBox
-} from "../Components/outOfTheBox";
-import { ToolbarShortcut } from "../Components/ToolbarShortcut";
-import { MiniToolbarSearchButton } from "../Components/outOfTheBox/SearchBox";
+} from "../Components/outOfTheBox/index.js";
+import { ToolbarShortcut } from "../Components/ToolbarShortcut.js";
+import { MiniToolbarSearchButton } from "../Components/outOfTheBox/SearchBox.js";
 const useGenerateItems = (items) => {
   const instanceUID = useMemo(() => uid(6), []);
   const shortcutItems = useMemo(

package/dist/esm/hooks/useGenerateItems.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useGenerateItems.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  ICON_ITEM,\n  SEPARATOR,\n  BUTTON,\n  SEARCH_BOX,\n  COMBO_BOX,\n  MiniToolbarButton,\n  MiniToolbarSeparator,\n  MiniToolbarSearchBox,\n  MiniToolbarIcon,\n  MiniToolbarComboBox,\n} from '../Components/outOfTheBox';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox';\nimport type { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const shortcutItems = useMemo(\n    () =>\n      items\n        .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n        .map((item, index) => {\n          const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n            item;\n\n          let Component;\n          let ContextualRegion;\n\n          if (component === SEPARATOR) return <MiniToolbarSeparator />;\n          if (component === BUTTON) Component = MiniToolbarButton;\n          else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n          else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n          else if (component === SEARCH_BOX) {\n            if (item.hasShortcut) {\n              Component = MiniToolbarSearchButton;\n            }\n            ContextualRegion = MiniToolbarSearchBox;\n          }\n          if (!ContextualRegion) {\n            ContextualRegion = contextualRegion;\n          }\n          if (!Component) {\n            Component = shortcutComponent;\n          }\n\n          return (\n            <ToolbarShortcut\n              key={`${instanceUID}-shortcut-${index}`}\n              Component={Component}\n              shortcutProps={shortcutProps}\n              sharedProps={sharedProps}\n              ContextualRegion={ContextualRegion}\n              contextualRegionProps={contextualRegionProps}\n            />\n          );\n        }),\n    [instanceUID, items],\n  );\n\n  const dropdownMenuItems = useMemo(\n    () =>\n      items.map((item, index) => {\n        const { component, sharedProps, dropdownComponentProps } = item;\n        const dropdownItem: GeneratedDropdownItemT = {};\n\n        const { Icon, color, label, onClick } = {\n          ...sharedProps,\n          ...dropdownComponentProps,\n        };\n\n        if (component === SEPARATOR) dropdownItem.type = 'separator';\n        else {\n          dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n          dropdownItem.onClick = () => onClick(item);\n          dropdownItem.label = label;\n          dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              onClick(item);\n            }\n          };\n        }\n\n        if (component === ICON_ITEM) {\n          dropdownItem.leftAddon = <Icon color={color} />;\n        } else if (component === SEARCH_BOX) {\n          dropdownItem.leftAddon = <Search color={color} />;\n        } else if (component === COMBO_BOX) {\n          dropdownItem.type = 'subMenu';\n          dropdownItem.label = label;\n          dropdownItem.subItems = sharedProps.options.map((option, index) => {\n            option.id = `${instanceUID}-option-${index}`;\n            option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n            option.onKeyDown = (e: React.KeyboardEvent) => {\n              if (e.key === ' ' || e.key === 'Enter') {\n                dropdownComponentProps.onSelectMenuItem(option);\n              }\n            };\n            return option;\n          });\n        }\n\n        return dropdownItem;\n      }),\n    [instanceUID, items],\n  );\n\n  return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { uid } from 'uid';\nimport { Search } from '@elliemae/ds-icons';\nimport {\n  ICON_ITEM,\n  SEPARATOR,\n  BUTTON,\n  SEARCH_BOX,\n  COMBO_BOX,\n  MiniToolbarButton,\n  MiniToolbarSeparator,\n  MiniToolbarSearchBox,\n  MiniToolbarIcon,\n  MiniToolbarComboBox,\n} from '../Components/outOfTheBox/index.js';\nimport { ToolbarShortcut } from '../Components/ToolbarShortcut.js';\nimport { MiniToolbarSearchButton } from '../Components/outOfTheBox/SearchBox.js';\nimport type { GeneratedDropdownItemT, MiniToolbarItemT } from '../index.d';\n\nconst useGenerateItems = (items: MiniToolbarItemT[]): [React.ReactElement[], GeneratedDropdownItemT[]] => {\n  const instanceUID = useMemo(() => uid(6), []);\n\n  const shortcutItems = useMemo(\n    () =>\n      items\n        .filter((item) => item.hasShortcut || item.component === SEARCH_BOX || item.contextualRegion)\n        .map((item, index) => {\n          const { component, shortcutComponent, shortcutProps, sharedProps, contextualRegion, contextualRegionProps } =\n            item;\n\n          let Component;\n          let ContextualRegion;\n\n          if (component === SEPARATOR) return <MiniToolbarSeparator />;\n          if (component === BUTTON) Component = MiniToolbarButton;\n          else if (component === ICON_ITEM) Component = MiniToolbarIcon;\n          else if (component === COMBO_BOX) Component = MiniToolbarComboBox;\n          else if (component === SEARCH_BOX) {\n            if (item.hasShortcut) {\n              Component = MiniToolbarSearchButton;\n            }\n            ContextualRegion = MiniToolbarSearchBox;\n          }\n          if (!ContextualRegion) {\n            ContextualRegion = contextualRegion;\n          }\n          if (!Component) {\n            Component = shortcutComponent;\n          }\n\n          return (\n            <ToolbarShortcut\n              key={`${instanceUID}-shortcut-${index}`}\n              Component={Component}\n              shortcutProps={shortcutProps}\n              sharedProps={sharedProps}\n              ContextualRegion={ContextualRegion}\n              contextualRegionProps={contextualRegionProps}\n            />\n          );\n        }),\n    [instanceUID, items],\n  );\n\n  const dropdownMenuItems = useMemo(\n    () =>\n      items.map((item, index) => {\n        const { component, sharedProps, dropdownComponentProps } = item;\n        const dropdownItem: GeneratedDropdownItemT = {};\n\n        const { Icon, color, label, onClick } = {\n          ...sharedProps,\n          ...dropdownComponentProps,\n        };\n\n        if (component === SEPARATOR) dropdownItem.type = 'separator';\n        else {\n          dropdownItem.id = `${instanceUID}-dropdown-${index}`;\n          dropdownItem.onClick = () => onClick(item);\n          dropdownItem.label = label;\n          dropdownItem.onKeyDown = (e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              onClick(item);\n            }\n          };\n        }\n\n        if (component === ICON_ITEM) {\n          dropdownItem.leftAddon = <Icon color={color} />;\n        } else if (component === SEARCH_BOX) {\n          dropdownItem.leftAddon = <Search color={color} />;\n        } else if (component === COMBO_BOX) {\n          dropdownItem.type = 'subMenu';\n          dropdownItem.label = label;\n          dropdownItem.subItems = sharedProps.options.map((option, index) => {\n            option.id = `${instanceUID}-option-${index}`;\n            option.onClick = () => dropdownComponentProps.onSelectMenuItem(option);\n            option.onKeyDown = (e: React.KeyboardEvent) => {\n              if (e.key === ' ' || e.key === 'Enter') {\n                dropdownComponentProps.onSelectMenuItem(option);\n              }\n            };\n            return option;\n          });\n        }\n\n        return dropdownItem;\n      }),\n    [instanceUID, items],\n  );\n\n  return [shortcutItems, dropdownMenuItems];\n};\n\nexport { useGenerateItems };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiCuB;AAjC9C,SAAgB,eAAe;AAC/B,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAGxC,MAAM,mBAAmB,CAAC,UAAgF;AACxG,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,gBAAgB;AAAA,IACpB,MACE,MACG,OAAO,CAAC,SAAS,KAAK,eAAe,KAAK,cAAc,cAAc,KAAK,gBAAgB,EAC3F,IAAI,CAAC,MAAM,UAAU;AACpB,YAAM,EAAE,WAAW,mBAAmB,eAAe,aAAa,kBAAkB,sBAAsB,IACxG;AAEF,UAAI;AACJ,UAAI;AAEJ,UAAI,cAAc;AAAW,eAAO,oBAAC,wBAAqB;AAC1D,UAAI,cAAc;AAAQ,oBAAY;AAAA,eAC7B,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc;AAAW,oBAAY;AAAA,eACrC,cAAc,YAAY;AACjC,YAAI,KAAK,aAAa;AACpB,sBAAY;AAAA,QACd;AACA,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,kBAAkB;AACrB,2BAAmB;AAAA,MACrB;AACA,UAAI,CAAC,WAAW;AACd,oBAAY;AAAA,MACd;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,GAAG,wBAAwB;AAAA,MAMlC;AAAA,IAEJ,CAAC;AAAA,IACL,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,QAAM,oBAAoB;AAAA,IACxB,MACE,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,YAAM,EAAE,WAAW,aAAa,uBAAuB,IAAI;AAC3D,YAAM,eAAuC,CAAC;AAE9C,YAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,IAAI;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAEA,UAAI,cAAc;AAAW,qBAAa,OAAO;AAAA,WAC5C;AACH,qBAAa,KAAK,GAAG,wBAAwB;AAC7C,qBAAa,UAAU,MAAM,QAAQ,IAAI;AACzC,qBAAa,QAAQ;AACrB,qBAAa,YAAY,CAAC,MAA2B;AACnD,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,oBAAQ,IAAI;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,cAAc,WAAW;AAC3B,qBAAa,YAAY,oBAAC,QAAK,OAAc;AAAA,MAC/C,WAAW,cAAc,YAAY;AACnC,qBAAa,YAAY,oBAAC,UAAO,OAAc;AAAA,MACjD,WAAW,cAAc,WAAW;AAClC,qBAAa,OAAO;AACpB,qBAAa,QAAQ;AACrB,qBAAa,WAAW,YAAY,QAAQ,IAAI,CAAC,QAAQA,WAAU;AACjE,iBAAO,KAAK,GAAG,sBAAsBA;AACrC,iBAAO,UAAU,MAAM,uBAAuB,iBAAiB,MAAM;AACrE,iBAAO,YAAY,CAAC,MAA2B;AAC7C,gBAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,qCAAuB,iBAAiB,MAAM;AAAA,YAChD;AAAA,UACF;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC,aAAa,KAAK;AAAA,EACrB;AAEA,SAAO,CAAC,eAAe,iBAAiB;AAC1C;",
   "names": ["index"]
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { MiniToolbar, MiniToolbarWithSchema } from "./Components/MiniToolbar";
-import { ToolbarItemWithSchema } from "./propTypes";
+import { MiniToolbar, MiniToolbarWithSchema } from "./Components/MiniToolbar.js";
+import { ToolbarItemWithSchema } from "./propTypes.js";
 export {
   MiniToolbar,
   MiniToolbarWithSchema,

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 { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar';\nexport { ToolbarItemWithSchema } from './propTypes';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar.js';\nexport { ToolbarItemWithSchema } from './propTypes.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,6BAA6B;AACnD,SAAS,6BAA6B;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "sideEffects": false
+}

package/dist/esm/propTypes.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 const outOfTheBoxType = PropTypes.oneOf([
   "ds-button",
   "ds-icon-item",

package/dist/esm/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from '@elliemae/ds-utilities';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n  'ds-button',\n  'ds-icon-item',\n  'ds-separator',\n  'ds-search-box',\n  'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n  component: PropTypes.oneOfType([outOfTheBoxType, PropTypes.element]).description('Main component').isRequired,\n  hasShortcut: PropTypes.bool\n    .description('Whether to include the component as a shortcut in the toolbar or not')\n    .defaultValue(false),\n  shortcutComponent: PropTypes.element.description('Component to render as a shortcut in the toolbar'),\n  shortcutProps: PropTypes.object.description('Shortcut component props'),\n  dropdownComponentProps: PropTypes.object.description('Dropdown component props'),\n  sharedProps: PropTypes.object.description('Props shared by shortcut component and dropdown component'),\n  contextualRegion: PropTypes.element.description(\n    'Component that can be rendered as an adjacent region to the shortcut component',\n  ),\n  contextualRegionProps: PropTypes.object.description('Contextual region component props'),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description('Items props');\n\nconst overflowButtonPropTypes = {\n  ariaLabel: PropTypes.string,\n  buttonType: PropTypes.oneOf(['secondary', 'text']),\n  style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n  items: PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,\n  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description('Overflow button props'),\n};\n\nconst ToolbarItem = () => null;\nToolbarItem.displayName = 'ToolbarItem';\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from '@elliemae/ds-props-helpers';\n\nconst outOfTheBoxType = PropTypes.oneOf([\n  'ds-button',\n  'ds-icon-item',\n  'ds-separator',\n  'ds-search-box',\n  'ds-combo-box',\n]).description('out-of-the-box toolbar components');\n\nconst toolbarItemProps = {\n  component: PropTypes.oneOfType([outOfTheBoxType, PropTypes.element]).description('Main component').isRequired,\n  hasShortcut: PropTypes.bool\n    .description('Whether to include the component as a shortcut in the toolbar or not')\n    .defaultValue(false),\n  shortcutComponent: PropTypes.element.description('Component to render as a shortcut in the toolbar'),\n  shortcutProps: PropTypes.object.description('Shortcut component props'),\n  dropdownComponentProps: PropTypes.object.description('Dropdown component props'),\n  sharedProps: PropTypes.object.description('Props shared by shortcut component and dropdown component'),\n  contextualRegion: PropTypes.element.description(\n    'Component that can be rendered as an adjacent region to the shortcut component',\n  ),\n  contextualRegionProps: PropTypes.object.description('Contextual region component props'),\n};\n\nconst itemPropTypes = PropTypes.shape(toolbarItemProps).description('Items props');\n\nconst overflowButtonPropTypes = {\n  ariaLabel: PropTypes.string,\n  buttonType: PropTypes.oneOf(['secondary', 'text']),\n  style: PropTypes.object,\n};\n\nconst miniToolbarProps = {\n  items: PropTypes.arrayOf(itemPropTypes).description('Array of items').isRequired,\n  overflowButtonProps: PropTypes.shape(overflowButtonPropTypes).description('Overflow button props'),\n};\n\nconst ToolbarItem = () => null;\nToolbarItem.displayName = 'ToolbarItem';\nconst ToolbarItemWithSchema = describe(ToolbarItem);\nToolbarItemWithSchema.propTypes = toolbarItemProps;\nexport { ToolbarItemWithSchema, miniToolbarProps };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,gBAAgB;AAEpC,MAAM,kBAAkB,UAAU,MAAM;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,EAAE,YAAY,mCAAmC;AAElD,MAAM,mBAAmB;AAAA,EACvB,WAAW,UAAU,UAAU,CAAC,iBAAiB,UAAU,OAAO,CAAC,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACnG,aAAa,UAAU,KACpB,YAAY,sEAAsE,EAClF,aAAa,KAAK;AAAA,EACrB,mBAAmB,UAAU,QAAQ,YAAY,kDAAkD;AAAA,EACnG,eAAe,UAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,wBAAwB,UAAU,OAAO,YAAY,0BAA0B;AAAA,EAC/E,aAAa,UAAU,OAAO,YAAY,2DAA2D;AAAA,EACrG,kBAAkB,UAAU,QAAQ;AAAA,IAClC;AAAA,EACF;AAAA,EACA,uBAAuB,UAAU,OAAO,YAAY,mCAAmC;AACzF;AAEA,MAAM,gBAAgB,UAAU,MAAM,gBAAgB,EAAE,YAAY,aAAa;AAEjF,MAAM,0BAA0B;AAAA,EAC9B,WAAW,UAAU;AAAA,EACrB,YAAY,UAAU,MAAM,CAAC,aAAa,MAAM,CAAC;AAAA,EACjD,OAAO,UAAU;AACnB;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,QAAQ,aAAa,EAAE,YAAY,gBAAgB,EAAE;AAAA,EACtE,qBAAqB,UAAU,MAAM,uBAAuB,EAAE,YAAY,uBAAuB;AACnG;AAEA,MAAM,cAAc,MAAM;AAC1B,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": []
 }

package/dist/types/Components/MiniToolbar.d.ts

@@ -3,10 +3,10 @@ import type { MiniToolbarPropsT } from '../index.d';
 declare const MiniToolbar: {
     ({ items, overflowButtonProps }: MiniToolbarPropsT): React.ReactElement;
     propTypes: {
-        items: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-        overflowButtonProps: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+        items: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        overflowButtonProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
     };
     displayName: string;
 };
-declare const MiniToolbarWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<MiniToolbarPropsT>;
+declare const MiniToolbarWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<MiniToolbarPropsT>;
 export { MiniToolbar, MiniToolbarWithSchema };

package/dist/types/Components/outOfTheBox/index.d.ts

@@ -1,8 +1,8 @@
-export { MiniToolbarButton } from './Button';
-export { MiniToolbarIcon } from './IconItem';
-export { MiniToolbarSearchBox } from './SearchBox';
-export { MiniToolbarSeparator } from './Separator';
-export { MiniToolbarComboBox } from './ComboBox';
+export { MiniToolbarButton } from './Button.js';
+export { MiniToolbarIcon } from './IconItem.js';
+export { MiniToolbarSearchBox } from './SearchBox.js';
+export { MiniToolbarSeparator } from './Separator.js';
+export { MiniToolbarComboBox } from './ComboBox.js';
 export declare const ICON_ITEM = "ds-icon-item";
 export declare const SEPARATOR = "ds-separator";
 export declare const BUTTON = "ds-button";

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar';
-export { ToolbarItemWithSchema } from './propTypes';
+export { MiniToolbar, MiniToolbarWithSchema } from './Components/MiniToolbar.js';
+export { ToolbarItemWithSchema } from './propTypes.js';

package/dist/types/propTypes.d.ts

@@ -1,6 +1,6 @@
 declare const miniToolbarProps: {
-    items: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
-    overflowButtonProps: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    items: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    overflowButtonProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
 };
-declare const ToolbarItemWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<unknown>;
+declare const ToolbarItemWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<unknown>;
 export { ToolbarItemWithSchema, miniToolbarProps };

package/dist/types/styles.d.ts

@@ -1,5 +1,5 @@
 declare const Container: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
 declare const Separator: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
 declare const Item: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
-declare const StyledButton: import("styled-components").StyledComponent<any, import("@elliemae/ds-system").Theme, any, any>;
+declare const StyledButton: import("styled-components").StyledComponent<any, import("@elliemae/ds-system").Theme, object, string | number | symbol>;
 export { Container, Separator, Item, StyledButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-mini-toolbar",
-  "version": "3.16.0-next.2",
+  "version": "3.16.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - MiniToolbar",
   "files": [
@@ -75,18 +75,19 @@
     "indent": 4
   },
   "dependencies": {
-    "uid": "~2.0.0",
-    "@elliemae/ds-button": "3.16.0-next.2",
-    "@elliemae/ds-form": "3.16.0-next.2",
-    "@elliemae/ds-dropdownmenu": "3.16.0-next.2",
-    "@elliemae/ds-icons": "3.16.0-next.2",
-    "@elliemae/ds-system": "3.16.0-next.2",
-    "@elliemae/ds-utilities": "3.16.0-next.2"
+    "uid": "~2.0.1",
+    "@elliemae/ds-button": "3.16.0-next.21",
+    "@elliemae/ds-dropdownmenu": "3.16.0-next.21",
+    "@elliemae/ds-form": "3.16.0-next.21",
+    "@elliemae/ds-icons": "3.16.0-next.21",
+    "@elliemae/ds-props-helpers": "3.16.0-next.21",
+    "@elliemae/ds-system": "3.16.0-next.21",
+    "@elliemae/ds-utilities": "3.16.0-next.21"
   },
   "devDependencies": {
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
-    "styled-components": "~5.3.6"
+    "styled-components": "~5.3.9"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -105,7 +106,7 @@
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
+    "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }