@elliemae/ds-pills 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/deprecated/LabeledPills.js

@@ -1,46 +1,53 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { PillGroup } from "./PillGroup";
-import { RemovablePill } from "./RemovablePill";
-import { Pill } from "./Pill";
-function LabeledPills({
-  children,
-  label = "",
-  leftAddon,
-  onFocusGroupSet,
-  onFocusNextGroup,
-  onFocusPreviousGroup
-}) {
-  return /* @__PURE__ */ React2.createElement(PillGroup, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { PillGroup } from './PillGroup.js';
+import { RemovablePill } from './RemovablePill.js';
+import { Pill } from './Pill.js';
+
+function LabeledPills(_ref) {
+  let {
+    children,
+    label = '',
+    leftAddon,
     onFocusGroupSet,
     onFocusNextGroup,
     onFocusPreviousGroup
-  }, /* @__PURE__ */ React2.createElement(Pill, {
-    label,
-    leftAddon,
+  } = _ref;
+  return /*#__PURE__*/_jsx(PillGroup, {
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup
+  }, void 0, /*#__PURE__*/_jsx(Pill, {
+    label: label,
+    leftAddon: leftAddon,
     variant: "title",
     "data-testid": "pill-title"
   }), children);
 }
+
 const props = {
-  label: PropTypes.string.isRequired.description("pill text label"),
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill to add the label to */
   children: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf([
-      PropTypes.instanceOf(Pill),
-      PropTypes.instanceOf(RemovablePill)
-    ])
-  })).isRequired.description("pill to add the label to"),
-  leftAddon: PropTypes.node.description("addon component to left"),
-  onFocusNextGroup: PropTypes.func.description("focus next group callback"),
-  onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
-  onFocusGroupSet: PropTypes.func.description("focus group set callback")
+    type: PropTypes.oneOf([PropTypes.instanceOf(Pill), PropTypes.instanceOf(RemovablePill)])
+  })).isRequired.description('pill to add the label to'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** focus next group callback */
+  onFocusNextGroup: PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: PropTypes.func.description('focus group set callback')
 };
-LabeledPills.propTypes = props;
 const DSLabeledPillsWithSchema = describe(LabeledPills);
 DSLabeledPillsWithSchema.propTypes = props;
-export {
-  DSLabeledPillsWithSchema,
-  LabeledPills
-};
-//# sourceMappingURL=LabeledPills.js.map
+
+export { DSLabeledPillsWithSchema, LabeledPills };

package/esm/deprecated/OverflowPill.js

@@ -1,50 +1,62 @@
-import * as React from "react";
-import React2, { useRef, useState, useEffect } from "react";
-import { PropTypes, describe } from "react-desc";
-import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup/useFocusGroupItem";
-import { DSTooltip } from "@elliemae/ds-tooltip";
-import { Pill } from "./Pill";
-function OverflowPill({ containerProps = {}, label = "", options = [] }) {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useRef, useState, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
+import DSTooltip from '@elliemae/ds-tooltip';
+import { Pill } from './Pill.js';
+
+function OverflowPill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    options = []
+  } = _ref;
   const ref = useRef(null);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
