@elliemae/ds-pills-v2 3.60.0-next.1 → 3.60.0-next.10

package/dist/esm/components/types/ValuePill.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { DSTooltipV3 } from "@elliemae/ds-tooltip-v3";
 import React2 from "react";
 import { TextComponent } from "../TextComponent.js";
 import { StyledSpanWithTooltip, StyledValuePillWrapper } from "../styled.js";
-const ValuePill = React2.memo(
-  ({
+const ValuePill = React2.memo((props) => {
+  const {
     label,
     size,
     labelTruncated,
@@ -17,7 +18,9 @@ const ValuePill = React2.memo(
     readOnly,
     applyTooltipOverflowWrap,
     trailingComma
-  }) => /* @__PURE__ */ jsxs(
+  } = props;
+  const ownerProps = useOwnerProps(props);
+  return /* @__PURE__ */ jsxs(
     StyledValuePillWrapper,
     {
       disabled,
@@ -31,13 +34,14 @@ const ValuePill = React2.memo(
       "data-label": ariaLabel || label,
       applyAriaDisabled,
       readOnly,
+      ...ownerProps,
       children: [
         iconLeft,
         tooltipValue !== "" ? /* @__PURE__ */ jsx(DSTooltipV3, { text: tooltipValue ?? "", applyTooltipOverflowWrap, children: /* @__PURE__ */ jsx(StyledSpanWithTooltip, { className: "ds-pill-tooltip-value", "aria-disabled": applyAriaDisabled, tabIndex: 0, children: label }) }) : /* @__PURE__ */ jsx(TextComponent, { labelTruncated, label: `${label}${trailingComma ? "," : ""}` })
       ]
     }
-  )
-);
+  );
+});
 export {
   ValuePill
 };

package/dist/esm/components/types/ValuePill.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/types/ValuePill.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>(\n  ({\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  }) => (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBnB,SAgBM,KAhBN;AApBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACA,iBAAiB,KAChB,oBAAC,eAAY,MAAM,gBAAgB,IAAI,0BACrC,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH,GACF,IAEA,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip-v3';\nimport React from 'react';\nimport type { DSPillT } from '../../react-desc-prop-types.js';\nimport { TextComponent } from '../TextComponent.js';\nimport { StyledSpanWithTooltip, StyledValuePillWrapper } from '../styled.js';\n\nexport const ValuePill = React.memo<DSPillT.InternalProps>((props) => {\n  const {\n    label,\n    size,\n    labelTruncated,\n    disabled,\n    tooltipValue,\n    iconLeft,\n    ariaLabel,\n    applyAriaDisabled,\n    readOnly,\n    applyTooltipOverflowWrap,\n    trailingComma,\n  } = props;\n  const ownerProps = useOwnerProps(props);\n  return (\n    <StyledValuePillWrapper\n      disabled={disabled}\n      pillSize={size}\n      alignItems=\"center\"\n      className=\"ds-pill-wrapper ds-pill-wrapper-value\"\n      data-testid=\"ds-pill-wrapper\"\n      cols={[iconLeft && 'min-content', 'auto'].filter((notFalse) => notFalse) as string[]}\n      gutter=\"xxxs\"\n      hasIcon={iconLeft !== null}\n      data-label={ariaLabel || label}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...ownerProps}\n    >\n      {iconLeft}\n      {tooltipValue !== '' ? (\n        <DSTooltipV3 text={tooltipValue ?? ''} applyTooltipOverflowWrap={applyTooltipOverflowWrap}>\n          <StyledSpanWithTooltip className=\"ds-pill-tooltip-value\" aria-disabled={applyAriaDisabled} tabIndex={0}>\n            {label}\n          </StyledSpanWithTooltip>\n        </DSTooltipV3>\n      ) : (\n        <TextComponent labelTruncated={labelTruncated} label={`${label}${trailingComma ? ',' : ''}`} />\n      )}\n    </StyledValuePillWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAiBM,KAjBN;AAvBJ,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAElB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,8BAA8B;AAEvD,MAAM,YAAYA,OAAM,KAA4B,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,cAAc,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,MAAM,CAAC,YAAY,eAAe,MAAM,EAAE,OAAO,CAAC,aAAa,QAAQ;AAAA,MACvE,QAAO;AAAA,MACP,SAAS,aAAa;AAAA,MACtB,cAAY,aAAa;AAAA,MACzB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,iBAAiB,KAChB,oBAAC,eAAY,MAAM,gBAAgB,IAAI,0BACrC,8BAAC,yBAAsB,WAAU,yBAAwB,iBAAe,mBAAmB,UAAU,GAClG,iBACH,GACF,IAEA,oBAAC,iBAAc,gBAAgC,OAAO,GAAG,KAAK,GAAG,gBAAgB,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,EAEjG;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSPillV2Name = "DSPill";
+const DSPillName = DSPillV2Name;
+const PILL_V2_SLOTS = {
+  WRAPPER: "wrapper",
+  PILL_GROUP: "pill-group",
+  PILL_BUTTON: "pill-button",
+  PILL_MENU_BUTTON: "menu-button-chevron"
+};
+const PILL_V2_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),
+  PILL_BUTTON: "ds-button"
+};
+export {
+  DSPillName,
+  DSPillV2Name,
+  PILL_V2_DATA_TESTID,
+  PILL_V2_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSPillV2Name = 'DSPill';\nexport const DSPillName = DSPillV2Name;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_SLOTS = {\n  WRAPPER: 'wrapper',\n  PILL_GROUP: 'pill-group',\n  PILL_BUTTON: 'pill-button',\n  PILL_MENU_BUTTON: 'menu-button-chevron',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_V2_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPillV2Name, PILL_V2_SLOTS),\n  PILL_BUTTON: 'ds-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AACrB,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,kBAAkB;AACpB;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,aAAa;AACf;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,13 +1,8 @@
 import * as React from "react";
-import {
-  DSPillV2,
-  DSPillButton,
-  DSPillButtonWithSchema,
-  DSPillGroupV2,
-  DSPillGroupV2WithSchema,
-  DSPillV2WithSchema
-} from "./components/index.js";
-import { DSPillButtonName, DSPillGroupName, DSPillName } from "./DSPillDefinitions.js";
+import { DSPillV2, DSPillV2WithSchema } from "./components/index.js";
+import { DSPillGroupV2, DSPillGroupV2WithSchema, DSPillGroupName } from "./parts/DSPillGroup/index.js";
+import { DSPillButton, DSPillButtonWithSchema, DSPillButtonName } from "./parts/DSPillButton/index.js";
+import { PILL_V2_DATA_TESTID, PILL_V2_SLOTS, DSPillName, DSPillV2Name } from "./constants/index.js";
 export {
   DSPillButton,
   DSPillButtonName,
@@ -17,6 +12,9 @@ export {
   DSPillGroupV2WithSchema,
   DSPillName,
   DSPillV2,
-  DSPillV2WithSchema
+  DSPillV2Name,
+  DSPillV2WithSchema,
+  PILL_V2_DATA_TESTID,
+  PILL_V2_SLOTS
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSPillV2,\n  DSPillButton,\n  DSPillButtonWithSchema,\n  DSPillGroupV2,\n  DSPillGroupV2WithSchema,\n  DSPillV2WithSchema,\n} from './components/index.js';\nexport { DSPillButtonName, DSPillGroupName, DSPillName } from './DSPillDefinitions.js';\nexport type { DSPillT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,iBAAiB,kBAAkB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPillV2, DSPillV2WithSchema } from './components/index.js';\nexport { DSPillGroupV2, DSPillGroupV2WithSchema, DSPillGroupName } from './parts/DSPillGroup/index.js';\nexport { DSPillButton, DSPillButtonWithSchema, DSPillButtonName } from './parts/DSPillButton/index.js';\nexport { PILL_V2_DATA_TESTID, PILL_V2_SLOTS, DSPillName, DSPillV2Name } from './constants/index.js';\nexport type { DSPillT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,0BAA0B;AAC7C,SAAS,eAAe,yBAAyB,uBAAuB;AACxE,SAAS,cAAc,wBAAwB,wBAAwB;AACvE,SAAS,qBAAqB,eAAe,YAAY,oBAAoB;",
   "names": []
 }

package/dist/esm/{components/PillButton.js → parts/DSPillButton/DSPillButton.js}

@@ -1,23 +1,21 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { StyledPillButton } from "./styled.js";
-import { DSPillButtonName } from "../DSPillDefinitions.js";
-import { DSPillButtonDefaultProps, DSPillButtonPropTypesSchema } from "../react-desc-prop-types.js";
+import { describe } from "@elliemae/ds-props-helpers";
+import { DSPillButtonPropTypesSchema } from "./react-desc-prop-types.js";
+import { usePillButton } from "./config/usePillButton.js";
+import { DSPillButtonName } from "./constants/index.js";
+import { StyledPillButton } from "../../components/styled.js";
 const typeToClassName = {
   only: "ds-pill-button-only",
   left: "ds-pill-button-left",
   right: "ds-pill-button-right"
 };
 const DSPillButton = (props) => {
-  const { children, ...restProps } = props;
-  const propsWithDefaults = useMemoMergePropsWithDefault(
-    restProps,
-    DSPillButtonDefaultProps
-  );
-  useValidateTypescriptPropTypes(propsWithDefaults, DSPillButtonPropTypesSchema, DSPillButtonName);
-  const { type, onClick, applyAriaDisabled, ...rest } = propsWithDefaults;
+  const {
+    propsWithDefault: { type, onClick, applyAriaDisabled, children, ...rest },
+    ownerProps
+  } = usePillButton(props);
   const handleOnClick = useCallback(
     (e) => {
       if (applyAriaDisabled) return;
@@ -34,15 +32,16 @@ const DSPillButton = (props) => {
       type: "button",
       onClick: handleOnClick,
       "aria-disabled": applyAriaDisabled,
+      ...ownerProps,
       children
     }
   );
 };
 DSPillButton.displayName = DSPillButtonName;
-const DSPillButtonWithSchema = describe(DSPillButton).description("Pill button");
+const DSPillButtonWithSchema = describe(DSPillButton);
 DSPillButtonWithSchema.propTypes = DSPillButtonPropTypesSchema;
 export {
   DSPillButton,
   DSPillButtonWithSchema
 };
-//# sourceMappingURL=PillButton.js.map
+//# sourceMappingURL=DSPillButton.js.map

package/dist/esm/parts/DSPillButton/DSPillButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillButton/DSPillButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSPillButtonT, DSPillButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePillButton } from './config/usePillButton.js';\nimport { DSPillButtonName } from './constants/index.js';\nimport { StyledPillButton } from '../../components/styled.js';\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<DSPillButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { type, onClick, applyAriaDisabled, children, ...rest },\n    ownerProps,\n  } = usePillButton(props);\n  const handleOnClick = useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => {\n      if (applyAriaDisabled) return;\n      if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>);\n    },\n    [onClick, applyAriaDisabled],\n  );\n\n  return (\n    <StyledPillButton\n      {...rest}\n      buttonType=\"raw\"\n      className={`${typeToClassName[type]} ${rest.className ?? ''}`}\n      type=\"button\"\n      onClick={handleOnClick}\n      aria-disabled={applyAriaDisabled}\n      {...ownerProps}\n    >\n      {children}\n    </StyledPillButton>\n  );\n};\n\nDSPillButton.displayName = DSPillButtonName;\nconst DSPillButtonWithSchema = describe(DSPillButton);\nDSPillButtonWithSchema.propTypes = DSPillButtonPropTypesSchema;\n\nexport { DSPillButton, DSPillButtonWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BnB;AA3BJ,SAAgB,mBAAmB;AACnC,SAAS,gBAAgB;AACzB,SAA6B,mCAAmC;AAChE,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,MAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,SAAS,mBAAmB,UAAU,GAAG,KAAK;AAAA,IACxE;AAAA,EACF,IAAI,cAAc,KAAK;AACvB,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAoF;AACnF,UAAI,kBAAmB;AACvB,UAAI,QAAS,SAAQ,CAAwC;AAAA,IAC/D;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;AAAA,MAC3D,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAe;AAAA,MACd,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": []
+}

package/dist/esm/parts/DSPillButton/config/usePillButton.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import React2 from "react";
+import { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from "@elliemae/ds-props-helpers";
+import { DSPillButtonPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const usePillButton = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSPillButtonPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const ownerProps = useOwnerProps(propsWithDefault);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      ownerProps
+    }),
+    [propsWithDefault, xstyledProps, ownerProps]
+  );
+};
+export {
+  usePillButton
+};
+//# sourceMappingURL=usePillButton.js.map

