@elliemae/ds-pills 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/cjs/components/Pill.js

@@ -0,0 +1,60 @@
+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 Pill_exports = {};
+__export(Pill_exports, {
+  DSPillV2: () => DSPillV2,
+  DSPillV2WithSchema: () => DSPillV2WithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_props = require("../props");
+var import_types = require("./types");
+const pillComponentGetter = {
+  dropdown: import_types.DropdownPill,
+  input: import_types.InputPill,
+  label: import_types.LabelPill,
+  readonly: import_types.ReadOnlyPill,
+  removable: import_types.RemovablePill,
+  value: import_types.ValuePill
+};
+const DSPillV2 = (props) => {
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillV2DefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillV2PropTypes);
+  const { type } = propsWithDefaults;
+  const PillComponent = pillComponentGetter[type];
+  return /* @__PURE__ */ import_react.default.createElement(PillComponent, {
+    ...propsWithDefaults
+  });
+};
+DSPillV2.propTypes = import_props.DSPillV2PropTypes;
+const DSPillV2WithSchema = (0, import_react_desc.describe)(DSPillV2).description("Pill");
+DSPillV2WithSchema.propTypes = import_props.DSPillV2PropTypes;
+module.exports = __toCommonJS(Pill_exports);
+//# sourceMappingURL=Pill.js.map

package/dist/cjs/components/Pill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Pill.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPillProps } from '../index.d';\nimport { DSPillV2DefaultProps, DSPillV2PropTypes } from '../props';\nimport { DropdownPill, LabelPill, ValuePill, InputPill, ReadOnlyPill, RemovablePill } from './types';\n\nconst pillComponentGetter: Record<string, React.ComponentType<DSPillProps>> = {\n  dropdown: DropdownPill,\n  input: InputPill,\n  label: LabelPill,\n  readonly: ReadOnlyPill,\n  removable: RemovablePill,\n  value: ValuePill,\n};\n\nconst DSPillV2: React.ComponentType<DSPillProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillV2DefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillV2PropTypes);\n  const { type } = propsWithDefaults;\n  const PillComponent = pillComponentGetter[type];\n\n  return <PillComponent {...propsWithDefaults} />;\n};\n\nDSPillV2.propTypes = DSPillV2PropTypes;\nconst DSPillV2WithSchema = describe(DSPillV2).description('Pill');\nDSPillV2WithSchema.propTypes = DSPillV2PropTypes;\n\nexport { DSPillV2, DSPillV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AACzB,8BAA6E;AAE7E,mBAAwD;AACxD,mBAA2F;AAE3F,MAAM,sBAAwE;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA;AAGT,MAAM,WAA6C,CAAC,UAAU;AAC5D,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAClD,QAAM,EAAE,SAAS;AACjB,QAAM,gBAAgB,oBAAoB;AAE1C,SAAO,mDAAC,eAAD;AAAA,OAAmB;AAAA;AAAA;AAG5B,SAAS,YAAY;AACrB,MAAM,qBAAqB,gCAAS,UAAU,YAAY;AAC1D,mBAAmB,YAAY;",
+  "names": []
+}

package/dist/cjs/components/PillButton.js

@@ -0,0 +1,58 @@
+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 PillButton_exports = {};
+__export(PillButton_exports, {
+  DSPillButton: () => DSPillButton,
+  DSPillButtonWithSchema: () => DSPillButtonWithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_styled = require("./styled");
+var import_props = require("../props");
+const typeToClassName = {
+  only: "ds-pill-button-only",
+  left: "ds-pill-button-left",
+  right: "ds-pill-button-right"
+};
+const DSPillButton = (props) => {
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillButtonDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillButtonPropTypes);
+  const { type, children, ...rest } = propsWithDefaults;
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillButton, {
+    ...rest,
+    buttonType: "raw",
+    className: `${typeToClassName[type]} ${rest.className}`
+  }, children);
+};
+DSPillButton.propTypes = import_props.DSPillButtonPropTypes;
+const DSPillButtonWithSchema = (0, import_react_desc.describe)(DSPillButton).description("Pill button");
+DSPillButtonWithSchema.propTypes = import_props.DSPillButtonPropTypes;
+module.exports = __toCommonJS(PillButton_exports);
+//# sourceMappingURL=PillButton.js.map