-  const [tooltipText, setTooltipText] = useState("");
+  const [tooltipText, setTooltipText] = useState('');
   useEffect(() => {
-    let text = "";
-    options.forEach((option) => {
+    let text = '';
+    options.forEach(option => {
       if (!tooltipText || option === options[0]) {
-        text = `${option.label}`;
+        text = "".concat(option.label);
       } else {
-        text = text.concat(`, ${option.label}`);
+        text = text.concat(", ".concat(option.label));
       }
     });
     setTooltipText(text);
   }, [options]);
   useFocusGroupItem(ref);
-  return /* @__PURE__ */ React2.createElement(DSTooltip, {
+  return /*#__PURE__*/_jsx(DSTooltip, {
     isOpen: tooltipIsOpen,
     title: tooltipText,
     zIndex: 11,
-    triggerComponent: /* @__PURE__ */ React2.createElement(Pill, {
+    triggerComponent: /*#__PURE__*/_jsx(Pill, {
       className: "overflow-pill",
-      containerProps,
+      containerProps: containerProps,
       innerRef: ref,
-      label,
+      label: label,
       tabIndex: -1,
       onMouseEnter: () => setTooltipIsOpen(true),
       onMouseLeave: () => setTooltipIsOpen(false)
     })
   });
 }
+
 const props = {
-  containerProps: PropTypes.object.description("props to inject to pill wrapper"),
-  label: PropTypes.string.isRequired.description("pill text label"),
-  options: PropTypes.array.description("overflow pills options")
+  /** props to inject to pill wrapper */
+  containerProps: PropTypes.object.description('props to inject to pill wrapper'),
+
+  /** pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** overflow pills options */
+  options: PropTypes.array.description('overflow pills options')
 };
-OverflowPill.propTypes = props;
 const DSOverflowPillWithSchema = describe(OverflowPill);
 DSOverflowPillWithSchema.propTypes = props;
-export {
-  DSOverflowPillWithSchema,
-  OverflowPill
-};
-//# sourceMappingURL=OverflowPill.js.map
+
+export { DSOverflowPillWithSchema, OverflowPill };

package/esm/deprecated/Pill.js

@@ -1,44 +1,76 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const pillBlockName = "pill";
-const PillWrapper = aggregatedClasses("div")(pillBlockName, null, ({ size, variant }) => ({
-  [variant]: !!variant,
-  [size]: !!size
-}));
-const PillLabel = aggregatedClasses("span")(pillBlockName, "label");
-const PillAddon = aggregatedClasses("div")(pillBlockName, "addon");
-function Pill({
-  containerProps = {},
-  label = "",
-  leftAddon,
-  rightAddon,
-  variant = "value",
-  size = "m",
-  ...otherProps
-}) {
-  return /* @__PURE__ */ React2.createElement(PillWrapper, {
-    ...containerProps,
-    classProps: { variant, size },
-    ...otherProps
-  }, leftAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, leftAddon), /* @__PURE__ */ React2.createElement(PillLabel, null, label), rightAddon && /* @__PURE__ */ React2.createElement(PillAddon, null, rightAddon));
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "label", "leftAddon", "rightAddon", "variant", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const pillBlockName = 'pill';
+const PillWrapper = aggregatedClasses('div')(pillBlockName, null, _ref => {
+  let {
+    size,
+    variant
+  } = _ref;
+  return {
+    [variant]: !!variant,
+    [size]: !!size
+  };
+});
+const PillLabel = aggregatedClasses('span')(pillBlockName, 'label');
+const PillAddon = aggregatedClasses('div')(pillBlockName, 'addon');
+
+function Pill(_ref2) {
+  let {
+    containerProps = {},
+    label = '',
+    leftAddon,
+    rightAddon,
+    variant = 'value',
+    size = 'm'
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/jsxs(PillWrapper, _objectSpread(_objectSpread(_objectSpread({}, containerProps), {}, {
+    classProps: {
+      variant,
+      size
+    }
+  }, otherProps), {}, {
+    children: [leftAddon && /*#__PURE__*/_jsx(PillAddon, {}, void 0, leftAddon), /*#__PURE__*/_jsx(PillLabel, {}, void 0, label), rightAddon && /*#__PURE__*/_jsx(PillAddon, {}, void 0, rightAddon)]
+  }));
 }
+
 const props = {
-  containerProps: PropTypes.object.description("props to inject to pill wrapper"),
-  label: PropTypes.string.isRequired.description("pill text label"),
-  size: PropTypes.oneOf(["m", "l"]).description("pill size"),
-  variant: PropTypes.oneOf(["value", "title"]).description("pill variant"),
-  leftAddon: PropTypes.node.description("addon component to left"),
-  rightAddon: PropTypes.node.description("addon component to right")
+  /** props to inject to pill wrapper */
+  containerProps: PropTypes.object.description('props to inject to pill wrapper'),
+
+  /** pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** pill size */
+  size: PropTypes.oneOf(['m', 'l']).description('pill size'),
+
+  /** pill variant */
+  variant: PropTypes.oneOf(['value', 'title']).description('pill variant'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** addon component to right */
+  rightAddon: PropTypes.node.description('addon component to right')
 };
-Pill.propTypes = props;
 const DSPillWithSchema = describe(Pill);
 DSPillWithSchema.propTypes = props;
-var Pill_default = Pill;
-export {
-  DSPillWithSchema,
-  Pill,
-  Pill_default as default
-};
-//# sourceMappingURL=Pill.js.map
+
+export { DSPillWithSchema, Pill, Pill as default };

package/esm/deprecated/PillGroup.js

@@ -1,43 +1,60 @@
-import * as React from "react";
-import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { FocusGroupProvider } from "@elliemae/ds-shared/FocusGroup/FocusGroupManager";
-const pillGroupBlockName = "pill-group";
-const Container = aggregatedClasses("div")(pillGroupBlockName);
-const PillGroup = ({
-  containerProps = {},
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  onFocusGroupSet,
-  children
-}) => /* @__PURE__ */ React2.createElement(FocusGroupProvider, {
-  keyBindings: {
-    Tab: "next"
-  },
-  onFocusGroupSet,
-  onFocusNextGroup,
-  onFocusPreviousGroup,
-  orientation: "horizontal"
-}, /* @__PURE__ */ React2.createElement(Container, {
-  ...containerProps
-}, children));
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import FocusGroupProvider from '@elliemae/ds-shared/FocusGroup/FocusGroupManager';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const pillGroupBlockName = 'pill-group';
+const Container = aggregatedClasses('div')(pillGroupBlockName);
+
+const PillGroup = _ref => {
+  let {
+    containerProps = {},
+    onFocusNextGroup,
+    onFocusPreviousGroup,
+    onFocusGroupSet,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(FocusGroupProvider, {
+    keyBindings: {
+      Tab: 'next'
+    },
+    onFocusGroupSet: onFocusGroupSet,
+    onFocusNextGroup: onFocusNextGroup,
+    onFocusPreviousGroup: onFocusPreviousGroup,
+    orientation: "horizontal"
+  }, void 0, /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: children
+  })));
+};
+
 const props = {
-  containerProps: PropTypes.object.description("props injected to component wrapper"),
-  onFocusNextGroup: PropTypes.func.description("focus next group callback"),
-  onFocusPreviousGroup: PropTypes.func.description("focus prev group callback"),
-  onFocusGroupSet: PropTypes.func.description("focus group set callback"),
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]).isRequired.description("pill components")
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** focus next group callback */
+  onFocusNextGroup: PropTypes.func.description('focus next group callback'),
+
+  /** focus prev group callback */
+  onFocusPreviousGroup: PropTypes.func.description('focus prev group callback'),
+
+  /** focus group set callback */
+  onFocusGroupSet: PropTypes.func.description('focus group set callback'),
+
+  /** pill components */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired.description('pill components')
 };
-PillGroup.propTypes = props;
 const DSPillGroupWithSchema = describe(PillGroup);
 DSPillGroupWithSchema.propTypes = props;
-export {
-  Container,
-  DSPillGroupWithSchema,
-  PillGroup
-};
-//# sourceMappingURL=PillGroup.js.map
+
+export { Container, DSPillGroupWithSchema, PillGroup };

package/esm/deprecated/ReadOnlyPill.js

@@ -1,71 +1,90 @@
-import * as React from "react";
-import React2, { useRef, useState } from "react";
-import { PropTypes, describe } from "react-desc";
-import { InfoCircleSmall } from "@elliemae/ds-icons";
-import { DSModal, MODAL_TYPE_V2 } from "@elliemae/ds-modal";
-import { DSPopover } from "@elliemae/ds-popover";
-import { Pill } from "./Pill";
-const ReadOnlyPill = ({
-  containerProps = {},
-  modalContent = "",
-  label = "",
-  leftAddon,
-  modalTitle = "",
-  tooltipText = ""
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { InfoCircleSmall } from '@elliemae/ds-icons';
+import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
+import Popover from '@elliemae/ds-popover';
+import { Pill } from './Pill.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const ReadOnlyPill = _ref => {
+  let {
+    containerProps = {},
+    modalContent = '',
+    label = '',
+    leftAddon,
+    modalTitle = '',
+    tooltipText = ''
+  } = _ref;
   const ref = useRef(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
   const toggle = () => {
     setIsModalOpen(!isModalOpen);
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Pill, {
-    "data-testid": "read-only-pill",
-    className: "removable-pill",
-    containerProps,
-    innerRef: ref,
-    label,
-    leftAddon,
-    rightAddon: /* @__PURE__ */ React2.createElement(DSPopover, {
-      isOpen: tooltipText && isTooltipOpen,
-      content: tooltipText,
-      placement: "top",
-      showArrow: true,
-      renderTrigger: ({ ref: ref2 }) => /* @__PURE__ */ React2.createElement(InfoCircleSmall, {
-        role: "button",
-        "data-testid": "read-only-info-btn",
-        className: "remove-pill-button",
-        onClick: toggle,
-        onMouseEnter: () => setIsTooltipOpen(true),
-        onMouseLeave: () => setIsTooltipOpen(false),
-        color: ["brand-primary", "600"],
-        innerRef: ref2
-      })
-    }),
-    tabIndex: -1
-  }), /* @__PURE__ */ React2.createElement(DSModal, {
-    isOpen: isModalOpen,
-    showClose: true,
-    shouldCloseOnOverlayClick: true,
-    modalTitle,
-    modalType: MODAL_TYPE_V2.INFORMATION,
-    onClose: toggle,
-    version: 2
-  }, modalContent));
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Pill, {
+      "data-testid": "read-only-pill",
+      className: "removable-pill",
+      containerProps: containerProps,
+      innerRef: ref,
+      label: label,
+      leftAddon: leftAddon,
+      rightAddon: /*#__PURE__*/_jsx(Popover, {
+        isOpen: tooltipText && isTooltipOpen,
+        content: tooltipText,
+        placement: "top",
+        showArrow: true,
+        renderTrigger: _ref2 => {
+          let {
+            ref
+          } = _ref2;
+          return /*#__PURE__*/_jsx(InfoCircleSmall, {
+            role: "button",
+            "data-testid": "read-only-info-btn",
+            className: "remove-pill-button",
+            onClick: toggle,
+            onMouseEnter: () => setIsTooltipOpen(true),
+            onMouseLeave: () => setIsTooltipOpen(false),
+            color: ['brand-primary', '600'],
+            innerRef: ref
+          });
+        }
+      }),
+      tabIndex: -1
+    }), /*#__PURE__*/_jsx(DSModal, {
+      isOpen: isModalOpen,
+      showClose: true,
+      shouldCloseOnOverlayClick: true,
+      modalTitle: modalTitle,
+      modalType: MODAL_TYPE_V2.INFORMATION,
+      onClose: toggle,
+      version: 2
+    }, void 0, modalContent)]
+  });
 };