package/dist/esm/parts/DSPillButton/config/usePillButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillButton/config/usePillButton.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\n\nimport { type DSPillButtonT, DSPillButtonPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const usePillButton = (propsFromUser: DSPillButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPillButtonT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPillButtonPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerProps = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      ownerProps,\n    }),\n    [propsWithDefault, xstyledProps, ownerProps],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,8BAA8B,qBAAqB;AAEhF,SAA6B,6BAA6B,oBAAoB;AAC9E,SAAS,wBAAwB;AAE1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB,6BAA0D,eAAe,YAAY;AAC9G,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,aAAa,cAAc,gBAAgB;AAUjD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,UAAU;AAAA,EAC7C;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSPillButton/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPillButtonName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSPillButtonName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/parts/DSPillButton/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillButton/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPillButtonT } from '../react-desc-prop-types.js';\nimport { DSPillButtonName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPillButtonT.InternalProps,\n  propTypes: ValidationMap<DSPillButtonT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPillButtonName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,wBAAwB;AAE1B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,gBAAgB;AACnE;",
+  "names": []
+}

package/dist/esm/parts/DSPillButton/constants/index.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSPillV2Name } from "../../../constants/index.js";
+const DSPillButtonName = "DSPillbutton";
+const PILL_BUTTON_SLOTS = {
+  PILL_BUTTON: "pill-button"
+};
+const PILL_BUTTON_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSPillV2Name, PILL_BUTTON_SLOTS),
+  PILL_BUTTON: "ds-button"
+};
+export {
+  DSPillButtonName,
+  DSPillV2Name,
+  PILL_BUTTON_DATA_TESTID,
+  PILL_BUTTON_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSPillButton/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillButton/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPillV2Name } from '../../../constants/index.js';\nexport { DSPillV2Name };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPillButtonName = 'DSPillbutton';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_BUTTON_SLOTS = {\n  PILL_BUTTON: 'pill-button',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_BUTTON_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPillV2Name, PILL_BUTTON_SLOTS),\n  PILL_BUTTON: 'ds-button',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAKtB,MAAM,mBAAmB;AAGzB,MAAM,oBAAoB;AAAA,EAC/B,aAAa;AACf;AAGO,MAAM,0BAA0B;AAAA,EACrC,GAAG,wBAAwB,cAAc,iBAAiB;AAAA,EAC1D,aAAa;AACf;",
+  "names": []
+}

