Adding Stacked Checkbox component (#35448)

* Adding Stacked Checkbox component

* Switching to checkbox variant

* PR Feedback

* Storybook cleanup

* including description

.storybook/preview.tsx

 import React from "react";
 import "metabase/css/index.css";
 import "metabase/lib/dayjs";
+import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
 import { ThemeProvider } from "metabase/ui";
 
 export const parameters = {
@@ -14,5 +15,9 @@ export const parameters = {
 };
 
 export const decorators = [
-  renderStory => <ThemeProvider>{renderStory()}</ThemeProvider>,
+  renderStory => (
+    <EmotionCacheProvider>
+      <ThemeProvider>{renderStory()}</ThemeProvider>
+    </EmotionCacheProvider>
+  ),
 ];

frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx

@@ -6,6 +6,7 @@ export const args = {
   description: undefined,
   disabled: false,
   labelPosition: "right",
+  size: "md",
 };
 
 export const argTypes = {
@@ -22,6 +23,14 @@ export const argTypes = {
     options: ["left", "right"],
     control: { type: "inline-radio" },
   },
+  size: {
+    options: ["xs", "md", "lg", "xl"],
+    control: { type: "inline-radio" },
+  },
+  variant: {
+    options: ["default", "stacked"],
+    control: { type: "inline-radio" },
+  },
 };
 
 <Meta
@@ -149,6 +158,17 @@ DescriptionLeft.args = {
   <Story name="Description, left position">{DescriptionLeft}</Story>
 </Canvas>
 
+#### Stacked Variant
+
+export const Stacked = StateTemplate.bind({});
+Stacked.args = {
+  variant: "stacked",
+};
+
+<Canvas>
+  <Story name="Stacked">{Stacked}</Story>
+</Canvas>
+
 ## Related components
 
 - Radio

frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.styled.tsx

@@ -34,9 +34,6 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
           },
         },
       },
-      body: {
-        alignItems: "center",
-      },
       inner: {
         width: getSize({ size, sizes: SIZES }),
         height: getSize({ size, sizes: SIZES }),
@@ -47,6 +44,7 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
         height: getSize({ size, sizes: SIZES }),
         cursor: "pointer",
         borderRadius: theme.radius.xs,
+        border: `1px solid ${theme.colors.bg[2]}`,
 
         "&:checked": {
           borderColor: theme.colors.brand[1],
@@ -79,5 +77,46 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
         color: theme.colors.text[0],
       },
     }),
+    variants: {
+      stacked: (theme, { labelPosition }) => ({
+        inner: {
+          position: "relative",
+          zIndex: 0,
+        },
+        label: {
+          paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+        },
+        description: {
+          paddingLeft: labelPosition === "right" ? "0.75rem" : "0.5rem",
+        },
+        input: {
+          "&:after": {
+            content: "''",
+            border: `1px solid ${theme.colors.bg[2]}`,
+            position: "absolute",
+            top: rem(-4),
+            left: rem(4),
+            height: "100%",
+            width: "100%",
+            borderRadius: rem(4),
+            zIndex: -1,
+            backgroundColor: theme.white,
+            boxSizing: "border-box",
+          },
+
+          "&:checked:not([disabled]):after": {
+            border: `${rem(2)} solid ${theme.colors.brand[1]}`,
+          },
+
+          "&:disabled:after": {
+            border: `${rem(2)} solid ${theme.colors.border[0]}`,
+          },
+        },
+        labelWrapper: {
+          psoition: "relative",
+          top: rem(-2),
+        },
+      }),
+    },
   },
 });

frontend/src/metabase/visualizations/components/settings/ChartSettingAddRemoveColumns/ChartSettingAddRemoveColumns.tsx

@@ -5,7 +5,7 @@ import { Checkbox, TextInput, Box, Flex, Text } from "metabase/ui";
 import { Icon } from "metabase/core/components/Icon";
 import type { TableColumnOrderSetting } from "metabase-types/api";
 import { getColumnIcon } from "metabase/common/utils/columns";
-import { StackedCheckBox } from "metabase/components/StackedCheckBox/StackedCheckBox";
+
 import type * as Lib from "metabase-lib";
 import type {
   ColumnSetting,
@@ -187,7 +187,9 @@ export const ChartSettingAddRemoveColumns = ({
             {showAddRemoveAll(columnGroup.columns) && (
               <Box mb="1rem">
                 {areAllColumnsInQuery(columnGroup.columns) ? (
-                  <StackedCheckBox
+                  <Checkbox
+                    variant="stacked"
+                    size="xs"
                     label={
                       <Text
                         fw={700}
@@ -201,7 +203,9 @@ export const ChartSettingAddRemoveColumns = ({
                     }
                   />
                 ) : (
-                  <StackedCheckBox
+                  <Checkbox
+                    variant="stacked"
+                    size="xs"
                     label={
                       <Text
                         fw={700}