@elliemae/ds-chip 3.57.0-next.9 → 3.60.0-next.1

package/dist/esm/{constants.js → constants/index.js}

@@ -1,4 +1,16 @@
 import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSChipName = "DSChip";
+const CHIP_SLOTS = {
+  ROOT: "root",
+  BUTTON: "button",
+  LABEL: "label",
+  ROUND_SHAPE: "round-shape",
+  ELLIPSIS: "ellipsis"
+};
+const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);
+const DSChipSlots = CHIP_SLOTS;
+const DSChipDataTestIds = CHIP_DATA_TESTID;
 const CHIP_SHAPES = {
   DEFAULT: "default",
   ROUND: "round"
@@ -36,17 +48,22 @@ const ChipSizesValuesString = JSON.stringify(ChipSizesValuesArray);
 const ChipShapesValuesString = JSON.stringify(ChipShapesValuesArray);
 const ChipInteractionStatesValuesString = JSON.stringify(ChipInteractionStates);
 export {
+  CHIP_DATA_TESTID,
   CHIP_SHAPES,
   CHIP_SIZES,
+  CHIP_SLOTS,
   ChipInteractionStates,
   ChipInteractionStatesValuesString,
   ChipShapesValuesArray,
   ChipShapesValuesString,
   ChipSizesValuesArray,
   ChipSizesValuesString,
+  DSChipDataTestIds,
+  DSChipName,
+  DSChipSlots,
   basicSizes,
   roundShapeLarge,
   roundShapeSmall,
   shapeSizes
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChipName = 'DSChip';\n\nexport const CHIP_SLOTS = {\n  ROOT: 'root',\n  BUTTON: 'button',\n  LABEL: 'label',\n  ROUND_SHAPE: 'round-shape',\n  ELLIPSIS: 'ellipsis',\n} as const;\n\nexport const CHIP_DATA_TESTID = slotObjectToDataTestIds(DSChipName, CHIP_SLOTS);\n\nexport const DSChipSlots = CHIP_SLOTS;\nexport const DSChipDataTestIds = CHIP_DATA_TESTID;\n\nexport 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 = '4.308rem';\nexport const roundShapeSmall = '3.077rem';\n\nexport const basicSizes = {\n  s: {\n    width: '5.538rem',\n    height: '5.154rem',\n  } as const,\n  l: {\n    width: '7.077rem',\n    height: '5.154rem',\n  } as const,\n};\n\nexport const shapeSizes = {\n  s: {\n    width: '5.538rem',\n    height: '5.923rem',\n  } as const,\n  l: {\n    width: '7.077rem',\n    height: '6.538rem',\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;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,aAAa;AAEnB,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AACZ;AAEO,MAAM,mBAAmB,wBAAwB,YAAY,UAAU;AAEvE,MAAM,cAAc;AACpB,MAAM,oBAAoB;AAE1B,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/index.js

@@ -1,5 +1,45 @@
 import * as React from "react";
-export * from "./DSChip.js";
-export * from "./constants.js";
-export * from "./exported_related/index.js";
+import { DSChip, DSChipWithSchema } from "./DSChip.js";
+import { DSChipPropTypes } from "./react-desc-prop-types.js";
+import {
+  CHIP_SLOTS,
+  CHIP_DATA_TESTID,
+  DSChipName,
+  CHIP_SHAPES,
+  CHIP_SIZES,
+  ChipInteractionStates,
+  ChipInteractionStatesValuesString,
+  ChipShapesValuesArray,
+  ChipShapesValuesString,
+  ChipSizesValuesArray,
+  ChipSizesValuesString,
+  DSChipDataTestIds,
+  DSChipSlots,
+  basicSizes,
+  roundShapeLarge,
+  roundShapeSmall,
+  shapeSizes
+} from "./constants/index.js";
+export {
+  CHIP_DATA_TESTID,
+  CHIP_SHAPES,
+  CHIP_SIZES,
+  CHIP_SLOTS,
+  ChipInteractionStates,
+  ChipInteractionStatesValuesString,
+  ChipShapesValuesArray,
+  ChipShapesValuesString,
+  ChipSizesValuesArray,
+  ChipSizesValuesString,
+  DSChip,
+  DSChipDataTestIds,
+  DSChipName,
+  DSChipPropTypes,
+  DSChipSlots,
+  DSChipWithSchema,
+  basicSizes,
+  roundShapeLarge,
+  roundShapeSmall,
+  shapeSizes
+};
 //# 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.js';\nexport * from './constants.js';\nexport * from './exported_related/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSChip, DSChipWithSchema } from './DSChip.js';\nexport { type DSChipT, DSChipPropTypes } from './react-desc-prop-types.js';\nexport {\n  CHIP_SLOTS,\n  CHIP_DATA_TESTID,\n  DSChipName,\n  // below are \"unusual\" exports that we keep for retrocompatibility but that are usually\n  // not exported in other components\n  CHIP_SHAPES,\n  CHIP_SIZES,\n  ChipInteractionStates,\n  ChipInteractionStatesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  DSChipDataTestIds, // legacy test id constant name, same values as new one by default\n  DSChipSlots,\n  basicSizes,\n  roundShapeLarge,\n  roundShapeSmall,\n  shapeSizes,\n} from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,wBAAwB;AACzC,SAAuB,uBAAuB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/dist/esm/package.json

@@ -3,5 +3,8 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

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

@@ -11,16 +11,17 @@ import {
   ChipSizesValuesArray,
   ChipSizesValuesString,
   ChipShapesValuesArray,
-  ChipShapesValuesString
-} from "./constants.js";
-import { DSChipName, DSChipSlots } from "./exported_related/theming.js";
-const defaultProps = {
+  ChipShapesValuesString,
+  DSChipName,
+  CHIP_SLOTS
+} from "./constants/index.js";
+const DSChipDefaultProps = {
   size: CHIP_SIZES.L,
   shape: CHIP_SHAPES.DEFAULT,
   applyAriaDisabled: false
 };
 const DSChipPropTypes = {
-  ...getPropsPerSlotPropTypes(DSChipName, DSChipSlots),
+  ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   icon: PropTypes.func.isRequired.description("Chip Icon").defaultValue(() => {
@@ -34,8 +35,10 @@ const DSChipPropTypes = {
   ).defaultValue(false),
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description("Inner ref to button component.")
 };
+const DSChipPropTypesSchema = DSChipPropTypes;
 export {
+  DSChipDefaultProps,
   DSChipPropTypes,
-  defaultProps
+  DSChipPropTypesSchema
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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 React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} 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';\nimport { DSChipName, DSChipSlots } from './exported_related/theming.js';\n\nexport const defaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n  applyAriaDisabled: false,\n};\n\nexport declare namespace DSChipT {\n  interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n    applyAriaDisabled: boolean;\n  }\n  interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof DSChipSlots> {\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  ...getPropsPerSlotPropTypes(DSChipName, DSChipSlots),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n} as ValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY,mBAAmB;AAEjC,MAAM,eAAqC;AAAA,EAChD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;AACrB;AAwBO,MAAM,kBAAkB;AAAA,EAC7B,GAAG,yBAAyB,YAAY,WAAW;AAAA,EACnD,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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { GlobalAttributesT, XstyledProps, ValidationMap, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport {\n  CHIP_SIZES,\n  CHIP_SHAPES,\n  ChipSizesValuesArray,\n  ChipSizesValuesString,\n  ChipShapesValuesArray,\n  ChipShapesValuesString,\n  DSChipName,\n  CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipSizesT, ChipShapesT } from './sharedTypes.js';\n\nexport const DSChipDefaultProps: DSChipT.DefaultProps = {\n  size: CHIP_SIZES.L,\n  shape: CHIP_SHAPES.DEFAULT,\n  applyAriaDisabled: false,\n};\n\nexport declare namespace DSChipT {\n  export interface DefaultProps {\n    size: ChipSizesT;\n    shape: ChipShapesT;\n    applyAriaDisabled: boolean;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChipName, typeof CHIP_SLOTS> {\n    selected?: boolean;\n    innerRef?: React.RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);\n  }\n\n  export interface RequiredProps {\n    label: string;\n    icon: React.ComponentType<Record<string, never>>;\n  }\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof XstyledProps | keyof RequiredProps | keyof OptionalProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSChipPropTypes: DSPropTypesSchema<DSChipT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChipName, CHIP_SLOTS),\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  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to button component.'),\n};\n\nexport const DSChipPropTypesSchema = DSChipPropTypes as unknown as ValidationMap<DSChipT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAA2C;AAAA,EACtD,MAAM,WAAW;AAAA,EACjB,OAAO,YAAY;AAAA,EACnB,mBAAmB;AACrB;AAuCO,MAAM,kBAAoD;AAAA,EAC/D,GAAG,yBAAyB,YAAY,UAAU;AAAA,EAClD,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,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,gCAAgC;AAChH;AAEO,MAAM,wBAAwB;",
   "names": []
 }

package/dist/esm/styles.js

@@ -1,9 +1,17 @@
 import * as React from "react";
 import { styled, css, xStyledCommonProps } from "@elliemae/ds-system";
-import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants.js";
-import { DSChipName, DSChipSlots } from "./exported_related/index.js";
+import {
+  basicSizes,
+  shapeSizes,
+  CHIP_SHAPES,
+  CHIP_SIZES,
+  roundShapeLarge,
+  roundShapeSmall,
+  DSChipName,
+  CHIP_SLOTS
+} from "./constants/index.js";
 const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
-const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABEL })`
+const StyledChipLabel = styled("div", { name: DSChipName, slot: CHIP_SLOTS.LABEL })`
   font-size: ${({ theme }) => theme.fontSizes.label[200]};
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   word-wrap: break-word;
@@ -18,7 +26,7 @@ const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABE
 `;
 const StyledSpanWithEllipsis = styled("span", {
   name: DSChipName,
-  slot: DSChipSlots.ELLIPSIS
+  slot: CHIP_SLOTS.ELLIPSIS
 })`
   white-space: nowrap;
   overflow: hidden;
@@ -27,7 +35,7 @@ const StyledSpanWithEllipsis = styled("span", {
 `;
 const StyledWrapper = styled("div", {
   name: DSChipName,
-  slot: DSChipSlots.ROOT
+  slot: CHIP_SLOTS.ROOT
 })`
   display: flex;
   height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
@@ -43,7 +51,7 @@ const disabledRoundShape = css`
 `;
 const StyledRoundShape = styled("div", {
   name: DSChipName,
-  slot: DSChipSlots.ROUND_SHAPE
+  slot: CHIP_SLOTS.ROUND_SHAPE
 })`
   background-color: ${({ theme }) => theme.colors.brand[600]};
   width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
@@ -76,7 +84,7 @@ const styledChipSelectedCss = css`
     }
   }
 `;
-const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
+const StyledChip = styled("button", { name: DSChipName, slot: CHIP_SLOTS.BUTTON })`
   position: relative;
   display: flex;
   flex-direction: column;

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.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  name: DSChipName,\n  slot: DSChipSlots.ELLIPSIS,\n})`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROOT,\n})<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\nconst styledChipSelectedCss = css`\n  // TODO: wrap css processor to process new HOC wrapping styled components\n  ${StyledRoundShape.toString()} {\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-root .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  justify-content: 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: 1.85rem;\n      width: 1.85rem;\n      @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n        height: 1.5rem;\n        width: 1.5rem;\n      }\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  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 1.85rem;\n    width: 1.85rem;\n    @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n      height: 1.5rem;\n      width: 1.5rem;\n    }\n  }\n  & .DSIcon-root {\n    height: 1.85rem;\n    width: 1.85rem;\n    @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n      height: 1.5rem;\n      width: 1.5rem;\n    }\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  &[aria-disabled='true'] {\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    ${StyledRoundShape} {\n      ${disabledRoundShape}\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\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover {\n      &:not(:focus) {\n        &:before {\n          border-color: transparent;\n        }\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\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 {\n  basicSizes,\n  shapeSizes,\n  CHIP_SHAPES,\n  CHIP_SIZES,\n  roundShapeLarge,\n  roundShapeSmall,\n  DSChipName,\n  CHIP_SLOTS,\n} from './constants/index.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.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: CHIP_SLOTS.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  name: DSChipName,\n  slot: CHIP_SLOTS.ELLIPSIS,\n})`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div', {\n  name: DSChipName,\n  slot: CHIP_SLOTS.ROOT,\n})<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: CHIP_SLOTS.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\nconst styledChipSelectedCss = css`\n  // TODO: wrap css processor to process new HOC wrapping styled components\n  ${StyledRoundShape.toString()} {\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-root .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: CHIP_SLOTS.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: 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: 1.85rem;\n      width: 1.85rem;\n      @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n        height: 1.5rem;\n        width: 1.5rem;\n      }\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  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 1.85rem;\n    width: 1.85rem;\n    @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n      height: 1.5rem;\n      width: 1.5rem;\n    }\n  }\n  & .DSIcon-root {\n    height: 1.85rem;\n    width: 1.85rem;\n    @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n      height: 1.5rem;\n      width: 1.5rem;\n    }\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  &[aria-disabled='true'] {\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    ${StyledRoundShape} {\n      ${disabledRoundShape}\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\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover {\n      &:not(:focus) {\n        &:before {\n          border-color: transparent;\n        }\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-chip-valid.js

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { DSChip } from "../index.js";
+const Icon = () => /* @__PURE__ */ jsx("div", { "data-testid": "icon-test" });
+const testRequiredProps = {
+  label: "Label",
+  icon: Icon
+};
+const testOptionalPropsEmpty = {};
+const testOptionalProps = {
+  selected: true,
+  innerRef: React2.createRef()
+};
+const testPartialDefaults = {
+  applyAriaDisabled: true
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  size: "l",
+  shape: "default",
+  applyAriaDisabled: false
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  label: "Label",
+  icon: Icon,
+  size: "l",
+  shape: "default",
+  applyAriaDisabled: false
+};
+const testInferedTypeCompatibility = {
+  label: "Label",
+  icon: Icon,
+  size: "l",
+  shape: "default",
+  applyAriaDisabled: false
+};
+const testDefinitionAsConst = {
+  label: "Label",
+  icon: Icon,
+  size: "l",
+  shape: "default",
+  applyAriaDisabled: false
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSChip, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSChip, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSChip, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(DSChip, { label: "Label", icon: Icon })
+] });
+//# sourceMappingURL=typescript-chip-valid.js.map