package/dist/esm/parts/DSPillButton/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { DSPillButton, DSPillButtonWithSchema } from "./DSPillButton.js";
+import { PILL_BUTTON_DATA_TESTID, DSPillButtonName } from "./constants/index.js";
+export {
+  DSPillButton,
+  DSPillButtonName,
+  DSPillButtonWithSchema,
+  PILL_BUTTON_DATA_TESTID
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSPillButton/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillButton/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPillButton, DSPillButtonWithSchema } from './DSPillButton.js';\nexport { PILL_BUTTON_DATA_TESTID, DSPillButtonName } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;AACrD,SAAS,yBAAyB,wBAAwB;",
+  "names": []
+}

package/dist/esm/parts/DSPillButton/react-desc-prop-types.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSPillV2Name, PILL_BUTTON_SLOTS } from "./constants/index.js";
+const defaultProps = {
+  type: "right",
+  width: "100%",
+  height: "100%"
+};
+const DSPillButtonPropTypes = {
+  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  type: PropTypes.oneOf(["only", "left", "right"]).description("The position in which this button will be placed. Only used for css styling internally").defaultValue("right"),
+  width: PropTypes.string.description("Width of the button").defaultValue("100%"),
+  height: PropTypes.string.description("Height of the button").defaultValue("100%"),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component."),
+  "data-testid": PropTypes.string.description("root element data-testid"),
+  applyAriaDisabled: PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
+  ).defaultValue(false)
+};
+const DSPillButtonPropTypesSchema = DSPillButtonPropTypes;
+export {
+  DSPillButtonPropTypes,
+  DSPillButtonPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/parts/DSPillButton/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillButton/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPillV2Name, PILL_BUTTON_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPillButtonT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    type: 'left' | 'right' | 'only';\n    width: string;\n    height: string;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPillV2Name, typeof PILL_BUTTON_SLOTS> {\n    applyAriaDisabled?: boolean;\n    innerRef?: TypescriptHelpersT.AnyRef<HTMLButtonElement>;\n  }\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot' | 'width' | 'height'>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<DSButtonT.Props, 'type' | 'buttonType' | 'isV3' | 'dsButtonRoot' | 'width' | 'height'>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPillButtonT.DefaultProps = {\n  type: 'right',\n  width: '100%',\n  height: '100%',\n};\n\nexport const DSPillButtonPropTypes: DSPropTypesSchema<DSPillButtonT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPillV2Name, PILL_BUTTON_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf(['only', 'left', 'right'])\n    .description('The position in which this button will be placed. Only used for css styling internally')\n    .defaultValue('right'),\n  width: PropTypes.string.description('Width of the button').defaultValue('100%'),\n  height: PropTypes.string.description('Height of the button').defaultValue('100%'),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n  'data-testid': PropTypes.string.description('root element data-testid'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n};\n\nexport const DSPillButtonPropTypesSchema = DSPillButtonPropTypes as unknown as ValidationMap<DSPillButtonT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,yBAAyB;AA+BzC,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG,yBAAyB,cAAc,iBAAiB;AAAA,EAC3D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,CAAC,QAAQ,QAAQ,OAAO,CAAC,EAC5C,YAAY,wFAAwF,EACpG,aAAa,OAAO;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,qBAAqB,EAAE,aAAa,MAAM;AAAA,EAC9E,QAAQ,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,MAAM;AAAA,EAChF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAAA,EAC9G,eAAe,UAAU,OAAO,YAAY,0BAA0B;AAAA,EACtE,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;AAEO,MAAM,8BAA8B;",
+  "names": []
+}

