@elliemae/ds-legacy-chip 1.0.0-rc.1

package/dist/cjs/styles.js

@@ -0,0 +1,226 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledChildrenWrapper: () => StyledChildrenWrapper,
+  StyledChip: () => StyledChip,
+  StyledChipLabel: () => StyledChipLabel,
+  StyledRoundShape: () => StyledRoundShape,
+  StyledSpanWithEllipsis: () => StyledSpanWithEllipsis,
+  StyledWrapper: () => StyledWrapper
+});
+module.exports = __toCommonJS(styles_exports);
+var React = __toESM(require("react"));
+var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
+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 StyledChipLabel = (0, import_ds_legacy_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};
+  word-wrap: break-word;
+  text-align: center;
+  padding: ${({ size }) => size === import_constants.CHIP_SIZES.L ? "2px" : "4px"} 6px 6px 6px;
+  z-index: 0;
+  line-height: 1.27;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledSpanWithEllipsis = import_ds_legacy_system.styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`;
+const StyledWrapper = (0, import_ds_legacy_system.styled)("div")`
+  display: flex;
+  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
+  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
+  ${import_ds_legacy_system.xStyledCommonProps}
+`;
+const disabledRoundShape = import_ds_legacy_system.css`
+  background-color: ${({ theme }) => theme.colors.neutral[200]};
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.neutral[500]};
+  }
+`;
+const StyledRoundShape = (0, import_ds_legacy_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_legacy_system.styled)("div", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.CHILDREN_WRAPPER })`
+  width: 100%;
+  height: 100%;
+`;
+const styledChipSelectedCss = import_ds_legacy_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_legacy_system.styled)("button", { name: import_exported_related.DSChipName, slot: import_exported_related.DSChipSlots.BUTTON })`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  padding-top: ${(props) => props.buttonShape === import_constants.CHIP_SHAPES.ROUND ? "0" : "10px"};
+  border: none;
+  min-height: 100%;
+  height: fit-content;
+  width: 100%;
+  background-color: #fff;
+  color: ${({ theme }) => theme.colors.brand[600]};
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+
+  ${StyledRoundShape} {
+    & .DSIcon-root .DSIcon-svg {
+      fill: #fff;
+      height: 24px;
+      width: 24px;
+    }
+    ${({ disabled }) => disabled && disabledRoundShape}
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    pointer-events: none;
+  }
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.brand[600]};
+    height: 24px;
+    width: 24px;
+  }
+
+  & .DSIcon-root {
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover,
+  &:focus {
+    z-index: 10;
+
+    ${StyledChipLabel} {
+      text-align: left;
+    }
+
+    ${StyledSpanWithEllipsis} {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      overflow: visible;
+    }
+  }
+
+  &:hover {
+    ${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]};
+    }
+  }
+
+  &:focus {
+    &:before {
+      border-color: ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral[500]};
+    cursor: not-allowed;
+
+    .DSIcon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+
+    &:focus,
+    &:hover {
+      ${StyledRoundShape} {
+        background-color: ${({ theme }) => theme.colors.neutral[200]};
+      }
+      background-color: #fff;
+      cursor: not-allowed;
+      &:before {
+        border-color: transparent;
+      }
+
+      ${StyledChipLabel} {
+        color: ${({ theme }) => theme.colors.neutral[500]};
+      }
+    }
+
+    &:hover .DSIcon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+  }
+
+  ${({ selected }) => !selected ? "" : styledChipSelectedCss}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -0,0 +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-legacy-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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-legacy-props-helpers";
+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";
+import { omit } from "lodash";
+const DSChip = (props) => {
+  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);
+  const { disabled, className, ...restGlobals } = omit(globalAttrs, ["shape", "type"]);
+  return /* @__PURE__ */ jsx(StyledWrapper, { buttonShape: shape, buttonSize: size, className, ...xStyledAttrs, children: /* @__PURE__ */ jsxs(
+    StyledChip,
+    {
+      buttonShape: shape,
+      "aria-disabled": disabled,
+      disabled,
+      ref: innerRef,
+      selected,
+      role: "button",
+      ...restGlobals,
+      children: [
+        shape === CHIP_SHAPES.ROUND ? /* @__PURE__ */ jsx(StyledRoundShape, { disabled, size, children: /* @__PURE__ */ jsx(Icon, {}) }) : /* @__PURE__ */ jsx(Icon, {}),
+        /* @__PURE__ */ jsx(StyledChipLabel, { size, children: /* @__PURE__ */ jsx(StyledSpanWithEllipsis, { children: label }) })
+      ]
+    }
+  ) });
+};
+DSChip.propTypes = DSChipPropTypes;
+DSChip.displayName = "DSChip";
+const DSChipWithSchema = describe(DSChip);
+DSChipWithSchema.propTypes = DSChipPropTypes;
+export {
+  DSChip,
+  DSChipWithSchema
+};
+//# sourceMappingURL=DSChip.js.map

