@cleartrip/ct-design-chip 4.0.0 → 5.0.0

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Chip/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAe,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEpE,eAAO,MAAM,qBAAqB,UAAW,KAAK;;;;;;CAUjD,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,KAAK,eAAe,MAAM;;;;;;CAUtE,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,KAAK,WAAW,eAAe;;;;;;CAW1E,CAAC;AAEF,eAAO,MAAM,iBAAiB;gBAKhB,OAAO;gBACP,OAAO;WACZ,KAAK;YAWb,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAwB,KAAK;;;CAIzD,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAKxB,KAAK;UACN,GAAG,YAAY,EAAE;iBACV,OAAO;;;;;;;;;;;;;;;;CAuBrB,CAAC;AAEF,eAAO,MAAM,aAAa;gBASZ,OAAO;gBACP,OAAO;iBACN,OAAO;WACb,KAAK;iBACC,MAAM;aACV,eAAe;UAClB,GAAG,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BxB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Chip/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA2DD,QAAA,MAAM,aAAa,GAAI,YAAY,OAAO,KAAG,eAE5C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kDAA0D,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpG,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/type.d.ts

@@ -1,31 +1,48 @@
-import { ReactNode } from 'react';
-import { ChipStyleConfigProps, IconPosition } from '@cleartrip/ct-design-types';
-export declare enum ChipVariant {
-    DEFAULT = "default",
-    DISABLED = "disabled"
-}
-export declare enum ChipSizeType {
-    SMALL = "sm",
-    MEDIUM = "md"
-}
+import type { ReactNode, SVGProps } from 'react';
+import type { IconPosition, Styles } from '@cleartrip/ct-design-types';
+import type { TypographyStyleConfigProps, TypographyVariantType } from '@cleartrip/ct-design-typography';
+import { ChipVariant, ChipSizeType } from './constants';
 export type ChipVariantType = `${ChipVariant}`;