package/dist/esm/parts/DSPillGroup/DSPillGroup.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-props-helpers";
+import React2 from "react";
+import { usePillGroup } from "./config/usePillGroup.js";
+import { PillGroupContext } from "./PillGroupCTX.js";
+import { DSPillGroupPropTypesSchema } from "./react-desc-prop-types.js";
+import { StyledPillGroup } from "../../components/styled.js";
+import { DSPillGroupName } from "./constants/index.js";
+const DSPillGroupV2 = (props) => {
+  const {
+    ctxValue,
+    globalAttributes,
+    pillGroupUid,
+    ownerProps,
+    propsWithDefault: { width, children, innerRef }
+  } = usePillGroup(props);
+  return /* @__PURE__ */ jsx(PillGroupContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+    StyledPillGroup,
+    {
+      ...globalAttributes,
+      width,
+      id: pillGroupUid,
+      cols: React2.Children.map(children, () => "auto"),
+      gutter: "2px",
+      innerRef,
+      ...ownerProps,
+      children
+    }
+  ) });
+};
+DSPillGroupV2.displayName = DSPillGroupName;
+const DSPillGroupV2WithSchema = describe(DSPillGroupV2);
+DSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypesSchema;
+export {
+  DSPillGroupV2,
+  DSPillGroupV2WithSchema
+};
+//# sourceMappingURL=DSPillGroup.js.map

