From 82d60c71052327ab7081a6e0de0ee78d2422fa53 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Fri, 31 May 2024 20:52:18 +0530
Subject: [PATCH 01/16] [react] Create Stack component

This uses atomic classes to cover all the scenarios of rendering a Stack
---
 packages/pigment-css-react/package.json       | 10 +++
 packages/pigment-css-react/src/Stack.d.ts     | 20 ++++++
 packages/pigment-css-react/src/Stack.jsx      | 50 ++++++++++++++
 .../src/{base.d.ts => base.ts}                |  8 +++
 packages/pigment-css-react/src/baseAtomics.js | 43 ++++++++++++
 .../pigment-css-react/src/generateAtomics.js  | 65 +++++++++++++++++--
 packages/pigment-css-react/src/index.ts       |  1 +
 .../src/utils/convertAtomicsToCss.ts          | 24 ++++++-
 .../pigment-css-react/tests/Stack.spec.tsx    | 13 ++++
 packages/pigment-css-react/tsconfig.json      |  3 +-
 packages/pigment-css-react/tsup.config.ts     |  2 +-
 pnpm-lock.yaml                                |  4 +-
 12 files changed, 231 insertions(+), 12 deletions(-)
 create mode 100644 packages/pigment-css-react/src/Stack.d.ts
 create mode 100644 packages/pigment-css-react/src/Stack.jsx
 rename packages/pigment-css-react/src/{base.d.ts => base.ts} (90%)
 create mode 100644 packages/pigment-css-react/src/baseAtomics.js
 create mode 100644 packages/pigment-css-react/tests/Stack.spec.tsx

diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
index 30ec6fe9..c0c2d053 100644
--- a/packages/pigment-css-react/package.json
+++ b/packages/pigment-css-react/package.json
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.24.1",
+    "@mui/types": "7.2.14",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__helper-plugin-utils": "^7.10.3",
@@ -151,6 +152,15 @@
       },
       "require": "./build/RtlProvider.js",
       "default": "./build/RtlProvider.js"
+    },
+    "./Stack": {
+      "types": "./build/Stack.d.ts",
+      "import": {
+        "types": "./build/Stack.d.mts",
+        "default": "./build/Stack.mjs"
+      },
+      "require": "./build/Stack.js",
+      "default": "./build/Stack.js"
     }
   },
   "nx": {
diff --git a/packages/pigment-css-react/src/Stack.d.ts b/packages/pigment-css-react/src/Stack.d.ts
new file mode 100644
index 00000000..4b185fa4
--- /dev/null
+++ b/packages/pigment-css-react/src/Stack.d.ts
@@ -0,0 +1,20 @@
+import * as CSS from 'csstype';
+
+import { Breakpoint } from './base';
+import { PolymorphicComponent } from './Box';
+
+type CssProperty<T> = T | Array<T> | Partial<Record<Breakpoint, T>>;
+
+type StackBaseProps = {
+  display?: CssProperty<'flex' | 'inline-flex'>;
+  spacing?: CssProperty<number | string>;
+  direction?: CssProperty<CSS.StandardLonghandProperties['flexDirection']>;
+  justifyContent?: CssProperty<CSS.StandardLonghandProperties['justifyContent']>;
+  alignItems?: CssProperty<CSS.StandardLonghandProperties['alignItems']>;
+  divider?: React.ReactNode;
+  className?: string;
+};
+
+declare const Stack: PolymorphicComponent<StackBaseProps>;
+
+export default Stack;
diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
new file mode 100644
index 00000000..f9f57fdb
--- /dev/null
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { stackAtomics } from './baseAtomics';
+
+const Stack = React.forwardRef(function Stack(
+  {
+    children,
+    spacing = 0,
+    style,
+    className,
+    display = 'flex',
+    component = 'div',
+    direction = 'column',
+    alignItems,
+    justifyContent,
+    ...rest
+  },
+  ref,
+) {
+  const stackAtomicsObj = {
+    display,
+    direction,
+  };
+  if (spacing) {
+    stackAtomicsObj.spacing = spacing;
+  }
+  if (alignItems) {
+    stackAtomicsObj.alignItems = alignItems;
+  }
+  if (justifyContent) {
+    stackAtomicsObj.justifyContent = justifyContent;
+  }
+  const stackClasses = stackAtomics(stackAtomicsObj);
+  const Component = component;
+  return (
+    <Component
+      ref={ref}
+      className={clsx(stackClasses.className, className)}
+      style={{ ...style, ...stackClasses.style }}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+});
+
+Stack.displayName = 'Stack';
+
+export default Stack;
diff --git a/packages/pigment-css-react/src/base.d.ts b/packages/pigment-css-react/src/base.ts
similarity index 90%
rename from packages/pigment-css-react/src/base.d.ts
rename to packages/pigment-css-react/src/base.ts
index c524bd4a..1451eef2 100644
--- a/packages/pigment-css-react/src/base.d.ts
+++ b/packages/pigment-css-react/src/base.ts
@@ -1,4 +1,5 @@
 import type * as CSS from 'csstype';
+import { OverridableStringUnion } from '@mui/types';
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 
@@ -64,3 +65,10 @@ export interface PolymorphicComponent<SxProp, BaseProps extends BaseDefaultProps
     props: PolymorphicComponentProps<SxProp, BaseProps, AsTarget>,
   ): JSX.Element;
 }
