@elliemae/ds-chip 3.16.0 → 3.16.1

package/dist/cjs/DSChip.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,10 +35,10 @@ module.exports = __toCommonJS(DSChip_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_useConfig = require("./config/useConfig");
-var import_styles = require("./styles");
-var import_constants = require("./constants");
-var import_react_desc_prop_types = require("./react-desc-prop-types");
+var import_useConfig = require("./config/useConfig.js");
+var import_styles = require("./styles.js");
+var import_constants = require("./constants.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const DSChip = (props) => {
   const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = (0, import_useConfig.useConfig)(props);
   const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;

package/dist/cjs/DSChip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSChip.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport type { DSChipT } from './react-desc-prop-types';\nimport { DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n  const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n  return (\n    <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n      <StyledChip\n        buttonShape={shape}\n        aria-disabled={disabled}\n        disabled={disabled}\n        ref={innerRef}\n        selected={selected}\n        role=\"button\"\n        {...restGlobals}\n      >\n        {shape === CHIP_SHAPES.ROUND ? (\n          <StyledRoundShape disabled={disabled} size={size}>\n            <Icon />\n          </StyledRoundShape>\n        ) : (\n          <Icon />\n        )}\n        <StyledChipLabel size={size}>\n          <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n        </StyledChipLabel>\n      </StyledChip>\n    </StyledWrapper>\n  );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,8BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAgC;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,4CAAC,+BAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MACpC,sDAAC,QAAK,GACR,IAEA,4CAAC,QAAK;AAAA,QAER,4CAAC,iCAAgB,MACf,sDAAC,wCAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n  const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n  return (\n    <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n      <StyledChip\n        buttonShape={shape}\n        aria-disabled={disabled}\n        disabled={disabled}\n        ref={innerRef}\n        selected={selected}\n        role=\"button\"\n        {...restGlobals}\n      >\n        {shape === CHIP_SHAPES.ROUND ? (\n          <StyledRoundShape disabled={disabled} size={size}>\n            <Icon />\n          </StyledRoundShape>\n        ) : (\n          <Icon />\n        )}\n        <StyledChipLabel size={size}>\n          <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n        </StyledChipLabel>\n      </StyledChip>\n    </StyledWrapper>\n  );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADejB;AAdN,8BAAyB;AACzB,uBAA0B;AAC1B,oBAAqG;AACrG,uBAA4B;AAE5B,mCAAgC;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,QAAI,4BAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,WAAW,GAAG,YAAY,IAAI;AAE1E,SACE,4CAAC,+BAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,6BAAY,QACrB,4CAAC,kCAAiB,UAAoB,MACpC,sDAAC,QAAK,GACR,IAEA,4CAAC,QAAK;AAAA,QAER,4CAAC,iCAAgB,MACf,sDAAC,wCAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useConfig.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -29,8 +33,8 @@ __export(useConfig_exports, {
 module.exports = __toCommonJS(useConfig_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_exported_related = require("../exported_related");
-var import_react_desc_prop_types = require("../react-desc-prop-types");
+var import_exported_related = require("../exported_related/index.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 const useConfig = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSChipPropTypes, import_exported_related.DSChipName);

package/dist/cjs/config/useConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n  return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,8BAA2B;AAE3B,mCAA8C;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,uBAAmB,sDAA8D,OAAO,yCAAY;AAE1G,8DAA+B,kBAAkB,8CAAiB,kCAAU;AAC5E,QAAM,kBAAc,gDAAuB,gBAAgB;AAC3D,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,SAAO,EAAE,GAAG,kBAAkB,aAAa,aAAa;AAC1D;",
+  "sourcesContent": ["import {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n  return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAKO;AACP,8BAA2B;AAE3B,mCAA8C;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,uBAAmB,sDAA8D,OAAO,yCAAY;AAE1G,8DAA+B,kBAAkB,8CAAiB,kCAAU;AAC5E,QAAM,kBAAc,gDAAuB,gBAAgB;AAC3D,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,SAAO,EAAE,GAAG,kBAAkB,aAAa,aAAa;AAC1D;",
   "names": []
 }

package/dist/cjs/constants.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/constants.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/constants.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const CHIP_SHAPES = {\n  DEFAULT: 'default' as const,\n  ROUND: 'round' as const,\n};\n\nexport const CHIP_SIZES = {\n  S: 's' as const,\n  L: 'l' as const,\n};\n\nexport const roundShapeLarge = '56px';\nexport const roundShapeSmall = '40px';\n\nexport const basicSizes = {\n  s: {\n    width: '72px',\n    height: '67px',\n  } as const,\n  l: {\n    width: '92px',\n    height: '67px',\n  } as const,\n};\n\nexport const shapeSizes = {\n  s: {\n    width: '72px',\n    height: '77px',\n  } as const,\n  l: {\n    width: '92px',\n    height: '85px',\n  } as const,\n};\n\nexport const ChipSizesValuesArray = Object.values(CHIP_SIZES);\nexport const ChipShapesValuesArray = Object.values(CHIP_SHAPES);\nexport const ChipInteractionStates = ['hover', 'focus', 'active'];\n\nexport const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);\nexport const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);\nexport const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAExB,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,uBAAuB,OAAO,OAAO,UAAU;AACrD,MAAM,wBAAwB,OAAO,OAAO,WAAW;AACvD,MAAM,wBAAwB,CAAC,SAAS,SAAS,QAAQ;AAEzD,MAAM,wBAAwB,KAAK,UAAU,oBAAoB;AACjE,MAAM,yBAAyB,KAAK,UAAU,qBAAqB;AACnE,MAAM,oCAAoC,KAAK,UAAU,qBAAqB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AAExB,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,GAAG;AAAA,IACD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,uBAAuB,OAAO,OAAO,UAAU;AACrD,MAAM,wBAAwB,OAAO,OAAO,WAAW;AACvD,MAAM,wBAAwB,CAAC,SAAS,SAAS,QAAQ;AAEzD,MAAM,wBAAwB,KAAK,UAAU,oBAAoB;AACjE,MAAM,yBAAyB,KAAK,UAAU,qBAAqB;AACnE,MAAM,oCAAoC,KAAK,UAAU,qBAAqB;",
   "names": []
 }

package/dist/cjs/exported_related/data-test-ids.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/exported_related/data-test-ids.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/exported_related/data-test-ids.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSChipDataTestIds = {\n  BUTTON: 'ds-chip-button',\n  LABEL: 'ds-chip-label',\n  ROUND_SHAPE: 'ds-chip-round-shape',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;AAAA,EAC/B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;AAAA,EAC/B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;",
   "names": []
 }

package/dist/cjs/exported_related/index.js

@@ -15,6 +15,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -22,6 +26,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var exported_related_exports = {};
 module.exports = __toCommonJS(exported_related_exports);
 var React = __toESM(require("react"));
-__reExport(exported_related_exports, require("./data-test-ids"), module.exports);
-__reExport(exported_related_exports, require("./theming"), module.exports);
+__reExport(exported_related_exports, require("./data-test-ids.js"), module.exports);
+__reExport(exported_related_exports, require("./theming.js"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported_related/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './data-test-ids';\nexport * from './theming';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,4BAAd;AACA,qCAAc,sBADd;",
+  "sourcesContent": ["export * from './data-test-ids.js';\nexport * from './theming.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,qCAAc,+BAAd;AACA,qCAAc,yBADd;",
   "names": []
 }

package/dist/cjs/exported_related/theming.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/exported_related/theming.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/exported_related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["export const DSChipName = 'DSChip';\n\nexport const DSChipSlots = {\n  BUTTON: 'root',\n  LABEL: 'label',\n  ROUND_SHAPE: 'round-shape',\n  CHILDREN_WRAPPER: 'children-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AACpB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AACpB;",
   "names": []
 }

package/dist/cjs/index.js

@@ -15,6 +15,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -22,7 +26,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./DSChip"), module.exports);
-__reExport(src_exports, require("./constants"), module.exports);
-__reExport(src_exports, require("./exported_related"), module.exports);
+__reExport(src_exports, require("./DSChip.js"), module.exports);
+__reExport(src_exports, require("./constants.js"), module.exports);
+__reExport(src_exports, require("./exported_related/index.js"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSChip';\nexport * from './constants';\nexport * from './exported_related';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,qBAAd;AACA,wBAAc,wBADd;AAEA,wBAAc,+BAFd;",
+  "sourcesContent": ["export * from './DSChip.js';\nexport * from './constants.js';\nexport * from './exported_related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,wCAFd;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -30,7 +34,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_constants = require("./constants");
+var import_constants = require("./constants.js");
 const defaultProps = {
   size: import_constants.CHIP_SIZES.L,
   shape: import_constants.CHIP_SHAPES.DEFAULT

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n} from './constants';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n  interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n  }\n  interface OptionalProps {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  interface RequiredProps {\n    label: string;\n    icon: () => JSX.Element;\n  }\n  export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n  export interface Props\n    extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n      InternalProps,\n      XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AACvE,uBAOO;AAGA,MAAM,eAAqC;AAAA,EAChD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AACrB;AAuBO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,kCAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,kCAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,kCAAU,MAAM,sCAAqB,EAAE,YAAY,uCAAsB,EAAE,aAAa,6BAAY,OAAO;AAAA,EAClH,MAAM,kCAAU,MAAM,qCAAoB,EAAE,YAAY,sCAAqB,EAAE,aAAa,4BAAW,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n} from './constants.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n  interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n  }\n  interface OptionalProps {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  interface RequiredProps {\n    label: string;\n    icon: () => JSX.Element;\n  }\n  export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n  export interface Props\n    extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n      InternalProps,\n      XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAAuE;AACvE,uBAOO;AAGA,MAAM,eAAqC;AAAA,EAChD,MAAM,4BAAW;AAAA,EACjB,OAAO,6BAAY;AACrB;AAuBO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,kCAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,kCAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,kCAAU,MAAM,sCAAqB,EAAE,YAAY,uCAAsB,EAAE,aAAa,6BAAY,OAAO;AAAA,EAClH,MAAM,kCAAU,MAAM,qCAAoB,EAAE,YAAY,sCAAqB,EAAE,aAAa,4BAAW,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
   "names": []
 }

package/dist/cjs/sharedTypes.js

@@ -14,6 +14,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { CHIP_SIZES, CHIP_SHAPES, ChipInteractionStates } from './constants';\n\nexport type ChipSizesT = (typeof CHIP_SIZES)[keyof typeof CHIP_SIZES];\n\nexport type ChipShapesT = (typeof CHIP_SHAPES)[keyof typeof CHIP_SHAPES];\n\nexport type ChipInteractionStatesT = (typeof ChipInteractionStates)[number];\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
+  "sourcesContent": ["import type { CHIP_SIZES, CHIP_SHAPES, ChipInteractionStates } from './constants.js';\n\nexport type ChipSizesT = (typeof CHIP_SIZES)[keyof typeof CHIP_SIZES];\n\nexport type ChipShapesT = (typeof CHIP_SHAPES)[keyof typeof CHIP_SHAPES];\n\nexport type ChipInteractionStatesT = (typeof ChipInteractionStates)[number];\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -34,30 +38,9 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("./constants");
-var import_exported_related = require("./exported_related");
+var import_constants = require("./constants.js");
+var import_exported_related = require("./exported_related/index.js");
 const getChipSize = (shape) => shape === import_constants.CHIP_SHAPES.ROUND ? import_constants.shapeSizes : import_constants.basicSizes;
-const styledChipSelectedCss = import_ds_system.css`
-  & > div:first-child {
-    background-color: ${({ theme }) => theme.colors.brand[800]};
-  }
-  color: ${({ theme }) => theme.colors.brand[800]};
-  background-color: ${({ theme }) => theme.colors.brand[200]};
-
-  .DSIcon-svg {
-    fill: ${({ theme }) => theme.colors.brand[800]};
-  }
-
-  &:before {
-    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
-  }
-
-  &:focus {
-    &:before {
-      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
-    }
-  }
-`;
 const StyledChipLabel = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.LABEL })`
   font-size: ${({ theme }) => theme.fontSizes.label[200]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
@@ -83,6 +66,51 @@ const StyledWrapper = (0, import_ds_system.styled)("div")`
   width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
   ${import_ds_system.xStyledCommonProps}
 `;
+const disabledRoundShape = import_ds_system.css`
+  background-color: ${({ theme }) => theme.colors.neutral[200]};
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.neutral[500]};
+  }
+`;
+const StyledRoundShape = (0, import_ds_system.styled)("div", {
+  name: import_exported_related.DSChipName,
+  slot: import_exported_related.DSChipSlots.ROUND_SHAPE
+})`
+  background-color: ${({ theme }) => theme.colors.brand[600]};
+  width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
+  height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
+`;
+const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
+  width: 100%;
+  height: 100%;
+`;
+const styledChipSelectedCss = import_ds_system.css`
+  ${StyledRoundShape} {
+    background-color: ${({ theme }) => theme.colors.brand[800]};
+  }
+  color: ${({ theme }) => theme.colors.brand[800]};
+  background-color: ${({ theme }) => theme.colors.brand[200]};
+
+  .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.brand[800]};
+  }
+
+  &:before {
+    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
+  }
+
+  &:focus {
+    &:before {
+      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+`;
 const StyledChip = (0, import_ds_system.styled)("button", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.BUTTON })`
   position: relative;
   display: flex;
@@ -100,6 +128,14 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
   cursor: pointer;
   outline: none;
 
+  ${StyledRoundShape} {
+    & .DSIcon-root .DSIcon-svg {
+      fill: #fff;
+      height: 24px;
+      width: 24px;
+    }
+    ${({ disabled }) => disabled && disabledRoundShape}
+  }
   &:before {
     content: '';
     position: absolute;
@@ -140,7 +176,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
   }
 
   &:hover {
-    & > div:first-child {
+    ${StyledRoundShape} {
       background-color: ${({ theme }) => theme.colors.brand[800]};
     }
     color: ${({ theme }) => theme.colors.brand[800]};
@@ -166,7 +202,7 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
 
     &:focus,
     &:hover {
-      & > div:first-child {
+      ${StyledRoundShape} {
         background-color: ${({ theme }) => theme.colors.neutral[200]};
       }
       background-color: #fff;
@@ -187,36 +223,4 @@ const StyledChip = (0, import_ds_system.styled)("button", { name: import_exporte
 
   ${({ selected }) => !selected ? "" : styledChipSelectedCss}
 `;
-const disabledRoundShape = import_ds_system.css`
-  background-color: ${({ theme }) => theme.colors.neutral[200]};
-
-  & .DSIcon-root .DSIcon-svg {
-    fill: ${({ theme }) => theme.colors.neutral[500]};
-  }
-`;
-const StyledRoundShape = (0, import_ds_system.styled)("div", {
-  name: import_exported_related.DSChipName,
-  slot: import_exported_related.DSChipSlots.ROUND_SHAPE
-})`
-  background-color: ${({ theme }) => theme.colors.brand[600]};
-  width: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
-  height: ${({ size }) => size === import_constants.CHIP_SIZES.L ? import_constants.roundShapeLarge : import_constants.roundShapeSmall};
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "5px" : "10px"};
-
-  & .DSIcon-root .DSIcon-svg {
-    fill: #fff;
-    height: 24px;
-    width: 24px;
-  }
-
-  ${({ disabled }) => disabled && disabledRoundShape}
-`;
-const StyledChildrenWrapper = (0, import_ds_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
-  width: 100%;
-  height: 100%;
-`;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n  buttonSize: ChipSizesT;\n  buttonShape: ChipShapesT;\n  selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n  size: ChipSizesT;\n  disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst styledChipSelectedCss = css`\n  & > div:first-child {\n    background-color: ${({ theme }) => theme.colors.brand[800]};\n  }\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  text-align: center;\n  padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n  z-index: 0;\n  line-height: 1.27;\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n  display: flex;\n  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n  border: none;\n  min-height: 100%;\n  height: fit-content;\n  width: 100%;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 20;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    pointer-events: none;\n  }\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .DSIcon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover,\n  &:focus {\n    z-index: 10;\n\n    ${StyledChipLabel} {\n      text-align: left;\n    }\n\n    ${StyledSpanWithEllipsis} {\n      overflow-wrap: break-word;\n      white-space: pre-wrap;\n      overflow: visible;\n    }\n  }\n\n  &:hover {\n    & > div:first-child {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      & > div:first-child {\n        background-color: ${({ theme }) => theme.colors.neutral[200]};\n      }\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n  background-color: ${({ theme }) => theme.colors.brand[600]};\n  width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: #fff;\n    height: 24px;\n    width: 24px;\n  }\n\n  ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n  width: 100%;\n  height: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n  buttonSize: ChipSizesT;\n  buttonShape: ChipShapesT;\n  selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n  size: ChipSizesT;\n  disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  text-align: center;\n  padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n  z-index: 0;\n  line-height: 1.27;\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n  display: flex;\n  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n  ${xStyledCommonProps}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n  background-color: ${({ theme }) => theme.colors.brand[600]};\n  width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n  width: 100%;\n  height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\n  ${StyledRoundShape} {\n    background-color: ${({ theme }) => theme.colors.brand[800]};\n  }\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n  border: none;\n  min-height: 100%;\n  height: fit-content;\n  width: 100%;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  ${StyledRoundShape} {\n    & .DSIcon-root .DSIcon-svg {\n      fill: #fff;\n      height: 24px;\n      width: 24px;\n    }\n    ${({ disabled }) => disabled && disabledRoundShape}\n  }\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 20;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    pointer-events: none;\n  }\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .DSIcon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover,\n  &:focus {\n    z-index: 10;\n\n    ${StyledChipLabel} {\n      text-align: left;\n    }\n\n    ${StyledSpanWithEllipsis} {\n      overflow-wrap: break-word;\n      white-space: pre-wrap;\n      overflow: visible;\n    }\n  }\n\n  &:hover {\n    ${StyledRoundShape} {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      ${StyledRoundShape} {\n        background-color: ${({ theme }) => theme.colors.neutral[200]};\n      }\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/DSChip.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { useConfig } from "./config/useConfig";
-import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from "./styles";
-import { CHIP_SHAPES } from "./constants";
-import { DSChipPropTypes } from "./react-desc-prop-types";
+import { useConfig } from "./config/useConfig.js";
+import { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from "./styles.js";
+import { CHIP_SHAPES } from "./constants.js";
+import { DSChipPropTypes } from "./react-desc-prop-types.js";
 const DSChip = (props) => {
   const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);
   const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;

package/dist/esm/DSChip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSChip.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles';\nimport { CHIP_SHAPES } from './constants';\nimport type { DSChipT } from './react-desc-prop-types';\nimport { DSChipPropTypes } from './react-desc-prop-types';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n  const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n  return (\n    <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n      <StyledChip\n        buttonShape={shape}\n        aria-disabled={disabled}\n        disabled={disabled}\n        ref={innerRef}\n        selected={selected}\n        role=\"button\"\n        {...restGlobals}\n      >\n        {shape === CHIP_SHAPES.ROUND ? (\n          <StyledRoundShape disabled={disabled} size={size}>\n            <Icon />\n          </StyledRoundShape>\n        ) : (\n          <Icon />\n        )}\n        <StyledChipLabel size={size}>\n          <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n        </StyledChipLabel>\n      </StyledChip>\n    </StyledWrapper>\n  );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACejB,SAWM,KAXN;AAdN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,cAAc,YAAY,IAAI;AAE1E,SACE,oBAAC,iBAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MACpC,8BAAC,QAAK,GACR,IAEA,oBAAC,QAAK;AAAA,QAER,oBAAC,mBAAgB,MACf,8BAAC,0BAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useConfig } from './config/useConfig.js';\nimport { StyledChip, StyledChipLabel, StyledWrapper, StyledRoundShape, StyledSpanWithEllipsis } from './styles.js';\nimport { CHIP_SHAPES } from './constants.js';\nimport type { DSChipT } from './react-desc-prop-types.js';\nimport { DSChipPropTypes } from './react-desc-prop-types.js';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n  const { shape: shapeGlobal, type, disabled, className, ...restGlobals } = globalAttrs;\n\n  return (\n    <StyledWrapper buttonShape={shape} buttonSize={size} className={className} {...xStyledAttrs}>\n      <StyledChip\n        buttonShape={shape}\n        aria-disabled={disabled}\n        disabled={disabled}\n        ref={innerRef}\n        selected={selected}\n        role=\"button\"\n        {...restGlobals}\n      >\n        {shape === CHIP_SHAPES.ROUND ? (\n          <StyledRoundShape disabled={disabled} size={size}>\n            <Icon />\n          </StyledRoundShape>\n        ) : (\n          <Icon />\n        )}\n        <StyledChipLabel size={size}>\n          <StyledSpanWithEllipsis>{label}</StyledSpanWithEllipsis>\n        </StyledChipLabel>\n      </StyledChip>\n    </StyledWrapper>\n  );\n};\n\nDSChip.propTypes = DSChipPropTypes;\nDSChip.displayName = 'DSChip';\nconst DSChipWithSchema = describe(DSChip);\nDSChipWithSchema.propTypes = DSChipPropTypes;\n\nexport { DSChip, DSChipWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACejB,SAWM,KAXN;AAdN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAEhC,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,OAAO,aAAa,MAAM,UAAU,WAAW,GAAG,YAAY,IAAI;AAE1E,SACE,oBAAC,iBAAc,aAAa,OAAO,YAAY,MAAM,WAAuB,GAAG,cAC7E;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAe;AAAA,MACf;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,kBAAU,YAAY,QACrB,oBAAC,oBAAiB,UAAoB,MACpC,8BAAC,QAAK,GACR,IAEA,oBAAC,QAAK;AAAA,QAER,oBAAC,mBAAgB,MACf,8BAAC,0BAAwB,iBAAM,GACjC;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;",
   "names": []
 }

package/dist/esm/config/useConfig.js

@@ -5,8 +5,8 @@ import {
   useValidateTypescriptPropTypes,
   useGetXstyledProps
 } from "@elliemae/ds-props-helpers";
-import { DSChipName } from "../exported_related";
-import { defaultProps, DSChipPropTypes } from "../react-desc-prop-types";
+import { DSChipName } from "../exported_related/index.js";
+import { defaultProps, DSChipPropTypes } from "../react-desc-prop-types.js";
 const useConfig = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);

package/dist/esm/config/useConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related';\nimport type { DSChipT } from '../react-desc-prop-types';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types';\n\nexport const useConfig = (props: DSChipT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n  return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSChipName } from '../exported_related/index.js';\nimport type { DSChipT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSChipPropTypes } from '../react-desc-prop-types.js';\n\nexport const useConfig = (props: DSChipT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<Required<DSChipT.InternalProps>>(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, DSChipPropTypes, DSChipName);\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  const xStyledAttrs = useGetXstyledProps(propsWithDefault);\n\n  return { ...propsWithDefault, globalAttrs, xStyledAttrs };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,cAAc,uBAAuB;AAEvC,MAAM,YAAY,CAAC,UAAyB;AACjD,QAAM,mBAAmB,6BAA8D,OAAO,YAAY;AAE1G,iCAA+B,kBAAkB,iBAAiB,UAAU;AAC5E,QAAM,cAAc,uBAAuB,gBAAgB;AAC3D,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO,EAAE,GAAG,kBAAkB,aAAa,aAAa;AAC1D;",
   "names": []
 }

package/dist/esm/exported_related/index.js

@@ -1,4 +1,4 @@
 import * as React from "react";
-export * from "./data-test-ids";
-export * from "./theming";
+export * from "./data-test-ids.js";
+export * from "./theming.js";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported_related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids';\nexport * from './theming';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-export * from "./DSChip";
-export * from "./constants";
-export * from "./exported_related";
+export * from "./DSChip.js";
+export * from "./constants.js";
+export * from "./exported_related/index.js";
 //# 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 * from './DSChip';\nexport * from './constants';\nexport * from './exported_related';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSChip.js';\nexport * from './constants.js';\nexport * from './exported_related/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

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

@@ -7,7 +7,7 @@ import {
   ChipSizesValuesString,
   ChipShapesValuesArray,
   ChipShapesValuesString
-} from "./constants";
+} from "./constants.js";
 const defaultProps = {
   size: CHIP_SIZES.L,
   shape: CHIP_SHAPES.DEFAULT

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n} from './constants';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n  interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n  }\n  interface OptionalProps {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  interface RequiredProps {\n    label: string;\n    icon: () => JSX.Element;\n  }\n  export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n  export interface Props\n    extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n      InternalProps,\n      XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n} from './constants.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n};\n\nexport declare namespace DSChipT {\n  interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n  }\n  interface OptionalProps {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  interface RequiredProps {\n    label: string;\n    icon: () => JSX.Element;\n  }\n  export interface InternalProps extends OptionalProps, Partial<DefaultProps>, RequiredProps {}\n  export interface Props\n    extends Omit<GlobalAttributesT<HTMLButtonElement>, keyof InternalProps>,\n      InternalProps,\n      XstyledProps {}\n}\n\nexport const DSChipPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  icon: PropTypes.func.isRequired.description('Chip Icon').defaultValue(() => {}),\n  label: PropTypes.string.isRequired.description('Chip Label').defaultValue(''),\n  selected: PropTypes.bool.description('Whether chip is selected').defaultValue(''),\n  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),\n  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as WeakValidationMap<unknown>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,eAAqC;AAAA,EAChD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AACrB;AAuBO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KAAK,WAAW,YAAY,WAAW,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC9E,OAAO,UAAU,OAAO,WAAW,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EAC5E,UAAU,UAAU,KAAK,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EAChF,OAAO,UAAU,MAAM,qBAAqB,EAAE,YAAY,sBAAsB,EAAE,aAAa,YAAY,OAAO;AAAA,EAClH,MAAM,UAAU,MAAM,oBAAoB,EAAE,YAAY,qBAAqB,EAAE,aAAa,WAAW,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,29 +1,8 @@
 import * as React from "react";
 import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
-import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants";
-import { DSChipName, DSChipSlots } from "./exported_related";
+import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants.js";
+import { DSChipName, DSChipSlots } from "./exported_related/index.js";
 const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
-const styledChipSelectedCss = css`
-  & > div:first-child {
-    background-color: ${({ theme }) => theme.colors.brand[800]};
-  }
-  color: ${({ theme }) => theme.colors.brand[800]};
-  background-color: ${({ theme }) => theme.colors.brand[200]};
-
-  .DSIcon-svg {
-    fill: ${({ theme }) => theme.colors.brand[800]};
-  }
-
-  &:before {
-    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
-  }
-
-  &:focus {
-    &:before {
-      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
-    }
-  }
-`;
 const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABEL })`
   font-size: ${({ theme }) => theme.fontSizes.label[200]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
@@ -49,6 +28,51 @@ const StyledWrapper = styled("div")`
   width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
   ${xStyledCommonProps}
 `;
+const disabledRoundShape = css`
+  background-color: ${({ theme }) => theme.colors.neutral[200]};
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.neutral[500]};
+  }
+`;
+const StyledRoundShape = styled("div", {
+  name: DSChipName,
+  slot: DSChipSlots.ROUND_SHAPE
+})`
+  background-color: ${({ theme }) => theme.colors.brand[600]};
+  width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
+  height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
+`;
+const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
+  width: 100%;
+  height: 100%;
+`;
+const styledChipSelectedCss = css`
+  ${StyledRoundShape} {
+    background-color: ${({ theme }) => theme.colors.brand[800]};
+  }
+  color: ${({ theme }) => theme.colors.brand[800]};
+  background-color: ${({ theme }) => theme.colors.brand[200]};
+
+  .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.brand[800]};
+  }
+
+  &:before {
+    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
+  }
+
+  &:focus {
+    &:before {
+      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+`;
 const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
   position: relative;
   display: flex;