package/dist/esm/typescript-testing/typescript-chip-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-chip-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSChip } from '../index.js';\nimport type { DSChipT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSChipT.Props;\ntype ComponentPropsInternals = DSChipT.InternalProps;\ntype ComponentPropsDefaultProps = DSChipT.DefaultProps;\ntype ComponentPropsOptionalProps = DSChipT.OptionalProps;\ntype ComponentPropsRequiredProps = DSChipT.RequiredProps;\n\nconst Icon = () => <div data-testid=\"icon-test\" />;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  label: 'Label',\n  icon: Icon,\n};\n\nconst testOptionalPropsEmpty: ComponentPropsOptionalProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  selected: true,\n  innerRef: React.createRef<HTMLButtonElement>(),\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  applyAriaDisabled: true,\n};\n\n// ComponentPropsForApp only needs required props, default and optional are not mandatory\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  size: 'l',\n  shape: 'default',\n  applyAriaDisabled: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: 'Label',\n  icon: Icon,\n  size: 'l',\n  shape: 'default',\n  applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: 'Label',\n  icon: Icon,\n  size: 'l',\n  shape: 'default',\n  applyAriaDisabled: false,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: 'Label',\n  icon: Icon,\n  size: 'l',\n  shape: 'default',\n  applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSChip {...testExplicitDefinition} />\n    <DSChip {...testInferedTypeCompatibility} />\n    <DSChip {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSChip label=\"Label\" icon={Icon} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYJ,SA6EjB,UA7EiB,KA6EjB,YA7EiB;AAXnB,OAAOA,YAAW;AAClB,SAAS,cAAc;AAUvB,MAAM,OAAO,MAAM,oBAAC,SAAI,eAAY,aAAY;AAEhD,MAAM,oBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,yBAAsD,CAAC;AAE7D,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,UAAUA,OAAM,UAA6B;AAC/C;AAIA,MAAM,sBAA2D;AAAA,EAC/D,mBAAmB;AACrB;AAGA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AACrB;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,UAAQ,GAAG,wBAAwB;AAAA,EACpC,oBAAC,UAAQ,GAAG,8BAA8B;AAAA,EAC1C,oBAAC,UAAQ,GAAG,uBAAuB;AAAA,EAEnC,oBAAC,UAAO,OAAM,SAAQ,MAAM,MAAM;AAAA,GACpC;",
+  "names": ["React"]
+}