+
 const props = {
-  containerProps: PropTypes.object.description("props injected to component wrapper"),
-  label: PropTypes.string.isRequired.description("pill text label"),
-  leftAddon: PropTypes.node.description("addon component to left"),
-  modalContent: PropTypes.string.description("read only pill modal content"),
-  modalTitle: PropTypes.string.description("read only pill modal title"),
-  tooltipText: PropTypes.string.description("text to display in tooltip")
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left'),
+
+  /** read only pill modal content */
+  modalContent: PropTypes.string.description('read only pill modal content'),
+
+  /** read only pill modal title */
+  modalTitle: PropTypes.string.description('read only pill modal title'),
+  tooltipText: PropTypes.string.description('text to display in tooltip')
 };
-ReadOnlyPill.propTypes = props;
 const DSReadOnlyPillWithSchema = describe(ReadOnlyPill);
 DSReadOnlyPillWithSchema.propTypes = props;
-export {
-  DSReadOnlyPillWithSchema,
-  ReadOnlyPill
-};
-//# sourceMappingURL=ReadOnlyPill.js.map
+
+export { DSReadOnlyPillWithSchema, ReadOnlyPill };

package/esm/deprecated/RemovablePill.js

@@ -1,29 +1,38 @@
-import * as React from "react";
-import React2, { useRef } from "react";
-import { PropTypes, describe } from "react-desc";
-import { isFunction } from "@elliemae/ds-utilities";
-import { CloseXsmall } from "@elliemae/ds-icons";
-import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup/useFocusGroupItem";
-import { Pill } from "./Pill";
-function RemovablePill({ containerProps = {}, label = "", onRemove, size = "m", leftAddon }) {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { isFunction } from '@elliemae/ds-utilities';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import useFocusGroupItem from '@elliemae/ds-shared/FocusGroup/useFocusGroupItem';
+import { Pill } from './Pill.js';
+
+function RemovablePill(_ref) {
+  let {
+    containerProps = {},
+    label = '',
+    onRemove,
+    size = 'm',
+    leftAddon
+  } = _ref;
   const ref = useRef(null);
-  const { focusPrevious } = useFocusGroupItem(ref);
-  return /* @__PURE__ */ React2.createElement(Pill, {
+  const {
+    focusPrevious
+  } = useFocusGroupItem(ref);
+  return /*#__PURE__*/_jsx(Pill, {
     className: "removable-pill",
     "data-testid": "removable-pill",
-    containerProps,
+    containerProps: containerProps,
     innerRef: ref,
-    size,
-    label,
-    leftAddon,
-    onKeyDown: (e) => {
-      if (e.key === "Backspace" && isFunction(onRemove)) {
+    size: size,
+    label: label,
+    leftAddon: leftAddon,
+    onKeyDown: e => {
+      if (e.key === 'Backspace' && isFunction(onRemove)) {
         onRemove();
-        if (isFunction(focusPrevious))
-          focusPrevious();
+        if (isFunction(focusPrevious)) focusPrevious();
       }
     },
-    rightAddon: /* @__PURE__ */ React2.createElement(CloseXsmall, {
+    rightAddon: /*#__PURE__*/_jsx(CloseXsmall, {
       role: "button",
       "data-testid": "remove-pill-button",
       className: "remove-pill-button",
@@ -32,18 +41,24 @@ function RemovablePill({ containerProps = {}, label = "", onRemove, size = "m",
     tabIndex: -1
   });
 }
+
 const props = {
-  containerProps: PropTypes.object.description("props injected to component wrapper"),
-  label: PropTypes.string.isRequired.description("pill text label"),
-  onRemove: PropTypes.func.description("remove click callback"),
-  size: PropTypes.oneOf(["m", "l"]).description("pill size"),
-  leftAddon: PropTypes.node.description("addon component to left")
+  /** props injected to component wrapper */
+  containerProps: PropTypes.object.description('props injected to component wrapper'),
+
+  /** labeled pill text label */
+  label: PropTypes.string.isRequired.description('pill text label'),
+
+  /** remove click callback */
+  onRemove: PropTypes.func.description('remove click callback'),
+
+  /** pill size */
+  size: PropTypes.oneOf(['m', 'l']).description('pill size'),
+
+  /** addon component to left */
+  leftAddon: PropTypes.node.description('addon component to left')
 };
-RemovablePill.propTypes = props;
 const DSRemovablePillWithSchema = describe(RemovablePill);
 DSRemovablePillWithSchema.propTypes = props;
-export {
-  DSRemovablePillWithSchema,
-  RemovablePill
-};
-//# sourceMappingURL=RemovablePill.js.map
+
+export { DSRemovablePillWithSchema, RemovablePill };