@@ -66,6 +90,14 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
   cursor: pointer;
   outline: none;
 
+  ${StyledRoundShape} {
+    & .DSIcon-root .DSIcon-svg {
+      fill: #fff;
+      height: 24px;
+      width: 24px;
+    }
+    ${({ disabled }) => disabled && disabledRoundShape}
+  }
   &:before {
     content: '';
     position: absolute;
@@ -106,7 +138,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
   }
 
   &:hover {
-    & > div:first-child {
+    ${StyledRoundShape} {
       background-color: ${({ theme }) => theme.colors.brand[800]};
     }
     color: ${({ theme }) => theme.colors.brand[800]};
@@ -132,7 +164,7 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
 
     &:focus,
     &:hover {
-      & > div:first-child {
+      ${StyledRoundShape} {
         background-color: ${({ theme }) => theme.colors.neutral[200]};
       }
       background-color: #fff;
@@ -153,38 +185,6 @@ const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON
 
   ${({ selected }) => !selected ? "" : styledChipSelectedCss}
 `;
-const disabledRoundShape = css`
-  background-color: ${({ theme }) => theme.colors.neutral[200]};
-
-  & .DSIcon-root .DSIcon-svg {
-    fill: ${({ theme }) => theme.colors.neutral[500]};
-  }
-`;
-const StyledRoundShape = styled("div", {
-  name: DSChipName,
-  slot: DSChipSlots.ROUND_SHAPE
-})`
-  background-color: ${({ theme }) => theme.colors.brand[600]};
-  width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
-  height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
-
-  & .DSIcon-root .DSIcon-svg {
-    fill: #fff;
-    height: 24px;
-    width: 24px;
-  }
-
-  ${({ disabled }) => disabled && disabledRoundShape}
-`;
-const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
-  width: 100%;
-  height: 100%;
-`;
 export {
   StyledChildrenWrapper,
   StyledChip,

package/dist/esm/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n  buttonSize: ChipSizesT;\n  buttonShape: ChipShapesT;\n  selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n  size: ChipSizesT;\n  disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst styledChipSelectedCss = css`\n  & > div:first-child {\n    background-color: ${({ theme }) => theme.colors.brand[800]};\n  }\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  text-align: center;\n  padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n  z-index: 0;\n  line-height: 1.27;\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n  display: flex;\n  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n  ${xStyledCommonProps}\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n  border: none;\n  min-height: 100%;\n  height: fit-content;\n  width: 100%;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 20;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    pointer-events: none;\n  }\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .DSIcon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover,\n  &:focus {\n    z-index: 10;\n\n    ${StyledChipLabel} {\n      text-align: left;\n    }\n\n    ${StyledSpanWithEllipsis} {\n      overflow-wrap: break-word;\n      white-space: pre-wrap;\n      overflow: visible;\n    }\n  }\n\n  &:hover {\n    & > div:first-child {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      & > div:first-child {\n        background-color: ${({ theme }) => theme.colors.neutral[200]};\n      }\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n  background-color: ${({ theme }) => theme.colors.brand[600]};\n  width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: #fff;\n    height: 24px;\n    width: 24px;\n  }\n\n  ${({ disabled }) => disabled && disabledRoundShape}\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n  width: 100%;\n  height: 100%;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n  buttonSize: ChipSizesT;\n  buttonShape: ChipShapesT;\n  selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n  size: ChipSizesT;\n  disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  text-align: center;\n  padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n  z-index: 0;\n  line-height: 1.27;\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n  display: flex;\n  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n  ${xStyledCommonProps}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n  background-color: ${({ theme }) => theme.colors.brand[600]};\n  width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n  width: 100%;\n  height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\n  ${StyledRoundShape} {\n    background-color: ${({ theme }) => theme.colors.brand[800]};\n  }\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n  border: none;\n  min-height: 100%;\n  height: fit-content;\n  width: 100%;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  ${StyledRoundShape} {\n    & .DSIcon-root .DSIcon-svg {\n      fill: #fff;\n      height: 24px;\n      width: 24px;\n    }\n    ${({ disabled }) => disabled && disabledRoundShape}\n  }\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 20;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    pointer-events: none;\n  }\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .DSIcon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover,\n  &:focus {\n    z-index: 10;\n\n    ${StyledChipLabel} {\n      text-align: left;\n    }\n\n    ${StyledSpanWithEllipsis} {\n      overflow-wrap: break-word;\n      white-space: pre-wrap;\n      overflow: visible;\n    }\n  }\n\n  &:hover {\n    ${StyledRoundShape} {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      ${StyledRoundShape} {\n        background-color: ${({ theme }) => theme.colors.neutral[200]};\n      }\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,YAAY,YAAY,aAAa,YAAY,iBAAiB,uBAAuB;AAElG,SAAS,YAAY,mBAAmB;AAaxC,MAAM,cAAc,CAAC,UAAwB,UAAU,YAAY,QAAQ,aAAa;AAEjF,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAAA,eAC3E,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,iBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA,aAGrC,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrD,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA,YAE7B,CAAC,EAAE,YAAY,YAAY,MAAM,YAAY,WAAW,EAAE,UAAU,EAAE;AAAA,WACvE,CAAC,EAAE,YAAY,YAAY,MAAM,YAAY,WAAW,EAAE,UAAU,EAAE;AAAA,IAC7E;AAAA;AAGJ,MAAM,qBAAqB;AAAA,sBACL,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,YAGjD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAI5C,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,YAAY;AACpB,CAAC;AAAA,sBACqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,WAChD,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,kBAAkB;AAAA,YACxD,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKrD,CAAC,EAAE,KAAK,MAAO,SAAS,WAAW,IAAI,QAAQ;AAAA;AAGxD,MAAM,wBAAwB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,YAAY,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAK3G,MAAM,wBAAwB;AAAA,IAC1B;AAAA,wBACoB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,WAElD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,sBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,YAG/C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,wBAIzB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKxD,MAAM,aAAa,OAAO,UAAU,EAAE,MAAM,YAAY,MAAM,YAAY,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQxE,CAAC,UAAW,MAAM,gBAAgB,YAAY,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMlE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAME,CAAC,EAAE,SAAS,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgBxB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAc3C;AAAA;AAAA;AAAA;AAAA,MAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA;AAAA,0BACoB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,aAElD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,wBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,cAE/C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,cAItC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,QAK7C;AAAA,4BACoB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ3D;AAAA,iBACS,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,cAK1C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,KAAK;AAAA;",
   "names": []
 }

package/dist/types/DSChip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DSChipT } from './react-desc-prop-types';
+import type { DSChipT } from './react-desc-prop-types.js';
 declare const DSChip: React.ComponentType<DSChipT.Props>;
-declare const DSChipWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSChipT.Props>;
+declare const DSChipWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChipT.Props>;
 export { DSChip, DSChipWithSchema };

package/dist/types/config/useConfig.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { DSChipT } from '../react-desc-prop-types';
+import type { DSChipT } from '../react-desc-prop-types.js';
 export declare const useConfig: (props: DSChipT.Props) => {
     globalAttrs: import("@elliemae/ds-props-helpers").GlobalAttributesT<Element>;
     xStyledAttrs: import("@elliemae/ds-props-helpers").XstyledProps;
     selected: boolean;
     innerRef: import("react").RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
-    size: import("../sharedTypes").ChipSizesT;
-    shape: import("../sharedTypes").ChipShapesT;
+    size: import("../sharedTypes.js").ChipSizesT;
+    shape: import("../sharedTypes.js").ChipShapesT;
     label: string;
     icon: () => JSX.Element;
 };

package/dist/types/exported_related/index.d.ts

@@ -1,2 +1,2 @@
-export * from './data-test-ids';
-export * from './theming';
+export * from './data-test-ids.js';
+export * from './theming.js';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DSChip';
-export * from './constants';
-export * from './exported_related';
+export * from './DSChip.js';
+export * from './constants.js';
+export * from './exported_related/index.js';

package/dist/types/sharedTypes.d.ts

@@ -1,4 +1,4 @@
-import type { CHIP_SIZES, CHIP_SHAPES, ChipInteractionStates } from './constants';
+import type { CHIP_SIZES, CHIP_SHAPES, ChipInteractionStates } from './constants.js';
 export type ChipSizesT = (typeof CHIP_SIZES)[keyof typeof CHIP_SIZES];
 export type ChipShapesT = (typeof CHIP_SHAPES)[keyof typeof CHIP_SHAPES];
 export type ChipInteractionStatesT = (typeof ChipInteractionStates)[number];

package/dist/types/styles.d.ts

@@ -1,4 +1,4 @@
-import type { ChipShapesT, ChipSizesT } from './sharedTypes';
+import type { ChipShapesT, ChipSizesT } from './sharedTypes.js';
 export interface StyledChipPropsT {
     buttonSize: ChipSizesT;
     buttonShape: ChipShapesT;
@@ -13,6 +13,6 @@ export declare const StyledChipLabel: import("styled-components").StyledComponen
 }, never>;
 export declare const StyledSpanWithEllipsis: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledChipPropsT, never>;
-export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape">, never>;
 export declare const StyledRoundShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledRoundShapePropsT, never>;
 export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape">, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chip",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chip",
   "files": [
@@ -63,15 +63,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.16.0",
-    "@elliemae/ds-system": "3.16.0",
-    "@elliemae/ds-utilities": "3.16.0"
+    "@elliemae/ds-props-helpers": "3.16.1",
+    "@elliemae/ds-system": "3.16.1",
+    "@elliemae/ds-utilities": "3.16.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
-    "styled-components": "~5.3.6",
-    "@elliemae/ds-icons": "3.16.0"
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-icons": "3.16.1"
   },
   "peerDependencies": {
     "react": "^17.0.2",