package/dist/cjs/components/PillButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PillButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { DSButtonPropsT } from '@elliemae/ds-button';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { StyledPillButton } from './styled';\nimport { DSPillButtonDefaultProps, DSPillButtonPropTypes } from '../props';\n\nconst typeToClassName = {\n  only: 'ds-pill-button-only',\n  left: 'ds-pill-button-left',\n  right: 'ds-pill-button-right',\n};\n\nconst DSPillButton: React.ComponentType<DSButtonPropsT> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillButtonDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypes);\n\n  const { type, children, ...rest } = propsWithDefaults;\n\n  return (\n    <StyledPillButton {...rest} buttonType=\"raw\" className={`${typeToClassName[type]} ${rest.className}`}>\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.propTypes = DSPillButtonPropTypes;\nconst DSPillButtonWithSchema = describe(DSPillButton).description('Pill button');\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypes;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,wBAAyB;AAEzB,8BAA6E;AAC7E,oBAAiC;AACjC,mBAAgE;AAEhE,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA;AAGT,MAAM,eAAoD,CAAC,UAAU;AACnE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,EAAE,MAAM,aAAa,SAAS;AAEpC,SACE,mDAAC,gCAAD;AAAA,OAAsB;AAAA,IAAM,YAAW;AAAA,IAAM,WAAW,GAAG,gBAAgB,SAAS,KAAK;AAAA,KACtF;AAAA;AAKP,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
+  "names": []
+}

package/dist/cjs/components/PillGroup.js

