@elliemae/ds-app-picker 2.1.0-rc.7 → 2.2.0-alpha.2

package/cjs/index.js

@@ -1,11 +1,36 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSAppPicker = require('./DSAppPicker.js');
-
-
-
-exports.AppPickerWithSchema = DSAppPicker.AppPickerWithSchema;
-exports.DSAppPicker = DSAppPicker.DSAppPicker;
-exports["default"] = DSAppPicker.DSAppPicker;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  default: () => import_DSAppPicker.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, __toESM(require("./DSAppPicker")));
+var import_DSAppPicker = __toESM(require("./DSAppPicker"));
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DSAppPicker';\n\nexport { default } from './DSAppPicker';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AAEd,yBAAwB;",
+  "names": []
+}

package/cjs/propTypes.js

@@ -1,25 +1,50 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var propTypes_exports = {};
+__export(propTypes_exports, {
+  propTypes: () => propTypes
+});
+var React = __toESM(require("react"));
+var import_react_desc = __toESM(require("react-desc"));
+var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
 const propTypes = {
-  apps: reactDesc.PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]').isRequired,
-  customApps: reactDesc.PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]'),
-  sectionTitle: reactDesc.PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),
-  customSectionTitle: reactDesc.PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),
-  icon: reactDesc.PropTypes.func.description('trigger button s icon').defaultValue(dsIcons.MenuPicker),
-  renderTrigger: reactDesc.PropTypes.func.description('Custom trigger component.'),
-  actionRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
-    current: reactDesc.PropTypes.any
-  })]).description('Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.'),
-  isOpen: reactDesc.PropTypes.bool.description('Wether the AppPicker should be open or not.'),
-  onClose: reactDesc.PropTypes.func.description('Callback function when the AppPicker closes'),
-  onKeyDown: reactDesc.PropTypes.func.description('OnKeyDown handler callback.'),
-  onClick: reactDesc.PropTypes.func.description('Custom onClick for Trigger component.'),
-  onClickOutside: reactDesc.PropTypes.func.description('Callback event when the user clicks outside the App Picker.')
+  apps: import_react_desc.PropTypes.array.description("Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]").isRequired,
+  customApps: import_react_desc.PropTypes.array.description("Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"),
+  sectionTitle: import_react_desc.PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
+  customSectionTitle: import_react_desc.PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
+  icon: import_react_desc.PropTypes.func.description("trigger button s icon").defaultValue(import_ds_icons.MenuPicker),
+  renderTrigger: import_react_desc.PropTypes.func.description("Custom trigger component."),
+  actionRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.shape({ current: import_react_desc.PropTypes.any })]).description("Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."),
+  isOpen: import_react_desc.PropTypes.bool.description("Wether the AppPicker should be open or not."),
+  onClose: import_react_desc.PropTypes.func.description("Callback function when the AppPicker closes"),
+  onKeyDown: import_react_desc.PropTypes.func.description("OnKeyDown handler callback."),
+  onClick: import_react_desc.PropTypes.func.description("Custom onClick for Trigger component."),
+  onClickOutside: import_react_desc.PropTypes.func.description("Callback event when the user clicks outside the App Picker.")
 };
-
-exports.propTypes = propTypes;
+module.exports = __toCommonJS(propTypes_exports);
+//# sourceMappingURL=propTypes.js.map

package/cjs/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes } from 'react-desc';\nimport { MenuPicker } from '@elliemae/ds-icons';\n\nexport const propTypes = {\n  apps: PropTypes.array.description(\n    'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ).isRequired,\n  customApps: PropTypes.array.description(\n    'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n  ),\n  sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n  customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n  icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n  renderTrigger: PropTypes.func.description('Custom trigger component.'),\n  actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n  ),\n  isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n  onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n  onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n  onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n  onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAC1B,sBAA2B;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,4BAAU,MAAM,YACpB,sGACA;AAAA,EACF,YAAY,4BAAU,MAAM,YAC1B;AAAA,EAEF,cAAc,4BAAU,OAAO,YAAY,sBAAsB,aAAa;AAAA,EAC9E,oBAAoB,4BAAU,OAAO,YAAY,wBAAwB,aAAa;AAAA,EACtF,MAAM,4BAAU,KAAK,YAAY,yBAAyB,aAAa;AAAA,EACvE,eAAe,4BAAU,KAAK,YAAY;AAAA,EAC1C,WAAW,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,EAAE,SAAS,4BAAU,SAAS,YAC5F;AAAA,EAEF,QAAQ,4BAAU,KAAK,YAAY;AAAA,EACnC,SAAS,4BAAU,KAAK,YAAY;AAAA,EACpC,WAAW,4BAAU,KAAK,YAAY;AAAA,EACtC,SAAS,4BAAU,KAAK,YAAY;AAAA,EACpC,gBAAgB,4BAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/cjs/styles.js