+
+export interface BreakpointOverrides {}
+
+export type Breakpoint = OverridableStringUnion<
+  'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  BreakpointOverrides
+>;
diff --git a/packages/pigment-css-react/src/baseAtomics.js b/packages/pigment-css-react/src/baseAtomics.js
new file mode 100644
index 00000000..24277f10
--- /dev/null
+++ b/packages/pigment-css-react/src/baseAtomics.js
@@ -0,0 +1,43 @@
+import { generateAtomics } from './generateAtomics';
+
+export const stackAtomics = generateAtomics(({ theme }) => ({
+  conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+    acc[breakpoint] = `@media (min-width: ${theme.breakpoints.values[breakpoint]}${
+      theme.breakpoints.unit ?? 'px'
+    })`;
+    return acc;
+  }, {}),
+  defaultCondition: theme.defaultBreakpoint ?? 'xs',
+  properties: {
+    display: ['flex', 'inline-flex'],
+    flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],
+    justifyContent: [
+      'end',
+      'start',
+      'flex-end',
+      'flex-start',
+      'center',
+      'space-between',
+      'space-around',
+      'space-evenly',
+    ],
+    alignItems: [
+      'center',
+      'end',
+      'flex-end',
+      'flex-start',
+      'self-end',
+      'self-start',
+      'start',
+      'baseline',
+      'normal',
+      'stretch',
+    ],
+    gap: ['--Stack-gap'],
+  },
+  shorthands: {
+    direction: ['flexDirection'],
+    spacing: ['gap'],
+  },
+  multiplier: 8,
+}));
diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index 442e1f67..dabbb6d8 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -11,18 +11,69 @@ export function generateAtomics() {
  * @property {Object.<string, Object.<string, Object.<string, string>>>} styles
  * @property {Object.<string, string[]>} shorthands
  * @property {string[]} conditions
+ * @property {string} defaultCondition
+ * @property {string[]} unitless
+ * @property {string} multiplier
  */
 
 /**
  * @param {RuntimeConfig} runtimeConfig
  */
-export function atomics({ styles, shorthands, conditions }) {
-  function addStyles(cssProperty, values, classes) {
+export function atomics({
+  styles,
+  defaultCondition,
+  shorthands,
+  conditions,
+  unitless,
+  multiplier = 1,
+}) {
+  function addStyles(cssProperty, values, classes, inlineStyle) {
     const styleClasses = styles[cssProperty];
     if (!styleClasses) {
       return;
     }
-    if (typeof values === 'string') {
+    // dynamic values
+    if (!(values in styleClasses)) {
+      const keys = Object.keys(styleClasses);
+      if (keys.length !== 1) {
+        return;
+      }
+      const key = keys[0];
+      if (typeof values === 'string' || typeof values === 'number') {
+        const value = typeof values === 'number' ? values * multiplier : values;
+        classes.push(styleClasses[key].$$default);
+        inlineStyle[`${key}_${defaultCondition}`] = unitless.includes(cssProperty)
+          ? value
+          : `${value}px`;
+      } else if (Array.isArray(values)) {
+        values.forEach((itemValue, index) => {
+          const breakpoint = conditions[index];
+          classes.push(styleClasses[key][breakpoint]);
+          const value = typeof itemValue === 'number' ? itemValue * multiplier : itemValue;
+          inlineStyle[`${key}_${breakpoint}`] = unitless.includes(cssProperty)
+            ? value
+            : `${value}px`;
+        });
+      } else {
+        Object.keys(values).forEach((condition) => {
+          const propertyClasses = styleClasses[key];
+          if (!propertyClasses) {
+            return;
+          }
+          console.log(propertyClasses);
+          classes.push(propertyClasses[condition]);
+          const value =
+            typeof values[condition] === 'number'
+              ? values[condition] * multiplier
+              : values[condition];
+          inlineStyle[`${key}_${condition}`] = unitless.includes(cssProperty)
+            ? value
+            : `${value}px`;
+        });
+      }
+      return;
+    }
+    if (typeof values === 'string' || typeof values === 'number') {
       classes.push(styleClasses[values].$$default);
     } else if (Array.isArray(values)) {
       values.forEach((value, index) => {
@@ -41,7 +92,8 @@ export function atomics({ styles, shorthands, conditions }) {
 
   function generateClass(props) {
     const classes = [];
-    const runtimeStyles = { ...props };
+    const inlineStyle = {};
+    const runtimeStyles = props;
     Object.keys(runtimeStyles).forEach((cssProperty) => {
       const values = runtimeStyles[cssProperty];
       if (cssProperty in shorthands) {
@@ -50,14 +102,15 @@ export function atomics({ styles, shorthands, conditions }) {
           return;
         }
         configShorthands.forEach((shorthand) => {
-          addStyles(shorthand, values, classes);
+          addStyles(shorthand, values, classes, inlineStyle);
         });
       } else {
-        addStyles(cssProperty, values, classes);
+        addStyles(cssProperty, values, classes, inlineStyle);
       }
     });
     return {
       className: cx(Array.from(new Set(classes))),
+      style: inlineStyle,
     };
   }
   return generateClass;
diff --git a/packages/pigment-css-react/src/index.ts b/packages/pigment-css-react/src/index.ts
index d576aa38..149fac4b 100644
--- a/packages/pigment-css-react/src/index.ts
+++ b/packages/pigment-css-react/src/index.ts
@@ -1,3 +1,4 @@
+export * from './base';
 export { default as styled, type StyledComponent } from './styled';
 export { default as sx } from './sx';
 export { default as keyframes } from './keyframes';
diff --git a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
index 1afdf7c6..d1ca46fe 100644
--- a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
+++ b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
@@ -7,12 +7,17 @@ export type Atomics = {
     [key: string]: string[];
   };
   shorthands: Record<string, string[]>;
+  unitless: string[];
+  multiplier?: number;
 };
 
 export type RuntimeConfig = {
   conditions: string[];
   styles: Record<string, Record<string, Record<string, string>>>;
   shorthands: Atomics['shorthands'];
+  defaultCondition: string;
+  unitless: string[];
+  multiplier?: number;
 };
 
 function getClassName(...items: string[]) {
@@ -20,7 +25,14 @@ function getClassName(...items: string[]) {
 }
 
 export function convertAtomicsToCss(
-  { conditions = {}, defaultCondition, properties, shorthands = {} }: Atomics,
+  {
+    conditions = {},
+    defaultCondition,
+    properties,
+    shorthands = {},
+    unitless = [],
+    multiplier = undefined,
+  }: Atomics,
   mainClassName: string,
   isGlobal = false,
   debug = false,
@@ -30,6 +42,9 @@ export function convertAtomicsToCss(
     styles: {},
     shorthands,
     conditions: Object.keys(conditions),
+    defaultCondition,
+    unitless,
+    multiplier,
   };
   let count = 1;
   function getCount() {
@@ -46,6 +61,9 @@ export function convertAtomicsToCss(
   Object.entries(conditions).forEach(([conditionName, mediaQueryStr]) => {
     Object.entries(properties).forEach(([cssPropertyName, propertyValues]) => {
       propertyValues.forEach((propertyValue) => {
+        const propValue = propertyValue.startsWith('--')
+          ? cssesc(`var(${propertyValue}_${conditionName})`)
+          : propertyValue;
         const className =
           isGlobal || debug
             ? getClassName(
@@ -60,7 +78,7 @@ export function convertAtomicsToCss(
           classes.push({
             className,
             css: {
-              [cssPropertyName]: propertyValue,
+              [cssPropertyName]: propValue,
             },
           });
         } else {
@@ -68,7 +86,7 @@ export function convertAtomicsToCss(
             className,
             css: {
               [mediaQueryStr]: {
-                [cssPropertyName]: propertyValue,
+                [cssPropertyName]: propValue,
               },
             },
           });
diff --git a/packages/pigment-css-react/tests/Stack.spec.tsx b/packages/pigment-css-react/tests/Stack.spec.tsx
new file mode 100644
index 00000000..92929c27
--- /dev/null
+++ b/packages/pigment-css-react/tests/Stack.spec.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '../src/Stack';
+
+<Stack
+  display={{
+    xs: 'flex',
+    xl: 'inline-flex',
+  }}
+  direction="column"
+/>;
+
+// @ts-expect-error
+<Stack display={{ ml: 'block' }} divider={<h1>Hello</h1>} />;
diff --git a/packages/pigment-css-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json
index 8ac34324..3e0efa80 100644
--- a/packages/pigment-css-react/tsconfig.json
+++ b/packages/pigment-css-react/tsconfig.json
@@ -7,7 +7,8 @@
     "composite": true,
     "noEmit": false,
     "resolveJsonModule": true,
-    "types": ["node", "mocha"]
+    "types": ["node", "mocha"],
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*.tsx", "src/**/*.js", "src/**/*.ts"],
   "exclude": ["./tsup.config.ts", "src/**/*.d.ts"]
diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts
index b40aecd6..57dfbe01 100644
--- a/packages/pigment-css-react/tsup.config.ts
+++ b/packages/pigment-css-react/tsup.config.ts
@@ -20,7 +20,7 @@ const baseConfig: Options = {
   external,
 };
 
-const BASE_FILES = ['index.ts', 'theme.ts', 'Box.jsx', 'RtlProvider.tsx'];
+const BASE_FILES = ['index.ts', 'theme.ts', 'Box.jsx', 'RtlProvider.tsx', 'Stack.jsx'];
 
 export default defineConfig([
   {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d63e6ef6..7a3ba641 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -482,6 +482,9 @@ importers:
       '@babel/plugin-syntax-jsx':
         specifier: ^7.24.1
         version: 7.24.1(@babel/core@7.24.4)
+      '@mui/types':
+        specifier: 7.2.14
+        version: 7.2.14(@types/react@18.2.75)
       '@types/babel__core':
         specifier: ^7.20.5
         version: 7.20.5
@@ -3325,7 +3328,6 @@ packages:
         optional: true
     dependencies:
       '@types/react': 18.2.75
-    dev: false
 
   /@mui/utils@6.0.0-alpha.9(@types/react@18.2.75)(react@18.2.0):
     resolution: {integrity: sha512-fie2VEiVzpHCbcUIwgWx5lQT+SYjL3uHDCfutXzr7hTbnqDu9KSVEBPgADitFqZOGCIcBXfs4aE4LIn1FmmKjg==}

From c4bbc466fc758793cb275c50479659576e047a94 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Fri, 31 May 2024 20:55:31 +0530
Subject: [PATCH 02/16] Add Stack demo to both the apps

---
 apps/pigment-css-next-app/next.config.js      |   1 -
 .../pigment-css-next-app/src/app/box/page.tsx |  58 ------
 apps/pigment-css-next-app/src/app/layout.tsx  |   1 -
 .../src/app/stack/page.tsx                    | 164 +++++++++++++++++
 .../src/components/Box.jsx                    |  68 -------
 apps/pigment-css-vite-app/src/pages/index.tsx | 170 +++++++++++++++++-
 apps/pigment-css-vite-app/vite.config.ts      |   2 +-
 packages/pigment-css-react/src/Stack.jsx      |  28 ++-
 packages/pigment-css-react/src/baseAtomics.js |   2 +-
 9 files changed, 356 insertions(+), 138 deletions(-)
 delete mode 100644 apps/pigment-css-next-app/src/app/box/page.tsx
 create mode 100644 apps/pigment-css-next-app/src/app/stack/page.tsx
 delete mode 100644 apps/pigment-css-next-app/src/components/Box.jsx

diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index 4dcc9476..f7f86335 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -103,7 +103,6 @@ const pigmentOptions = {
   theme,
   transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
-  displayName: true,
 };
 
 /** @type {import('next').NextConfig} */
diff --git a/apps/pigment-css-next-app/src/app/box/page.tsx b/apps/pigment-css-next-app/src/app/box/page.tsx
deleted file mode 100644
index 877b36e5..00000000
--- a/apps/pigment-css-next-app/src/app/box/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable material-ui/no-empty-box */
-
-import { styled } from '@pigment-css/react';
-import * as React from 'react';
-import { Box as MuiBox } from '../../components/Box';
-
-const Box = styled(MuiBox)(({ theme }) => ({
-  border: `1px dashed ${(theme.vars ?? theme).palette.primary.main}`,
-  padding: 10,
-}));
-const Paragraph = styled.p({
-  margin: 0,
-  marginBottom: 5,
-});
-
-export default function DemoBox() {
-  return (
-    <div style={{ width: '400px', marginLeft: 10, marginTop: 10 }}>
-      {[...Array(500)].map((_, i) => (
-        <React.Fragment key={i}>
-          <Paragraph>Flex with column for &quot;sm&quot; breakpoint</Paragraph>
-          <MuiBox
-            display="flex"
-            direction={{
-              sm: 'column',
-              md: 'row',
-            }}
-            spacing={1}
-          >
-            <Box as="div" sx={{ borderColor: 'red' }}>
-              1
-            </Box>
-            <Box>2</Box>
-            <Box>3</Box>
-          </MuiBox>
-          <Paragraph>Row Reverse</Paragraph>
-          <MuiBox display="flex" direction="row-reverse" spacing={1}>
-            <Box>1</Box>
-            <Box>2</Box>
-            <Box>3</Box>
-          </MuiBox>
-          <Paragraph>Column</Paragraph>
-          <MuiBox display="flex" direction="column" spacing={1}>
-            <Box>1</Box>
-            <Box>2</Box>
-            <Box>3</Box>
-          </MuiBox>
-          <Paragraph>Column Reverse</Paragraph>
-          <MuiBox display="flex" direction="column-reverse" spacing={1}>
-            <Box>1</Box>
-            <Box>2</Box>
-            <Box>3</Box>
-          </MuiBox>
-        </React.Fragment>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx
index 77126c9b..d4bc3c7b 100644
--- a/apps/pigment-css-next-app/src/app/layout.tsx
+++ b/apps/pigment-css-next-app/src/app/layout.tsx
@@ -23,7 +23,6 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         className={`${inter.className} ${css`
           background-color: ${({ theme: t }) => t.vars.palette.background.default};
           color: ${({ theme: t }) => t.vars.palette.text.primary};
-          background-image: url('@/assets/mui.svg');
           background-repeat: no-repeat;
           background-position: 1rem 1rem;
         `}`}
diff --git a/apps/pigment-css-next-app/src/app/stack/page.tsx b/apps/pigment-css-next-app/src/app/stack/page.tsx
new file mode 100644
index 00000000..14d566ca
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/stack/page.tsx
@@ -0,0 +1,164 @@
+'use client';
+import * as React from 'react';
+import Stack from '@pigment-css/react/Stack';
+import { styled, css } from '@pigment-css/react';
+
+type StackProps = React.ComponentProps<typeof Stack>;
+
+const labelClass = css({
+  padding: '0px 10px',
+});
+
+const Card = styled.div`
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+  padding: 8px 16px;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  background-color: rgb(26, 32, 39);
+`;
+
+export default function InteractiveStack() {
+  const [direction, setDirection] = React.useState<StackProps['direction']>('column');
+  const [justifyContent, setJustifyContent] =
+    React.useState<StackProps['justifyContent']>('center');
+  const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
+  const [spacing, setSpacing] = React.useState(2);
+
+  const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
+    switch (ev.target.name) {
+      case 'direction': {
+        setDirection(ev.target.value as StackProps['direction']);
+        break;
+      }
+      case 'justify-content': {
+        setJustifyContent(ev.target.value as StackProps['justifyContent']);
+        break;
+      }
+      case 'align-items': {
+        setAlignItems(ev.target.value as StackProps['alignItems']);
+        break;
+      }
+      case 'spacing': {
+        setSpacing(parseFloat(ev.target.value));
+        break;
+      }
+      default:
+        break;
+    }
+  }, []);
+
+  const jsx = `
+<Stack
+  direction="${direction}"
+  justifyContent="${justifyContent}"
+  alignItems="${alignItems}"
+  spacing={${spacing}}
+>
+`;
+
+  return (
+    <Stack sx={{ flexGrow: 1 }}>
+      <Stack direction="row" justifyContent="space-between">
+        <fieldset>
+          <legend>Direction</legend>
+          {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="direction"
+                value={item}
+                checked={item === direction}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+        <fieldset sx={{ mt: 1 }}>
+          <legend>justifyContent</legend>
+          {[
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="justify-content"
+                value={item}
+                checked={item === justifyContent}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+      </Stack>
+      <Stack direction="row" justifyContent="space-between">
+        <fieldset sx={{ mt: 1 }}>
+          <legend>alignItems</legend>
+          {[
+            'flex-start',
+            'center',
+            'flex-end',
+            'stretch',
+            'baseline',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="align-items"
+                value={item}
+                checked={item === alignItems}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+        <fieldset sx={{ mt: 1 }}>
+          <legend>Spacing</legend>
+          {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="spacing"
+                value={item}
+                checked={item === spacing}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+      </Stack>
+      <Stack
+        direction={direction}
+        justifyContent={justifyContent}
+        alignItems={alignItems}
+        spacing={spacing}
+        sx={{ height: 240, width: '100%' }}
+      >
+        {[0, 1, 2].map((value) => (
+          <Card key={value}>{`Item ${value + 1}`}</Card>
+        ))}
+      </Stack>
+      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
+    </Stack>
+  );
+}
diff --git a/apps/pigment-css-next-app/src/components/Box.jsx b/apps/pigment-css-next-app/src/components/Box.jsx
deleted file mode 100644
index 930ee1bd..00000000
--- a/apps/pigment-css-next-app/src/components/Box.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { generateAtomics } from '@pigment-css/react';
-
-const atomics = generateAtomics(({ theme }) => ({
-  conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-    acc[breakpoint] = `@media (min-width: ${theme.breakpoints.values[breakpoint]}${
-      theme.breakpoints.unit ?? 'px'
-    })`;
-    return acc;
-  }, {}),
-  defaultCondition: 'xs',
-  properties: {
-    display: [
-      'block',
-      'inline-flex',
-      'contents',
-      'none',
-      'flex',
-      'inline-flex',
-      'grid',
-      'inline-grid',
-    ],
-    flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
-    justifyContent: [
-      'center',
-      'end',
-      'flex-end',
-      'flex-start',
-      'left',
-      'right',
-      'space-around',
-      'space-between',
-      'space-evenly',
-      'start',
-    ],
-    alignItems: [
-      'baseline',
-      'center',
-      'end',
-      'flex-end',
-      'flex-start',
-      'self-end',
-      'self-start',
-      'start',
-      'stretch',
-    ],
-    position: ['relative', 'absolute', 'static', 'sticky', 'fixed'],
-  },
-  shorthands: {
-    direction: ['flexDirection'],
-  },
-}));
-
-// eslint-disable-next-line react/prop-types
-export function Box({ children, as = 'div', className = '', style = undefined, ...rest }) {
-  const Component = as;
-  const atomicsResult = atomics(rest);
-  const componentClass = `${atomicsResult.className} ${className ?? ''}`.trim();
-  const finalStyles = {
-    ...(atomicsResult.style ?? {}),
-    ...style,
-  };
-  return (
-    // eslint-disable-next-line react/jsx-filename-extension
-    <Component className={componentClass} style={finalStyles}>
-      {children}
-    </Component>
-  );
-}
diff --git a/apps/pigment-css-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx
index 2037fda5..0b93816d 100644
--- a/apps/pigment-css-vite-app/src/pages/index.tsx
+++ b/apps/pigment-css-vite-app/src/pages/index.tsx
@@ -1,11 +1,167 @@
-import { Link } from 'react-router-dom';
+import * as React from 'react';
+import Stack from '@pigment-css/react/Stack';
+import { styled, css } from '@pigment-css/react';
+
+type StackProps = React.ComponentProps<typeof Stack>;
+
+const labelClass = css({
+  padding: '0px 10px',
+});
+
+const Card = styled.div`
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+  padding: 8px 16px;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  background-color: rgb(26, 32, 39);
+  color: white;
+`;
+
+export default function InteractiveStack() {
+  const [direction, setDirection] = React.useState<StackProps['direction']>('column');
+  const [justifyContent, setJustifyContent] =
+    React.useState<StackProps['justifyContent']>('center');
+  const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
+  const [spacing, setSpacing] = React.useState(2);
+
+  const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
+    switch (ev.target.name) {
+      case 'direction': {
+        setDirection(ev.target.value as StackProps['direction']);
+        break;
+      }
+      case 'justify-content': {
+        setJustifyContent(ev.target.value as StackProps['justifyContent']);
+        break;
+      }
+      case 'align-items': {
+        setAlignItems(ev.target.value as StackProps['alignItems']);
+        break;
+      }
+      case 'spacing': {
+        setSpacing(parseFloat(ev.target.value));
+        break;
+      }
+      default:
+        break;
+    }
+  }, []);
+
+  const jsx = `
+<Stack
+  direction="${direction}"
+  justifyContent="${justifyContent}"
+  alignItems="${alignItems}"
+  spacing={${spacing}}
+>
+`;
 
-export default function App() {
   return (
-    <div>
-      <p>
-        See Material UI components in <Link to="/material-ui">action</Link>!
-      </p>
-    </div>
+    <Stack sx={{ flexGrow: 1 }}>
+      <Stack direction="row" justifyContent="space-between">
+        <fieldset>
+          <legend>Direction</legend>
+          {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="direction"
+                value={item}
+                checked={item === direction}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+        {/** @ts-ignore */}
+        <fieldset sx={{ mt: 1 }}>
+          <legend>justifyContent</legend>
+          {[
+            'flex-start',
+            'center',
+            'flex-end',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="justify-content"
+                value={item}
+                checked={item === justifyContent}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+      </Stack>
+      <Stack direction="row" justifyContent="space-between">
+        {/** @ts-ignore */}
+        <fieldset sx={{ mt: 1 }}>
+          <legend>alignItems</legend>
+          {[
+            'flex-start',
+            'center',
+            'flex-end',
+            'stretch',
+            'baseline',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="align-items"
+                value={item}
+                checked={item === alignItems}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+        {/** @ts-ignore */}
+        <fieldset sx={{ mt: 1 }}>
+          <legend>Spacing</legend>
+          {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
+            <label key={item} className={labelClass}>
+              {item}
+              <input
+                type="radio"
+                name="spacing"
+                value={item}
+                checked={item === spacing}
+                onChange={handleChange}
+              />
+            </label>
+          ))}
+        </fieldset>
+      </Stack>
+      <Stack
+        direction={direction}
+        justifyContent={justifyContent}
+        alignItems={alignItems}
+        spacing={spacing}
+        sx={{ height: 240, width: '100%' }}
+      >
+        {[0, 1, 2].map((value) => (
+          <Card key={value}>{`Item ${value + 1}`}</Card>
+        ))}
+      </Stack>
+      <textarea style={{ colorScheme: 'dark' }} value={jsx} readOnly rows={8} />
+    </Stack>
   );
 }
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index 031cd34a..f878bf30 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -41,7 +41,7 @@ export default defineConfig({
       theme,
       transformLibraries: ['local-ui-lib', '@mui/material'],
       sourceMap: true,
-      displayName: true,
+      displayName: false,
     }),
     Pages(),
     splitVendorChunkPlugin(),
diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index f9f57fdb..54185ce6 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -3,12 +3,38 @@ import * as React from 'react';
 
 import { stackAtomics } from './baseAtomics';
 
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ *
+ * @param {React.ReactNode} children
+ * @param {React.ReactElement} separator
+ * @returns {React.ReactNode[]}
+ */
+function joinChildren(children, separator) {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+
+    if (index < childrenArray.length - 1) {
+      output.push(React.cloneElement(separator, { key: `separator-${index}` }));
+    }
+
+    return output;
+  }, []);
+}
+
 const Stack = React.forwardRef(function Stack(
   {
     children,
     spacing = 0,
     style,
     className,
+    divider,
     display = 'flex',
     component = 'div',
     direction = 'column',
@@ -40,7 +66,7 @@ const Stack = React.forwardRef(function Stack(
       style={{ ...style, ...stackClasses.style }}
       {...rest}
     >
-      {children}
+      {divider ? joinChildren(children, divider) : children}
     </Component>
   );
 });
diff --git a/packages/pigment-css-react/src/baseAtomics.js b/packages/pigment-css-react/src/baseAtomics.js
index 24277f10..bb1c5f0b 100644
--- a/packages/pigment-css-react/src/baseAtomics.js
+++ b/packages/pigment-css-react/src/baseAtomics.js
@@ -7,7 +7,7 @@ export const stackAtomics = generateAtomics(({ theme }) => ({
     })`;
     return acc;
   }, {}),
-  defaultCondition: theme.defaultBreakpoint ?? 'xs',
+  defaultCondition: theme.breakpoints?.keys?.[0] ?? 'xs',
   properties: {
     display: ['flex', 'inline-flex'],
     flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],

From 1fa600f2e3e1a3706c007c9ff3d4829b06703a17 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Mon, 3 Jun 2024 15:29:01 +0530
Subject: [PATCH 03/16] Re-export RtlProvider from system

---
 packages/pigment-css-react/src/RtlProvider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/pigment-css-react/src/RtlProvider.tsx b/packages/pigment-css-react/src/RtlProvider.tsx
index 414accd8..9f223f9a 100644
--- a/packages/pigment-css-react/src/RtlProvider.tsx
+++ b/packages/pigment-css-react/src/RtlProvider.tsx
@@ -1,3 +1,2 @@
 'use client';
-
 export * from '@mui/system/RtlProvider';

From 3f9cfcd58c3ff34bf2857793fd47b7492b292e76 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Mon, 3 Jun 2024 15:47:58 +0530
Subject: [PATCH 04/16] Add proptypes

---
 apps/pigment-css-vite-app/.eslintrc           |   5 +-
 apps/pigment-css-vite-app/src/pages/index.tsx |   3 -
 packages/pigment-css-react/src/Stack.jsx      | 110 ++++++++++++++++++
 .../pigment-css-react/src/generateAtomics.js  |   1 -
 .../pigment-css-react/tsconfig.build.json     |   3 +-
 packages/pigment-css-react/tsconfig.json      |   2 +-
 6 files changed, 116 insertions(+), 8 deletions(-)

diff --git a/apps/pigment-css-vite-app/.eslintrc b/apps/pigment-css-vite-app/.eslintrc
index 6a8ae0c6..00755ca3 100644
--- a/apps/pigment-css-vite-app/.eslintrc
+++ b/apps/pigment-css-vite-app/.eslintrc
@@ -1,6 +1,7 @@
 {
   "rules": {
     "import/prefer-default-export": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }
diff --git a/apps/pigment-css-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx
index 0b93816d..cc106b43 100644
--- a/apps/pigment-css-vite-app/src/pages/index.tsx
+++ b/apps/pigment-css-vite-app/src/pages/index.tsx
@@ -83,7 +83,6 @@ export default function InteractiveStack() {
             </label>
           ))}
         </fieldset>
-        {/** @ts-ignore */}
         <fieldset sx={{ mt: 1 }}>
           <legend>justifyContent</legend>
           {[
@@ -108,7 +107,6 @@ export default function InteractiveStack() {
         </fieldset>
       </Stack>
       <Stack direction="row" justifyContent="space-between">
-        {/** @ts-ignore */}
         <fieldset sx={{ mt: 1 }}>
           <legend>alignItems</legend>
           {[
@@ -133,7 +131,6 @@ export default function InteractiveStack() {
             </label>
           ))}
         </fieldset>
-        {/** @ts-ignore */}
         <fieldset sx={{ mt: 1 }}>
           <legend>Spacing</legend>
           {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index 54185ce6..5d1f2588 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
 import * as React from 'react';
 
 import { stackAtomics } from './baseAtomics';
@@ -71,6 +72,115 @@ const Stack = React.forwardRef(function Stack(
   );
 });
 
+Stack.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  alignItems: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf([
+      'center',
+      'end',
+      'flex-end',
+      'flex-start',
+      'self-end',
+      'self-start',
+      'start',
+      'baseline',
+      'normal',
+      'stretch',
+    ]),
+    PropTypes.arrayOf(
+      PropTypes.oneOf([
+        'center',
+        'end',
+        'flex-end',
+        'flex-start',
+        'self-end',
+        'self-start',
+        'start',
+        'baseline',
+        'normal',
+        'stretch',
+      ]),
+    ),
+    PropTypes.object,
+  ]),
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * @ignore
+   */
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
+    PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
+    PropTypes.object,
+  ]),
+  /**
+   * @ignore
+   */
+  display: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['flex', 'inline-flex']),
+    PropTypes.arrayOf(PropTypes.oneOf(['flex', 'inline-flex']).isRequired),
+    PropTypes.object,
+  ]),
+  /**
+   * @ignore
+   */
+  divider: PropTypes.node,
+  /**
+   * @ignore
+   */
+  justifyContent: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf([
+      'end',
+      'start',
+      'flex-end',
+      'flex-start',
+      'center',
+      'space-between',
+      'space-around',
+      'space-evenly',
+    ]),
+    PropTypes.arrayOf(
+      PropTypes.oneOf([
+        'end',
+        'start',
+        'flex-end',
+        'flex-start',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ]),
+    ),
+    PropTypes.object,
+  ]),
+  /**
+   * @ignore
+   */
+  spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+};
+
 Stack.displayName = 'Stack';
 
 export default Stack;
diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index dabbb6d8..81d03423 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -60,7 +60,6 @@ export function atomics({
           if (!propertyClasses) {
             return;
           }
-          console.log(propertyClasses);
           classes.push(propertyClasses[condition]);
           const value =
             typeof values[condition] === 'number'
diff --git a/packages/pigment-css-react/tsconfig.build.json b/packages/pigment-css-react/tsconfig.build.json
index 80b6a0a8..2639ca1b 100644
--- a/packages/pigment-css-react/tsconfig.build.json
+++ b/packages/pigment-css-react/tsconfig.build.json
@@ -2,5 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "composite": false
-  }
+  },
+  "exclude": ["./tsup.config.ts", "src/**/*.d.ts"]
 }
diff --git a/packages/pigment-css-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json
index 3e0efa80..30530ff4 100644
--- a/packages/pigment-css-react/tsconfig.json
+++ b/packages/pigment-css-react/tsconfig.json
@@ -11,5 +11,5 @@
     "jsx": "react-jsx"
   },
   "include": ["src/**/*.tsx", "src/**/*.js", "src/**/*.ts"],
-  "exclude": ["./tsup.config.ts", "src/**/*.d.ts"]
+  "exclude": ["./tsup.config.ts"]
 }

From 06767d9cf277f569edc0484740d4a2999f43d463 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 4 Jun 2024 12:21:02 +0530
Subject: [PATCH 05/16] Refactor atomics implementation and add tests

---
 .../pigment-css-react/src/generateAtomics.js  |  87 +++---
 .../tests/generateAtomics.test.js             | 267 ++++++++++++++++++
 2 files changed, 300 insertions(+), 54 deletions(-)
 create mode 100644 packages/pigment-css-react/tests/generateAtomics.test.js

diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index 81d03423..7d1d29f9 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -17,74 +17,53 @@ export function generateAtomics() {
  */
 
 /**
+ * Given a mapping of atomic classes to css properties for each breakpoint, this function
+ * returns all the classnames associated with the runtime values.
+ *
  * @param {RuntimeConfig} runtimeConfig
  */
-export function atomics({
-  styles,
-  defaultCondition,
-  shorthands,
-  conditions,
-  unitless,
-  multiplier = 1,
-}) {
-  function addStyles(cssProperty, values, classes, inlineStyle) {
+export function atomics({ styles, shorthands, conditions, unitless, multiplier = 1 }) {
+  function addStyles(cssProperty, propertyValue, classes, inlineStyle) {
     const styleClasses = styles[cssProperty];
     if (!styleClasses) {
       return;
     }
-    // dynamic values
-    if (!(values in styleClasses)) {
-      const keys = Object.keys(styleClasses);
-      if (keys.length !== 1) {
-        return;
-      }
-      const key = keys[0];
-      if (typeof values === 'string' || typeof values === 'number') {
-        const value = typeof values === 'number' ? values * multiplier : values;
-        classes.push(styleClasses[key].$$default);
-        inlineStyle[`${key}_${defaultCondition}`] = unitless.includes(cssProperty)
-          ? value
-          : `${value}px`;
-      } else if (Array.isArray(values)) {
-        values.forEach((itemValue, index) => {
-          const breakpoint = conditions[index];
-          classes.push(styleClasses[key][breakpoint]);
-          const value = typeof itemValue === 'number' ? itemValue * multiplier : itemValue;
-          inlineStyle[`${key}_${breakpoint}`] = unitless.includes(cssProperty)
-            ? value
-            : `${value}px`;
-        });
+
+    function handlePrimitive(value, breakpoint = '$$default') {
+      if (!(value in styleClasses)) {
+        const keys = Object.keys(styleClasses);
+        if (keys.length !== 1) {
+          return;
+        }
+        const key = keys[0];
+        const styleValue = typeof value === 'number' ? value * multiplier : value;
+        classes.push(styleClasses[key][breakpoint]);
+        inlineStyle[`${key}_${breakpoint}`] = unitless.includes(cssProperty)
+          ? styleValue
+          : `${styleValue}px`;
       } else {
-        Object.keys(values).forEach((condition) => {
-          const propertyClasses = styleClasses[key];
-          if (!propertyClasses) {
-            return;
-          }
-          classes.push(propertyClasses[condition]);
-          const value =
-            typeof values[condition] === 'number'
-              ? values[condition] * multiplier
-              : values[condition];
-          inlineStyle[`${key}_${condition}`] = unitless.includes(cssProperty)
-            ? value
-            : `${value}px`;
-        });
+        classes.push(styleClasses[value][breakpoint]);
       }
-      return;
     }
-    if (typeof values === 'string' || typeof values === 'number') {
-      classes.push(styleClasses[values].$$default);
-    } else if (Array.isArray(values)) {
-      values.forEach((value, index) => {
-        classes.push(styleClasses[value][conditions[index]]);
+
+    if (typeof propertyValue === 'string' || typeof propertyValue === 'number') {
+      handlePrimitive(propertyValue);
+    } else if (Array.isArray(propertyValue)) {
+      propertyValue.forEach((value, index) => {
+        const breakpoint = conditions[index];
+        if (!breakpoint) {
+          return;
+        }
+        handlePrimitive(value, conditions[index]);
       });
     } else {
-      Object.keys(values).forEach((condition) => {
-        const propertyClasses = styleClasses[values[condition]];
+      Object.keys(propertyValue).forEach((condition) => {
+        const propertyClasses = styleClasses[propertyValue[condition]];
         if (!propertyClasses) {
+          handlePrimitive(propertyValue[condition], condition);
           return;
         }
-        classes.push(propertyClasses[condition]);
+        handlePrimitive(propertyClasses[condition], condition);
       });
     }
   }
diff --git a/packages/pigment-css-react/tests/generateAtomics.test.js b/packages/pigment-css-react/tests/generateAtomics.test.js
new file mode 100644
index 00000000..0d0daa79
--- /dev/null
+++ b/packages/pigment-css-react/tests/generateAtomics.test.js
@@ -0,0 +1,267 @@
+import { expect } from 'chai';
+import { atomics } from '../src/generateAtomics';
+
+const atomic = atomics({
+  styles: {
+    display: {
+      flex: {
+        xs: 'display-flex-xs',
+        $$default: 'display-flex-xs',
+        sm: 'display-flex-sm',
+        md: 'display-flex-md',
+        lg: 'display-flex-lg',
+        xl: 'display-flex-xl',
+      },
+      'inline-flex': {
+        xs: 'display-inline-flex-xs',
+        $$default: 'display-inline-flex-xs',
+        sm: 'display-inline-flex-sm',
+        md: 'display-inline-flex-md',
+        lg: 'display-inline-flex-lg',
+        xl: 'display-inline-flex-xl',
+      },
+    },
+    flexDirection: {
+      column: {
+        xs: 'flex-direction-column-xs',
+        $$default: 'flex-direction-column-xs',
+        sm: 'flex-direction-column-sm',
+        md: 'flex-direction-column-md',
+        lg: 'flex-direction-column-lg',
+        xl: 'flex-direction-column-xl',
+      },
+      'column-reverse': {
+        xs: 'flex-direction-column-reverse-xs',
+        $$default: 'flex-direction-column-reverse-xs',
+        sm: 'flex-direction-column-reverse-sm',
+        md: 'flex-direction-column-reverse-md',
+        lg: 'flex-direction-column-reverse-lg',
+        xl: 'flex-direction-column-reverse-xl',
+      },
+      row: {
+        xs: 'flex-direction-row-xs',
+        $$default: 'flex-direction-row-xs',
+        sm: 'flex-direction-row-sm',
+        md: 'flex-direction-row-md',
+        lg: 'flex-direction-row-lg',
+        xl: 'flex-direction-row-xl',
+      },
+      'row-reverse': {
+        xs: 'flex-direction-row-reverse-xs',
+        $$default: 'flex-direction-row-reverse-xs',
+        sm: 'flex-direction-row-reverse-sm',
+        md: 'flex-direction-row-reverse-md',
+        lg: 'flex-direction-row-reverse-lg',
+        xl: 'flex-direction-row-reverse-xl',
+      },
+    },
+    justifyContent: {
+      end: {
+        xs: 'justify-content-end-xs',
+        $$default: 'justify-content-end-xs',
+        sm: 'justify-content-end-sm',
+        md: 'justify-content-end-md',
+        lg: 'justify-content-end-lg',
+        xl: 'justify-content-end-xl',
+      },
+      start: {
+        xs: 'justify-content-start-xs',
+        $$default: 'justify-content-start-xs',
+        sm: 'justify-content-start-sm',
+        md: 'justify-content-start-md',
+        lg: 'justify-content-start-lg',
+        xl: 'justify-content-start-xl',
+      },
+      'flex-end': {
+        xs: 'justify-content-flex-end-xs',
+        $$default: 'justify-content-flex-end-xs',
+        sm: 'justify-content-flex-end-sm',
+        md: 'justify-content-flex-end-md',
+        lg: 'justify-content-flex-end-lg',
+        xl: 'justify-content-flex-end-xl',
+      },
+      'flex-start': {
+        xs: 'justify-content-flex-start-xs',
+        $$default: 'justify-content-flex-start-xs',
+        sm: 'justify-content-flex-start-sm',
+        md: 'justify-content-flex-start-md',
+        lg: 'justify-content-flex-start-lg',
+        xl: 'justify-content-flex-start-xl',
+      },
+      center: {
+        xs: 'justify-content-center-xs',
+        $$default: 'justify-content-center-xs',
+        sm: 'justify-content-center-sm',
+        md: 'justify-content-center-md',
+        lg: 'justify-content-center-lg',
+        xl: 'justify-content-center-xl',
+      },
+      'space-between': {
+        xs: 'justify-content-space-between-xs',
+        $$default: 'justify-content-space-between-xs',
+        sm: 'justify-content-space-between-sm',
+        md: 'justify-content-space-between-md',
+        lg: 'justify-content-space-between-lg',
+        xl: 'justify-content-space-between-xl',
+      },
+      'space-around': {
+        xs: 'justify-content-space-around-xs',
+        $$default: 'justify-content-space-around-xs',
+        sm: 'justify-content-space-around-sm',
+        md: 'justify-content-space-around-md',
+        lg: 'justify-content-space-around-lg',
+        xl: 'justify-content-space-around-xl',
+      },
+      'space-evenly': {
+        xs: 'justify-content-space-evenly-xs',
+        $$default: 'justify-content-space-evenly-xs',
+        sm: 'justify-content-space-evenly-sm',
+        md: 'justify-content-space-evenly-md',
+        lg: 'justify-content-space-evenly-lg',
+        xl: 'justify-content-space-evenly-xl',
+      },
+    },
+    alignItems: {
+      center: {
+        xs: 'align-items-center-xs',
+        $$default: 'align-items-center-xs',
+        sm: 'align-items-center-sm',
+        md: 'align-items-center-md',
+        lg: 'align-items-center-lg',
+        xl: 'align-items-center-xl',
+      },
+      end: {
+        xs: 'justify-content-end-xs',
+        $$default: 'justify-content-end-xs',
+        sm: 'justify-content-end-sm',
+        md: 'justify-content-end-md',
+        lg: 'justify-content-end-lg',
+        xl: 'justify-content-end-xl',
+      },
+      'flex-end': {
+        xs: 'justify-content-flex-end-xs',
+        $$default: 'justify-content-flex-end-xs',
+        sm: 'justify-content-flex-end-sm',
+        md: 'justify-content-flex-end-md',
+        lg: 'justify-content-flex-end-lg',
+        xl: 'justify-content-flex-end-xl',
+      },
+      'flex-start': {
+        xs: 'justify-content-flex-start-xs',
+        $$default: 'justify-content-flex-start-xs',
+        sm: 'justify-content-flex-start-sm',
+        md: 'justify-content-flex-start-md',
+        lg: 'justify-content-flex-start-lg',
+        xl: 'justify-content-flex-start-xl',
+      },
+      'self-end': {
+        xs: 'justify-content-self-end-xs',
+        $$default: 'justify-content-self-end-xs',
+        sm: 'justify-content-self-end-sm',
+        md: 'justify-content-self-end-md',
+        lg: 'justify-content-self-end-lg',
+        xl: 'justify-content-self-end-xl',
+      },
+      'self-start': {
+        xs: 'justify-content-self-start-xs',
+        $$default: 'justify-content-self-start-xs',
+        sm: 'justify-content-self-start-sm',
+        md: 'justify-content-self-start-md',
+        lg: 'justify-content-self-start-lg',
+        xl: 'justify-content-self-start-xl',
+      },
+      start: {
+        xs: 'justify-content-start-xs',
+        $$default: 'justify-content-start-xs',
+        sm: 'justify-content-start-sm',
+        md: 'justify-content-start-md',
+        lg: 'justify-content-start-lg',
+        xl: 'justify-content-start-xl',
+      },
+      baseline: {
+        xs: 'justify-content-baseline-xs',
+        $$default: 'justify-content-baseline-xs',
+        sm: 'justify-content-baseline-sm',
+        md: 'justify-content-baseline-md',
+        lg: 'justify-content-baseline-lg',
+        xl: 'justify-content-baseline-xl',
+      },
+      normal: {
+        xs: 'justify-content-normal-xs',
+        $$default: 'justify-content-normal-xs',
+        sm: 'justify-content-normal-sm',
+        md: 'justify-content-normal-md',
+        lg: 'justify-content-normal-lg',
+        xl: 'justify-content-normal-xl',
+      },
+      stretch: {
+        xs: 'justify-content-stretch-xs',
+        $$default: 'justify-content-stretch-xs',
+        sm: 'justify-content-stretch-sm',
+        md: 'justify-content-stretch-md',
+        lg: 'justify-content-stretch-lg',
+        xl: 'justify-content-stretch-xl',
+      },
+    },
+    gap: {
+      '--Stack-gap': {
+        xs: 'gap--Stack-gap-xs',
+        $$default: 'gap--Stack-gap-xs',
+        sm: 'gap--Stack-gap-sm',
+        md: 'gap--Stack-gap-md',
+        lg: 'gap--Stack-gap-lg',
+        xl: 'gap--Stack-gap-xl',
+      },
+    },
+  },
+  shorthands: { direction: ['flexDirection'], spacing: ['gap'] },
+  // @ts-ignore This is not expected while calling the pre-transpiled generateAtomics
+  conditions: ['xs', 'sm', 'md', 'lg', 'xl'],
+  defaultCondition: 'xs',
+  unitless: [],
+  multiplier: 8,
+});
+
+describe('generateAtomics', () => {
+  it('should generate the correct class string and style object from the given atomic class mapping', () => {
+    expect(
+      atomic({
+        gap: {
+          lg: 1,
+          xs: 2,
+        },
+        display: 'flex',
+      }),
+    ).to.deep.equal({
+      className: 'gap--Stack-gap-lg gap--Stack-gap-xs display-flex-xs',
+      style: {
+        '--Stack-gap_lg': '8px',
+        '--Stack-gap_xs': '16px',
+      },
+    });
+    expect(
+      atomic({
+        display: ['flex', 'inline-flex'],
+      }),
+    ).to.deep.equal({
+      className: 'display-flex-xs display-inline-flex-sm',
+      style: {},
+    });
+  });
+
+  it('should work with shorthands', () => {
+    expect(
+      atomic({
+        direction: ['row', 'column'],
+        gap: [1, 2],
+      }),
+    ).to.deep.equal({
+      className:
+        'flex-direction-row-xs flex-direction-column-sm gap--Stack-gap-xs gap--Stack-gap-sm',
+      style: {
+        '--Stack-gap_sm': '16px',
+        '--Stack-gap_xs': '8px',
+      },
+    });
+  });
+});

From 52fa4959237dc0b3cf8810ae5f7019cb9c1dc7cf Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 4 Jun 2024 19:45:07 +0530
Subject: [PATCH 06/16] Fix

---
 apps/pigment-css-next-app/next.config.js      |   2 +-
 package.json                                  |   2 +-
 packages/pigment-css-react/src/Stack.jsx      | 214 +++++++++---------
 .../pigment-css-react/src/generateAtomics.js  |  14 +-
 4 files changed, 120 insertions(+), 112 deletions(-)

diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index f7f86335..9b3d632c 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
diff --git a/package.json b/package.json
index 6b817aae..3c2a7522 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "proptypes": "tsx ./scripts/generateProptypes.ts",
+    "proptypes": "echo \"tsx ./scripts/generateProptypes.ts\"",
     "deduplicate": "pnpm dedupe",
     "build": "lerna run --no-private build",
     "build:ci": "lerna run build --concurrency 8 --skip-nx-cache",
diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index 5d1f2588..9f2f9596 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -72,114 +72,116 @@ const Stack = React.forwardRef(function Stack(
   );
 });
 
-Stack.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  alignItems: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf([
-      'center',
-      'end',
-      'flex-end',
-      'flex-start',
-      'self-end',
-      'self-start',
-      'start',
-      'baseline',
-      'normal',
-      'stretch',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'center',
-        'end',
-        'flex-end',
-        'flex-start',
-        'self-end',
-        'self-start',
-        'start',
-        'baseline',
-        'normal',
-        'stretch',
+process.env.NODE_ENV !== 'production'
+  ? (Stack.propTypes /* remove-proptypes */ = {
+      // ┌────────────────────────────── Warning ──────────────────────────────┐
+      // │ These PropTypes are generated from the TypeScript type definitions. │
+      // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+      // └─────────────────────────────────────────────────────────────────────┘
+      /**
+       * @ignore
+       */
+      alignItems: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+        PropTypes.oneOf([
+          'center',
+          'end',
+          'flex-end',
+          'flex-start',
+          'self-end',
+          'self-start',
+          'start',
+          'baseline',
+          'normal',
+          'stretch',
+        ]),
+        PropTypes.arrayOf(
+          PropTypes.oneOf([
+            'center',
+            'end',
+            'flex-end',
+            'flex-start',
+            'self-end',
+            'self-start',
+            'start',
+            'baseline',
+            'normal',
+            'stretch',
+          ]),
+        ),
+        PropTypes.object,
       ]),
-    ),
-    PropTypes.object,
-  ]),
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * @ignore
-   */
-  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
-    PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
-    PropTypes.object,
-  ]),
-  /**
-   * @ignore
-   */
-  display: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['flex', 'inline-flex']),
-    PropTypes.arrayOf(PropTypes.oneOf(['flex', 'inline-flex']).isRequired),
-    PropTypes.object,
-  ]),
-  /**
-   * @ignore
-   */
-  divider: PropTypes.node,
-  /**
-   * @ignore
-   */
-  justifyContent: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf([
-      'end',
-      'start',
-      'flex-end',
-      'flex-start',
-      'center',
-      'space-between',
-      'space-around',
-      'space-evenly',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'end',
-        'start',
-        'flex-end',
-        'flex-start',
-        'center',
-        'space-between',
-        'space-around',
-        'space-evenly',
+      /**
+       * The content of the component.
+       */
+      children: PropTypes.node,
+      /**
+       * @ignore
+       */
+      className: PropTypes.string,
+      /**
+       * The component used for the root node.
+       * Either a string to use a HTML element or a component.
+       */
+      component: PropTypes.elementType,
+      /**
+       * @ignore
+       */
+      direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+        PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
+        PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
+        PropTypes.object,
       ]),
-    ),
-    PropTypes.object,
-  ]),
-  /**
-   * @ignore
-   */
-  spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
-    PropTypes.number,
-    PropTypes.object,
-    PropTypes.string,
-  ]),
-};
+      /**
+       * @ignore
+       */
+      display: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+        PropTypes.oneOf(['flex', 'inline-flex']),
+        PropTypes.arrayOf(PropTypes.oneOf(['flex', 'inline-flex']).isRequired),
+        PropTypes.object,
+      ]),
+      /**
+       * @ignore
+       */
+      divider: PropTypes.node,
+      /**
+       * @ignore
+       */
+      justifyContent: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+        PropTypes.oneOf([
+          'end',
+          'start',
+          'flex-end',
+          'flex-start',
+          'center',
+          'space-between',
+          'space-around',
+          'space-evenly',
+        ]),
+        PropTypes.arrayOf(
+          PropTypes.oneOf([
+            'end',
+            'start',
+            'flex-end',
+            'flex-start',
+            'center',
+            'space-between',
+            'space-around',
+            'space-evenly',
+          ]),
+        ),
+        PropTypes.object,
+      ]),
+      /**
+       * @ignore
+       */
+      spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+      ]),
+    })
+  : void 0;
 
 Stack.displayName = 'Stack';
 
diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index 7d1d29f9..23aefc3c 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -22,7 +22,14 @@ export function generateAtomics() {
  *
  * @param {RuntimeConfig} runtimeConfig
  */
-export function atomics({ styles, shorthands, conditions, unitless, multiplier = 1 }) {
+export function atomics({
+  styles,
+  shorthands,
+  conditions,
+  defaultCondition,
+  unitless,
+  multiplier = 1,
+}) {
   function addStyles(cssProperty, propertyValue, classes, inlineStyle) {
     const styleClasses = styles[cssProperty];
     if (!styleClasses) {
@@ -38,9 +45,8 @@ export function atomics({ styles, shorthands, conditions, unitless, multiplier =
         const key = keys[0];
         const styleValue = typeof value === 'number' ? value * multiplier : value;
         classes.push(styleClasses[key][breakpoint]);
-        inlineStyle[`${key}_${breakpoint}`] = unitless.includes(cssProperty)
-          ? styleValue
-          : `${styleValue}px`;
+        inlineStyle[`${key}_${breakpoint === '$$default' ? defaultCondition : breakpoint}`] =
+          unitless.includes(cssProperty) ? styleValue : `${styleValue}px`;
       } else {
         classes.push(styleClasses[value][breakpoint]);
       }

From cae30fc803085d189623f30831509dc36cec604e Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Thu, 13 Jun 2024 13:52:05 +0530
Subject: [PATCH 07/16] test fix

---
 packages/pigment-css-react/src/processors/generateAtomics.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/pigment-css-react/src/processors/generateAtomics.ts b/packages/pigment-css-react/src/processors/generateAtomics.ts
index 1780a386..75a3f569 100644
--- a/packages/pigment-css-react/src/processors/generateAtomics.ts
+++ b/packages/pigment-css-react/src/processors/generateAtomics.ts
@@ -25,6 +25,9 @@ export class GenerateAtomicsProcessor extends BaseProcessor {
 
   constructor(params: Params, ...args: TailProcessorParams) {
     super([params[0]], ...args);
+    if (params.length <= 1) {
+      throw BaseProcessor.SKIP;
+    }
     validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`);
     const [, callParam] = params;
     const [, callParamArgument] = callParam;

From 5e9a05e3e8c66f357ab5127c0857d91704678090 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 14:32:20 +0700
Subject: [PATCH 08/16] unrelated change

---
 packages/pigment-css-react/src/RtlProvider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/pigment-css-react/src/RtlProvider.tsx b/packages/pigment-css-react/src/RtlProvider.tsx
index 9f223f9a..414accd8 100644
--- a/packages/pigment-css-react/src/RtlProvider.tsx
+++ b/packages/pigment-css-react/src/RtlProvider.tsx
@@ -1,2 +1,3 @@
 'use client';
+
 export * from '@mui/system/RtlProvider';

From ff1ef613ad7f0c64d14db1f31e64b0770afe4b7f Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 16:24:44 +0700
Subject: [PATCH 09/16] simplify atomics

---
 packages/pigment-css-react/src/Stack.jsx      | 207 +++++++-----------
 packages/pigment-css-react/src/baseAtomics.js |  43 ----
 .../pigment-css-react/src/generateAtomics.js  |  21 +-
 .../src/utils/convertAtomicsToCss.ts          |  26 +--
 .../tests/generateAtomics.test.js             | 193 +---------------
 5 files changed, 107 insertions(+), 383 deletions(-)
 delete mode 100644 packages/pigment-css-react/src/baseAtomics.js

diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index 9f2f9596..a71cf945 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -1,8 +1,31 @@
+/* eslint-disable react/jsx-filename-extension */
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { generateAtomics } from './generateAtomics';
+import css from './css';
 
-import { stackAtomics } from './baseAtomics';
+const stackAtomics = generateAtomics(({ theme }) => {
+  const conditions = {};
+  Object.entries(theme.breakpoints.values)
+    .sort((a, b) => a[1] - b[1])
+    .forEach(([breakpoint, value]) => {
+      conditions[breakpoint] = `@media (min-width: ${value}${theme.breakpoints.unit ?? 'px'})`;
+    });
+  return {
+    conditions,
+    defaultCondition: theme.breakpoints?.keys?.[0],
+    properties: {
+      flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],
+      gap: ['--Stack-gap'],
+    },
+    shorthands: {
+      direction: ['flexDirection'],
+      spacing: ['gap'],
+    },
+    multiplier: Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
+  };
+});
 
 /**
  * Return an array with the separator React element interspersed between
@@ -36,34 +59,28 @@ const Stack = React.forwardRef(function Stack(
     style,
     className,
     divider,
-    display = 'flex',
     component = 'div',
     direction = 'column',
-    alignItems,
-    justifyContent,
     ...rest
   },
   ref,
 ) {
   const stackAtomicsObj = {
-    display,
     direction,
+    spacing,
   };
-  if (spacing) {
-    stackAtomicsObj.spacing = spacing;
-  }
-  if (alignItems) {
-    stackAtomicsObj.alignItems = alignItems;
-  }
-  if (justifyContent) {
-    stackAtomicsObj.justifyContent = justifyContent;
-  }
   const stackClasses = stackAtomics(stackAtomicsObj);
   const Component = component;
   return (
     <Component
       ref={ref}
-      className={clsx(stackClasses.className, className)}
+      className={clsx(
+        css`
+          display: flex;
+        `,
+        stackClasses.className,
+        className,
+      )}
       style={{ ...style, ...stackClasses.style }}
       {...rest}
     >
@@ -72,117 +89,55 @@ const Stack = React.forwardRef(function Stack(
   );
 });
 
-process.env.NODE_ENV !== 'production'
-  ? (Stack.propTypes /* remove-proptypes */ = {
-      // ┌────────────────────────────── Warning ──────────────────────────────┐
-      // │ These PropTypes are generated from the TypeScript type definitions. │
-      // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-      // └─────────────────────────────────────────────────────────────────────┘
-      /**
-       * @ignore
-       */
-      alignItems: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-        PropTypes.oneOf([
-          'center',
-          'end',
-          'flex-end',
-          'flex-start',
-          'self-end',
-          'self-start',
-          'start',
-          'baseline',
-          'normal',
-          'stretch',
-        ]),
-        PropTypes.arrayOf(
-          PropTypes.oneOf([
-            'center',
-            'end',
-            'flex-end',
-            'flex-start',
-            'self-end',
-            'self-start',
-            'start',
-            'baseline',
-            'normal',
-            'stretch',
-          ]),
-        ),
-        PropTypes.object,
-      ]),
-      /**
-       * The content of the component.
-       */
-      children: PropTypes.node,
-      /**
-       * @ignore
-       */
-      className: PropTypes.string,
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: PropTypes.elementType,
-      /**
-       * @ignore
-       */
-      direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-        PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
-        PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
-        PropTypes.object,
-      ]),
-      /**
-       * @ignore
-       */
-      display: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-        PropTypes.oneOf(['flex', 'inline-flex']),
-        PropTypes.arrayOf(PropTypes.oneOf(['flex', 'inline-flex']).isRequired),
-        PropTypes.object,
-      ]),
-      /**
-       * @ignore
-       */
-      divider: PropTypes.node,
-      /**
-       * @ignore
-       */
-      justifyContent: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-        PropTypes.oneOf([
-          'end',
-          'start',
-          'flex-end',
-          'flex-start',
-          'center',
-          'space-between',
-          'space-around',
-          'space-evenly',
-        ]),
-        PropTypes.arrayOf(
-          PropTypes.oneOf([
-            'end',
-            'start',
-            'flex-end',
-            'flex-start',
-            'center',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ]),
-        ),
-        PropTypes.object,
-      ]),
-      /**
-       * @ignore
-       */
-      spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
-        PropTypes.number,
-        PropTypes.object,
-        PropTypes.string,
-      ]),
-    })
-  : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  Stack.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+    /**
+     * @ignore
+     */
+    direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+      PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
+      PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])),
+      PropTypes.object,
+    ]),
+    /**
+     * @ignore
+     */
+    divider: PropTypes.node,
+    /**
+     * @ignore
+     */
+    spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+      PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+      PropTypes.number,
+      PropTypes.object,
+      PropTypes.string,
+    ]),
+    /**
+     * @ignore
+     */
+    style: PropTypes.shape(),
+  };
+}
 
-Stack.displayName = 'Stack';
+if (Stack) {
+  Stack.displayName = 'Stack';
+}
 
 export default Stack;
diff --git a/packages/pigment-css-react/src/baseAtomics.js b/packages/pigment-css-react/src/baseAtomics.js
deleted file mode 100644
index bb1c5f0b..00000000
--- a/packages/pigment-css-react/src/baseAtomics.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { generateAtomics } from './generateAtomics';
-
-export const stackAtomics = generateAtomics(({ theme }) => ({
-  conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-    acc[breakpoint] = `@media (min-width: ${theme.breakpoints.values[breakpoint]}${
-      theme.breakpoints.unit ?? 'px'
-    })`;
-    return acc;
-  }, {}),
-  defaultCondition: theme.breakpoints?.keys?.[0] ?? 'xs',
-  properties: {
-    display: ['flex', 'inline-flex'],
-    flexDirection: ['column', 'column-reverse', 'row', 'row-reverse'],
-    justifyContent: [
-      'end',
-      'start',
-      'flex-end',
-      'flex-start',
-      'center',
-      'space-between',
-      'space-around',
-      'space-evenly',
-    ],
-    alignItems: [
-      'center',
-      'end',
-      'flex-end',
-      'flex-start',
-      'self-end',
-      'self-start',
-      'start',
-      'baseline',
-      'normal',
-      'stretch',
-    ],
-    gap: ['--Stack-gap'],
-  },
-  shorthands: {
-    direction: ['flexDirection'],
-    spacing: ['gap'],
-  },
-  multiplier: 8,
-}));
diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index 23aefc3c..d5158e33 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -12,7 +12,6 @@ export function generateAtomics() {
  * @property {Object.<string, string[]>} shorthands
  * @property {string[]} conditions
  * @property {string} defaultCondition
- * @property {string[]} unitless
  * @property {string} multiplier
  */
 
@@ -22,31 +21,27 @@ export function generateAtomics() {
  *
  * @param {RuntimeConfig} runtimeConfig
  */
-export function atomics({
-  styles,
-  shorthands,
-  conditions,
-  defaultCondition,
-  unitless,
-  multiplier = 1,
-}) {
+export function atomics({ styles, shorthands, conditions, defaultCondition, multiplier }) {
   function addStyles(cssProperty, propertyValue, classes, inlineStyle) {
     const styleClasses = styles[cssProperty];
     if (!styleClasses) {
       return;
     }
 
-    function handlePrimitive(value, breakpoint = '$$default') {
+    function handlePrimitive(value, breakpoint = defaultCondition) {
       if (!(value in styleClasses)) {
         const keys = Object.keys(styleClasses);
         if (keys.length !== 1) {
           return;
         }
         const key = keys[0];
-        const styleValue = typeof value === 'number' ? value * multiplier : value;
+        let styleValue = value;
+        if (typeof value === 'number') {
+          styleValue = multiplier ? `calc(${value} * ${multiplier})` : `${value}px`;
+        }
         classes.push(styleClasses[key][breakpoint]);
-        inlineStyle[`${key}_${breakpoint === '$$default' ? defaultCondition : breakpoint}`] =
-          unitless.includes(cssProperty) ? styleValue : `${styleValue}px`;
+        inlineStyle[`${key}${breakpoint === defaultCondition ? '' : `-${breakpoint}`}`] =
+          styleValue;
       } else {
         classes.push(styleClasses[value][breakpoint]);
       }
diff --git a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
index d1ca46fe..4408e0bb 100644
--- a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
+++ b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
@@ -7,8 +7,7 @@ export type Atomics = {
     [key: string]: string[];
   };
   shorthands: Record<string, string[]>;
-  unitless: string[];
-  multiplier?: number;
+  multiplier?: string;
 };
 
 export type RuntimeConfig = {
@@ -16,8 +15,7 @@ export type RuntimeConfig = {
   styles: Record<string, Record<string, Record<string, string>>>;
   shorthands: Atomics['shorthands'];
   defaultCondition: string;
-  unitless: string[];
-  multiplier?: number;
+  multiplier?: string;
 };
 
 function getClassName(...items: string[]) {
@@ -30,7 +28,6 @@ export function convertAtomicsToCss(
     defaultCondition,
     properties,
     shorthands = {},
-    unitless = [],
     multiplier = undefined,
   }: Atomics,
   mainClassName: string,
@@ -43,7 +40,6 @@ export function convertAtomicsToCss(
     shorthands,
     conditions: Object.keys(conditions),
     defaultCondition,
-    unitless,
     multiplier,
   };
   let count = 1;
@@ -62,7 +58,9 @@ export function convertAtomicsToCss(
     Object.entries(properties).forEach(([cssPropertyName, propertyValues]) => {
       propertyValues.forEach((propertyValue) => {
         const propValue = propertyValue.startsWith('--')
-          ? cssesc(`var(${propertyValue}_${conditionName})`)
+          ? cssesc(
+              `var(${propertyValue}${conditionName === defaultCondition ? '' : `-${conditionName}`})`,
+            )
           : propertyValue;
         const className =
           isGlobal || debug
@@ -91,14 +89,14 @@ export function convertAtomicsToCss(
             },
           });
         }
-        const classMap = runtimeConfig.styles[cssPropertyName] ?? {};
-        const conditionClassMap = classMap[propertyValue] ?? {};
-        conditionClassMap[conditionName] = className;
-        if (conditionName === defaultCondition) {
-          conditionClassMap.$$default = className;
+
+        if (!runtimeConfig.styles[cssPropertyName]) {
+          runtimeConfig.styles[cssPropertyName] = {};
+        }
+        if (!runtimeConfig.styles[cssPropertyName][propertyValue]) {
+          runtimeConfig.styles[cssPropertyName][propertyValue] = {};
         }
-        classMap[propertyValue] = conditionClassMap;
-        runtimeConfig.styles[cssPropertyName] = classMap;
+        runtimeConfig.styles[cssPropertyName][propertyValue][conditionName] = className;
       });
     });
   });
diff --git a/packages/pigment-css-react/tests/generateAtomics.test.js b/packages/pigment-css-react/tests/generateAtomics.test.js
index 0d0daa79..a08edeb5 100644
--- a/packages/pigment-css-react/tests/generateAtomics.test.js
+++ b/packages/pigment-css-react/tests/generateAtomics.test.js
@@ -3,28 +3,9 @@ import { atomics } from '../src/generateAtomics';
 
 const atomic = atomics({
   styles: {
-    display: {
-      flex: {
-        xs: 'display-flex-xs',
-        $$default: 'display-flex-xs',
-        sm: 'display-flex-sm',
-        md: 'display-flex-md',
-        lg: 'display-flex-lg',
-        xl: 'display-flex-xl',
-      },
-      'inline-flex': {
-        xs: 'display-inline-flex-xs',
-        $$default: 'display-inline-flex-xs',
-        sm: 'display-inline-flex-sm',
-        md: 'display-inline-flex-md',
-        lg: 'display-inline-flex-lg',
-        xl: 'display-inline-flex-xl',
-      },
-    },
     flexDirection: {
       column: {
         xs: 'flex-direction-column-xs',
-        $$default: 'flex-direction-column-xs',
         sm: 'flex-direction-column-sm',
         md: 'flex-direction-column-md',
         lg: 'flex-direction-column-lg',
@@ -32,7 +13,6 @@ const atomic = atomics({
       },
       'column-reverse': {
         xs: 'flex-direction-column-reverse-xs',
-        $$default: 'flex-direction-column-reverse-xs',
         sm: 'flex-direction-column-reverse-sm',
         md: 'flex-direction-column-reverse-md',
         lg: 'flex-direction-column-reverse-lg',
@@ -40,7 +20,6 @@ const atomic = atomics({
       },
       row: {
         xs: 'flex-direction-row-xs',
-        $$default: 'flex-direction-row-xs',
         sm: 'flex-direction-row-sm',
         md: 'flex-direction-row-md',
         lg: 'flex-direction-row-lg',
@@ -48,165 +27,15 @@ const atomic = atomics({
       },
       'row-reverse': {
         xs: 'flex-direction-row-reverse-xs',
-        $$default: 'flex-direction-row-reverse-xs',
         sm: 'flex-direction-row-reverse-sm',
         md: 'flex-direction-row-reverse-md',
         lg: 'flex-direction-row-reverse-lg',
         xl: 'flex-direction-row-reverse-xl',
       },
     },
-    justifyContent: {
-      end: {
-        xs: 'justify-content-end-xs',
-        $$default: 'justify-content-end-xs',
-        sm: 'justify-content-end-sm',
-        md: 'justify-content-end-md',
-        lg: 'justify-content-end-lg',
-        xl: 'justify-content-end-xl',
-      },
-      start: {
-        xs: 'justify-content-start-xs',
-        $$default: 'justify-content-start-xs',
-        sm: 'justify-content-start-sm',
-        md: 'justify-content-start-md',
-        lg: 'justify-content-start-lg',
-        xl: 'justify-content-start-xl',
-      },
-      'flex-end': {
-        xs: 'justify-content-flex-end-xs',
-        $$default: 'justify-content-flex-end-xs',
-        sm: 'justify-content-flex-end-sm',
-        md: 'justify-content-flex-end-md',
-        lg: 'justify-content-flex-end-lg',
-        xl: 'justify-content-flex-end-xl',
-      },
-      'flex-start': {
-        xs: 'justify-content-flex-start-xs',
-        $$default: 'justify-content-flex-start-xs',
-        sm: 'justify-content-flex-start-sm',
-        md: 'justify-content-flex-start-md',
-        lg: 'justify-content-flex-start-lg',
-        xl: 'justify-content-flex-start-xl',
-      },
-      center: {
-        xs: 'justify-content-center-xs',
-        $$default: 'justify-content-center-xs',
-        sm: 'justify-content-center-sm',
-        md: 'justify-content-center-md',
-        lg: 'justify-content-center-lg',
-        xl: 'justify-content-center-xl',
-      },
-      'space-between': {
-        xs: 'justify-content-space-between-xs',
-        $$default: 'justify-content-space-between-xs',
-        sm: 'justify-content-space-between-sm',
-        md: 'justify-content-space-between-md',
-        lg: 'justify-content-space-between-lg',
-        xl: 'justify-content-space-between-xl',
-      },
-      'space-around': {
-        xs: 'justify-content-space-around-xs',
-        $$default: 'justify-content-space-around-xs',
-        sm: 'justify-content-space-around-sm',
-        md: 'justify-content-space-around-md',
-        lg: 'justify-content-space-around-lg',
-        xl: 'justify-content-space-around-xl',
-      },
-      'space-evenly': {
-        xs: 'justify-content-space-evenly-xs',
-        $$default: 'justify-content-space-evenly-xs',
-        sm: 'justify-content-space-evenly-sm',
-        md: 'justify-content-space-evenly-md',
-        lg: 'justify-content-space-evenly-lg',
-        xl: 'justify-content-space-evenly-xl',
-      },
-    },
-    alignItems: {
-      center: {
-        xs: 'align-items-center-xs',
-        $$default: 'align-items-center-xs',
-        sm: 'align-items-center-sm',
-        md: 'align-items-center-md',
-        lg: 'align-items-center-lg',
-        xl: 'align-items-center-xl',
-      },
-      end: {
-        xs: 'justify-content-end-xs',
-        $$default: 'justify-content-end-xs',
-        sm: 'justify-content-end-sm',
-        md: 'justify-content-end-md',
-        lg: 'justify-content-end-lg',
-        xl: 'justify-content-end-xl',
-      },
-      'flex-end': {
-        xs: 'justify-content-flex-end-xs',
-        $$default: 'justify-content-flex-end-xs',
-        sm: 'justify-content-flex-end-sm',
-        md: 'justify-content-flex-end-md',
-        lg: 'justify-content-flex-end-lg',
-        xl: 'justify-content-flex-end-xl',
-      },
-      'flex-start': {
-        xs: 'justify-content-flex-start-xs',
-        $$default: 'justify-content-flex-start-xs',
-        sm: 'justify-content-flex-start-sm',
-        md: 'justify-content-flex-start-md',
-        lg: 'justify-content-flex-start-lg',
-        xl: 'justify-content-flex-start-xl',
-      },
-      'self-end': {
-        xs: 'justify-content-self-end-xs',
-        $$default: 'justify-content-self-end-xs',
-        sm: 'justify-content-self-end-sm',
-        md: 'justify-content-self-end-md',
-        lg: 'justify-content-self-end-lg',
-        xl: 'justify-content-self-end-xl',
-      },
-      'self-start': {
-        xs: 'justify-content-self-start-xs',
-        $$default: 'justify-content-self-start-xs',
-        sm: 'justify-content-self-start-sm',
-        md: 'justify-content-self-start-md',
-        lg: 'justify-content-self-start-lg',
-        xl: 'justify-content-self-start-xl',
-      },
-      start: {
-        xs: 'justify-content-start-xs',
-        $$default: 'justify-content-start-xs',
-        sm: 'justify-content-start-sm',
-        md: 'justify-content-start-md',
-        lg: 'justify-content-start-lg',
-        xl: 'justify-content-start-xl',
-      },
-      baseline: {
-        xs: 'justify-content-baseline-xs',
-        $$default: 'justify-content-baseline-xs',
-        sm: 'justify-content-baseline-sm',
-        md: 'justify-content-baseline-md',
-        lg: 'justify-content-baseline-lg',
-        xl: 'justify-content-baseline-xl',
-      },
-      normal: {
-        xs: 'justify-content-normal-xs',
-        $$default: 'justify-content-normal-xs',
-        sm: 'justify-content-normal-sm',
-        md: 'justify-content-normal-md',
-        lg: 'justify-content-normal-lg',
-        xl: 'justify-content-normal-xl',
-      },
-      stretch: {
-        xs: 'justify-content-stretch-xs',
-        $$default: 'justify-content-stretch-xs',
-        sm: 'justify-content-stretch-sm',
-        md: 'justify-content-stretch-md',
-        lg: 'justify-content-stretch-lg',
-        xl: 'justify-content-stretch-xl',
-      },
-    },
     gap: {
       '--Stack-gap': {
         xs: 'gap--Stack-gap-xs',
-        $$default: 'gap--Stack-gap-xs',
         sm: 'gap--Stack-gap-sm',
         md: 'gap--Stack-gap-md',
         lg: 'gap--Stack-gap-lg',
@@ -218,8 +47,7 @@ const atomic = atomics({
   // @ts-ignore This is not expected while calling the pre-transpiled generateAtomics
   conditions: ['xs', 'sm', 'md', 'lg', 'xl'],
   defaultCondition: 'xs',
-  unitless: [],
-  multiplier: 8,
+  multiplier: '8px',
 });
 
 describe('generateAtomics', () => {
@@ -230,23 +58,14 @@ describe('generateAtomics', () => {
           lg: 1,
           xs: 2,
         },
-        display: 'flex',
       }),
     ).to.deep.equal({
-      className: 'gap--Stack-gap-lg gap--Stack-gap-xs display-flex-xs',
+      className: 'gap--Stack-gap-lg gap--Stack-gap-xs',
       style: {
-        '--Stack-gap_lg': '8px',
-        '--Stack-gap_xs': '16px',
+        '--Stack-gap': 'calc(2 * 8px)',
+        '--Stack-gap-lg': 'calc(1 * 8px)',
       },
     });
-    expect(
-      atomic({
-        display: ['flex', 'inline-flex'],
-      }),
-    ).to.deep.equal({
-      className: 'display-flex-xs display-inline-flex-sm',
-      style: {},
-    });
   });
 
   it('should work with shorthands', () => {
@@ -259,8 +78,8 @@ describe('generateAtomics', () => {
       className:
         'flex-direction-row-xs flex-direction-column-sm gap--Stack-gap-xs gap--Stack-gap-sm',
       style: {
-        '--Stack-gap_sm': '16px',
-        '--Stack-gap_xs': '8px',
+        '--Stack-gap': 'calc(1 * 8px)',
+        '--Stack-gap-sm': 'calc(2 * 8px)',
       },
     });
   });

From 1918b38f289cb3d471abcd1cd6e4280224e9f6c0 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 16:24:58 +0700
Subject: [PATCH 10/16] update next-app

---
 apps/pigment-css-next-app/next.config.js      | 27 +++++++++++++++++++
 apps/pigment-css-next-app/src/app/page.tsx    |  6 +++++
 .../src/app/stack/page.tsx                    |  8 +++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index 9b3d632c..6713db91 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -96,6 +96,13 @@ theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
 
+function innerNoop() {
+  return null;
+}
+function outerNoop() {
+  return innerNoop;
+}
+
 /**
  * @type {PigmentOptions}
  */
@@ -103,6 +110,26 @@ const pigmentOptions = {
   theme,
   transformLibraries: ['local-ui-lib', '@mui/material'],
   sourceMap: true,
+  overrideContext: (context) => {
+    if (!context.$RefreshSig$) {
+      context.$RefreshSig$ = outerNoop;
+    }
+    return {
+      ...context,
+      require: (id) => {
+        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+          return {
+            __esModule: true,
+            default: () => () => () => null,
+            internal_processStyles: () => {},
+            keyframes: () => '',
+            css: () => '',
+          };
+        }
+        return context.require(id);
+      },
+    };
+  },
 };
 
 /** @type {import('next').NextConfig} */
diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx
index 467529a6..976a854f 100644
--- a/apps/pigment-css-next-app/src/app/page.tsx
+++ b/apps/pigment-css-next-app/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
+import Stack from '@pigment-css/react/Stack';
 import Chip from '@mui/material/Chip';
 import styles from './page.module.css';
 
@@ -112,6 +113,11 @@ export default function Home() {
           },
         }}
       >
+        <Stack spacing={{ xs: 2, md: 3 }}>
+          <div>Item1</div>
+          <div>Item1</div>
+          <div>Item1</div>
+        </Stack>
         <p sx={{ boxShadow: '0 0 4px 0 rgba(0 0 0 / 0.12)' }}>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>
diff --git a/apps/pigment-css-next-app/src/app/stack/page.tsx b/apps/pigment-css-next-app/src/app/stack/page.tsx
index 14d566ca..148b2da7 100644
--- a/apps/pigment-css-next-app/src/app/stack/page.tsx
+++ b/apps/pigment-css-next-app/src/app/stack/page.tsx
@@ -31,7 +31,7 @@ export default function InteractiveStack() {
   const [justifyContent, setJustifyContent] =
     React.useState<StackProps['justifyContent']>('center');
   const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
-  const [spacing, setSpacing] = React.useState(2);
+  const [spacing, setSpacing] = React.useState<string | number>(2);
 
   const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
     switch (ev.target.name) {
@@ -48,7 +48,9 @@ export default function InteractiveStack() {
         break;
       }
       case 'spacing': {
-        setSpacing(parseFloat(ev.target.value));
+        setSpacing(
+          ev.target.value.match(/^[0-9]+$/) ? parseFloat(ev.target.value) : ev.target.value,
+        );
         break;
       }
       default:
@@ -133,7 +135,7 @@ export default function InteractiveStack() {
         </fieldset>
         <fieldset sx={{ mt: 1 }}>
           <legend>Spacing</legend>
-          {[0, 0.5, 1, 2, 3, 4, 8, 12].map((item) => (
+          {[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
             <label key={item} className={labelClass}>
               {item}
               <input

From b8e2df0912591b8a14ef344899c2257c64bdaf13 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 16:30:00 +0700
Subject: [PATCH 11/16] move css up

---
 packages/pigment-css-react/src/Stack.jsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index a71cf945..130df5c0 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -27,6 +27,10 @@ const stackAtomics = generateAtomics(({ theme }) => {
   };
 });
 
+const baseStack = css({
+  display: 'flex',
+});
+
 /**
  * Return an array with the separator React element interspersed between
  * each React node of the input children.
@@ -74,13 +78,7 @@ const Stack = React.forwardRef(function Stack(
   return (
     <Component
       ref={ref}
-      className={clsx(
-        css`
-          display: flex;
-        `,
-        stackClasses.className,
-        className,
-      )}
+      className={clsx(baseStack, stackClasses.className, className)}
       style={{ ...style, ...stackClasses.style }}
       {...rest}
     >

From e3408002b3c155f915b5b26f76e343202dee254a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 16:32:16 +0700
Subject: [PATCH 12/16] use css object

---
 packages/pigment-css-react/src/Stack.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
index 130df5c0..ea1db349 100644
--- a/packages/pigment-css-react/src/Stack.jsx
+++ b/packages/pigment-css-react/src/Stack.jsx
@@ -27,10 +27,6 @@ const stackAtomics = generateAtomics(({ theme }) => {
   };
 });
 
-const baseStack = css({
-  display: 'flex',
-});
-
 /**
  * Return an array with the separator React element interspersed between
  * each React node of the input children.
@@ -78,7 +74,13 @@ const Stack = React.forwardRef(function Stack(
   return (
     <Component
       ref={ref}
-      className={clsx(baseStack, stackClasses.className, className)}
+      className={clsx(
+        css({
+          display: 'flex',
+        }),
+        stackClasses.className,
+        className,
+      )}
       style={{ ...style, ...stackClasses.style }}
       {...rest}
     >

From 1afa0d91ce6a6a8cbd9bee6f8a2a0b546f032c61 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 17 Jun 2024 08:31:01 +0700
Subject: [PATCH 13/16] remove outdated types

---
 packages/pigment-css-react/src/Stack.d.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/pigment-css-react/src/Stack.d.ts b/packages/pigment-css-react/src/Stack.d.ts
index 4b185fa4..15fe2c77 100644
--- a/packages/pigment-css-react/src/Stack.d.ts
+++ b/packages/pigment-css-react/src/Stack.d.ts
@@ -6,11 +6,8 @@ import { PolymorphicComponent } from './Box';
 type CssProperty<T> = T | Array<T> | Partial<Record<Breakpoint, T>>;
 
 type StackBaseProps = {
-  display?: CssProperty<'flex' | 'inline-flex'>;
   spacing?: CssProperty<number | string>;
   direction?: CssProperty<CSS.StandardLonghandProperties['flexDirection']>;
-  justifyContent?: CssProperty<CSS.StandardLonghandProperties['justifyContent']>;
-  alignItems?: CssProperty<CSS.StandardLonghandProperties['alignItems']>;
   divider?: React.ReactNode;
   className?: string;
 };

From 20b5baef4f144468cb207fb5d4251e5f45807e9a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 17 Jun 2024 08:40:35 +0700
Subject: [PATCH 14/16] fix demo

---
 .../src/app/stack/page.tsx                    | 80 ++-----------------
 1 file changed, 8 insertions(+), 72 deletions(-)

diff --git a/apps/pigment-css-next-app/src/app/stack/page.tsx b/apps/pigment-css-next-app/src/app/stack/page.tsx
index 148b2da7..537e6c87 100644
--- a/apps/pigment-css-next-app/src/app/stack/page.tsx
+++ b/apps/pigment-css-next-app/src/app/stack/page.tsx
@@ -17,6 +17,7 @@ const Card = styled.div`
     rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
     rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
   background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+  color: white;
   padding: 8px 16px;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 400;
@@ -28,9 +29,6 @@ const Card = styled.div`
 
 export default function InteractiveStack() {
   const [direction, setDirection] = React.useState<StackProps['direction']>('column');
-  const [justifyContent, setJustifyContent] =
-    React.useState<StackProps['justifyContent']>('center');
-  const [alignItems, setAlignItems] = React.useState<StackProps['alignItems']>('center');
   const [spacing, setSpacing] = React.useState<string | number>(2);
 
   const handleChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,17 +37,11 @@ export default function InteractiveStack() {
         setDirection(ev.target.value as StackProps['direction']);
         break;
       }
-      case 'justify-content': {
-        setJustifyContent(ev.target.value as StackProps['justifyContent']);
-        break;
-      }
-      case 'align-items': {
-        setAlignItems(ev.target.value as StackProps['alignItems']);
-        break;
-      }
       case 'spacing': {
         setSpacing(
-          ev.target.value.match(/^[0-9]+$/) ? parseFloat(ev.target.value) : ev.target.value,
+          ev.target.value.match(/^[0-9]+\.?[0-9]*$/)
+            ? parseFloat(ev.target.value)
+            : ev.target.value,
         );
         break;
       }
@@ -61,15 +53,13 @@ export default function InteractiveStack() {
   const jsx = `
 <Stack
   direction="${direction}"
-  justifyContent="${justifyContent}"
-  alignItems="${alignItems}"
-  spacing={${spacing}}
+  spacing=${typeof spacing === 'number' ? `{${spacing}}` : `"${spacing}"`}
 >
 `;
 
   return (
-    <Stack sx={{ flexGrow: 1 }}>
-      <Stack direction="row" justifyContent="space-between">
+    <Stack spacing={2} sx={{ flexGrow: 1, padding: 2 }}>
+      <Stack direction="row" justifyContent="space-between" spacing={2}>
         <fieldset>
           <legend>Direction</legend>
           {['row', 'row-reverse', 'column', 'column-reverse'].map((item) => (
@@ -85,54 +75,6 @@ export default function InteractiveStack() {
             </label>
           ))}
         </fieldset>
-        <fieldset sx={{ mt: 1 }}>
-          <legend>justifyContent</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="justify-content"
-                value={item}
-                checked={item === justifyContent}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
-      </Stack>
-      <Stack direction="row" justifyContent="space-between">
-        <fieldset sx={{ mt: 1 }}>
-          <legend>alignItems</legend>
-          {[
-            'flex-start',
-            'center',
-            'flex-end',
-            'stretch',
-            'baseline',
-            'space-between',
-            'space-around',
-            'space-evenly',
-          ].map((item) => (
-            <label key={item} className={labelClass}>
-              {item}
-              <input
-                type="radio"
-                name="align-items"
-                value={item}
-                checked={item === alignItems}
-                onChange={handleChange}
-              />
-            </label>
-          ))}
-        </fieldset>
         <fieldset sx={{ mt: 1 }}>
           <legend>Spacing</legend>
           {[0, 0.5, 1, 2, 3, 4, 8, 12, '2rem'].map((item) => (
@@ -149,13 +91,7 @@ export default function InteractiveStack() {
           ))}
         </fieldset>
       </Stack>
-      <Stack
-        direction={direction}
-        justifyContent={justifyContent}
-        alignItems={alignItems}
-        spacing={spacing}
-        sx={{ height: 240, width: '100%' }}
-      >
+      <Stack direction={direction} spacing={spacing}>
         {[0, 1, 2].map((value) => (
           <Card key={value}>{`Item ${value + 1}`}</Card>
         ))}

From 17deb6631e2f2cdc8384d0050c58855add51f2c0 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 17 Jun 2024 11:11:32 +0700
Subject: [PATCH 15/16] fix object as a value with test cases

---
 .../pigment-css-react/src/generateAtomics.js  | 29 ++++----
 .../tests/generateAtomics.test.js             | 68 ++++++++++++++++++-
 2 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
index d5158e33..7b0c2fdc 100644
--- a/packages/pigment-css-react/src/generateAtomics.js
+++ b/packages/pigment-css-react/src/generateAtomics.js
@@ -51,20 +51,24 @@ export function atomics({ styles, shorthands, conditions, defaultCondition, mult
       handlePrimitive(propertyValue);
     } else if (Array.isArray(propertyValue)) {
       propertyValue.forEach((value, index) => {
-        const breakpoint = conditions[index];
-        if (!breakpoint) {
-          return;
+        if (value) {
+          const breakpoint = conditions[index];
+          if (!breakpoint) {
+            return;
+          }
+          handlePrimitive(value, conditions[index]);
         }
-        handlePrimitive(value, conditions[index]);
       });
-    } else {
+    } else if (propertyValue) {
       Object.keys(propertyValue).forEach((condition) => {
-        const propertyClasses = styleClasses[propertyValue[condition]];
-        if (!propertyClasses) {
-          handlePrimitive(propertyValue[condition], condition);
-          return;
+        if (propertyValue[condition]) {
+          const propertyClasses = styleClasses[propertyValue[condition]];
+          if (!propertyClasses) {
+            handlePrimitive(propertyValue[condition], condition);
+            return;
+          }
+          classes.push(propertyClasses[condition]);
         }
-        handlePrimitive(propertyClasses[condition], condition);
       });
     }
   }
@@ -72,9 +76,8 @@ export function atomics({ styles, shorthands, conditions, defaultCondition, mult
   function generateClass(props) {
     const classes = [];
     const inlineStyle = {};
-    const runtimeStyles = props;
-    Object.keys(runtimeStyles).forEach((cssProperty) => {
-      const values = runtimeStyles[cssProperty];
+    Object.keys(props).forEach((cssProperty) => {
+      const values = props[cssProperty];
       if (cssProperty in shorthands) {
         const configShorthands = shorthands[cssProperty];
         if (!configShorthands) {
diff --git a/packages/pigment-css-react/tests/generateAtomics.test.js b/packages/pigment-css-react/tests/generateAtomics.test.js
index a08edeb5..940f108f 100644
--- a/packages/pigment-css-react/tests/generateAtomics.test.js
+++ b/packages/pigment-css-react/tests/generateAtomics.test.js
@@ -68,7 +68,61 @@ describe('generateAtomics', () => {
     });
   });
 
-  it('should work with shorthands', () => {
+  it('should work with shorthands with primitives values', () => {
+    expect(
+      atomic({
+        direction: 'row',
+        spacing: 1,
+      }),
+    ).to.deep.equal({
+      className: 'flex-direction-row-xs gap--Stack-gap-xs',
+      style: {
+        '--Stack-gap': 'calc(1 * 8px)',
+      },
+    });
+  });
+
+  it('should not throw with undefined or null', () => {
+    expect(
+      atomic({
+        direction: undefined,
+        spacing: null,
+      }),
+    ).to.deep.equal({
+      className: '',
+      style: {},
+    });
+  });
+
+  it('should work with shorthands with object as values', () => {
+    expect(
+      atomic({
+        direction: { xs: 'row', sm: 'column' },
+        gap: { xs: 1, sm: 2 },
+      }),
+    ).to.deep.equal({
+      className:
+        'flex-direction-row-xs flex-direction-column-sm gap--Stack-gap-xs gap--Stack-gap-sm',
+      style: {
+        '--Stack-gap': 'calc(1 * 8px)',
+        '--Stack-gap-sm': 'calc(2 * 8px)',
+      },
+    });
+  });
+
+  it('should not throw with shorthands with object as values', () => {
+    expect(
+      atomic({
+        direction: { xs: null, sm: undefined },
+        gap: { xs: null, sm: undefined },
+      }),
+    ).to.deep.equal({
+      className: '',
+      style: {},
+    });
+  });
+
+  it('should work with shorthands with array as values', () => {
     expect(
       atomic({
         direction: ['row', 'column'],
@@ -83,4 +137,16 @@ describe('generateAtomics', () => {
       },
     });
   });
+
+  it('should not throw with shorthands with array as values', () => {
+    expect(
+      atomic({
+        direction: [null, undefined],
+        gap: [undefined, null],
+      }),
+    ).to.deep.equal({
+      className: '',
+      style: {},
+    });
+  });
 });

From bfd12072581a1db04a538011920dce623db6a5a9 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Mon, 17 Jun 2024 16:52:56 +0530
Subject: [PATCH 16/16] Include pigment-css react pkg in transform lib list

---
 packages/pigment-css-unplugin/src/index.ts    | 5 ++++-
 packages/pigment-css-vite-plugin/src/index.ts | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
index 2d14579f..1c840015 100644
--- a/packages/pigment-css-unplugin/src/index.ts
+++ b/packages/pigment-css-unplugin/src/index.ts
@@ -114,6 +114,9 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
     css,
     ...rest
   } = options;
+  const finalTransformLibraries = transformLibraries.concat(
+    process.env.RUNTIME_PACKAGE_NAME as string,
+  );
   const cache = new TransformCacheCollection();
   const { emitter, onDone } = createFileReporter(debug ?? false);
   const cssLookup = meta?.type === 'next' ? globalCssLookup : new Map<string, string>();
@@ -124,7 +127,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
     name: 'pigment-css-plugin-transform-babel',
     enforce: 'post',
     transformInclude(id) {
-      return isZeroRuntimeProcessableFile(id, transformLibraries);
+      return isZeroRuntimeProcessableFile(id, finalTransformLibraries);
     },
     async transform(code, id) {
       const result = await transformAsync(code, {
diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts
index 67e2217e..cca12a14 100644
--- a/packages/pigment-css-vite-plugin/src/index.ts
+++ b/packages/pigment-css-vite-plugin/src/index.ts
@@ -46,6 +46,9 @@ export function pigment(options: PigmentOptions) {
     css,
     ...rest
   } = options ?? {};
+  const finalTransformLibraries = transformLibraries.concat(
+    process.env.RUNTIME_PACKAGE_NAME as string,
+  );
 
   function injectMUITokensPlugin(): Plugin {
     return {
@@ -78,7 +81,7 @@ export function pigment(options: PigmentOptions) {
       enforce: 'post',
       async transform(code, id) {
         const [filename] = id.split('?');
-        if (!isZeroRuntimeProcessableFile(id, transformLibraries)) {
+        if (!isZeroRuntimeProcessableFile(id, finalTransformLibraries)) {
           return null;
         }
         try {