@@ -0,0 +1,72 @@
+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 PillGroup_exports = {};
+__export(PillGroup_exports, {
+  DSPillGroupV2: () => DSPillGroupV2,
+  DSPillGroupV2Context: () => DSPillGroupV2Context,
+  DSPillGroupV2WithSchema: () => DSPillGroupV2WithSchema
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_uid = require("uid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_props = require("../props");
+var import_styled = require("./styled");
+const DSPillGroupV2Context = (0, import_react.createContext)({
+  onKeyboardRemove: () => null
+});
+const DSPillGroupV2 = (props) => {
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.DSPillGroupDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_props.DSPillGroupPropTypes);
+  const pillGroupUid = (0, import_react.useMemo)(() => `ds-pill-group-${(0, import_uid.uid)()}`, []);
+  const { children, width, innerRef } = propsWithDefaults;
+  const onKeyboardRemove = (0, import_react.useCallback)((pillUid) => {
+    const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
+    const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
+    if (pillIndex > 0) {
+      elems[pillIndex - 1].focus();
+    } else if (pillIndex + 1 < elems.length) {
+      elems[pillIndex + 1].focus();
+    }
+  }, [pillGroupUid]);
+  return /* @__PURE__ */ import_react.default.createElement(DSPillGroupV2Context.Provider, {
+    value: { onKeyboardRemove }
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPillGroup, {
+    width,
+    id: pillGroupUid,
+    cols: import_react.default.Children.map(children, () => "auto"),
+    gutter: "2px",
+    ref: innerRef
+  }, children));
+};
+DSPillGroupV2.propTypes = import_props.DSPillGroupPropTypes;
+const DSPillGroupV2WithSchema = (0, import_react_desc.describe)(DSPillGroupV2);
+DSPillGroupV2WithSchema.propTypes = import_props.DSPillGroupPropTypes;
+module.exports = __toCommonJS(PillGroup_exports);
+//# sourceMappingURL=PillGroup.js.map

package/dist/cjs/components/PillGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/PillGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSPillGroupProps } from '../index.d';\nimport { DSPillGroupDefaultProps, DSPillGroupPropTypes } from '../props';\nimport { StyledPillGroup } from './styled';\n\nexport const DSPillGroupV2Context = createContext<{ onKeyboardRemove: (pillUid: string) => void }>({\n  onKeyboardRemove: () => null,\n});\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupProps> = (props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSPillGroupDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefaults, DSPillGroupPropTypes);\n\n  const pillGroupUid = useMemo(() => `ds-pill-group-${uid()}`, []);\n  const { children, width, innerRef } = propsWithDefaults;\n  const onKeyboardRemove = useCallback(\n    (pillUid: string) => {\n      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)] as HTMLElement[];\n\n      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);\n\n      if (pillIndex > 0) {\n        elems[pillIndex - 1].focus();\n      } else if (pillIndex + 1 < elems.length) {\n        elems[pillIndex + 1].focus();\n      }\n    },\n    [pillGroupUid],\n  );\n\n  return (\n    <DSPillGroupV2Context.Provider value={{ onKeyboardRemove }}>\n      <StyledPillGroup\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto')}\n        gutter=\"2px\"\n        ref={innerRef}\n      >\n        {children}\n      </StyledPillGroup>\n    </DSPillGroupV2Context.Provider>\n  );\n};\n\nDSPillGroupV2.propTypes = DSPillGroupPropTypes;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypes;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2D;AAC3D,wBAAyB;AACzB,iBAAoB;AACpB,8BAA6E;AAE7E,mBAA8D;AAC9D,oBAAgC;AAEzB,MAAM,uBAAuB,gCAA+D;AAAA,EACjG,kBAAkB,MAAM;AAAA;AAG1B,MAAM,gBAAuD,CAAC,UAAU;AACtE,QAAM,oBAAoB,0DAA6B,OAAO;AAC9D,8DAA+B,mBAAmB;AAElD,QAAM,eAAe,0BAAQ,MAAM,iBAAiB,yBAAS;AAC7D,QAAM,EAAE,UAAU,OAAO,aAAa;AACtC,QAAM,mBAAmB,8BACvB,CAAC,YAAoB;AACnB,UAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI;AAEhD,UAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO;AAExD,QAAI,YAAY,GAAG;AACjB,YAAM,YAAY,GAAG;AAAA,eACZ,YAAY,IAAI,MAAM,QAAQ;AACvC,YAAM,YAAY,GAAG;AAAA;AAAA,KAGzB,CAAC;AAGH,SACE,mDAAC,qBAAqB,UAAtB;AAAA,IAA+B,OAAO,EAAE;AAAA,KACtC,mDAAC,+BAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,qBAAM,SAAS,IAAI,UAAU,MAAM;AAAA,IACzC,QAAO;AAAA,IACP,KAAK;AAAA,KAEJ;AAAA;AAMT,cAAc,YAAY;AAC1B,MAAM,0BAA0B,gCAAS;AACzC,wBAAwB,YAAY;",
+  "names": []
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,30 @@
+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 components_exports = {};
+var React = __toESM(require("react"));
+__reExport(components_exports, require("./Pill"));
+__reExport(components_exports, require("./PillGroup"));
+__reExport(components_exports, require("./PillButton"));
+module.exports = __toCommonJS(components_exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/components/styled.js

@@ -0,0 +1,235 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledDropdownPillWrapper: () => StyledDropdownPillWrapper,
+  StyledInputPillWrapper: () => StyledInputPillWrapper,
+  StyledLabelPillWrapper: () => StyledLabelPillWrapper,
+  StyledPillButton: () => StyledPillButton,
+  StyledPillGroup: () => StyledPillGroup,
+  StyledReadonlyPillWrapper: () => StyledReadonlyPillWrapper,
+  StyledRemovablePillWrapper: () => StyledRemovablePillWrapper,
+  StyledSpanWithTooltip: () => StyledSpanWithTooltip,
+  StyledValuePillWrapper: () => StyledValuePillWrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_button = require("@elliemae/ds-button");
+const borderOutside = (color, size = 1, zIndex = 2, borderRadius = "12px") => import_ds_system.css`
+  :after {
+    content: ' ';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: ${size}px solid ${color};
+    border-top-left-radius: ${borderRadius};
+    border-top-right-radius: ${borderRadius};
+    border-bottom-left-radius: ${borderRadius};
+    border-bottom-right-radius: ${borderRadius};
+    pointer-events: none;
+    z-index: ${zIndex};
+  }
+`;
+const commonPillWrapperCss = import_ds_system.css`
+  height: ${(props) => props?.size === "m" ? "24px" : "18px"};
+
+  position: relative;
+
+  width: fit-content;
+
+  background-color: ${(props) => props.theme.colors.brand[200]};
+
+  outline: none;
+
+  white-space: nowrap;
+
+  padding: 0px 12px 0 12px;
+  border-radius: 12px;
+
+  font-size: 13px;
+  line-height: 1;
+  color: ${(props) => props.theme.colors.brand[800]};
+  ${(props) => borderOutside(props.theme.colors.brand[300])};
+`;
+const StyledLabelPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+`;
+const StyledValuePillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  padding-left: ${(props) => props.hasIcon ? "0px !important" : "12px"};
+`;
+const StyledInputPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+
+  background: ${(props) => props.theme.colors.neutral["000"]};
+  padding: 0;
+
+  ${({ value, theme }) => borderOutside(value === "" ? theme.colors.neutral[400] : theme.colors.brand[500])}
+
+  :focus-within {
+    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : ""}
+  }
+
+  :active {
+    ${(props) => props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : ""}
+  }
+
+  & .em-ds-input {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    height: 100%;
+    background: transparent;
+    width: ${(props) => `${props.inputWidth + (props.value === "" ? 24 : 0)}px`};
+    padding: 0;
+    margin: 0 0 0 8px;
+  }
+
+  & .em-ds-input__tooltip-ref {
+    height: 100%;
+  }
+`;
+const StyledDropdownPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+
+  padding: 0 0 0 12px;
+`;
+const StyledReadonlyPillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  padding-right: ${(props) => props.hasIconRight ? "0 !important" : "12px"};
+  padding-left: ${(props) => props.hasIconLeft ? "0 !important" : "12px"};
+`;
+const StyledRemovablePillWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  ${commonPillWrapperCss}
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  padding: 0 0 0 12px;
+`;
+const StyledPillGroup = (0, import_styled_components.default)(import_ds_grid.Grid)`
+  width: ${({ width }) => width};
+
+  // Pill edges
+  & .ds-pill-wrapper {
+    &:not(:first-of-type) {
+      &,
+      :after,
+      :before,
+      .ds-pill-tooltip-value:after {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+    }
+    &:not(:last-of-type) {
+      &,
+      :after,
+      :before,
+      .ds-pill-tooltip-value:after {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+  }
+
+  // Pill paddings to the left / right
+  & .ds-pill-wrapper-label,
+  & .ds-pill-wrapper-value,
+  & .ds-pill-wrapper-readonly {
+    &:not(:first-of-type) {
+      padding-left: 8px;
+    }
+    &:not(:last-of-type) {
+      padding-right: 8px;
+    }
+  }
+
+  & .ds-pill-wrapper-removable:not(:first-of-type) {
+    padding-left: 8px;
+  }
+
+  & .ds-pill-wrapper-dropdown:not(:first-of-type) {
+    padding-left: 8px;
+  }
+
+  & .ds-pill-wrapper {
+    :not(:first-of-type) {
+      .ds-pill-button-left {
+        border-radius: 0px;
+      }
+      .ds-pill-button-only {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+    }
+    :not(:last-of-type) {
+      .ds-pill-button-right {
+        border-radius: 0px;
+      }
+      .ds-pill-button-only {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+  }
+`;
+const StyledSpanWithTooltip = import_styled_components.default.span`
+  outline: none;
+  :focus {
+    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}
+  }
+`;
+const StyledPillButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
+  display: grid;
+  place-items: center;
+
+  position: relative;
+
+  padding: 0;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+
+  border-radius: 12px;
+
+  :focus {
+    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, "inherit")}
+  }
+
+  cursor: pointer;
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