package/dist/esm/parts/DSPillGroup/DSPillGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillGroup/DSPillGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { usePillGroup } from './config/usePillGroup.js';\nimport { PillGroupContext } from './PillGroupCTX.js';\nimport { type DSPillGroupT, DSPillGroupPropTypesSchema } from './react-desc-prop-types.js';\n\nimport { StyledPillGroup } from '../../components/styled.js';\nimport { DSPillGroupName } from './constants/index.js';\n\nconst DSPillGroupV2: React.ComponentType<DSPillGroupT.Props> = (props) => {\n  const {\n    ctxValue,\n    globalAttributes,\n    pillGroupUid,\n    ownerProps,\n    propsWithDefault: { width, children, innerRef },\n  } = usePillGroup(props);\n  return (\n    <PillGroupContext.Provider value={ctxValue}>\n      <StyledPillGroup\n        {...globalAttributes}\n        width={width}\n        id={pillGroupUid}\n        cols={React.Children.map(children, () => 'auto') as string[]}\n        gutter=\"2px\"\n        innerRef={innerRef}\n        {...ownerProps}\n      >\n        {children}\n      </StyledPillGroup>\n    </PillGroupContext.Provider>\n  );\n};\n\nDSPillGroupV2.displayName = DSPillGroupName;\nconst DSPillGroupV2WithSchema = describe(DSPillGroupV2);\nDSPillGroupV2WithSchema.propTypes = DSPillGroupPropTypesSchema;\n\nexport { DSPillGroupV2, DSPillGroupV2WithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBjB;AAnBN,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAA4B,kCAAkC;AAE9D,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEhC,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,EAAE,OAAO,UAAU,SAAS;AAAA,EAChD,IAAI,aAAa,KAAK;AACtB,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAChC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ,MAAMA,OAAM,SAAS,IAAI,UAAU,MAAM,MAAM;AAAA,MAC/C,QAAO;AAAA,MACP;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSPillGroup/PillGroupCTX.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = { onKeyboardRemove: () => null, onKeyboardNavigation: () => null };
+const PillGroupContext = createContext(defaultContext);
+var PillGroupCTX_default = PillGroupContext;
+export {
+  PillGroupContext,
+  PillGroupCTX_default as default
+};
+//# sourceMappingURL=PillGroupCTX.js.map

package/dist/esm/parts/DSPillGroup/PillGroupCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillGroup/PillGroupCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { PillGroupCTX } from './config/usePillGroup.js';\n\nconst defaultContext = { onKeyboardRemove: () => null, onKeyboardNavigation: () => null } as PillGroupCTX;\n\n/** Context for cross component communication */\nexport const PillGroupContext = createContext<PillGroupCTX>(defaultContext);\n\nexport default PillGroupContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,EAAE,kBAAkB,MAAM,MAAM,sBAAsB,MAAM,KAAK;AAGjF,MAAM,mBAAmB,cAA4B,cAAc;AAE1E,IAAO,uBAAQ;",
+  "names": []
+}

package/dist/esm/parts/DSPillGroup/config/usePillGroup.js

@@ -0,0 +1,74 @@
+import * as React from "react";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useOwnerProps
+} from "@elliemae/ds-props-helpers";
+import React2, { useCallback, useMemo } from "react";
+import { uid } from "uid";
+import { DSPillGroupPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const usePillGroup = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSPillGroupPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(
+    propsWithDefault
+  );
+  const ownerProps = useOwnerProps(propsWithDefault);
+  const pillGroupUid = React2.useMemo(() => `ds-pill-group-${uid(5)}`, []);
+  const onKeyboardRemove = 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]
+  );
+  const onKeyboardNavigation = useCallback(
+    (pillUid, step, e) => {
+      const elems = [...document.querySelectorAll(`#${pillGroupUid} .ds-pill-focus-point`)];
+      const pillIndex = elems.findIndex((elem) => elem.id === pillUid);
+      if (pillIndex >= 0) {
+        if (elems[pillIndex + step]) {
+          e.stopPropagation();
+          elems[pillIndex + step].focus();
+        }
+      }
+    },
+    [pillGroupUid]
+  );
+  const ctxValue = useMemo(
+    () => ({ onKeyboardRemove, onKeyboardNavigation }),
+    [onKeyboardRemove, onKeyboardNavigation]
+  );
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      pillGroupUid,
+      globalAttributes,
+      ctxValue,
+      ownerProps
+      // ...eventHandlers,
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      pillGroupUid,
+      globalAttributes,
+      ctxValue,
+      ownerProps
+      // ...eventHandlers,
+    ]
+  );
+};
+export {
+  usePillGroup
+};
+//# sourceMappingURL=usePillGroup.js.map

