diff --git a/.changeset/two-cows-reply.md b/.changeset/two-cows-reply.md
new file mode 100644
index 00000000000..dd9b01aff66
--- /dev/null
+++ b/.changeset/two-cows-reply.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': patch
+---
+
+fix(blade): allow consumers to align chips in chipgroup
diff --git a/packages/blade/src/components/Chip/AnimatedChip.web.tsx b/packages/blade/src/components/Chip/AnimatedChip.web.tsx
index 724fb9f7c93..f65897bc7ba 100644
--- a/packages/blade/src/components/Chip/AnimatedChip.web.tsx
+++ b/packages/blade/src/components/Chip/AnimatedChip.web.tsx
@@ -14,7 +14,7 @@ const AnimatedChip = styled(BaseBox)<AnimatedChipProps>((props) => {
   );
   return {
     ...getAnimatedChipStyles(props),
-    width: 'fit-content',
+    width: '100%',
     transform: `scale(${props.isPressed ? '0.92' : '1'})`,
     transitionDuration: duration,
     transitionTimingFunction: easing,
diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx
index 01fa949c773..38b217da706 100644
--- a/packages/blade/src/components/Chip/Chip.tsx
+++ b/packages/blade/src/components/Chip/Chip.tsx
@@ -39,7 +39,19 @@ type OnChange = ({
 }) => void;
 
 const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
-  { isDisabled, value, children, icon: Icon, color, testID, _motionMeta, ...rest },
+  {
+    isDisabled,
+    value,
+    children,
+    icon: Icon,
+    color,
+    testID,
+    _motionMeta,
+    width,
+    maxWidth,
+    minWidth,
+    ...rest
+  },
   ref,
 ) => {
   const { theme } = useTheme();
@@ -72,7 +84,6 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
   const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;
   const _size = groupProps?.size || 'small';
   const chipColor = color ?? groupProps?.color ?? 'primary';
-
   const handleChange: OnChange = ({ isChecked, value }) => {
     if (isChecked) {
       groupProps?.state?.addValue(value!);
@@ -147,6 +158,9 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
       {...makeAnalyticsAttribute(rest)}
       display={(isReactNative() ? 'flex' : 'inline-flex') as never}
       ref={getOuterMotionRef({ _motionMeta, ref })}
+      width={width}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
     >
       <SelectorLabel
         componentName={MetaConstants.ChipLabel}
@@ -158,9 +172,12 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
         onKeyDown={handleKeyboardPressedIn}
         onKeyUp={handleKeyboardPressedOut}
         inputProps={isReactNative() ? inputProps : {}}
-        style={{ cursor: _isDisabled ? 'not-allowed' : 'pointer' }}
+        style={{
+          cursor: _isDisabled ? 'not-allowed' : 'pointer',
+          width: '100%',
+        }}
       >
-        <BaseBox display="flex" flexDirection="column">
+        <BaseBox display="flex" flexDirection="column" width="100%">
           <BaseBox display="flex" alignItems="center" flexDirection="row">
             <SelectorInput
               hoverTokens={getChipInputHoverTokens(chipColor)}
@@ -201,6 +218,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
                 }
                 height={makeSize(chipHeightTokens[_size])}
                 gap="spacing.3"
+                width="100%"
               >
                 {Icon ? (
                   <BaseBox display="flex">
diff --git a/packages/blade/src/components/Chip/ChipGroup.stories.tsx b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
index 2485699e105..a82899b937b 100644
--- a/packages/blade/src/components/Chip/ChipGroup.stories.tsx
+++ b/packages/blade/src/components/Chip/ChipGroup.stories.tsx
@@ -727,3 +727,82 @@ chipRef.parameters = {
     exclude: ['icon'],
   },
 };
+
+export const CutomLayoutInChipGroup: StoryFn<typeof ChipGroupComponent> = () => {
+  const chipArray = [
+    {
+      value: '100',
+      label: '₹100',
+    },
+    {
+      value: '500',
+      label: '₹500',
+    },
+    {
+      value: '1000',
+      label: '₹1000',
+    },
+    {
+      value: '2000',
+      label: '₹2000',
+    },
+    {
+      value: '5000',
+      label: '₹5000',
+    },
+    {
+      value: '10000',
+      label: '₹10000',
+    },
+    {
+      value: '20000',
+      label: '₹20000',
+    },
+    {
+      value: '50000',
+      label: '₹50000',
+    },
+    {
+      value: '100000',
+      label: '₹100000',
+    },
+    {
+      value: '200000',
+      label: '₹200000',
+    },
+  ];
+
+  return (
+    <Box gap="spacing.3" display="flex" flexDirection="column">
+      <ChipGroupComponent
+        selectionType="single"
+        label="Select a gift card with value (without custom chipGroupContainerLayout)"
+      >
+        {chipArray.map((chip, index) => (
+          <ChipComponent key={index} value={chip.value}>
+            {chip.label}
+          </ChipComponent>
+        ))}
+      </ChipGroupComponent>
+      <ChipGroupComponent
+        selectionType="single"
+        label="Select a gift card with value (custom chipGroupContainerLayout)"
+      >
+        <Box
+          display="grid"
+          gridTemplateColumns="repeat(3, 1fr)"
+          gridTemplateRows="repeat(3, minmax(0, 30px))"
+          gap="spacing.3"
+        >
+          {chipArray.map((chip, index) => (
+            <ChipComponent key={index} value={chip.value} width="100%">
+              {chip.label}
+            </ChipComponent>
+          ))}
+        </Box>
+      </ChipGroupComponent>
+    </Box>
+  );
+};
+
+CutomLayoutInChipGroup.storyName = 'ChipGroup with Custom layout';
diff --git a/packages/blade/src/components/Chip/ChipGroup.tsx b/packages/blade/src/components/Chip/ChipGroup.tsx
index af2b0504781..83fb0c5f04e 100644
--- a/packages/blade/src/components/Chip/ChipGroup.tsx
+++ b/packages/blade/src/components/Chip/ChipGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { chipGroupGapTokens, chipGroupLabelSizeTokens } from './chipTokens';
+import { chipGroupLabelSizeTokens, chipGroupGapTokens } from './chipTokens';
 import { ChipGroupProvider } from './ChipGroupContext';
 import { useChipGroup } from './useChipGroup';
 import type { ChipGroupProps } from './types';
@@ -96,18 +96,15 @@ const _ChipGroup = (
             <VisuallyHidden>
               <Text>{accessibilityLabel}</Text>
             </VisuallyHidden>
-            <BaseBox display="flex" flexDirection="row" flexWrap="wrap">
-              {React.Children.map(children, (child, index) => {
-                return (
-                  <BaseBox
-                    key={index}
-                    marginBottom={chipGroupGapTokens[size].bottom}
-                    marginRight={chipGroupGapTokens[size].right}
-                  >
-                    {child}
-                  </BaseBox>
-                );
-              })}
+            <BaseBox
+              display="flex"
+              flexDirection="row"
+              flexWrap="wrap"
+              rowGap={chipGroupGapTokens[size].bottom}
+              columnGap={chipGroupGapTokens[size].right}
+              marginBottom={chipGroupGapTokens[size].bottom}
+            >
+              {children}
             </BaseBox>
             <FormHint
               size={chipGroupLabelSizeTokens[size]}
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
index c4e0e4a8441..5c20cc12202 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
@@ -105,223 +105,220 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
           </Text>
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-48-helptext-49"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": true,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityDescribedBy="radio-48-helptext-49"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": true,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.disabled"
+                    isDisabled={true}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(214, 40%, 92%, 1)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="transparent"
                       borderColor="interactive.border.gray.disabled"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={true}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
                             "borderColor": "hsla(214, 40%, 92%, 1)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="transparent"
-                        borderColor="interactive.border.gray.disabled"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={true}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.disabled"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
-                              "borderColor": "hsla(214, 40%, 92%, 1)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 20%, 52%, 0.32)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.disabled"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 20%, 52%, 0.32)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
-                      </View>
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -329,208 +326,200 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-50-helptext-51"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityDescribedBy="radio-50-helptext-51"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
-                      </View>
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -649,223 +638,220 @@ exports[`<Chip /> should render chip 1`] = `
           </Text>
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-1-helptext-2"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityDescribedBy="radio-1-helptext-2"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
-                      </View>
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -873,208 +859,200 @@ exports[`<Chip /> should render chip 1`] = `
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-3-helptext-4"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityDescribedBy="radio-3-helptext-4"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
-                      </View>
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1193,323 +1171,320 @@ exports[`<Chip /> should render chip with icon 1`] = `
           </Text>
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-12-helptext-13"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityDescribedBy="radio-12-helptext-13"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
                       <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
                               "display": "flex",
                             },
                           ]
                         }
                       >
-                        <View
-                          data-blade-component="base-box"
-                          display="flex"
+                        <RNSVGSvgView
+                          accessibilityElementsHidden={true}
+                          align="xMidYMid"
+                          bbHeight="12px"
+                          bbWidth="12px"
+                          data-blade-component="icon"
+                          fill="none"
+                          focusable={false}
+                          height="12px"
+                          importantForAccessibility="no-hide-descendants"
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
                           style={
                             [
                               {
-                                "display": "flex",
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              [
+                                {},
+                              ],
+                              {
+                                "flex": 0,
+                                "height": 12,
+                                "width": 12,
                               },
                             ]
                           }
+                          vbHeight={24}
+                          vbWidth={24}
+                          width="12px"
                         >
-                          <RNSVGSvgView
-                            accessibilityElementsHidden={true}
-                            align="xMidYMid"
-                            bbHeight="12px"
-                            bbWidth="12px"
-                            data-blade-component="icon"
-                            fill="none"
-                            focusable={false}
-                            height="12px"
-                            importantForAccessibility="no-hide-descendants"
-                            meetOrSlice={0}
-                            minX={0}
-                            minY={0}
-                            style={
+                          <RNSVGGroup
+                            fill={null}
+                            propList={
                               [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "borderWidth": 0,
-                                },
-                                [
-                                  {},
-                                ],
-                                {
-                                  "flex": 0,
-                                  "height": 12,
-                                  "width": 12,
-                                },
+                                "fill",
                               ]
                             }
-                            vbHeight={24}
-                            vbWidth={24}
-                            width="12px"
                           >
-                            <RNSVGGroup
-                              fill={null}
+                            <RNSVGPath
+                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
+                                }
+                              }
                               propList={
                                 [
                                   "fill",
                                 ]
                               }
-                            >
-                              <RNSVGPath
-                                d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
-                                }
-                                propList={
-                                  [
-                                    "fill",
-                                  ]
-                                }
-                              />
-                              <RNSVGPath
-                                d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
-                                }
-                                propList={
-                                  [
-                                    "fill",
-                                  ]
-                                }
-                              />
-                              <RNSVGPath
-                                clipRule={0}
-                                d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
+                            />
+                            <RNSVGPath
+                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
                                 }
-                                fillRule={0}
-                                propList={
-                                  [
-                                    "fill",
-                                    "fillRule",
-                                  ]
+                              }
+                              propList={
+                                [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              clipRule={0}
+                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
                                 }
-                              />
-                            </RNSVGGroup>
-                          </RNSVGSvgView>
-                        </View>
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
+                              }
+                              fillRule={0}
+                              propList={
+                                [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
                       </View>
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
+                            },
+                          ]
+                        }
+                      >
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1517,308 +1492,300 @@ exports[`<Chip /> should render chip with icon 1`] = `
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-14-helptext-15"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityDescribedBy="radio-14-helptext-15"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
                       <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
                         data-blade-component="base-box"
                         display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
                               "display": "flex",
                             },
                           ]
                         }
                       >
-                        <View
-                          data-blade-component="base-box"
-                          display="flex"
+                        <RNSVGSvgView
+                          accessibilityElementsHidden={true}
+                          align="xMidYMid"
+                          bbHeight="12px"
+                          bbWidth="12px"
+                          data-blade-component="icon"
+                          fill="none"
+                          focusable={false}
+                          height="12px"
+                          importantForAccessibility="no-hide-descendants"
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
                           style={
                             [
                               {
-                                "display": "flex",
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              [
+                                {},
+                              ],
+                              {
+                                "flex": 0,
+                                "height": 12,
+                                "width": 12,
                               },
                             ]
                           }
+                          vbHeight={24}
+                          vbWidth={24}
+                          width="12px"
                         >
-                          <RNSVGSvgView
-                            accessibilityElementsHidden={true}
-                            align="xMidYMid"
-                            bbHeight="12px"
-                            bbWidth="12px"
-                            data-blade-component="icon"
-                            fill="none"
-                            focusable={false}
-                            height="12px"
-                            importantForAccessibility="no-hide-descendants"
-                            meetOrSlice={0}
-                            minX={0}
-                            minY={0}
-                            style={
+                          <RNSVGGroup
+                            fill={null}
+                            propList={
                               [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "borderWidth": 0,
-                                },
-                                [
-                                  {},
-                                ],
-                                {
-                                  "flex": 0,
-                                  "height": 12,
-                                  "width": 12,
-                                },
+                                "fill",
                               ]
                             }
-                            vbHeight={24}
-                            vbWidth={24}
-                            width="12px"
                           >
-                            <RNSVGGroup
-                              fill={null}
+                            <RNSVGPath
+                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
+                                }
+                              }
                               propList={
                                 [
                                   "fill",
                                 ]
                               }