package/dist/cjs/components/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\n// =============================================================================\n// Common CSS\n// =============================================================================\n\nconst borderOutside = (color: string, size = 1, zIndex = 2, borderRadius = '12px') => css`\n  :after {\n    content: ' ';\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    border: ${size}px solid ${color};\n    border-top-left-radius: ${borderRadius};\n    border-top-right-radius: ${borderRadius};\n    border-bottom-left-radius: ${borderRadius};\n    border-bottom-right-radius: ${borderRadius};\n    pointer-events: none;\n    z-index: ${zIndex};\n  }\n`;\n\nconst commonPillWrapperCss = css<{ size: 'm' | 's' }>`\n  height: ${(props) => (props?.size === 'm' ? '24px' : '18px')};\n\n  position: relative;\n\n  width: fit-content;\n\n  background-color: ${(props) => props.theme.colors.brand[200]};\n\n  outline: none;\n\n  white-space: nowrap;\n\n  padding: 0px 12px 0 12px;\n  border-radius: 12px;\n\n  font-size: 13px;\n  line-height: 1;\n  color: ${(props) => props.theme.colors.brand[800]};\n  ${(props) => borderOutside(props.theme.colors.brand[300])};\n`;\n\n// =============================================================================\n// Pills wrappers\n// =============================================================================\n\nexport const StyledLabelPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledValuePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding-left: ${(props) => (props.hasIcon ? '0px !important' : '12px')};\n`;\n\nexport const StyledInputPillWrapper = styled(Grid)<{ value: string; inputWidth: number; inputHasFocus: boolean }>`\n  ${commonPillWrapperCss}\n\n  background: ${(props) => props.theme.colors.neutral['000']};\n  padding: 0;\n\n  ${({ value, theme }) => borderOutside(value === '' ? theme.colors.neutral[400] : theme.colors.brand[500])}\n\n  :focus-within {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[700], 2) : '')}\n  }\n\n  :active {\n    ${(props) => (props.inputHasFocus ? borderOutside(props.theme.colors.brand[500]) : '')}\n  }\n\n  & .em-ds-input {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    height: 100%;\n    background: transparent;\n    width: ${(props) => `${props.inputWidth + (props.value === '' ? 24 : 0)}px`};\n    padding: 0;\n    margin: 0 0 0 8px;\n  }\n\n  & .em-ds-input__tooltip-ref {\n    height: 100%;\n  }\n`;\n\nexport const StyledDropdownPillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  padding: 0 0 0 12px;\n`;\n\nexport const StyledReadonlyPillWrapper = styled(Grid)<{ hasIconRight: boolean; hasIconLeft: boolean }>`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding-right: ${(props) => (props.hasIconRight ? '0 !important' : '12px')};\n  padding-left: ${(props) => (props.hasIconLeft ? '0 !important' : '12px')};\n`;\n\nexport const StyledRemovablePillWrapper = styled(Grid)`\n  ${commonPillWrapperCss}\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  padding: 0 0 0 12px;\n`;\n\n// =============================================================================\n// Pill group\n// =============================================================================\n\nexport const StyledPillGroup = styled(Grid)`\n  width: ${({ width }) => width};\n\n  // Pill edges\n  & .ds-pill-wrapper {\n    &:not(:first-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    &:not(:last-of-type) {\n      &,\n      :after,\n      :before,\n      .ds-pill-tooltip-value:after {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n\n  // Pill paddings to the left / right\n  & .ds-pill-wrapper-label,\n  & .ds-pill-wrapper-value,\n  & .ds-pill-wrapper-readonly {\n    &:not(:first-of-type) {\n      padding-left: 8px;\n    }\n    &:not(:last-of-type) {\n      padding-right: 8px;\n    }\n  }\n\n  & .ds-pill-wrapper-removable:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper-dropdown:not(:first-of-type) {\n    padding-left: 8px;\n  }\n\n  & .ds-pill-wrapper {\n    :not(:first-of-type) {\n      .ds-pill-button-left {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n      }\n    }\n    :not(:last-of-type) {\n      .ds-pill-button-right {\n        border-radius: 0px;\n      }\n      .ds-pill-button-only {\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      }\n    }\n  }\n`;\n\n// =============================================================================\n// Extra stuff\n// =============================================================================\n\nexport const StyledSpanWithTooltip = styled.span`\n  outline: none;\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3)}\n  }\n`;\n\nexport const StyledPillButton = styled(DSButtonV2)<{ width: string; height: string }>`\n  display: grid;\n  place-items: center;\n\n  position: relative;\n\n  padding: 0;\n  width: ${(props) => props.width};\n  height: ${(props) => props.height};\n\n  border-radius: 12px;\n\n  :focus {\n    ${(props) => borderOutside(props.theme.colors.brand[700], 2, 3, 'inherit')}\n  }\n\n  cursor: pointer;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/components/types/DropdownPill.js