package/dist/esm/DSChip.js.map

@@ -0,0 +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-legacy-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';\nimport { omit } from 'lodash';\n\nconst DSChip: React.ComponentType<DSChipT.Props> = (props) => {\n  const { size, shape, selected, innerRef, icon: Icon, label, globalAttrs, xStyledAttrs } = useConfig(props);\n\n  const { disabled, className, ...restGlobals } = omit(globalAttrs, ['shape', 'type']);\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;ACgBjB,SAWM,KAXN;AAfN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,iBAAiB,eAAe,kBAAkB,8BAA8B;AACrG,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAChC,SAAS,YAAY;AAErB,MAAM,SAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO,aAAa,aAAa,IAAI,UAAU,KAAK;AAEzG,QAAM,EAAE,UAAU,WAAW,GAAG,YAAY,IAAI,KAAK,aAAa,CAAC,SAAS,MAAM,CAAC;AAEnF,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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import {
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useValidateTypescriptPropTypes,
+  useGetXstyledProps
+} from "@elliemae/ds-legacy-props-helpers";
+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);
+  const globalAttrs = useGetGlobalAttributes(propsWithDefault);
+  const xStyledAttrs = useGetXstyledProps(propsWithDefault);
+  return { ...propsWithDefault, globalAttrs, xStyledAttrs };
+};
+export {
+  useConfig
+};
+//# sourceMappingURL=useConfig.js.map

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

@@ -0,0 +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-legacy-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/constants.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+const CHIP_SHAPES = {
+  DEFAULT: "default",
+  ROUND: "round"
+};
+const CHIP_SIZES = {
+  S: "s",
+  L: "l"
+};
+const roundShapeLarge = "56px";
+const roundShapeSmall = "40px";
+const basicSizes = {
+  s: {
+    width: "72px",
+    height: "67px"
+  },
+  l: {
+    width: "92px",
+    height: "67px"
+  }
+};
+const shapeSizes = {
+  s: {
+    width: "72px",
+    height: "77px"
+  },
+  l: {
+    width: "92px",
+    height: "85px"
+  }
+};
+const ChipSizesValuesArray = Object.values(CHIP_SIZES);
+const ChipShapesValuesArray = Object.values(CHIP_SHAPES);
+const ChipInteractionStates = ["hover", "focus", "active"];
+const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);
+const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);
+const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);
+export {
+  CHIP_SHAPES,
+  CHIP_SIZES,
+  ChipInteractionStates,
+  ChipInteractionStatesValuesString,
+  ChipShapesValuesArray,
+  ChipShapesValuesString,
+  ChipSizesValuesArray,
+  ChipSizesValuesString,
+  basicSizes,
+  roundShapeLarge,
+  roundShapeSmall,
+  shapeSizes
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,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/esm/exported_related/data-test-ids.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const DSChipDataTestIds = {
+  BUTTON: "ds-chip-button",
+  LABEL: "ds-chip-label",
+  ROUND_SHAPE: "ds-chip-round-shape"
+};
+export {
+  DSChipDataTestIds
+};
+//# sourceMappingURL=data-test-ids.js.map

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

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

package/dist/esm/exported_related/index.js

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

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

@@ -0,0 +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.js';\nexport * from './theming.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/esm/exported_related/theming.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const DSChipName = "DSChip";
+const DSChipSlots = {
+  BUTTON: "root",
+  LABEL: "label",
+  ROUND_SHAPE: "round-shape",
+  CHILDREN_WRAPPER: "children-wrapper"
+};
+export {
+  DSChipName,
+  DSChipSlots
+};
+//# sourceMappingURL=theming.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported_related/theming.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,aAAa;AAEnB,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AACpB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export * from "./DSChip.js";
+export * from "./constants.js";
+export * from "./exported_related/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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.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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-legacy-props-helpers";
+import {
+  CHIP_SIZES,
+  CHIP_SHAPES,
+  ChipSizesValuesArray,
+  ChipSizesValuesString,
+  ChipShapesValuesArray,
+  ChipShapesValuesString
+} from "./constants.js";
+const defaultProps = {
+  size: CHIP_SIZES.L,
+  shape: CHIP_SHAPES.DEFAULT
+};
+const DSChipPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  icon: PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
+  }),
+  label: PropTypes.string.isRequired.description("Chip Label").defaultValue(""),
+  selected: PropTypes.bool.description("Whether chip is selected").defaultValue(""),
+  shape: PropTypes.oneOf(ChipShapesValuesArray).description(ChipShapesValuesString).defaultValue(CHIP_SHAPES.DEFAULT),
+  size: PropTypes.oneOf(ChipSizesValuesArray).description(ChipSizesValuesString).defaultValue(CHIP_SIZES.L),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component.")
+};
+export {
+  DSChipPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +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-legacy-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-legacy-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-legacy-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/sharedTypes.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=sharedTypes.js.map

package/dist/esm/sharedTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA,YAAY,WAAW;",
+  "names": []
+}