package/dist/esm/parts/DSPillGroup/config/usePillGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillGroup/config/usePillGroup.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSGridT } from '@elliemae/ds-grid';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { type DSPillGroupT, DSPillGroupPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface PillGroupCTX {\n  onKeyboardRemove: (pillUid: string) => void;\n  onKeyboardNavigation: (pillUid: string, step: number, e: React.KeyboardEvent) => void;\n}\n\nexport const usePillGroup = (propsFromUser: DSPillGroupT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPillGroupT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPillGroupPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES PROPS\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPillGroupT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerProps = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const pillGroupUid = React.useMemo(() => `ds-pill-group-${uid(5)}`, []);\n\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  const onKeyboardNavigation = useCallback(\n    (pillUid: string, step: number, e: React.KeyboardEvent) => {\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        if (elems[pillIndex + step]) {\n          e.stopPropagation();\n          elems[pillIndex + step].focus();\n        }\n      }\n    },\n    [pillGroupUid],\n  );\n\n  const ctxValue = useMemo(\n    () => ({ onKeyboardRemove, onKeyboardNavigation }),\n    [onKeyboardRemove, onKeyboardNavigation],\n  );\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      pillGroupUid,\n      globalAttributes,\n      ctxValue,\n      ownerProps,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      pillGroupUid,\n      globalAttributes,\n      ctxValue,\n      ownerProps,\n      // ...eventHandlers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,WAAW;AACpB,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AAO1B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,aAAa,cAAc,gBAAgB;AAKjD,QAAM,eAAeA,OAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAEtE,QAAM,mBAAmB;AAAA,IACvB,CAAC,YAAoB;AACnB,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,YAAY,GAAG;AACjB,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B,WAAW,YAAY,IAAI,MAAM,QAAQ;AACvC,cAAM,YAAY,CAAC,EAAE,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AACA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,SAAiB,MAAc,MAA2B;AACzD,YAAM,QAAQ,CAAC,GAAG,SAAS,iBAAiB,IAAI,YAAY,uBAAuB,CAAC;AAEpF,YAAM,YAAY,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,OAAO;AAE/D,UAAI,aAAa,GAAG;AAClB,YAAI,MAAM,YAAY,IAAI,GAAG;AAC3B,YAAE,gBAAgB;AAClB,gBAAM,YAAY,IAAI,EAAE,MAAM;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,WAAW;AAAA,IACf,OAAO,EAAE,kBAAkB,qBAAqB;AAAA,IAChD,CAAC,kBAAkB,oBAAoB;AAAA,EACzC;AAOA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSPillGroup/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPillGroupName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSPillGroupName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/parts/DSPillGroup/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillGroup/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPillGroupT } from '../react-desc-prop-types.js';\nimport { DSPillGroupName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPillGroupT.InternalProps,\n  propTypes: ValidationMap<DSPillGroupT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPillGroupName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

package/dist/esm/parts/DSPillGroup/constants/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSPillV2Name } from "../../../constants/index.js";
+const DSPillGroupName = "DSPillgroup";
+const PILL_GROUP_SLOTS = {
+  PILL_GROUP: "pill-group"
+};
+const PILL_GROUP_DATA_TESTID = slotObjectToDataTestIds(DSPillV2Name, PILL_GROUP_SLOTS);
+export {
+  DSPillGroupName,
+  DSPillV2Name,
+  PILL_GROUP_DATA_TESTID,
+  PILL_GROUP_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSPillGroup/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPillGroup/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPillV2Name } from '../../../constants/index.js';\nexport { DSPillV2Name };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPillGroupName = 'DSPillgroup';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_GROUP_SLOTS = {\n  PILL_GROUP: 'pill-group',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PILL_GROUP_DATA_TESTID = slotObjectToDataTestIds(DSPillV2Name, PILL_GROUP_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAKtB,MAAM,kBAAkB;AAGxB,MAAM,mBAAmB;AAAA,EAC9B,YAAY;AACd;AAGO,MAAM,yBAAyB,wBAAwB,cAAc,gBAAgB;",
+  "names": []
+}

package/dist/esm/parts/DSPillGroup/index.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { DSPillGroupV2, DSPillGroupV2WithSchema } from "./DSPillGroup.js";
+import { PillGroupContext } from "./PillGroupCTX.js";
+import { DSPillGroupName, PILL_GROUP_DATA_TESTID } from "./constants/index.js";
+export {
+  DSPillGroupName,
+  DSPillGroupV2,
+  PillGroupContext as DSPillGroupV2Context,
+  DSPillGroupV2WithSchema,
+  PILL_GROUP_DATA_TESTID
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSPillGroup/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPillGroup/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPillGroupV2, DSPillGroupV2WithSchema } from './DSPillGroup.js';\nexport { PillGroupContext as DSPillGroupV2Context } from './PillGroupCTX.js';\nexport { DSPillGroupName, PILL_GROUP_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,+BAA+B;AACvD,SAA6B,wBAA4B;AACzD,SAAS,iBAAiB,8BAA8B;",
+  "names": []
+}