-                            >
-                              <RNSVGPath
-                                d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
-                                }
-                                propList={
-                                  [
-                                    "fill",
-                                  ]
-                                }
-                              />
-                              <RNSVGPath
-                                d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
-                                }
-                                propList={
-                                  [
-                                    "fill",
-                                  ]
-                                }
-                              />
-                              <RNSVGPath
-                                clipRule={0}
-                                d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                                fill={
-                                  {
-                                    "payload": 4282406509,
-                                    "type": 0,
-                                  }
+                            />
+                            <RNSVGPath
+                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
                                 }
-                                fillRule={0}
-                                propList={
-                                  [
-                                    "fill",
-                                    "fillRule",
-                                  ]
+                              }
+                              propList={
+                                [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              clipRule={0}
+                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                              fill={
+                                {
+                                  "payload": 4282406509,
+                                  "type": 0,
                                 }
-                              />
-                            </RNSVGGroup>
-                          </RNSVGSvgView>
-                        </View>
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
+                              }
+                              fillRule={0}
+                              propList={
+                                [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
                       </View>
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
+                        style={
+                          [
+                            {
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
+                            },
+                          ]
+                        }
+                      >
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1937,223 +1904,220 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
           </Text>
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-39-helptext-40"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": true,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityDescribedBy="radio-39-helptext-40"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": true,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.disabled"
+                    isDisabled={true}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(214, 40%, 92%, 1)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="transparent"
                       borderColor="interactive.border.gray.disabled"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={true}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 0)",
                             "borderColor": "hsla(214, 40%, 92%, 1)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="transparent"
-                        borderColor="interactive.border.gray.disabled"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={true}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.disabled"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 0)",
-                              "borderColor": "hsla(214, 40%, 92%, 1)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 20%, 52%, 0.32)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.disabled"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 20%, 52%, 0.32)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
-                      </View>
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -2161,208 +2125,200 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-41-helptext-42"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityDescribedBy="radio-41-helptext-42"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
-                      </View>
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
index bcf1fad3d18..39cd293b920 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
+exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gvlLGk"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div>"`;
 
 exports[`<Chip /> should render with icon 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -24,20 +24,30 @@ exports[`<Chip /> should render with icon 2`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -77,6 +87,7 @@ exports[`<Chip /> should render with icon 2`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -118,9 +129,7 @@ exports[`<Chip /> should render with icon 2`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -146,7 +155,7 @@ exports[`<Chip /> should render with icon 2`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -343,173 +352,163 @@ exports[`<Chip /> should render with icon 2`] = `
         >
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor:pointer;width:100%"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor:pointer"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-1-helptext-2"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-1-helptext-2"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c11 c12"
+                        class="c13"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c13"
-                          data-blade-component="base-box"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="Svgweb__StyledSvg-vcmjs8-0"
-                            data-blade-component="icon"
-                            fill="none"
-                            height="12px"
-                            viewBox="0 0 24 24"
-                            width="12px"
-                          >
-                            <path
-                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <p
-                          class="c14"
-                          data-blade-component="text"
+                        <svg
+                          aria-hidden="true"
+                          class="Svgweb__StyledSvg-vcmjs8-0"
+                          data-blade-component="icon"
+                          fill="none"
+                          height="12px"
+                          viewBox="0 0 24 24"
+                          width="12px"
                         >
-                          Apple
-                        </p>
+                          <path
+                            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </div>
+                      <p
+                        class="c14"
+                        data-blade-component="text"
+                      >
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor:pointer;width:100%"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor:pointer"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-3-helptext-4"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-3-helptext-4"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c11 c12"
+                        class="c13"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c13"
-                          data-blade-component="base-box"
+                        <svg
+                          aria-hidden="true"
+                          class="Svgweb__StyledSvg-vcmjs8-0"
+                          data-blade-component="icon"
+                          fill="none"
+                          height="12px"
+                          viewBox="0 0 24 24"
+                          width="12px"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="Svgweb__StyledSvg-vcmjs8-0"
-                            data-blade-component="icon"
-                            fill="none"
-                            height="12px"
-                            viewBox="0 0 24 24"
-                            width="12px"
-                          >
-                            <path
-                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <p
-                          class="c14"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
+                          <path
+                            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </div>
+                      <p
+                        class="c14"
+                        data-blade-component="text"
+                      >
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
index a4a32e803ca..f888a4746a9 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
@@ -22,20 +22,30 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -75,6 +85,7 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -109,9 +120,7 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -137,7 +146,7 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -333,111 +342,101 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
         >
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-analytics-chip="apple"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-analytics-chip="apple"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-234-helptext-235"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-234-helptext-235"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c11 c12"
-                        data-blade-component="base-box"
+                      <p
+                        class="c13"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c13"
-                          data-blade-component="text"
-                        >
-                          Apple
-                        </p>
-                      </div>
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-analytics-chip="mango"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-analytics-chip="mango"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-236-helptext-237"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-236-helptext-237"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c11 c12"
-                        data-blade-component="base-box"
+                      <p
+                        class="c13"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c13"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
-                      </div>
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
@@ -468,20 +467,30 @@ exports[`<Chip /> should render chip 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -521,6 +530,7 @@ exports[`<Chip /> should render chip 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -555,9 +565,7 @@ exports[`<Chip /> should render chip 1`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -583,7 +591,7 @@ exports[`<Chip /> should render chip 1`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -778,109 +786,99 @@ exports[`<Chip /> should render chip 1`] = `
         >
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-1-helptext-2"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-1-helptext-2"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c11 c12"
-                        data-blade-component="base-box"
+                      <p
+                        class="c13"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c13"
-                          data-blade-component="text"
-                        >
-                          Apple
-                        </p>
-                      </div>
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-3-helptext-4"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-3-helptext-4"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c11 c12"
-                        data-blade-component="base-box"
+                      <p
+                        class="c13"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c13"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
-                      </div>
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
@@ -911,20 +909,30 @@ exports[`<Chip /> should render chip with icon 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -964,6 +972,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -1005,9 +1014,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -1033,7 +1040,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1228,173 +1235,163 @@ exports[`<Chip /> should render chip with icon 1`] = `
         >
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-12-helptext-13"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-12-helptext-13"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c11 c12"
+                        class="c13"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c13"
-                          data-blade-component="base-box"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="Svgweb__StyledSvg-vcmjs8-0"
-                            data-blade-component="icon"
-                            fill="none"
-                            height="12px"
-                            viewBox="0 0 24 24"
-                            width="12px"
-                          >
-                            <path
-                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <p
-                          class="c14"
-                          data-blade-component="text"
+                        <svg
+                          aria-hidden="true"
+                          class="Svgweb__StyledSvg-vcmjs8-0"
+                          data-blade-component="icon"
+                          fill="none"
+                          height="12px"
+                          viewBox="0 0 24 24"
+                          width="12px"
                         >
-                          Apple
-                        </p>
+                          <path
+                            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </div>
+                      <p
+                        class="c14"
+                        data-blade-component="text"
+                      >
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-14-helptext-15"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-14-helptext-15"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
                       <div
-                        class="c11 c12"
+                        class="c13"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c13"
-                          data-blade-component="base-box"
+                        <svg
+                          aria-hidden="true"
+                          class="Svgweb__StyledSvg-vcmjs8-0"
+                          data-blade-component="icon"
+                          fill="none"
+                          height="12px"
+                          viewBox="0 0 24 24"
+                          width="12px"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="Svgweb__StyledSvg-vcmjs8-0"
-                            data-blade-component="icon"
-                            fill="none"
-                            height="12px"
-                            viewBox="0 0 24 24"
-                            width="12px"
-                          >
-                            <path
-                              d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
-                              data-blade-component="svg-path"
-                              fill="hsla(211, 26%, 34%, 1)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <p
-                          class="c14"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
+                          <path
+                            d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                          />
+                          <path
+                            clip-rule="evenodd"
+                            d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
+                            data-blade-component="svg-path"
+                            fill="hsla(211, 26%, 34%, 1)"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
                       </div>
+                      <p
+                        class="c14"
+                        data-blade-component="text"
+                      >
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
@@ -1425,20 +1422,30 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1478,6 +1485,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,0);
   border-radius: 9999px;
@@ -1511,6 +1519,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -1545,9 +1554,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -1583,9 +1590,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -1619,7 +1624,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1925,110 +1930,100 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
         >
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: not-allowed; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: not-allowed;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-30-helptext-31"
+                    aria-disabled="true"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c8"
+                    disabled=""
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c7"
+                    class="c9 c10"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-30-helptext-31"
-                      aria-disabled="true"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c8"
-                      disabled=""
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c9 c10"
+                      class="c11 c12"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c11 c12"
-                        data-blade-component="base-box"
+                      <p
+                        class="c13"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c13"
-                          data-blade-component="text"
-                        >
-                          Apple
-                        </p>
-                      </div>
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c4"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c5"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c6"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c7"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-32-helptext-33"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c14"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c7"
+                    class="c15 c16"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-32-helptext-33"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c14"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c15 c16"
+                      class="c17 c18"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c17 c18"
-                        data-blade-component="base-box"
+                      <p
+                        class="c19"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c19"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
-                      </div>
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
index b8c53c3825c..3e659411475 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
@@ -231,222 +231,219 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
           />
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="checkbox"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="checkbox"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
-                      </View>
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -454,207 +451,199 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="checkbox"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="checkbox"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
-                      </View>
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -662,207 +651,199 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="checkbox"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="orange"
             >
               <View
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="checkbox"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="orange"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Orange
-                        </Text>
-                      </View>
+                        Orange
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1108,223 +1089,220 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
           />
         </View>
         <View
+          columnGap="spacing.3"
           data-blade-component="base-box"
           display="flex"
           flexDirection="row"
           flexWrap="wrap"
+          rowGap="spacing.3"
           style={
             [
               {
+                "columnGap": 8,
                 "display": "flex",
                 "flexDirection": "row",
                 "flexWrap": "wrap",
+                "marginBottom": 8,
+                "rowGap": 8,
               },
             ]
           }
         >
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-1-helptext-2"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="apple"
             >
               <View
-                accessibilityDescribedBy="radio-1-helptext-2"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="apple"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Apple
-                        </Text>
-                      </View>
+                        Apple
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1332,208 +1310,200 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-3-helptext-4"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="mango"
             >
               <View
-                accessibilityDescribedBy="radio-3-helptext-4"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="mango"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Mango
-                        </Text>
-                      </View>
+                        Mango
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -1541,208 +1511,200 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
             </View>
           </View>
           <View
-            data-blade-component="base-box"
+            data-blade-component="chip"
+            display="flex"
             style={
               [
                 {
-                  "marginBottom": 8,
-                  "marginRight": 8,
+                  "display": "flex",
                 },
               ]
             }
           >
             <View
-              data-blade-component="chip"
-              display="flex"
+              accessibilityDescribedBy="radio-5-helptext-6"
+              accessibilityInvalid={false}
+              accessibilityRequired={false}
+              accessibilityRole="radio"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": false,
+                  "disabled": false,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
                   {
                     "display": "flex",
+                    "flexDirection": "row",
+                    "marginBottom": 2,
+                    "marginTop": 2,
                   },
                 ]
               }
+              value="orange"
             >
               <View
-                accessibilityDescribedBy="radio-5-helptext-6"
-                accessibilityInvalid={false}
-                accessibilityRequired={false}
-                accessibilityRole="radio"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": false,
-                    "disabled": false,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                data-blade-component="base-box"
+                display="flex"
+                flexDirection="column"
                 style={
                   [
                     {
                       "display": "flex",
-                      "flexDirection": "row",
-                      "marginBottom": 2,
-                      "marginTop": 2,
+                      "flexDirection": "column",
+                      "width": "100%",
                     },
                   ]
                 }
-                value="orange"
+                width="100%"
               >
                 <View
+                  alignItems="center"
                   data-blade-component="base-box"
                   display="flex"
-                  flexDirection="column"
+                  flexDirection="row"
                   style={
                     [
                       {
+                        "alignItems": "center",
                         "display": "flex",
-                        "flexDirection": "column",
+                        "flexDirection": "row",
                       },
                     ]
                   }
                 >
                   <View
-                    alignItems="center"
-                    data-blade-component="base-box"
-                    display="flex"
-                    flexDirection="row"
+                    borderColor="interactive.border.gray.faded"
+                    isDisabled={false}
                     style={
                       [
                         {
                           "alignItems": "center",
+                          "alignSelf": "center",
+                          "backgroundColor": "transparent",
+                          "borderColor": "hsla(211, 20%, 52%, 0.18)",
+                          "borderRadius": 9999,
+                          "borderWidth": 1,
                           "display": "flex",
                           "flexDirection": "row",
+                          "flexWrap": "nowrap",
+                          "justifyContent": "center",
+                          "maxWidth": 280,
+                          "textAlign": "left",
+                          "textOverflow": "ellipsis",
+                        },
+                        {
+                          "transform": [
+                            {
+                              "scale": 1,
+                            },
+                          ],
                         },
                       ]
                     }
                   >
                     <View
+                      alignItems="center"
+                      backgroundColor="surface.background.gray.intense"
                       borderColor="interactive.border.gray.faded"
+                      borderRadius="max"
+                      borderWidth="thinner"
+                      color="primary"
+                      data-blade-component="base-box"
+                      display="flex"
+                      flexDirection="row"
+                      gap="spacing.3"
+                      height="28px"
+                      isChecked={false}
                       isDisabled={false}
+                      justifyContent="center"
+                      overflow="hidden"
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "alignSelf": "center",
-                            "backgroundColor": "transparent",
+                            "backgroundColor": "hsla(0, 0%, 100%, 1)",
                             "borderColor": "hsla(211, 20%, 52%, 0.18)",
                             "borderRadius": 9999,
-                            "borderWidth": 1,
+                            "borderStyle": "solid",
+                            "borderWidth": 0.5,
                             "display": "flex",
                             "flexDirection": "row",
-                            "flexWrap": "nowrap",
+                            "gap": 8,
+                            "height": 28,
                             "justifyContent": "center",
-                            "maxWidth": 280,
-                            "textAlign": "left",
-                            "textOverflow": "ellipsis",
+                            "overflow": "hidden",
+                            "paddingLeft": 12,
+                            "paddingRight": 12,
+                            "width": "100%",
                           },
                           {
-                            "transform": [
-                              {
-                                "scale": 1,
-                              },
-                            ],
+                            "borderColor": "transparent",
+                            "display": "flex",
                           },
                         ]
                       }
+                      width="100%"
                     >
-                      <View
-                        alignItems="center"
-                        backgroundColor="surface.background.gray.intense"
-                        borderColor="interactive.border.gray.faded"
-                        borderRadius="max"
-                        borderWidth="thinner"
-                        color="primary"
-                        data-blade-component="base-box"
-                        display="flex"
-                        flexDirection="row"
-                        gap="spacing.3"
-                        height="28px"
-                        isChecked={false}
-                        isDisabled={false}
-                        justifyContent="center"
-                        overflow="hidden"
+                      <Text
+                        accessible={true}
+                        color="interactive.text.gray.subtle"
+                        data-blade-component="text"
+                        fontFamily="text"
+                        fontSize={100}
+                        fontStyle="normal"
+                        fontWeight="regular"
+                        lineHeight={100}
+                        numberOfLines={1}
                         style={
                           [
                             {
-                              "alignItems": "center",
-                              "backgroundColor": "hsla(0, 0%, 100%, 1)",
-                              "borderColor": "hsla(211, 20%, 52%, 0.18)",
-                              "borderRadius": 9999,
-                              "borderStyle": "solid",
-                              "borderWidth": 0.5,
-                              "display": "flex",
-                              "flexDirection": "row",
-                              "gap": 8,
-                              "height": 28,
-                              "justifyContent": "center",
-                              "overflow": "hidden",
-                              "paddingLeft": 12,
-                              "paddingRight": 12,
-                            },
-                            {
-                              "borderColor": "transparent",
-                              "display": "flex",
+                              "color": "hsla(211, 26%, 34%, 1)",
+                              "fontFamily": "Inter",
+                              "fontSize": 14,
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                              "letterSpacing": 0,
+                              "lineHeight": 20,
+                              "marginBottom": 0,
+                              "marginLeft": 0,
+                              "marginRight": 0,
+                              "marginTop": 0,
+                              "paddingBottom": 0,
+                              "paddingLeft": 0,
+                              "paddingRight": 0,
+                              "paddingTop": 0,
+                              "textDecorationLine": "none",
                             },
                           ]
                         }
                       >
-                        <Text
-                          accessible={true}
-                          color="interactive.text.gray.subtle"
-                          data-blade-component="text"
-                          fontFamily="text"
-                          fontSize={100}
-                          fontStyle="normal"
-                          fontWeight="regular"
-                          lineHeight={100}
-                          numberOfLines={1}
-                          style={
-                            [
-                              {
-                                "color": "hsla(211, 26%, 34%, 1)",
-                                "fontFamily": "Inter",
-                                "fontSize": 14,
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                                "letterSpacing": 0,
-                                "lineHeight": 20,
-                                "marginBottom": 0,
-                                "marginLeft": 0,
-                                "marginRight": 0,
-                                "marginTop": 0,
-                                "paddingBottom": 0,
-                                "paddingLeft": 0,
-                                "paddingRight": 0,
-                                "paddingTop": 0,
-                                "textDecorationLine": "none",
-                              },
-                            ]
-                          }
-                        >
-                          Orange
-                        </Text>
-                      </View>
+                        Orange
+                      </Text>
                     </View>
                   </View>
                 </View>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
index 87d0bad877b..d0196ba6aef 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ChipGroup /> should render with selectionType="single" 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="orange"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Orange</p></div></div></div></div></label></div></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select flowers</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx iuMdod"><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Rose"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Rose</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Sunflower"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Sunflower</p></div></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bjGCyh"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Lily"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD bcnShb"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 iYczQJ cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Lily</p></div></div></div></div></label></div></div></div></div></div></div></div></div>"`;
+exports[`<ChipGroup /> should render with selectionType="single" 1`] = `"<div id="root"><div data-blade-component="box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gvlLGk"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="orange"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Orange</p></div></div></div></div></label></div></div></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="group" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select flowers</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gvlLGk"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Rose"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Rose</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Sunflower"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Sunflower</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="checkbox" role="checkbox" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="Lily"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Lily</p></div></div></div></div></label></div></div></div></div></div></div></div>"`;
 
 exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -24,20 +24,30 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c4.c4.c4.c4.c4 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c5.c5.c5.c5.c5 {
+.c4.c4.c4.c4.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c6.c6.c6.c6.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c7.c7.c7.c7.c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -77,6 +87,7 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -111,9 +122,7 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -139,7 +148,7 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
   transition-duration: 160ms;
 }
 
-.c6.c6.c6.c6.c6 {
+.c5.c5.c5.c5.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -340,162 +349,147 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
           >
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-describedby="radio-1-helptext-2"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="radio"
+                      type="radio"
+                      value="apple"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-describedby="radio-1-helptext-2"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="radio"
-                        type="radio"
-                        value="apple"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Apple
-                          </p>
-                        </div>
+                          Apple
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-describedby="radio-3-helptext-4"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="radio"
+                      type="radio"
+                      value="mango"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-describedby="radio-3-helptext-4"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="radio"
-                        type="radio"
-                        value="mango"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Mango
-                          </p>
-                        </div>
+                          Mango
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-describedby="radio-5-helptext-6"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="radio"
+                      type="radio"
+                      value="orange"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-describedby="radio-5-helptext-6"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="radio"
-                        type="radio"
-                        value="orange"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Orange
-                          </p>
-                        </div>
+                          Orange
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
           </div>
         </div>
@@ -532,159 +526,144 @@ exports[`<ChipGroup /> should render with selectionType="single" 2`] = `
           >
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="checkbox"
+                      type="checkbox"
+                      value="Rose"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="checkbox"
-                        type="checkbox"
-                        value="Rose"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Rose
-                          </p>
-                        </div>
+                          Rose
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="checkbox"
+                      type="checkbox"
+                      value="Sunflower"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="checkbox"
-                        type="checkbox"
-                        value="Sunflower"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Sunflower
-                          </p>
-                        </div>
+                          Sunflower
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
             <div
               class="c4"
-              data-blade-component="base-box"
+              data-blade-component="chip"
             >
-              <div
+              <label
                 class="c5"
-                data-blade-component="chip"
+                data-blade-component="chip-label"
+                style="cursor:pointer;width:100%"
               >
-                <label
+                <div
                   class="c6"
-                  data-blade-component="chip-label"
-                  style="cursor:pointer"
+                  data-blade-component="base-box"
                 >
                   <div
-                    class="c0"
+                    class="c7"
                     data-blade-component="base-box"
                   >
+                    <input
+                      aria-checked="false"
+                      aria-disabled="false"
+                      aria-invalid="false"
+                      aria-required="false"
+                      class="c8"
+                      role="checkbox"
+                      type="checkbox"
+                      value="Lily"
+                    />
                     <div
-                      class="c7"
+                      class="c9 c10"
                       data-blade-component="base-box"
                     >
-                      <input
-                        aria-checked="false"
-                        aria-disabled="false"
-                        aria-invalid="false"
-                        aria-required="false"
-                        class="c8"
-                        role="checkbox"
-                        type="checkbox"
-                        value="Lily"
-                      />
                       <div
-                        class="c9 c10"
+                        class="c11 c12"
                         data-blade-component="base-box"
                       >
-                        <div
-                          class="c11 c12"
-                          data-blade-component="base-box"
+                        <p
+                          class="c13"
+                          data-blade-component="text"
                         >
-                          <p
-                            class="c13"
-                            data-blade-component="text"
-                          >
-                            Lily
-                          </p>
-                        </div>
+                          Lily
+                        </p>
                       </div>
                     </div>
                   </div>
-                </label>
-              </div>
+                </div>
+              </label>
             </div>
           </div>
         </div>
diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
index 8522163c0fa..0044e1d84df 100644
--- a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
+++ b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
@@ -42,20 +42,30 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c7.c7.c7.c7.c7 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c9.c9.c9.c9.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -95,6 +105,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -129,9 +140,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -157,7 +166,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
   transition-duration: 160ms;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -404,159 +413,144 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
         >
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="checkbox"
+                    type="checkbox"
+                    value="apple"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="checkbox"
-                      type="checkbox"
-                      value="apple"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Apple
-                        </p>
-                      </div>
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="checkbox"
+                    type="checkbox"
+                    value="mango"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="checkbox"
-                      type="checkbox"
-                      value="mango"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
-                      </div>
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="checkbox"
+                    type="checkbox"
+                    value="orange"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="checkbox"
-                      type="checkbox"
-                      value="orange"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Orange
-                        </p>
-                      </div>
+                        Orange
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
@@ -607,20 +601,30 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-}
-
-.c7.c7.c7.c7.c7 {
   margin-bottom: 8px;
-  margin-right: 8px;
+  row-gap: 8px;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
 }
 
-.c8.c8.c8.c8.c8 {
+.c7.c7.c7.c7.c7 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
+.c9.c9.c9.c9.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -660,6 +664,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
   padding-right: 12px;
   padding-left: 12px;
   height: 28px;
+  width: 100%;
   gap: 8px;
   background-color: hsla(0,0%,100%,1);
   border-radius: 9999px;
@@ -694,9 +699,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
   text-align: left;
   text-overflow: ellipsis;
   max-width: 420px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
@@ -722,7 +725,7 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
   transition-duration: 160ms;
 }
 
-.c9.c9.c9.c9.c9 {
+.c8.c8.c8.c8.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -969,162 +972,147 @@ exports[`<ChipGroup /> selectionType="single" should render with selectionType="
         >
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-1-helptext-2"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="radio"
+                    type="radio"
+                    value="apple"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-1-helptext-2"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="radio"
-                      type="radio"
-                      value="apple"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Apple
-                        </p>
-                      </div>
+                        Apple
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-3-helptext-4"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="radio"
+                    type="radio"
+                    value="mango"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-3-helptext-4"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="radio"
-                      type="radio"
-                      value="mango"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Mango
-                        </p>
-                      </div>
+                        Mango
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
           <div
             class="c7"
-            data-blade-component="base-box"
+            data-blade-component="chip"
           >
-            <div
+            <label
               class="c8"
-              data-blade-component="chip"
+              data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
-              <label
+              <div
                 class="c9"
-                data-blade-component="chip-label"
-                style="cursor: pointer;"
+                data-blade-component="base-box"
               >
                 <div
-                  class="c0"
+                  class="c10"
                   data-blade-component="base-box"
                 >
+                  <input
+                    aria-checked="false"
+                    aria-describedby="radio-5-helptext-6"
+                    aria-disabled="false"
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="c11"
+                    role="radio"
+                    type="radio"
+                    value="orange"
+                  />
                   <div
-                    class="c10"
+                    class="c12 c13"
                     data-blade-component="base-box"
                   >
-                    <input
-                      aria-checked="false"
-                      aria-describedby="radio-5-helptext-6"
-                      aria-disabled="false"
-                      aria-invalid="false"
-                      aria-required="false"
-                      class="c11"
-                      role="radio"
-                      type="radio"
-                      value="orange"
-                    />
                     <div
-                      class="c12 c13"
+                      class="c14 c15"
                       data-blade-component="base-box"
                     >
-                      <div
-                        class="c14 c15"
-                        data-blade-component="base-box"
+                      <p
+                        class="c16"
+                        data-blade-component="text"
                       >
-                        <p
-                          class="c16"
-                          data-blade-component="text"
-                        >
-                          Orange
-                        </p>
-                      </div>
+                        Orange
+                      </p>
                     </div>
                   </div>
                 </div>
-              </label>
-            </div>
+              </div>
+            </label>
           </div>
         </div>
       </div>
diff --git a/packages/blade/src/components/Chip/types.ts b/packages/blade/src/components/Chip/types.ts
index d53bd8534ea..a7f58cfd43a 100644
--- a/packages/blade/src/components/Chip/types.ts
+++ b/packages/blade/src/components/Chip/types.ts
@@ -4,6 +4,7 @@ import type { IconComponent } from '~components/Icons';
 import type { DataAnalyticsAttribute, StringChildrenType, TestID } from '~utils/types';
 import type { DotNotationToken } from '~utils/lodashButBetter/get';
 import type { MotionMetaProp } from '~components/BaseMotion';
+import type { BaseBoxProps } from '~components/Box/BaseBox/types/propsTypes';
 
 type ChipCommonProps = {
   /**
@@ -29,6 +30,18 @@ type ChipCommonProps = {
    * Use `onChange` to update its value
    */
   value?: string;
+  /**
+   * width prop sets the width of the Chip
+   */
+  width?: BaseBoxProps['width'];
+  /**
+   * maxWidth prop sets the maxWidth of the Chip
+   */
+  maxWidth?: BaseBoxProps['maxWidth'];
+  /**
+   * min prop sets the minWidth of the Chip
+   */
+  minWidth?: BaseBoxProps['minWidth'];
 } & TestID &
   DataAnalyticsAttribute &
   StyledPropsBlade &
@@ -226,6 +239,9 @@ type AnimatedChipProps = {
   isDesktop?: boolean;
   theme: Theme;
   children: React.ReactNode;
+  width?: BaseBoxProps['width'];
+  maxWidth?: BaseBoxProps['maxWidth'];
+  minWidth?: BaseBoxProps['minWidth'];
 };
 
 type StyledChipWrapperProps = {