@@ -1,164 +1,190 @@
-'use strict';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledChip: () => StyledChip,
+  StyledChipLabel: () => StyledChipLabel,
+  StyledGrid: () => StyledGrid,
+  StyledRow: () => StyledRow,
+  StyledSeparator: () => StyledSeparator,
+  StyledTitle: () => StyledTitle,
+  StyledWrapper: () => StyledWrapper
+});
+var React = __toESM(require("react"));
+var import_ds_system = __toESM(require("@elliemae/ds-system"));
+const StyledTitle = (0, import_ds_system.styled)("h3", { name: "DS-AppPicker", slot: "title" })`
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  font-size: ${({ theme }) => theme.fontSizes.value[400]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  margin: 12px 0 0 0;
+  line-height: 1.38;
+  text-transform: uppercase;
+`;
+const StyledWrapper = (0, import_ds_system.styled)("ul", { name: "DS-AppPicker", slot: "root" })`
+  align-items: center;
+  min-width: 308px;
+  min-height: 110px;
+  max-height: 449px;
+  width: 308px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0;
+  padding: ${({ isOverflow }) => isOverflow ? "0 0 0 16px" : "0 16px"};
+  &:focus {
+    outline: none;
+  }
+`;
+const StyledGrid = (0, import_ds_system.styled)("div", { name: "DS-AppPicker", slot: "grid" })`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 8px 0;
+`;
+const StyledRow = (0, import_ds_system.styled)("div", { name: "DS-AppPicker", slot: "row" })`
+  display: flex;
+  width: 100%;
+`;
+const StyledChipLabel = (0, import_ds_system.styled)("p", { name: "DS-AppPicker", slot: "chipLabel" })`
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  word-wrap: break-word;
+  margin: 0 6px;
+  line-height: 1.45;
+  width: 100%;
+  z-index: 120;
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  & span {
+    padding-top: 6px;
+  }
+`;
+const styledChipSelectedCss = import_ds_system.css`
+  color: ${({ theme }) => theme.colors.brand[800]};
+  background-color: ${({ theme }) => theme.colors.brand[200]};
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var dsSystem = require('@elliemae/ds-system');
+  .app-picker__icon {
+    fill: ${({ theme }) => theme.colors.brand[800]};
+  }
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  &:before {
+    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
+  }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+  &:focus {
+    &:before {
+      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+`;
+const StyledChip = (0, import_ds_system.styled)("button", { name: "DS-AppPicker", slot: "chip" })`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  height: 68px;
+  width: 92px;
+  background-color: #fff;
+  color: ${({ theme }) => theme.colors.brand[600]};
+  cursor: pointer;
+  outline: none;
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-const StyledTitle = dsSystem.styled('h3', {
-  name: 'DS-AppPicker',
-  slot: 'title'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin: 12px 0 0 0;\n  line-height: 1.38;\n  text-transform: uppercase;\n"])), _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral[700];
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.fontSizes.value[400];
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.fontWeights.semibold;
-});
-const StyledWrapper = dsSystem.styled('ul', {
-  name: 'DS-AppPicker',
-  slot: 'root'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  align-items: center;\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin: 0;\n  padding: ", ";\n  &:focus {\n    outline: none;\n  }\n"])), _ref4 => {
-  let {
-    isOverflow
-  } = _ref4;
-  return isOverflow ? '0 0 0 16px' : '0 16px';
-});
-const StyledGrid = dsSystem.styled('div', {
-  name: 'DS-AppPicker',
-  slot: 'grid'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 8px 0;\n"])));
-const StyledRow = dsSystem.styled('div', {
-  name: 'DS-AppPicker',
-  slot: 'row'
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  width: 100%;\n"])));
-const StyledChipLabel = dsSystem.styled('p', {
-  name: 'DS-AppPicker',
-  slot: 'chipLabel'
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: ", ";\n  font-weight: ", ";\n  word-wrap: break-word;\n  margin: 0 6px;\n  line-height: 1.45;\n  width: 100%;\n  z-index: 120;\n\n  & span {\n    padding-top: 6px;\n  }\n"])), _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.fontSizes.label[200];
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.fontWeights.semibold;
-});
-const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  color: ", ";\n  background-color: ", ";\n\n  .app-picker__icon {\n    fill: ", ";\n  }\n\n  &:before {\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ", ";\n    }\n  }\n"])), _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.brand[800];
-}, _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.brand[200];
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.brand[800];
-}, _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.brand[600];
-}, _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.brand[800];
-});
-const StyledChip = dsSystem.styled('button', {
-  name: 'DS-AppPicker',
-  slot: 'chip'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  height: 68px;\n  width: 92px;\n  background-color: #fff;\n  color: ", ";\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    border: 2px solid transparent;\n  }\n\n  & .app-picker__icon {\n    fill: ", ";\n    height: 28px;\n    width: 28px;\n  }\n\n  & .app-picker__icon svg {\n    height: 28px;\n    width: 28px;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ", ";\n    }\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ", ";\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ", " {\n        color: ", ";\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ", ";\n    }\n  }\n\n  ", "\n"])), _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.brand[600];
-}, _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.brand[600];
-}, _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.brand[800];
-}, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.brand[200];
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.brand[800];
-}, _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.brand[800];
-}, _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.neutral[500];
-}, _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.colors.neutral[500];
-}, StyledChipLabel, _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.neutral[500];
-}, _ref21 => {
-  let {
-    theme
-  } = _ref21;
-  return theme.colors.neutral[500];
-}, _ref22 => {
-  let {
-    selected
-  } = _ref22;
-  return !selected ? '' : styledChipSelectedCss;
-});
-const StyledSeparator = dsSystem.styled('hr', {
-  name: 'DS-AppPicker',
-  slot: 'separator'
-})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  border-top: 1px solid ", ";\n  border-bottom: none;\n  width: 99%;\n  margin: 0;\n"])), _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.colors.neutral[100];
-});
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    border: 2px solid transparent;
+  }
+
+  & .app-picker__icon {
+    fill: ${({ theme }) => theme.colors.brand[600]};
+    height: 28px;
+    width: 28px;
+  }
+
+  & .app-picker__icon svg {
+    height: 28px;
+    width: 28px;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.brand[800]};
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+    .app-picker__icon {
+      fill: ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+
+  &:focus {
+    &:before {
+      border-color: ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral[500]};
+    cursor: not-allowed;
+
+    .app-picker__icon {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+
+    &:focus,
+    &:hover {
+      background-color: #fff;
+      cursor: not-allowed;
+      &:before {
+        border-color: transparent;
+      }
+
+      ${StyledChipLabel} {
+        color: ${({ theme }) => theme.colors.neutral[500]};
+      }
+    }
+
+    &:hover .app-picker__icon {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+  }
 
-exports.StyledChip = StyledChip;
-exports.StyledChipLabel = StyledChipLabel;
-exports.StyledGrid = StyledGrid;
-exports.StyledRow = StyledRow;
-exports.StyledSeparator = StyledSeparator;
-exports.StyledTitle = StyledTitle;
-exports.StyledWrapper = StyledWrapper;
+  ${({ selected }) => !selected ? "" : styledChipSelectedCss}
+`;
+const StyledSeparator = (0, import_ds_system.styled)("hr", { name: "DS-AppPicker", slot: "separator" })`
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  border-bottom: none;
+  width: 99%;
+  margin: 0;
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

package/cjs/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\n\nexport const StyledTitle = styled('h3', { name: 'DS-AppPicker', slot: 'title' })`\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  font-size: ${({ theme }) => theme.fontSizes.value[400]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  margin: 12px 0 0 0;\n  line-height: 1.38;\n  text-transform: uppercase;\n`;\n\nexport const StyledWrapper = styled('ul', { name: 'DS-AppPicker', slot: 'root' })`\n  align-items: center;\n  min-width: 308px;\n  min-height: 110px;\n  max-height: 449px;\n  width: 308px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin: 0;\n  padding: ${({ isOverflow }) => (isOverflow ? '0 0 0 16px' : '0 16px')};\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledGrid = styled('div', { name: 'DS-AppPicker', slot: 'grid' })`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 8px 0;\n`;\n\nexport const StyledRow = styled('div', { name: 'DS-AppPicker', slot: 'row' })`\n  display: flex;\n  width: 100%;\n`;\n\nexport const StyledChipLabel = styled('p', { name: 'DS-AppPicker', slot: 'chipLabel' })`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  margin: 0 6px;\n  line-height: 1.45;\n  width: 100%;\n  z-index: 120;\n\n  & span {\n    padding-top: 6px;\n  }\n`;\n\nconst styledChipSelectedCss = css`\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .app-picker__icon {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChip = styled('button', { name: 'DS-AppPicker', slot: 'chip' })<{ selected: boolean | undefined }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  height: 68px;\n  width: 92px;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    border: 2px solid transparent;\n  }\n\n  & .app-picker__icon {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 28px;\n    width: 28px;\n  }\n\n  & .app-picker__icon svg {\n    height: 28px;\n    width: 28px;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .app-picker__icon {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .app-picker__icon {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .app-picker__icon {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nexport const StyledSeparator = styled('hr', { name: 'DS-AppPicker', slot: 'separator' })`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  border-bottom: none;\n  width: 99%;\n  margin: 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/types/AppPickerTypes.js

@@ -1,2 +1,27 @@
-'use strict';
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var AppPickerTypes_exports = {};
+var React = __toESM(require("react"));
+module.exports = __toCommonJS(AppPickerTypes_exports);
+//# sourceMappingURL=AppPickerTypes.js.map

package/cjs/types/AppPickerTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/AppPickerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { SvgIconType } from '@elliemae/ds-icons';\n\nexport interface AppItemType {\n  label: string;\n  icon: React.ComponentType<{ className: string; size: string }>;\n  onClick: () => void | null;\n  disabled?: boolean;\n  selected?: boolean;\n}\n\nexport interface AppPickerPropsType {\n  apps: AppItemType[];\n  customApps: AppItemType[];\n  sectionTitle: string;\n  customSectionTitle: string;\n  icon: SvgIconType;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  actionRef?: React.RefObject<{ focusToIndex: (index: number) => void }>;\n  onClick?: (e: MouseEvent) => void;\n  onClickOutside?: (e: React.MouseEvent) => void;\n  renderTrigger?: React.ComponentType<any>;\n  isOpen?: boolean;\n  onClose?: () => void;\n  triggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport interface AppPickerImplProps {\n  apps: AppItemType[];\n  customApps: AppItemType[];\n  sectionTitle: string;\n  customSectionTitle: string;\n  close?: () => void;\n  onKeyDown: (e: KeyboardEvent) => void;\n  wrapperRef: React.RefObject<HTMLUListElement>;\n  triggerRef: React.RefObject<HTMLElement>;\n}\n\nexport type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;\nexport type DSAppPickerType = React.ComponentType<AppPickerPropsType>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
+  "names": []
+}

package/cjs/utils.js

@@ -1,18 +1,46 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var utils_exports = {};
+__export(utils_exports, {
+  keys: () => keys
+});
+var React = __toESM(require("react"));
 const keys = {
-  LEFT: 'ArrowLeft',
-  UP: 'ArrowUp',
-  RIGHT: 'ArrowRight',
-  DOWN: 'ArrowDown',
-  ENTER: 'Enter',
-  SPACE: '',
-  TAB: 'Tab',
-  ESC: 'Escape',
-  HOME: 'Home',
-  END: 'End'
+  LEFT: "ArrowLeft",
+  UP: "ArrowUp",
+  RIGHT: "ArrowRight",
+  DOWN: "ArrowDown",
+  ENTER: "Enter",
+  SPACE: "",
+  TAB: "Tab",
+  ESC: "Escape",
+  HOME: "Home",
+  END: "End"
 };
-
-exports.keys = keys;
+module.exports = __toCommonJS(utils_exports);
+//# sourceMappingURL=utils.js.map

package/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const keys = {\n  LEFT: 'ArrowLeft',\n  UP: 'ArrowUp',\n  RIGHT: 'ArrowRight',\n  DOWN: 'ArrowDown',\n  ENTER: 'Enter',\n  SPACE: '',\n  TAB: 'Tab',\n  ESC: 'Escape',\n  HOME: 'Home',\n  END: 'End',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA;",
+  "names": []
+}