@@ -0,0 +1,88 @@
+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 DropdownPill_exports = {};
+__export(DropdownPill_exports, {
+  DropdownPill: () => DropdownPill
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_uid = require("uid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_styled = require("../styled");
+var import_utils = require("../../utils");
+var import_PillButton = require("../PillButton");
+const DropdownPill = import_react.default.memo(({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {
+  const chevronRef = (0, import_react.useRef)(null);
+  const pillUid = (0, import_react.useMemo)(() => `ds-pill-${(0, import_uid.uid)()}`, []);
+  const TextComponent = labelTruncated ? ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    value: children
+  }) : import_react.default.Fragment;
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledDropdownPillWrapper, {
+    size,
+    id: pillUid,
+    className: "ds-pill-wrapper ds-pill-wrapper-dropdown",
+    "data-testid": "ds-pill-wrapper",
+    cols: ["auto", "24px"],
+    gutter: "2px",
+    alignItems: "center",
+    justifyItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(TextComponent, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
+    placementOrderPreference: [
+      "bottom-start",
+      "bottom",
+      "bottom-end",
+      "right-end",
+      "top-start",
+      "top",
+      "top-end"
+    ],
+    ...dropdownProps,
+    onClickOutside: (e) => {
+      if (e.code === "Escape")
+        chevronRef.current.focus();
+      if (dropdownProps.onClickOutside)
+        dropdownProps.onClickOutside(e);
+    },
+    wrapperStyles: { w: "100%", h: "100%" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_PillButton.DSPillButton, {
+    className: "ds-pill-focus-point",
+    "data-testid": "ds-pill-dropdown-chevron",
+    innerRef: (0, import_utils.setMultipleRefs)(chevronRef, innerRef),
+    "aria-label": ariaLabel || label,
+    type: "right",
+    onClick: onDropdownClick
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, {
+    color: ["brand-primary", "800"],
+    width: 20,
+    height: 20
+  }))));
+});
+module.exports = __toCommonJS(DropdownPill_exports);
+//# sourceMappingURL=DropdownPill.js.map

package/dist/cjs/components/types/DropdownPill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/types/DropdownPill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo, useRef } from 'react';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { uid } from 'uid';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { StyledDropdownPillWrapper } from '../styled';\nimport type { DSPillProps } from '../../index.d';\nimport { setMultipleRefs } from '../../utils';\nimport { DSPillButton } from '../PillButton';\n\nexport const DropdownPill = React.memo<DSPillProps>(\n  ({ label, size, labelTruncated, dropdownProps, innerRef, ariaLabel, onDropdownClick }) => {\n    const chevronRef = useRef(null);\n\n    const pillUid = useMemo(() => `ds-pill-${uid()}`, []);\n\n    const TextComponent = labelTruncated\n      ? ({ children }) => <SimpleTruncatedTooltipText value={children} />\n      : React.Fragment;\n\n    return (\n      <StyledDropdownPillWrapper\n        size={size}\n        id={pillUid}\n        className=\"ds-pill-wrapper ds-pill-wrapper-dropdown\"\n        data-testid=\"ds-pill-wrapper\"\n        cols={['auto', '24px']}\n        gutter=\"2px\"\n        alignItems=\"center\"\n        justifyItems=\"center\"\n      >\n        <TextComponent>{label}</TextComponent>\n        <DSDropdownMenuV2\n          placementOrderPreference={[\n            'bottom-start',\n            'bottom',\n            'bottom-end',\n            'right-end',\n            'top-start',\n            'top',\n            'top-end',\n          ]}\n          {...dropdownProps}\n          onClickOutside={(e) => {\n            if (e.code === 'Escape') chevronRef.current.focus();\n            if (dropdownProps.onClickOutside) dropdownProps.onClickOutside(e);\n          }}\n          wrapperStyles={{ w: '100%', h: '100%' }}\n        >\n          <DSPillButton\n            className=\"ds-pill-focus-point\"\n            data-testid=\"ds-pill-dropdown-chevron\"\n            innerRef={setMultipleRefs(chevronRef, innerRef)}\n            aria-label={ariaLabel || label}\n            type=\"right\"\n            onClick={onDropdownClick}\n          >\n            <ChevronSmallDown color={['brand-primary', '800']} width={20} height={20} />\n          </DSPillButton>\n        </DSDropdownMenuV2>\n      </StyledDropdownPillWrapper>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAuC;AACvC,6BAAiC;AACjC,iBAAoB;AACpB,sBAAiC;AACjC,uCAA2C;AAC3C,oBAA0C;AAE1C,mBAAgC;AAChC,wBAA6B;AAEtB,MAAM,eAAe,qBAAM,KAChC,CAAC,EAAE,OAAO,MAAM,gBAAgB,eAAe,UAAU,WAAW,sBAAsB;AACxF,QAAM,aAAa,yBAAO;AAE1B,QAAM,UAAU,0BAAQ,MAAM,WAAW,yBAAS;AAElD,QAAM,gBAAgB,iBAClB,CAAC,EAAE,eAAe,mDAAC,6DAAD;AAAA,IAA4B,OAAO;AAAA,OACrD,qBAAM;AAEV,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA,IAAI;AAAA,IACJ,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,MAAM,CAAC,QAAQ;AAAA,IACf,QAAO;AAAA,IACP,YAAW;AAAA,IACX,cAAa;AAAA,KAEb,mDAAC,eAAD,MAAgB,QAChB,mDAAC,yCAAD;AAAA,IACE,0BAA0B;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,OAEE;AAAA,IACJ,gBAAgB,CAAC,MAAM;AACrB,UAAI,EAAE,SAAS;AAAU,mBAAW,QAAQ;AAC5C,UAAI,cAAc;AAAgB,sBAAc,eAAe;AAAA;AAAA,IAEjE,eAAe,EAAE,GAAG,QAAQ,GAAG;AAAA,KAE/B,mDAAC,gCAAD;AAAA,IACE,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU,kCAAgB,YAAY;AAAA,IACtC,cAAY,aAAa;AAAA,IACzB,MAAK;AAAA,IACL,SAAS;AAAA,KAET,mDAAC,kCAAD;AAAA,IAAkB,OAAO,CAAC,iBAAiB;AAAA,IAAQ,OAAO;AAAA,IAAI,QAAQ;AAAA;AAAA;",
+  "names": []
+}