expose default config

Author: Nemobot

Diff for: src/Chip/createChip.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps, FunctionComponent } from "react";
 import { IconProps } from "../Icons/IconProps";
 import { Label, LocalizedString, IconButton, BoxProps, BoxType } from "..";
+import { IconClose } from "../Icons/IconClose";
 import { Column, Columns, BentoSprinkles, bentoSprinkles } from "../internal";
 import { chip } from "./Chip.css";
 import { useDefaultMessages } from "../util/useDefaultMessages";
@@ -44,7 +45,7 @@ type ChipConfig<AtomsFn extends typeof bentoSprinkles, CustomColor extends strin
   };
 };
 
-const defaultColorsMapping: { [k in DefaultColor]: BentoSprinkles["background"] } = {
+const defaultColorsMapping: Record<DefaultColor, BentoSprinkles["background"]> = {
   grey: "softGrey",
   red: "softRed",
   orange: "softOrange",
@@ -92,3 +93,13 @@ export function createChip<AtomsFn extends typeof bentoSprinkles, CustomColors e
     );
   };
 }
+
+export const defaultChipConfig: ChipConfig<typeof bentoSprinkles, string> = {
+  paddingX: 8,
+  paddingY: 4,
+  labelSize: "small",
+  closeIcon: IconClose,
+  closeIconSize: 8,
+  internalSpacing: 8,
+  customColors: {},
+};

Diff for: stories/index.tsx

@@ -26,7 +26,7 @@ import {
   createFeedback,
   IllustrationNegative,
   IllustrationPositive,
-  IconClose,
+  defaultChipConfig,
 } from "../src";
 import { sprinkles } from "./sprinkles.css";
 
@@ -52,12 +52,7 @@ export const Link = createLink();
 export const Breadcrumb = createBreadcrumb(Link);
 export const Modal = createModal(Actions);
 export const Chip = createChip(Box, {
-  paddingX: 8,
-  paddingY: 4,
-  labelSize: "small",
-  closeIcon: IconClose,
-  closeIconSize: 8,
-  internalSpacing: 8,
+  ...defaultChipConfig,
   customColors: {
     custom: "customColor1",
   },