-export interface ChipProps {
+export type ChipSize = `${ChipSizeType}`;
+export type ChipBorderWidth = 'none' | 'sm' | 'md' | 'lg';
+export interface IChipStyleConfig {
+    relativeContainer?: Styles[];
+    root?: Styles[];
+    chipContainer?: Styles[];
+    prefixIconContainer?: Styles[];
+    suffixIconContainer?: Styles[];
+    topIconContainer?: Styles[];
+    labelContainer?: Styles[];
+    labelTypography?: TypographyStyleConfigProps;
+    crossContainer?: Styles[];
+    counterContainer?: Styles[];
+    counter?: Styles[];
+    counterTypography?: TypographyStyleConfigProps;
+}
+export interface IChipProps {
     id?: string;
+    crossIconProps?: SVGProps<SVGSVGElement>;
     label?: ReactNode | string;
+    labelVariant?: TypographyVariantType;
     showIcon?: boolean;
     iconPosition?: `${IconPosition}`;
     Icon?: ReactNode;
+    prefixIcon?: ReactNode;
+    suffixIcon?: ReactNode;
+    topIcon?: ReactNode;
     showCounter?: boolean;
     count?: number;
     isDismissible?: boolean;
     isSelected?: boolean;
     isDisabled?: boolean;
+    disabled?: boolean;
     onClick?: () => void;
     onDismiss?: () => void;
-    borderWidth?: 'none' | 'sm' | 'md' | 'lg';
-    backgroundColor?: string;
+    borderWidth?: ChipBorderWidth;
     variant?: ChipVariantType;
-    size?: `${ChipSizeType}`;
-    styleConfig?: ChipStyleConfigProps;
+    size?: ChipSize;
+    styleConfig?: IChipStyleConfig;
+    showShimmerAnimation?: boolean;
 }
+export type ChipProps = IChipProps;
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Chip/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEhF,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,YAAY;IACtB,KAAK,OAAO;IACZ,MAAM,OAAO;CACd;AAED,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,WAAW,SAAS;IAIxB,EAAE,CAAC,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAK3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAKjC,IAAI,CAAC,EAAE,SAAS,CAAC;IAKjB,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAKvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1C,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAKzB,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACpC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Chip/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAEzG,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,GAAG,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,QAAQ,GAAG,GAAG,YAAY,EAAE,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAK1D,MAAM,WAAW,gBAAgB;IAE/B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE7B,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE/B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE/B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAE7C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,iBAAiB,CAAC,EAAE,0BAA0B,CAAC;CAChD;AAED,MAAM,WAAW,UAAU;IAEzB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,cAAc,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAGzC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAG3B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAGrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,YAAY,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAGjC,IAAI,CAAC,EAAE,SAAS,CAAC;IAGjB,UAAU,CAAC,EAAE,SAAS,CAAC;IAGvB,UAAU,CAAC,EAAE,SAAS,CAAC;IAGvB,OAAO,CAAC,EAAE,SAAS,CAAC;IAGpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAGrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAGvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAG9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAG1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAG/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAQD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC"}

package/package.json

@@ -1,31 +1,53 @@
 {
   "name": "@cleartrip/ct-design-chip",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Chip Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-chip.cjs.js",
+  "main": "./dist/ct-design-chip.cjs.js",
+  "react-native": "src/index.ts",
   "jsnext:main": "dist/ct-design-chip.esm.js",
   "module": "dist/ct-design-chip.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-chip.esm.js",
+      "default": "./dist/ct-design-chip.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-chip.esm.js": "./dist/ct-design-chip.browser.esm.js",
     "./dist/ct-design-chip.cjs.js": "./dist/ct-design-chip.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-container": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-icons": "26.0.0",
-    "@cleartrip/ct-design-typography": "4.0.0"
+    "@cleartrip/ct-design-style-manager": "5.0.0",
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-icons": "5.0.0",
+    "@cleartrip/ct-design-typography": "5.0.0",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-conditional-wrap": "5.0.0",
+    "@cleartrip/ct-design-event-propagation": "5.0.0"
+  },
+  "devDependencies": {
+    "@cleartrip/ct-design-types": "5.0.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-native": ">=0.68.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -36,6 +58,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/AnimatedContainer.native.tsx

@@ -0,0 +1,53 @@
+import { useEffect, type ReactNode } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+const styledClass = makeStyles(() => ({
+  root: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+}));
+
+const DURATION_MS = 5000;
+const REPEAT_COUNT = 2;
+
+export const AnimatedContainer = ({ children }: { children: ReactNode }) => {
+  const progress = useSharedValue(0);
+  const measuredWidth = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, { duration: DURATION_MS, easing: Easing.linear }), REPEAT_COUNT, false);
+  }, [progress]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const w = Math.max(measuredWidth.value, 1);
+    const p = progress.value;
+    const translateX = -0.5 * w + p * 4.5 * w;
+    const opacity = p <= 0.8 ? 1 + ((0.3 - 1) * p) / 0.8 : 0.3 + ((0 - 0.3) * (p - 0.8)) / 0.2;
+
+    return {
+      transform: [{ translateX }],
+      opacity,
+    };
+  });
+
+  return (
+    <Animated.View
+      onLayout={(e: LayoutChangeEvent) => {
+        measuredWidth.value = e.nativeEvent.layout.width;
+      }}
+      style={[styledClass.root, animatedStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+export default AnimatedContainer;

package/src/AnimatedContainer.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @emotion/react */
+import { css, keyframes } from '@emotion/css';
+import type { ReactNode } from 'react';
+
+const breatheAnimation = keyframes`
+  0% { transform: translateX(-50%); opacity:1}
+  80% {opacity: 0.3}
+  100% { transform: translateX(400%); opacity:0}
+`;
+
+const animatedContainerStyles = css`
+  position: absolute;
+  display: inline-flex;
+  top: -14px;
+  left: 0;
+  opacity: 5;
+  overflow: hidden;
+  animation-name: ${breatheAnimation};
+  animation-duration: 5s;
+  animation-iteration-count: 2;
+  animation-fill-mode: forwards;
+`;
+
+export const AnimatedContainer = ({ children }: { children: ReactNode }) => (
+  <div className={animatedContainerStyles}>{children}</div>
+);
+
+export default AnimatedContainer;

package/src/Chip.native.tsx

@@ -0,0 +1,253 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { Pressable } from 'react-native';
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { Typography, TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+import { Cross } from '@cleartrip/ct-design-icons';
+import { getChipStyles, getLabelColor } from './style';
+import { IChipProps } from './type';
+import { Styles } from '@cleartrip/ct-design-types';
+import { useTheme } from '@cleartrip/ct-design-theme';
+
+const staticChipStyles = makeStyles((theme) => {
+  return {
+    relativeContainer: {
+      position: 'relative',
+    },
+    root: {
+      display: 'flex',
+      alignSelf: 'baseline',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme?.spacing[2],
+      paddingHorizontal: theme?.spacing[2],
+    },
+    prefixIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    suffixIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    topIconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    chipCountRoot: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme?.color.chip.selectedPrimaryLabel,
+      height: theme?.size[4],
+      minWidth: theme?.size[4],
+      borderRadius: 50,
+      borderColor: '#fff',
+      top: 1,
+      borderWidth: theme?.border.width.sm,
+      paddingHorizontal: theme?.spacing[1],
+      marginLeft: -theme?.spacing[2],
+    },
+    labelContainerStyles: {
+      paddingLeft: theme?.spacing[1],
+      paddingRight: theme?.spacing[1],
+    },
+  };
+});
+
+const ChipCounter = ({
+  count,
+  styleConfig,
+}: {
+  count: number;
+  styleConfig: {
+    root: Styles[];
+    typography: TypographyStyleConfigProps;
+  };
+}) => {
+  const { root = [], typography = {} } = styleConfig || {};
+  return (
+    <Container
+      styleConfig={{
+        root: [staticChipStyles.chipCountRoot, ...root],
+      }}
+    >
+      <Typography variant='TAG' color='neutral' styleConfig={typography}>
+        {count}
+      </Typography>
+    </Container>
+  );
+};
+
+const Chip = forwardRef(
+  (
+    {
+      id,
+      label,
+      onClick,
+      size = 'sm',
+      labelVariant = 'B2',
+      isSelected = false,
+      disabled = false,
+      prefixIcon,
+      suffixIcon,
+      topIcon,
+      styleConfig,
+      showCounter,
+      count = 0,
+      isDismissible = false,
+      onDismiss,
+    }: IChipProps,
+    ref: React.ForwardedRef<ContainerRef>,
+  ) => {
+    const {
+      relativeContainer: customRelativeContainerStyles = [],
+      root: customRootStyles = [],
+      labelContainer: customLabelContainerStyles = [],
+      prefixIconContainer: customPrefixIconContainerStyles = [],
+      suffixIconContainer: customSuffixIconContainerStyles = [],
+      topIconContainer: customTopIconContainerStyles = [],
+      counter: customChipCountRootStyles = [],
+      counterTypography: customChipCountTypographyStyles = {},
+    } = styleConfig || {};
+
+    const theme = useTheme();
+
+    const labelColor = useMemo(() => {
+      return getLabelColor(disabled);
+    }, [disabled]);
+
+    const isTopIcon = Boolean(topIcon);
+
+    const chipStyles = useStyles(
+      (theme) => {
+        return {
+          root: getChipStyles({
+            theme,
+            size,
+            isDisabled: disabled,
+            isSelected,
+            topIcon: isTopIcon,
+          }),
+        };
+      },
+      [size, isSelected, disabled, isTopIcon],
+    );
+
+    const chipStylesForTopIcon = useStyles(
+      (theme) => {
+        if (topIcon) {
+          return {
+            root: {
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              gap: theme?.spacing[0],
+              borderRadius: theme?.border.radius[16],
+            },
+          };
+        }
+        return {};
+      },
+      [topIcon],
+    );
+
+    const mergedEvents = useMergeEvents({ onClick: [onClick] });
+
+    return (
+      <Conditional
+        condition={!!onClick}
+        wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
+      >
+        <Container
+          styleConfig={{
+            root: [staticChipStyles?.relativeContainer, ...customRelativeContainerStyles],
+          }}
+          id={id}
+        >
+          <Container
+            ref={ref}
+            onClick={onClick ? onClick : undefined}
+            styleConfig={{
+              root: [staticChipStyles?.root, chipStyles.root, chipStylesForTopIcon?.root, ...customRootStyles],
+            }}
+          >
+            {!!topIcon && (
+              <Container
+                styleConfig={{
+                  root: [staticChipStyles?.topIconContainer, ...customTopIconContainerStyles],
+                }}
+              >
+                {topIcon}
+              </Container>
+            )}
+            {!!prefixIcon && (
+              <Container
+                styleConfig={{
+                  root: [staticChipStyles?.prefixIconContainer, ...customPrefixIconContainerStyles],
+                }}
+              >
+                {prefixIcon}
+              </Container>
+            )}
+            {!!label && (
+              <Container
+                styleConfig={{
+                  root: [staticChipStyles?.labelContainerStyles, ...customLabelContainerStyles],
+                }}
+              >
+                {typeof label === 'string' ? (
+                  <Typography lineClamp={1} variant={labelVariant} color={labelColor}>
+                    {label}
+                  </Typography>
+                ) : (
+                  label
+                )}
+              </Container>
+            )}
+            {showCounter && !!count && (
+              <ChipCounter
+                count={count}
+                styleConfig={{ root: customChipCountRootStyles, typography: customChipCountTypographyStyles }}
+              />
+            )}
+            {!!suffixIcon && (
+              <Container
+                styleConfig={{
+                  root: [staticChipStyles?.suffixIconContainer, ...customSuffixIconContainerStyles],
+                }}
+              >
+                {suffixIcon}
+              </Container>
+            )}
+            {isDismissible && (
+              <Pressable
+                onPress={() => {
+                  onDismiss?.();
+                }}
+              >
+                <Cross
+                  height={16}
+                  width={16}
+                  crossColor={
+                    isSelected ? theme.color.chip.selectedPrimaryLabel : theme.color.chip.nonSelectedPrimaryLabel
+                  }
+                />
+              </Pressable>
+            )}
+          </Container>
+        </Container>
+      </Conditional>
+    );
+  },
+);
+
+Chip.displayName = 'Chip';
+
+export default Chip;